Load MemberFilter meta via backend

resources/js/views/member/MemberFilterFields.vue

@@ -20,7 +20,9 @@
 </template>
 
 <script setup>
-import {ref, watch} from 'vue';
+import {inject, ref, watch} from 'vue';
+
+const axios = inject('axios');
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -29,12 +31,11 @@ const props = defineProps({
         type: Object,
         required: true,
     },
-    meta: {
-        type: Object,
-        required: true,
-    },
 });
 
+const metaResponse = await axios.post('/api/member/search', {});
+const meta = ref(metaResponse.data.meta);
+
 const filter = ref({...props.modelValue});
 
 watch(

resources/js/views/member/VIndex.vue

@@ -19,7 +19,9 @@
         </ui-popup>
         <page-filter>
             <template #fields>
-                <member-filter :meta="meta" :model-value="filter" @update:model-value="setFilterObject($event)" />
+                <suspense>
+                    <member-filter-fields :model-value="filter" @update:model-value="setFilterObject($event)" />
+                </suspense>
             </template>
             <template #buttons>
                 <f-text id="search" :model-value="filter.search" label="Suchen …" size="sm" @update:model-value="setFilterObject({...filter, search: $event})"></f-text>
@@ -101,7 +103,7 @@ import Tags from './Tags.vue';
 import Actions from './index/Actions.vue';
 import {indexProps, useIndex} from '../../composables/useIndex.js';
 import {ref, defineProps} from 'vue';
-import MemberFilter from './MemberFilter.vue';
+import MemberFilterFields from './MemberFilterFields.vue';
 
 const single = ref(null);
 const deleting = ref(null);