feat: Sort Portlets And Categories Input fields - MEED-6993 - Meeds-i…

…o/MIPs#139 (#102)
Meeds-io · Jun 4, 2024 · 960679d · 960679d
1 parent 77f5ddf
commit 960679d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/form/CategoryInput.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/form/CategoryInput.vue
@@ -24,7 +24,7 @@
     <v-autocomplete
       ref="autocomplete"
       v-model="categoryId"
-      :items="$root.portletInstanceCategories"
+      :items="sortedCategories"
       :placeholder="$t('layout.category.placeholder')"
       class="portlet-instance-category-autocomplete ma-0 pa-0"
       item-value="id"
@@ -45,6 +45,13 @@ export default {
   data: () => ({
     categoryId: null,
   }),
+  computed: {
+    sortedCategories() {
+      const categories = this.$root.portletInstanceCategories?.filter?.(c => c.name) || [];
+      categories.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
+      return categories;
+    },
+  },
   watch: {
     value: {
       immediate: true,

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/form/PortletInput.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/form/PortletInput.vue
@@ -24,7 +24,7 @@
     <v-autocomplete
       ref="autocomplete"
       v-model="contentId"
-      :items="$root.portlets"
+      :items="sortedPortlets"
       :disabled="disabled"
       :placeholder="$t('layout.portlet.placeholder')"
       class="portlet-instance-category-autocomplete ma-0 pa-0"
@@ -50,6 +50,13 @@ export default {
   data: () => ({
     contentId: null,
   }),
+  computed: {
+    sortedPortlets() {
+      const portlets = this.$root.portlets?.filter?.(c => c.name) || [];
+      portlets.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
+      return portlets;
+    },
+  },
   watch: {
     value: {
       immediate: true,