fix debounce

resources/js/composables/useIndex.js

@@ -16,7 +16,7 @@ export function useIndex(props, siteName) {
 
     const filterString = computed(() => toFilterString(inner.meta.value.filter));
 
-    function reload(resetPage = true) {
+    function reload(resetPage = true, withMeta = true) {
         var data = {
             filter: filterString.value,
             page: 1,
@@ -29,7 +29,9 @@ export function useIndex(props, siteName) {
             preserveState: true,
             onSuccess: (page) => {
                 inner.data.value = page.props.data.data;
+                if (withMeta) {
                     inner.meta.value = page.props.data.meta;
+                }
             },
         });
     }
@@ -44,7 +46,7 @@ export function useIndex(props, siteName) {
 
     function setFilter(key, value) {
         inner.meta.value.filter[key] = value;
-        reload();
+        reload(true, false);
     }
 
     function requestCallback(successMessage, failureMessage) {

resources/js/views/contribution/VIndex.vue

@@ -1,49 +1,31 @@
 <template>
     <page-layout>
         <form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
-            <f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2" label="Veranstaltungs-Name" required></f-text>
+            <f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2"
+                label="Veranstaltungs-Name" required></f-text>
             <f-text id="dateFrom" v-model="values.dateFrom" name="dateFrom" type="date" label="Datum von" required></f-text>
-            <f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis" required></f-text>
+            <f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis"
+                required></f-text>
 
             <f-text id="zipLocation" v-model="values.zipLocation" name="zipLocation" label="PLZ / Ort" required></f-text>
-            <f-select id="country" v-model="values.country" :options="countries" name="country" label="Land" required></f-select>
+            <f-select id="country" v-model="values.country" :options="countries" name="country" label="Land"
+                required></f-select>
 
             <div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
-                <f-text
+                <f-text id="search_text" ref="search_text_field" v-model="searchText" class="col-span-2" name="search_text"
-                    id="search_text"
+                    label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
-                    ref="search_text_field"
-                    v-model="searchText"
-                    class="col-span-2"
-                    name="search_text"
-                    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
+                    <f-switch v-for="member in search.results" :id="`members-${member.id}`" :key="member.id"
-                        v-for="member in search.results"
+                        v-model="values.members" :label="`${member.firstname} ${member.lastname}`" name="members[]"
-                        :id="`members-${member.id}`"
+                        :value="member.id" size="sm" inline
-                        :key="member.id"
+                        @keypress.enter.prevent="onSubmitMemberResult(member)"></f-switch>
-                        v-model="values.members"
-                        :label="`${member.firstname} ${member.lastname}`"
-                        name="members[]"
-                        :value="member.id"
-                        size="sm"
-                        inline
-                        @keypress.enter.prevent="onSubmitMemberResult(member)"
-                    ></f-switch>
                 </div>
             </div>
 
-            <button
+            <button v-for="(compiler, index) in compilers" class="btn btn-primary mt-3 inline-block" @click.prevent="
-                v-for="(compiler, index) in compilers"
-                class="btn btn-primary mt-3 inline-block"
-                @click.prevent="
                 values.type = compiler.class;
             submit();
-                "
+                                " v-text="compiler.title"></button>
-                v-text="compiler.title"
-            ></button>
         </form>
     </page-layout>
 </template>
@@ -80,9 +62,10 @@ export default {
             get() {
                 return this.search.s;
             },
-            set: debounce(async function (event) {
+            set: function (event) {
                 this.search.s = event;
 
+                debounce(async () => {
                     var response = await this.axios.post('/api/member/search', {
                         filter: {
                             search: event,
@@ -92,7 +75,8 @@ export default {
                     });
 
                     this.search.results = response.data.data;
-            }, 300),
+                }, 300)();
+            },
         },
     },
     methods: {