diff --git a/samples/react-accordion/README.md b/samples/react-accordion/README.md index f6b228569..0e053a83c 100644 --- a/samples/react-accordion/README.md +++ b/samples/react-accordion/README.md @@ -46,6 +46,7 @@ Version|Date|Comments 2.0|January 19, 2020|Upgrade to SPFx 1.10 2.1|June 22, 2020|Added pagination (Abhishek Garg) 2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron) +2.3|September 30, 2021 | Added sorting (@fthorild) ## Disclaimer **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** diff --git a/samples/react-accordion/config/package-solution.json b/samples/react-accordion/config/package-solution.json index ddd6bd5d2..0a7d77f56 100644 --- a/samples/react-accordion/config/package-solution.json +++ b/samples/react-accordion/config/package-solution.json @@ -3,7 +3,7 @@ "solution": { "name": "react-accordion-client-side-solution", "id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9", - "version": "2.2.0.0", + "version": "2.3.0.0", "includeClientSideAssets": true, "isDomainIsolated": false }, diff --git a/samples/react-accordion/package.json b/samples/react-accordion/package.json index 76516d2ab..0e83987dc 100644 --- a/samples/react-accordion/package.json +++ b/samples/react-accordion/package.json @@ -1,6 +1,6 @@ { "name": "react-accordion", - "version": "2.2.0", + "version": "2.3.0", "private": true, "main": "lib/index.js", "engines": { diff --git a/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json b/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json index 6b4ff4c31..1b5b6271d 100644 --- a/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json +++ b/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json @@ -29,10 +29,13 @@ "properties": { "description": "SPFx webpart which shows SharePoint list data in Accordion format", "listName": "FAQ", - "totalItems":20, + "totalItems": 20, "maxItemsPerPage": 5, - "allowPaging":true + "allowPaging": true, + "customSortField": "", + "sortById": false, + "sortByModified": false } } ] -} +} \ No newline at end of file diff --git a/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts b/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts index d09b9db31..5ae8a70bf 100644 --- a/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts +++ b/samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version, DisplayMode } from '@microsoft/sp-core-library'; import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base"; -import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField,PropertyPaneToggle } from "@microsoft/sp-property-pane"; +import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField, PropertyPaneToggle } from "@microsoft/sp-property-pane"; import * as strings from 'ReactAccordionWebPartStrings'; import ReactAccordion from './components/ReactAccordion'; @@ -13,16 +13,19 @@ export interface IReactAccordionWebPartProps { choice: string; title: string; displayMode: DisplayMode; - totalItems:number; + totalItems: number; maxItemsPerPage: number; - enablePaging:boolean; + enablePaging: boolean; + customSortField: string; + sortById: boolean; + sortByModified: boolean; updateProperty: (value: string) => void; } export default class ReactAccordionWebPart extends BaseClientSideWebPart { public render(): void { - + const element: React.ReactElement = React.createElement( ReactAccordion, { @@ -31,9 +34,12 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart { this.properties.title = value; } @@ -53,10 +59,10 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart void; -} +} \ No newline at end of file diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts b/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts index be770bfa3..7984ba67b 100644 --- a/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts +++ b/samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionState.ts @@ -7,4 +7,5 @@ export interface IReactAccordionState { listItems: IAccordionListItem[]; isLoading: boolean; loaderMessage: string; -} + error: string; +} \ No newline at end of file diff --git a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx index 8e0dd64f8..4f4baa5aa 100644 --- a/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx +++ b/samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx @@ -30,7 +30,8 @@ export default class ReactAccordion extends React.Component 0 ? '&$orderby=' + orders.join(',') : ''}` + + `&$top=${this.props.totalItems}`; this.props.spHttpClient.get(restAPI, SPHttpClient.configurations.v1, { headers: { @@ -86,6 +103,11 @@ export default class ReactAccordion extends React.Component { + if (!response.value) { + this.setState({ + error: `No items were found, check the list Title and/or custom sort order field internal name` + }); + } let listItemsCollection = [...response.value]; @@ -95,14 +117,16 @@ export default class ReactAccordion extends React.Component { this.setState({ status: 'Loading all items failed with error: ' + error, pagedItems: [], isLoading: false, - loaderMessage: "" + loaderMessage: "", + error: `Loading failed. Validate that you have entered a valid List Title and/or internal field name for the custom sort order ${error}` }); }); @@ -110,6 +134,7 @@ export default class ReactAccordion extends React.Component { let displayLoader; + let errorMessage; let faqTitle; let { items } = this.state; let pageCountDivisor: number = this.props.maxItemsPerPage; @@ -149,7 +174,7 @@ export default class ReactAccordion extends React.Component 0) { pageCount = Math.ceil(items.length / pageCountDivisor); } @@ -157,6 +182,11 @@ export default class ReactAccordion extends React.Component { _pagedButtonClick(i + 1, items); }}> {i + 1} ); } } + + if (this.state.error) { + errorMessage =
{this.state.error}
; + } + return (
@@ -175,7 +205,7 @@ export default class ReactAccordion extends React.Component
{this.state.status} - + {pagedItems}
@@ -186,7 +216,8 @@ export default class ReactAccordion extends React.Component
+ {errorMessage} ); } -} +} \ No newline at end of file diff --git a/samples/react-accordion/src/webparts/reactAccordion/loc/en-us.js b/samples/react-accordion/src/webparts/reactAccordion/loc/en-us.js index 4cbfbd5d0..891042685 100644 --- a/samples/react-accordion/src/webparts/reactAccordion/loc/en-us.js +++ b/samples/react-accordion/src/webparts/reactAccordion/loc/en-us.js @@ -5,6 +5,9 @@ define([], function () { "ListNameLabel": "List Name", "MaxItemsPerPageLabel": "Max number of items per page", "EnablePagingLabel":"Enable Paging", - "TotalItemsLabel":"Maximum items to retrieve" + "TotalItemsLabel":"Maximum items to retrieve", + "CustomSortOrder":"Custom sort order", + "SortById":"Sort by ID", + "SortByModified":"Sort by modified date" } }); \ No newline at end of file diff --git a/samples/react-accordion/src/webparts/reactAccordion/loc/mystrings.d.ts b/samples/react-accordion/src/webparts/reactAccordion/loc/mystrings.d.ts index 80a9c5496..a583d6818 100644 --- a/samples/react-accordion/src/webparts/reactAccordion/loc/mystrings.d.ts +++ b/samples/react-accordion/src/webparts/reactAccordion/loc/mystrings.d.ts @@ -5,6 +5,9 @@ declare interface IReactAccordionWebPartStrings { MaxItemsPerPageLabel: string; EnablePagingLabel: string; TotalItemsLabel:string; + CustomSortOrder:string; + SortById:string; + SortByModified:string; } declare module 'ReactAccordionWebPartStrings' {