Merge pull request #197

* feat: add search to multi select and improve behaviour when multiple …

frontend/components/Form/Multiselect.vue

@@ -9,23 +9,28 @@
           {{ name != "" ? itm[name] : itm }}
         </span>
       </div>
-      <ul
+      <div
         tabindex="0"
         style="display: inline"
-        class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-60 overflow-y-scroll"
+        class="dropdown-content mb-1 menu w-full z-[9999] shadow border border-gray-400 rounded bg-base-100"
       >
-        <li
-          v-for="(obj, idx) in items"
-          :key="idx"
-          :class="{
-            bordered: selected[idx],
-          }"
-        >
-          <button type="button" @click="toggle(idx)">
-            {{ name != "" ? obj[name] : obj }}
-          </button>
-        </li>
-      </ul>
+        <div class="m-2">
+          <input v-model="search" placeholder="Search…" class="input input-sm input-bordered w-full" />
+        </div>
+        <ul class="overflow-y-scroll max-h-60">
+          <li
+            v-for="(obj, idx) in filteredItems"
+            :key="idx"
+            :class="{
+              bordered: selected.includes(obj[props.uniqueField]),
+            }"
+          >
+            <button type="button" @click="toggle(obj[props.uniqueField])">
+              {{ name != "" ? obj[name] : obj }}
+            </button>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -49,6 +54,10 @@
       type: String,
       default: "name",
     },
+    uniqueField: {
+      type: String,
+      default: "id",
+    },
     selectFirst: {
       type: Boolean,
       default: false,
@@ -57,19 +66,26 @@
 
   const value = useVModel(props, "modelValue", emit);
 
-  const selected = computed<Record<number, boolean>>(() => {
-    const obj: Record<number, boolean> = {};
-    value.value.forEach(itm => {
-      const idx = props.items.findIndex(item => item[props.name] === itm.name);
-      obj[idx] = true;
+  const search = ref("");
+
+  const filteredItems = computed(() => {
+    if (!search.value) {
+      return props.items;
+    }
+
+    return props.items.filter(item => {
+      return item[props.name].toLowerCase().includes(search.value.toLowerCase());
     });
-    return obj;
   });
 
-  function toggle(index: number) {
-    const item = props.items[index];
-    if (selected.value[index]) {
-      value.value = value.value.filter(itm => itm.name !== item.name);
+  const selected = computed<string[]>(() => {
+    return value.value.map(itm => itm[props.uniqueField]);
+  });
+
+  function toggle(uniqueField: string) {
+    const item = props.items.find(itm => itm[props.uniqueField] === uniqueField);
+    if (selected.value.includes(item[props.uniqueField])) {
+      value.value = value.value.filter(itm => itm[props.uniqueField] !== item[props.uniqueField]);
     } else {
       value.value = [...value.value, item];
     }