From 003f9ccf4ac293a171dbe0254f2ca74d2ac61fbd Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 21 May 2024 09:02:16 +0100
Subject: [PATCH] feat: Sort Page Templates DropDown - MEED-6891 -
 Meeds-io/MIPs#133 This change will sort page templates when creating a page
 using the following strategy: - Blank - natural sort - Default - natural sort
 - Customised - natural sort

---
 .../SiteNavigationNewPageElement.vue          |  9 +++++--
 .../components/list/PageTemplates.vue         | 25 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue
index f55176e8a..2915deffe 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue
@@ -44,13 +44,18 @@
 export default {
   data: () => ({
     pageTemplateId: null,
+    collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
   }),
   computed: {
     pageTemplates() {
       return this.$root.pageTemplates;
     },
     items() {
-      return this.pageTemplates?.map?.(t => ({
+      const items = this.pageTemplates.slice();
+      items.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
+      items.sort((a, b) =>
+        ((b.category === 'blank' && 2) || (b.category === 'default' && 1) || 0) - ((a.category === 'blank' && 2) || (a.category === 'default' && 1) || 0));
+      return items?.map?.(t => ({
         name: this.$te(t.name) ? this.$t(t.name) : t.name,
         value: t.id,
       }));
@@ -78,7 +83,7 @@ export default {
       immediate: true,
       handler() {
         if (this.items?.length) {
-          this.pageTemplateId = this.items[0].value;
+          this.pageTemplateId = this.pageTemplates[0].id;
         }
       },
     },
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
index 31b90becb..b7afaa99a 100644
--- a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
@@ -6,6 +6,8 @@
       :loading="loading"
       :disable-sort="$root.isMobile"
       :hide-default-header="$root.isMobile"
+      :custom-sort="applySortOnItems"
+      must-sort
       disable-pagination
       hide-default-footer
       class="pageTemplatesTable px-5">
@@ -148,6 +150,29 @@ export default {
     this.$root.$off('page-templates-create', this.createPageTemplate);
   },
   methods: {
+    applySortOnItems(pageTemplates, sortFields, sortDescendings) {
+      for (let i = 0; i < sortFields.length; i++) {
+        pageTemplates = this.applySortOnItemsUsingField(pageTemplates, sortFields[i], sortDescendings[i]);
+      }
+      return pageTemplates;
+    },
+    applySortOnItemsUsingField(pageTemplates, field, desc) {
+      if (field === 'name') {
+        pageTemplates.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
+      } else if (field === 'category') {
+        pageTemplates.sort((a, b) => {
+          const categoryA = this.$te(`layout.pageTemplate.category.${a.category || 'customized'}`) ? this.$t(`layout.pageTemplate.category.${a.category || 'customized'}`) : this.pageTemplate.category;
+          const categoryB = this.$te(`layout.pageTemplate.category.${b.category || 'customized'}`) ? this.$t(`layout.pageTemplate.category.${b.category || 'customized'}`) : this.pageTemplate.category;
+          return this.collator.compare(categoryA.toLowerCase(), categoryB.toLowerCase());
+        });
+      } else if (field === 'disabled') {
+        pageTemplates.sort((a, b) => (a.disabled ? 0 : 1) - (b.disabled ? 0 : 1));
+      }
+      if (desc) {
+        pageTemplates.reverse();
+      }
+      return pageTemplates;
+    },
     deletePageTemplateConfirm(pageTemplate) {
       this.pageTemplateToDelete = pageTemplate;
       if (this.pageTemplateToDelete) {