Update search

resources/js/components/page/SearchModal.vue

@@ -37,30 +37,15 @@
 </template>
 
 <script lang="js" setup>
-import { computed, ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import useSearch from '../../composables/useSearch.js';
 const emit = defineEmits(['close']);
 
-const { search } = useSearch();
+const { searchString, results } = useSearch(null, { limit: 10 });
 
-const realSearchString = ref('');
-const results = ref({ hits: [] });
 const searchInput = ref(null);
 
 onMounted(() => {
     searchInput.value.focus();
 });
-
-const searchString = computed({
-    get: () => realSearchString.value,
-    set: async (v) => {
-        realSearchString.value = v;
-
-        if (!v.length) {
-            results.value = { hits: [] };
-            return;
-        }
-        results.value = await search(v, [], { limit: 10 });
-    },
-});
 </script>

resources/js/composables/useSearch.js

@@ -1,7 +1,12 @@
-import {inject} from 'vue';
+import {inject, computed, ref} from 'vue';
 
-export default function useSearch() {
+export default function useSearch(params = null, options = null) {
+    params = params === null ? [] : params;
+    options = options === null ? {} : options;
     const axios = inject('axios');
+    const results = ref({hits: []});
+    const realSearchString = ref('');
+
     async function search(text, filters = [], options = {}) {
         var response = await axios.post(
             import.meta.env.MODE === 'development' ? 'http://localhost:7700/indexes/members/search' : '/indexes/members/search',
@@ -17,7 +22,28 @@ export default function useSearch() {
         return response.data;
     }
 
+    function clearSearch() {
+        searchString.value = '';
+    }
+
+    const searchString = computed({
+        get: () => realSearchString.value,
+        set: async (v) => {
+            realSearchString.value = v;
+
+            if (!v.length) {
+                results.value = {hits: []};
+                return;
+            }
+
+            results.value = await search(v, params, options);
+        },
+    });
+
     return {
         search,
+        searchString,
+        results,
+        clearSearch,
     };
 }

resources/js/views/contribution/VIndex.vue

@@ -12,7 +12,7 @@
                 <f-text id="search_text" ref="searchInput" v-model="searchString" class="col-span-2" label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
                 <div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
                     <f-switch
-                        v-for="member in results"
+                        v-for="member in results.hits"
                         :id="`members-${member.id}`"
                         :key="member.id"
                         v-model="values.members"
@@ -32,11 +32,11 @@
 </template>
 
 <script lang="js" setup>
-import { ref, computed, inject } from 'vue';
+import { ref, inject } from 'vue';
 import useSearch from '../../composables/useSearch.js';
 const axios = inject('axios');
 
-const { search } = useSearch();
+const { searchString, results, clearSearch } = useSearch(['birthday IS NOT NULL', 'address IS NOT EMPTY']);
 
 const props = defineProps({
     data: {},
@@ -44,8 +44,6 @@ const props = defineProps({
     compilers: {},
 });
 
-const realSearchString = ref('');
-const results = ref([]);
 const searchInput = ref([]);
 const values = ref({
     type: null,
@@ -58,15 +56,6 @@ const values = ref({
     ...props.data,
 });
 
-const searchString = computed({
-    get: () => realSearchString.value,
-    set: async (v) => {
-        realSearchString.value = v;
-
-        results.value = (await search(v, ['birthday IS NOT NULL', 'address IS NOT EMPTY'])).hits;
-    },
-});
-
 async function submit(compiler) {
     values.value.type = compiler;
     await axios.post('/contribution-validate', values.value);
@@ -80,15 +69,15 @@ function onSubmitMemberResult(selected) {
         values.value.members.push(selected.id);
     }
 
-    realSearchString.value = '';
+    clearSearch();
     searchInput.value.$el.querySelector('input').focus();
 }
 function onSubmitFirstMemberResult() {
-    if (results.value.length === 0) {
-        realSearchString.value = '';
+    if (results.value.hits.length === 0) {
+        clearSearch();
         return;
     }
 
-    onSubmitMemberResult(results.value[0]);
+    onSubmitMemberResult(results.value.hits[0]);
 }
 </script>

resources/js/views/form/MemberAssign.vue

@@ -22,25 +22,8 @@
 </template>
 
 <script lang="js" setup>
-import { computed, ref } from 'vue';
 import useSearch from '../../composables/useSearch.js';
 const emit = defineEmits(['assign']);
 
-const { search } = useSearch();
-
-const realSearchString = ref('');
-const results = ref(null);
-
-const searchString = computed({
-    get: () => realSearchString.value,
-    set: async (v) => {
-        realSearchString.value = v;
-
-        if (!v.length) {
-            results.value = null;
-            return;
-        }
-        results.value = await search(v, [], { limit: 10 });
-    },
-});
+const { searchString, results } = useSearch(null, { limit: 10 });
 </script>