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
Meeds-io · May 22, 2024 · 003f9cc · 003f9cc
1 parent 54e232e
commit 003f9cc
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/...-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue b/...-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/...ebapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue b/...ebapp/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) {