From bdb84b99e4e3dd36365046d1f270ce56efa9e773 Mon Sep 17 00:00:00 2001
From: sudoaptrana <89994145+geekaryan@users.noreply.github.com>
Date: Wed, 14 Jun 2023 11:04:03 +0530
Subject: [PATCH] Add sort by name+section

Fixed issue #289 . I have added the functionality of sort using name and section in the desired page.
---
 .../CommonRequirementEnumeration.tsx          | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx b/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
index c31d6de97..2e7e065e0 100644
--- a/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
+++ b/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
@@ -48,6 +48,13 @@ export const CommonRequirementEnumeration = () => {
   display = currentUrlParams.get('applyFilters') === 'true' ? filteredCRE : cre;
 
   const linksByType = useMemo(() => (display ? orderLinksByType(groupLinksByType(display)) : {}), [display]);
+  const sortedSections = Object.entries(linksByType).sort(([typeA], [typeB]) => {
+    const nameA = DOCUMENT_TYPE_NAMES[typeA] || '';
+    const nameB = DOCUMENT_TYPE_NAMES[typeB] || '';
+    const nameSectionA = nameA + typeA;
+    const nameSectionB = nameB + typeB;
+    return nameSectionA.localeCompare(nameSectionB);
+  });
   return (
     <div className="cre-page">
       <LoadingAndErrorIndicator loading={loading} error={error} />
@@ -88,21 +95,20 @@ export const CommonRequirementEnumeration = () => {
             ''
           )}
           <div className="cre-page__links-container">
-            {Object.keys(linksByType).length > 0 &&
-              Object.entries(linksByType).map(([type, links]) => (
-                <div className="cre-page__links" key={type}>
-                  <div className="cre-page__links-eader">
-                    {getDocumentDisplayName(display)}
-                    <b>{DOCUMENT_TYPE_NAMES[type]}</b>:
-                  </div>
-                  {links.map((link, i) => (
-                    <div key={i} className="accordion ui fluid styled cre-page__links-container">
-                      <DocumentNode node={link.document} linkType={type} />
-                      <FilterButton document={link.document} />
-                    </div>
-                  ))}
+            {sortedSections.map(([type, links]) => (
+              <div className="cre-page__links" key={type}>
+                <div className="cre-page__links-eader">
+                  {getDocumentDisplayName(display)}
+                  <b>{DOCUMENT_TYPE_NAMES[type]}</b>:
                 </div>
-              ))}
+                {links.map((link, i) => (
+                  <div key={i} className="accordion ui fluid styled cre-page__links-container">
+                    <DocumentNode node={link.document} linkType={type} />
+                    <FilterButton document={link.document} />
+                  </div>
+                ))}
+              </div>
+            ))}
           </div>
         </>
       )}