Order input options alphabetically

dhammaorg · Feb 5, 2024 · a5a0995 · a5a0995
1 parent 1d75ee3
commit a5a0995
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/components/InputCategory.vue b/src/components/InputCategory.vue
@@ -62,7 +62,8 @@ export default {
   },
   computed: {
     categories() {
-      return this.list || Object.values(this.$root.categories).filter((c) => c.type === this.type)
+      const array = this.list || Object.values(this.$root.categories).filter((c) => c.type === this.type)
+      return [...array].sort((a, b) => a.name.localeCompare(b.name))
     },
   },
   methods: {

diff --git a/src/components/InputProduct.vue b/src/components/InputProduct.vue
@@ -44,7 +44,9 @@ export default {
   },
   computed: {
     options() {
-      return this.$root.productsArray.filter((p) => this.filterProducts === null || this.filterProducts.includes(p.id))
+      return [...this.$root.productsArray]
+        .filter((p) => this.filterProducts === null || this.filterProducts.includes(p.id))
+        .sort((a, b) => a.name.localeCompare(b.name))
     },
     value() {
       return this.$attrs.modelValue

diff --git a/src/components/InputRecipie.vue b/src/components/InputRecipie.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-inputgroup">
-    <Dropdown v-bind="$attrs" :options="$root.recipiesArray" optionLabel="name" optionValue="id"
+    <Dropdown v-bind="$attrs" :options="options" optionLabel="name" optionValue="id"
               placeholder="Recipie" :filter="true" filterPlaceholder="" :showClear="true"
               class="w-100" @filter="filterValue = $event.value">
       <template #footer>
@@ -30,6 +30,9 @@ export default {
     value() {
       return this.$attrs.modelValue
     },
+    options() {
+      return [...this.$root.recipiesArray].sort((a, b) => a.name.localeCompare(b.name))
+    },
   },
 }
 </script>
diff --git a/src/components/InputSupplier.vue b/src/components/InputSupplier.vue
@@ -1,6 +1,6 @@
 <template>
   <MultiSelect v-if="multiple"
-               :options="$root.suppliersArray" optionLabel="name" optionValue="id"
+               :options="suppliers" optionLabel="name" optionValue="id"
                v-bind="$attrs">
     <template #footer v-if="btnAdd">
       <div class="p-multiselect-header">
@@ -10,7 +10,7 @@
     </template>
   </MultiSelect>
 
-  <Dropdown v-else :options="$root.suppliersArray" optionLabel="name" optionValue="id"
+  <Dropdown v-else :options="suppliers" optionLabel="name" optionValue="id"
             :showClear="true"
             placeholder="Supplier" :filter="true" filterPlaceholder="" class="w-100" v-bind="$attrs"
             @filter="filterValue = $event.value">
@@ -46,5 +46,10 @@ export default {
       filterValue: '',
     }
   },
+  computed: {
+    suppliers() {
+      return [...this.$root.suppliersArray].sort((a, b) => a.name.localeCompare(b.name))
+    },
+  },
 }
 </script>