From a55fd7a303810172de988782968875df89b6b709 Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 15:01:39 +0200
Subject: [PATCH] Selected options are shown on top

---
 .../components/catalog-new/SelectOptions.vue  | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
index 808abe393..fb05dcf7d 100644
--- a/resources/js/components/catalog-new/SelectOptions.vue
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { matchSorter } from 'match-sorter'
 
 import ResetButton from './ResetButton.vue'
@@ -15,20 +15,22 @@ const props = defineProps<{
 
 const emit = defineEmits(['change', 'reset'])
 
-const selected = props.selected ?? []
-const formatLabel = props.formatLabel ?? ((value: string) => value)
-
+const allOptions = ref(props.options)
 const search = ref('')
 
+const selected = computed(() => props.selected ?? [])
+
 const options = computed(() => {
+    const formatLabel = props.formatLabel ?? ((value: string) => value)
+
     const optionsWithSelected = [
-        ...props.options.map((option) => ({
+        ...allOptions.value.map((option) => ({
             ...option,
-            checked: selected.includes(option.value),
+            checked: selected.value.includes(option.value),
             label: formatLabel(option.value),
         })),
-        ...selected
-            .filter((queryItem) => props.options.every((option) => option.value !== queryItem))
+        ...selected.value
+            .filter((queryItem) => allOptions.value.every((option) => option.value !== queryItem))
             .map((value) => ({
                 value,
                 count: 0,
@@ -36,12 +38,25 @@ const options = computed(() => {
                 label: formatLabel(value),
             })),
     ]
+
     return search.value
         ? matchSorter(optionsWithSelected, search.value, {
               keys: ['label'],
           })
         : optionsWithSelected
 })
+
+onMounted(() => {
+    // Pre-sort options if they're initially selected
+    allOptions.value = props.options.sort((a, b) => {
+        const aChecked = selected.value.includes(a.value)
+        const bChecked = selected.value.includes(b.value)
+
+        if (aChecked && bChecked) return 0
+        if (aChecked) return -1
+        return 1
+    })
+})
 </script>
 
 <template>