Add member filter

app/Member/Actions/SearchAction.php

@@ -5,8 +5,8 @@ namespace App\Member\Actions;
 use App\Member\FilterScope;
 use App\Member\Member;
 use App\Member\MemberResource;
-use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+use Illuminate\Pagination\LengthAwarePaginator;
 use Lorisleiva\Actions\ActionRequest;
 use Lorisleiva\Actions\Concerns\AsAction;
 
@@ -15,14 +15,14 @@ class SearchAction
     use AsAction;
 
     /**
-     * @return Collection<int, Member>
+     * @return LengthAwarePaginator<int, Member>
      */
-    public function handle(FilterScope $filter): Collection
+    public function handle(FilterScope $filter): LengthAwarePaginator
     {
         return Member::search($filter->search)->query(fn ($q) => $q->select('*')
             ->withFilter($filter)
             ->ordered()
-        )->get();
+        )->paginate(15);
     }
 
     public function asController(ActionRequest $request): AnonymousResourceCollection

resources/js/components/ui/AgeGroups.vue

@@ -1,17 +1,7 @@
 <template>
     <div class="flex gap-1 justify-center items-center">
-        <svg-sprite
+        <svg-sprite class="flex-none" v-if="member.is_leader" :class="[ageColors.leiter, iconClass]" src="lilie"></svg-sprite>
-            class="flex-none"
+        <svg-sprite class="flex-none" v-if="member.age_group_icon" :class="[ageColors[member.age_group_icon], iconClass]" src="lilie"></svg-sprite>
-            v-if="member.is_leader"
-            :class="[ageColors.leiter, iconClass]"
-            src="lilie"
-        ></svg-sprite>
-        <svg-sprite
-            class="flex-none"
-            v-if="member.age_group_icon"
-            :class="[ageColors[member.age_group_icon], iconClass]"
-            src="lilie"
-        ></svg-sprite>
     </div>
 </template>
 

resources/js/mixins/indexHelpers.js

@@ -9,10 +9,13 @@ export default {
     },
     computed: {
         filterString() {
-            return btoa(encodeURIComponent(JSON.stringify(this.inner.meta.filter)));
+            return this.toFilterString(this.inner.meta.filter);
         },
     },
     methods: {
+        toFilterString(data) {
+            return btoa(encodeURIComponent(JSON.stringify(data)));
+        },
         reload(resetPage = true) {
             var _self = this;
             var data = {

resources/js/views/maildispatcher/MaildispatcherForm.vue

@@ -7,31 +7,62 @@
             <f-save-button form="form"></f-save-button>
             <ui-box heading="Filterregeln">
                 <div class="grid gap-4 sm:grid-cols-2">
-                    <f-select id="activity_id" name="activity_id" :options="meta.activities" v-model="model.activity_id" @input="reload" label="Tätigkeit" size="sm" required></f-select>
+                    <f-multipleselect
-                    <f-select id="subactivity_id" name="subactivity_id" :options="meta.activities" v-model="model.subactivity_id" @input="reload" label="Unterttätigkeit" size="sm" required></f-select>
+                        id="activity_ids"
+                        name="activity_ids"
+                        :options="meta.activities"
+                        v-model="model.filter.activity_ids"
+                        @input="reload(1)"
+                        label="Tätigkeit"
+                        size="sm"
+                        required
+                    ></f-multipleselect>
+                    <f-multipleselect
+                        id="subactivity_ids"
+                        name="subactivity_ids"
+                        :options="meta.subactivities"
+                        v-model="model.filter.subactivity_ids"
+                        @input="reload(1)"
+                        label="Unterttätigkeit"
+                        size="sm"
+                        required
+                    ></f-multipleselect>
                 </div>
             </ui-box>
-            <ui-box heading="Mitglieder">
+            <ui-box heading="Mitglieder" v-if="members !== null">
-                <div class="flex flex-col space-y-4">
+                <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
-                    <div v-for="(pos, index) in model.children" :key="index" class="flex space-x-2 items-end">
+                    <thead>
-                        <f-text :id="`name-${index}`" v-model="pos.name" label="Name" size="sm" required></f-text>
+                        <th></th>
-                        <f-text :id="`amount-${index}`" v-model="pos.amount" label="Beitrag" size="sm" mode="area" required></f-text>
+                        <th>Nachname</th>
-                        <a href="#" @click.prevent="model.children.splice(index, 1)" class="btn btn-sm btn-danger icon flex-none">
+                        <th>Vorname</th>
-                            <svg-sprite src="trash" class="w-5 h-5"></svg-sprite>
+                        <th>E-Mail-Adresse</th>
-                        </a>
+                        <th>E-Mail-Adresse Eltern</th>
-                    </div>
+                    </thead>
-                </div>
+
+                    <tr v-for="(member, index) in members.data" :key="index">
+                        <td><ui-age-groups :member="member"></ui-age-groups></td>
+                        <td v-text="member.lastname"></td>
+                        <td v-text="member.firstname"></td>
+                        <td v-text="member.email"></td>
+                        <td v-text="member.email_parents"></td>
+                    </tr>
+                </table>
+                <ui-pagination class="mt-4" @reload="reload" :value="members.meta" :only="['data']"></ui-pagination>
             </ui-box>
         </form>
     </page-layout>
 </template>
 
 <script>
+import indexHelpers from '../../mixins/indexHelpers.js';
+
 export default {
+    mixins: [indexHelpers],
+
     data: function () {
         return {
             model: this.mode === 'create' ? {...this.meta.default_model} : {...this.data},
-            members: [],
+            members: null,
         };
     },
 
@@ -42,15 +73,18 @@ export default {
     },
 
     methods: {
-        async reload() {
+        async reload(page) {
             this.members = (
-                await this.axios.post('/api/member', {
+                await this.axios.post('/api/member/search', {
-                    filter: this.model,
+                    page: page || 1,
+                    filter: this.toFilterString(this.model.filter),
                 })
             ).data;
         },
     },
 
-    async created() {},
+    async created() {
+        this.reload();
+    },
 };
 </script>

resources/js/views/member/VIndex.vue

@@ -71,7 +71,7 @@
             </thead>
 
             <tr v-for="(member, index) in inner.data" :key="index">
-                <td><age-groups :member="member"></age-groups></td>
+                <td><ui-age-groups :member="member"></ui-age-groups></td>
                 <td v-text="member.lastname"></td>
                 <td v-text="member.firstname"></td>
                 <td class="hidden 2xl:table-cell" v-text="member.full_address"></td>
@@ -92,7 +92,7 @@
         <div class="md:hidden p-3 grid gap-3">
             <ui-box class="relative" :heading="member.fullname" v-for="(member, index) in data.data" :key="index">
                 <div slot="in-title">
-                    <age-groups class="ml-2" :member="member" icon-class="w-4 h-4"></age-groups>
+                    <ui-age-groups class="ml-2" :member="member" icon-class="w-4 h-4"></ui-age-groups>
                 </div>
                 <div class="text-xs text-gray-200" v-text="member.full_address"></div>
                 <div class="flex items-center mt-1 space-x-4">
@@ -153,9 +153,8 @@ export default {
         MemberMemberships,
         MemberPayments,
         MemberCourses,
-        'age-groups': () => import('./AgeGroups.vue'),
+        tags: () => import('./Tags.vue'),
-        'tags': () => import('./Tags.vue'),
+        actions: () => import('./index/Actions.vue'),
-        'actions': () => import('./index/Actions.vue'),
     },
 
     methods: {