Adding configuration for pagination

Adding the ability to turn of pagination and also an new property for controlling how many items to return from the REST Call.

samples/react-accordion/README.md

@@ -20,7 +20,7 @@ extensions:
 
 This is a sample web Part that illustrates the use of React Accessible Accordion plugin for building SharePoint Framework client-side web parts to show SharePoint list data in Accordion format.
 
-![Sample Web Part built using SPFx with React Framework showing list data in accordion format](./assets/previewAccordion.PNG)
+![Sample Web Part built using SPFx with React Framework showing list data in accordion format](./assets/AccordionPreview.png)
 
 ## Used SharePoint Framework Version 
 
@@ -45,7 +45,7 @@ Version|Date|Comments
 1.0|August 17, 2018|Initial release
 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)
 ## 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.**
 

samples/react-accordion/package.json

@@ -39,6 +39,6 @@
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",
-    "gulp": "~3.9.1"
+    "gulp": "^3.9.1"
   }
 }

samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json

@@ -29,7 +29,9 @@
       "properties": {
         "description": "SPFx webpart which shows SharePoint list data in Accordion format",
         "listName": "FAQ",
-        "maxItemsPerPage": 5
+        "totalItems":20,
+        "maxItemsPerPage": 5,
+        "allowPaging":true
       }
     }
   ]

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 } 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,13 +13,16 @@ export interface IReactAccordionWebPartProps {
   choice: string;
   title: string;
   displayMode: DisplayMode;
+  totalItems:number;
   maxItemsPerPage: number;
+  enablePaging:boolean;
   updateProperty: (value: string) => void;
 }
 
 export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactAccordionWebPartProps> {
 
   public render(): void {
+    debugger;
     const element: React.ReactElement<IReactAccordionProps> = React.createElement(
       ReactAccordion,
       {
@@ -28,7 +31,9 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
         siteUrl: this.context.pageContext.web.absoluteUrl,
         title: this.properties.title,
         displayMode: this.displayMode,
+        totalItems:this.properties.totalItems,
         maxItemsPerPage: this.properties.maxItemsPerPage,
+        enablePaging:this.properties.enablePaging,
         updateProperty: (value: string) => {
           this.properties.title = value;
         }
@@ -47,6 +52,11 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
   }
 
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    //set maxitems to top
+    if(!this.properties.enablePaging){
+      this.properties.maxItemsPerPage = this.properties.totalItems;
+    }
+    
     return {
       pages: [
         {
@@ -60,15 +70,28 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<IReactA
                 PropertyPaneTextField('listName', {
                   label: strings.ListNameLabel
                 }),
-                PropertyPaneSlider('maxItemsPerPage', {
-                  label: strings.MaxItemsPerPageLabel,
-                  ariaLabel: strings.MaxItemsPerPageLabel,
+                PropertyPaneSlider('totalItems', {
+                  label: strings.TotalItemsLabel,
+                  ariaLabel: strings.TotalItemsLabel,
                   min: 3,
-                  max: 20,
+                  max: 5000,
                   value: 5,
                   showValue: true,
                   step: 1
                 }),
+                PropertyPaneToggle('enablePaging', {
+                  label: strings.EnablePagingLabel
+                }),
+                PropertyPaneSlider('maxItemsPerPage', {
+                  disabled:!this.properties.enablePaging,
+                  label: strings.MaxItemsPerPageLabel,
+                  ariaLabel: strings.MaxItemsPerPageLabel,
+                  min: 3,
+                  max: 5000,
+                  value: 5,
+                  showValue: true,
+                  step: 1
+                })
               ]
             }
           ]

samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionProps.ts

@@ -8,5 +8,7 @@ export interface IReactAccordionProps {
   title: string;
   displayMode: DisplayMode;
   maxItemsPerPage: number;
+  enablePaging:boolean;
+  totalItems:number;
   updateProperty: (value: string) => void;
 }

samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.tsx

@@ -73,7 +73,8 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
   }
 
   private readItems(): void {
-    let restAPI = this.props.siteUrl + `/_api/web/Lists/GetByTitle('${this.props.listName}')/items?$select=Title,Description`;
+    debugger;
+    let restAPI = this.props.siteUrl + `/_api/web/Lists/GetByTitle('${this.props.listName}')/items?$select=Title,Description&$top=${this.props.totalItems}`;
 
     this.props.spHttpClient.get(restAPI, SPHttpClient.configurations.v1, {
       headers: {
@@ -148,12 +149,14 @@ export default class ReactAccordion extends React.Component<IReactAccordionProps
       displayLoader = (null);
     }
 
+    if(this.props.enablePaging){
       if (items.length > 0) {
         pageCount = Math.ceil(items.length / pageCountDivisor);
       }
       for (let i = 0; i < pageCount; i++) {
         pageButtons.push(<PrimaryButton onClick={() => { _pagedButtonClick(i + 1, items); }}> {i + 1} </PrimaryButton>);
       }
+    }
     return (
       <div className={styles.reactAccordion}>
         <div className={styles.container}>

samples/react-accordion/src/webparts/reactAccordion/loc/en-us.js

@@ -3,6 +3,8 @@ define([], function () {
     "PropertyPaneDescription": "Description",
     "BasicGroupName": "Group Name",
     "ListNameLabel": "List Name",
-    "MaxItemsPerPageLabel": "Max number of items per page"
+    "MaxItemsPerPageLabel": "Max number of items per page",
+    "EnablePagingLabel":"Enable Paging",
+    "TotalItemsLabel":"Maximum items to retrieve"
   }
 });

samples/react-accordion/src/webparts/reactAccordion/loc/mystrings.d.ts

@@ -2,7 +2,9 @@ declare interface IReactAccordionWebPartStrings {
   PropertyPaneDescription: string;
   BasicGroupName: string;
   ListNameLabel: string;
-  MaxItemsPerPageLabel: string
+  MaxItemsPerPageLabel: string;
+  EnablePagingLabel: string;
+  TotalItemsLabel:string;
 }
 
 declare module 'ReactAccordionWebPartStrings' {