[feat] filter user by name

src/components/UserSelector.vue

@@ -7,11 +7,14 @@
     option-label="display_name"
     option-value="userid"
     map-options
+    use-input
+    input-debounce="0"
+    @filter="filterFn"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, onBeforeMount } from 'vue';
+import { computed, defineComponent, PropType, onBeforeMount, ref } from 'vue';
 import { useUserStore } from '@flaschengeist/api';
 
 export default defineComponent({
@@ -28,7 +31,37 @@ export default defineComponent({
       void userStore.getUsers(false);
     });
 
-    const users = computed(() => userStore.users);
+    const users = computed(() =>
+      userStore.users.filter((user) => {
+        let names = filter.value.toLowerCase().split(' ');
+        if (names.length < 1) {
+          return true;
+        }
+        if (names.length === 1) {
+          let name = names[0];
+          return (
+            user.lastname.toLowerCase().includes(name) ||
+            user.firstname.toLowerCase().includes(name)
+          );
+        }
+        if (names.length === 2) {
+          let name1 = names[0];
+          let name2 = names[1];
+          return (
+            (user.lastname.toLowerCase().includes(name1) &&
+              user.firstname.toLowerCase().includes(name2)) ||
+            (user.lastname.toLowerCase().includes(name2) &&
+              user.firstname.toLowerCase().includes(name1))
+          );
+        }
+        return true;
+      })
+    );
+    const filter = ref<string>('');
+    const filterFn = (val: string, update: () => void) => {
+      filter.value = val;
+      update();
+    };
     const selected = computed({
       get: () => props.modelValue,
       set: (value: FG.User | undefined) => (value ? emit('update:modelValue', value) : undefined),
@@ -37,6 +70,7 @@ export default defineComponent({
     return {
       selected,
       users,
+      filterFn,
     };
   },
 });