From 6bebb90d92ff6ee659401734a9bd2e0521276176 Mon Sep 17 00:00:00 2001
From: Ari Gunawan <ari.gunawan.3023@gmail.com>
Date: Sun, 1 Aug 2021 21:35:22 +0700
Subject: [PATCH] Add sort configuration

---
 .../reactAccordion/ReactAccordionWebPart.ts   | 15 ++++++++++++
 .../components/IReactAccordionProps.ts        |  2 ++
 .../components/ReactAccordion.tsx             | 24 ++++++++++++++-----
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/ReactAccordionWebPart.ts b/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/ReactAccordionWebPart.ts
index 358ef359e..f6a7c8a02 100644
--- a/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/ReactAccordionWebPart.ts
+++ b/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/ReactAccordionWebPart.ts
@@ -35,6 +35,8 @@ export interface IReactAccordionWebPartProps {
   allowMultipleExpanded: boolean;
   accordianTitleColumn: string;
   accordianContentColumn: string;
+  accordianSortColumn: string;
+  isSortDescending: false;
 }
 
 export default class ReactAccordionWebPart extends BaseClientSideWebPart<
@@ -65,6 +67,8 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<
         accordionTitle: this.properties.accordionTitle,
         accordianTitleColumn: this.properties.accordianTitleColumn,
         accordianContentColumn: this.properties.accordianContentColumn,
+        accordianSortColumn: this.properties.accordianSortColumn,
+        isSortDescending: this.properties.isSortDescending,
         allowZeroExpanded: this.properties.allowZeroExpanded,
         allowMultipleExpanded: this.properties.allowMultipleExpanded,
         displayMode: this.displayMode,
@@ -342,6 +346,17 @@ export default class ReactAccordionWebPart extends BaseClientSideWebPart<
                   options: this.allListColumns,
                   disabled: this.choicesDropdownDisabled,
                 }),
+                PropertyPaneDropdown("accordianSortColumn", {
+                  label: "Select the Column for Accordion Sort Rows.",
+                  options: this.allListColumns,
+                  disabled: this.choicesDropdownDisabled,
+                }),
+                PropertyPaneToggle("isSortDescending", {
+                  label: "Sort type",
+                  onText: "Descending",
+                  offText: "Ascending",
+                  disabled: !this.properties.accordianSortColumn
+                }),
                 PropertyPaneToggle("allowZeroExpanded", {
                   label: "Allow zero expanded",
                   checked: this.properties.allowZeroExpanded,
diff --git a/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/IReactAccordionProps.ts b/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/IReactAccordionProps.ts
index 62cd08856..da3642e16 100644
--- a/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/IReactAccordionProps.ts
+++ b/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/IReactAccordionProps.ts
@@ -7,6 +7,8 @@ export interface IReactAccordionProps {
   selectedChoice: string;
   accordianTitleColumn: string;
   accordianContentColumn: string;
+  accordianSortColumn: string;
+  isSortDescending: boolean;
   allowZeroExpanded: boolean;
   allowMultipleExpanded: boolean;
   displayMode: DisplayMode;
diff --git a/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.tsx b/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.tsx
index 5a316136a..9ff785e78 100644
--- a/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.tsx
+++ b/samples/react-accordion-dynamic-section/src/webparts/reactAccordion/components/ReactAccordion.tsx
@@ -46,12 +46,24 @@ export default class ReactAccordion extends React.Component<
       typeof this.props.selectedChoice !== "undefined" &&
       this.props.selectedChoice.length > 0
     ) {
-      let query =
-        "<View><Query><Where><Eq><FieldRef Name='" +
-        this.props.columnTitle +
-        "'/><Value Type='Text'>" +
-        this.props.selectedChoice +
-        "</Value></Eq></Where></Query></View>";
+      let orderByQuery = '';
+      if (this.props.accordianSortColumn) {
+        orderByQuery = `<OrderBy>
+          <FieldRef Name='${this.props.accordianSortColumn}' ${this.props.isSortDescending ? 'Ascending="False"' : ''} />
+        </OrderBy>`;
+      }
+
+      let query = `<View>
+        <Query>
+          <Where>
+            <Eq>
+              <FieldRef Name='${this.props.columnTitle}'/>
+              <Value Type='Text'>${this.props.selectedChoice}</Value>
+            </Eq>
+          </Where>
+          ${orderByQuery}
+        </Query>
+      </View>`;
 
       let theAccordianList = sp.web.lists.getById(this.props.listId);
       theAccordianList