honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updates to sorting on categories

This commit is contained in:
Arun Kumar Perumal 2022-06-02 10:48:56 +05:30
parent 68f4bf2cb3
commit e286cfcbc0
6 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-faqs/README.md
View File

@ -57,6 +57,7 @@ react-Faqs | [Arun Kumar Perumal](https://github.com/arunkumarperumal) - LinkedI
Version|Date|Comments
-------|----|--------
1.0|March 07, 2022|Initial release
1.1|June 02, 2022|Updates to sorting on Categories
## Minimal path to awesome

12
samples/react-faqs/package-lock.json generated
View File

@ -2980,7 +2980,6 @@
"@types/adal-angular": "1.0.1",
"adal-angular": "1.0.16",
"msal": "1.4.13",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "~1.10.0"
}
},
@ -3099,7 +3098,6 @@
"@types/adal-angular": "1.0.1",
"adal-angular": "1.0.16",
"msal": "1.4.13",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "~1.10.0"
}
},
@ -4014,7 +4012,6 @@
"@types/adal-angular": "1.0.1",
"adal-angular": "1.0.16",
"msal": "1.4.13",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "~1.10.0"
}
},
@ -4396,7 +4393,6 @@
"@types/adal-angular": "1.0.1",
"adal-angular": "1.0.16",
"msal": "1.4.13",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "~1.10.0"
}
},
@ -16314,14 +16310,6 @@
"tslib": "^1.9.3"
}
},
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
}
},
"multicast-dns": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",

1
samples/react-faqs/src/webparts/faQs/FaQsWebPart.ts
View File

@ -73,6 +73,7 @@ export default class FaqsWebPart extends BaseClientSideWebPart<IFaqsWebPartProps
displayMode: this.displayMode,
guid: this.guid,
title: this.properties.title,
categoryData: this.properties.categoryData,
accordion:true,
fUpdateProperty: (value: string) => {
this.properties.title = value;

6
samples/react-faqs/src/webparts/faQs/components/Accordions.tsx
View File

@ -114,7 +114,7 @@ export default class Accordions extends React.Component<IAccordionsProps, IAccor
public render(): React.ReactElement<IAccordionsProps> {
const categoryNames = this.state.categories ? Object.keys(this.state.categories) : null;
const categoryNames = this.props.categoryData ? this.props.categoryData : null;
const searchCategoryNames = this.state.searchCategories ? Object.keys(this.state.searchCategories) : null;
const searchValue = this.state.searchValue;
@ -169,13 +169,13 @@ export default class Accordions extends React.Component<IAccordionsProps, IAccor
<AccordionItemTitle className={styles.accordion__title} id={this.props.guid + '-title-' + index}>
<div className={styles.accordion__arrow} role="presentation" />
<div className={styles["positionRelative"]} >
{categoryName}
{categoryName.title}
</div>
</AccordionItemTitle>
<AccordionItemBody className={styles.accordion__body} hideBodyClassName={styles["accordionBodyHidden"]}>
{
// Loop over all links per group
this.state.categories[categoryName].map(faq => (
this.state.categories[categoryName.title].map(faq => (
<div className={styles.faqQuestionBlock}>
<h2>{faq.questionTitle}</h2>

11
samples/react-faqs/src/webparts/faQs/components/Faqs.tsx
View File

@ -3,7 +3,7 @@ import styles from './Faqs.module.scss';
import * as strings from 'FaqsWebPartStrings';
import { IFaqsProps } from './IFaqsProps';
import { IFaqsState } from './IFaqsState';
import { escape, groupBy, toPairs, sortBy, fromPairs } from '@microsoft/sp-lodash-subset';
import { escape,find, groupBy, toPairs, sortBy, fromPairs } from '@microsoft/sp-lodash-subset';
import { Link } from 'office-ui-fabric-react/lib/components/Link';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
@ -32,10 +32,13 @@ export default class Faqs extends React.Component<IFaqsProps, IFaqsState> {
private _processFaqs(): void {
const {collectionData} = this.props;
if (collectionData && collectionData.length > 0) {
// Group by the group name
let categories = groupBy(collectionData, Faq => Faq.category ? Faq.category : NO_CATEGORY_NAME);
// Sort the group by the property name
categories = fromPairs(sortBy(toPairs(categories), 0));
this.setState({
categories
@ -109,7 +112,7 @@ export default class Faqs extends React.Component<IFaqsProps, IFaqsState> {
public render(): React.ReactElement<IFaqsProps> {
// Get all group names
const categoryNames = this.state.categories ? Object.keys(this.state.categories) : null;
const categoryNames = this.props.categoryData ? this.props.categoryData : null;
const searchCategoryNames = this.state.searchCategories ? Object.keys(this.state.searchCategories) : null;
const searchValue = this.state.searchValue;
@ -160,11 +163,11 @@ export default class Faqs extends React.Component<IFaqsProps, IFaqsState> {
categories = <Pivot linkSize={PivotLinkSize.large} className={styles.faqContent}>
{
categoryNames.map(categoryName => (
<PivotItem headerText={categoryName} key={categoryName}>
<PivotItem headerText={categoryName.title} key={categoryName.title}>
{
// Loop over all links per group
this.state.categories[categoryName].map(faq => (
this.state.categories[categoryName.title].map(faq => (
<div className={styles.faqQuestionBlock}>
<h2>{faq.questionTitle}</h2>

3
samples/react-faqs/src/webparts/faQs/components/IAccordionsProps.ts
View File

@ -5,7 +5,8 @@ export interface IAccordionsProps {
collectionData: IFaq[];
displayMode: DisplayMode;
title: string;
accordion: boolean;
accordion: boolean;
categoryData : any;
guid : string;
fUpdateProperty: (value: string) => void;