Add membership management

config/scout.php

@@ -141,12 +141,18 @@ return [
                 'searchableAttributes' => ['fullname', 'address'],
                 'sortableAttributes' => ['lastname', 'firstname'],
                 'displayedAttributes' => ['age_group_icon', 'group_name', 'links', 'is_leader', 'lastname', 'firstname', 'fullname', 'address', 'ausstand', 'birthday', 'id', 'memberships', 'bill_kind', 'group_id'],
+                'pagination' => [
+                    'maxTotalHits' => 1000000,
+                ]
             ],
             Form::class => [
                 'filterableAttributes' => ['to'],
                 'searchableAttributes' => ['name'],
                 'sortableAttributes' => ['from',],
                 'displayedAttributes' => ['from', 'name', 'id', 'to'],
+                'pagination' => [
+                    'maxTotalHits' => 1000000,
+                ]
             ]
         ],
     ],

resources/js/components/ui/SearchPagination.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
+        <div class="text-sm text-gray-500" v-text="desc"></div>
+        <div v-if="value.totalPages > 1" class="items-center flex space-x-2">
+            <div class="hidden sm:flex text-gray-500 text-sm" v-text="pages"></div>
+            <button
+                v-if="value.page !== 1"
+                href="#"
+                class="rounded hidden sm:flex w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
+                @click.prevent="goto(1)"
+            >
+                <ui-sprite class="w-3 h-3 fill-current rotate-90" src="chevron-double"></ui-sprite>
+            </button>
+            <button
+                v-if="value.page !== 1"
+                href="#"
+                class="rounded !ml-0 sm:!ml-2 flex w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
+                @click.prevent="goto(value.page - 1)"
+            >
+                <ui-sprite class="w-3 h-3 fill-current rotate-90" src="chevron"></ui-sprite>
+            </button>
+            <button
+                v-for="(button, index) in pageButtons"
+                :key="index"
+                href="#"
+                class="rounded text-sm w-8 h-8 text-primary-100 flex items-center justify-center leading-none shadow"
+                :class="{'bg-primary-700': button.current, 'bg-primary-900 hover:bg-primary-800': !button.current}"
+                @click.prevent="goto(button.page)"
+                v-text="button.page"
+            ></button>
+            <button
+                v-if="value.page !== value.totalPages"
+                href="#"
+                class="flex rounded text-sm w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
+                @click.prevent="goto(value.page + 1)"
+            >
+                <ui-sprite class="w-3 h-3 fill-current -rotate-90" src="chevron"></ui-sprite>
+            </button>
+            <button
+                v-if="value.page !== value.totalPages"
+                href="#"
+                class="hidden sm:flex rounded text-sm w-8 h-8 text-primary-100 items-center justify-center leading-none shadow bg-primary-900 hover:bg-primary-800 items-center justify-center"
+                @click.prevent="goto(value.totalPages)"
+            >
+                <ui-sprite class="w-3 h-3 fill-current -rotate-90" src="chevron-double"></ui-sprite>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            required: true,
+        },
+    },
+
+    computed: {
+        pageButtons() {
+            var buttons = [];
+
+            var from = Math.max(1, this.value.page - 2);
+            var to = Math.min(this.value.totalPages, this.value.page + 2);
+
+            for (var i = from; i <= to; i++) {
+                buttons.push({
+                    page: i,
+                    current: i === this.value.page,
+                });
+            }
+
+            return buttons;
+        },
+        pages() {
+            return `Seite ${this.value.page} von ${this.value.totalPages}`;
+        },
+        desc() {
+            return `${this.value.totalHits} Einträge`;
+        },
+    },
+    methods: {
+        goto(page) {
+            this.$emit('reload', page);
+        },
+    },
+};
+</script>

resources/js/views/activity/Masslist.vue

@@ -5,42 +5,38 @@
         </template>
         <form id="actionform" class="grow p-3" @submit.prevent="submit">
             <div class="flex space-x-3">
-                <f-select :model-value="meta.activity_id" :options="props.activities" label="Tätigkeit" size="sm" name="activity_id" @update:model-value="setActivityId"></f-select>
                 <f-select
-                    :model-value="meta.subactivity_id"
+                    :model-value="meta.activity_id"
-                    :options="props.subactivities[meta.activity_id]"
+                    :options="props.activities"
-                    name="subactivity_id"
+                    label="Tätigkeit"
-                    label="Untertätigkeit"
                     size="sm"
-                    @update:model-value="reload('subactivity_id', $event)"
+                    name="activity_id"
+                    @update:model-value="meta = {...meta, activity_id: $event, subactivity_id: null}"
                 ></f-select>
-                <f-select :model-value="meta.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id" @update:model-value="reload('group_id', $event)"></f-select>
+                <f-select v-model="meta.subactivity_id" :options="props.subactivities[meta.activity_id]" name="subactivity_id" label="Untertätigkeit" size="sm"></f-select>
+                <f-select v-model="meta.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id"></f-select>
             </div>
             <div class="grid gap-2 grid-cols-6 mt-4">
-                <f-switch v-for="member in members.data" :id="`member-${member.id}`" :key="member.id" v-model="selected" :value="member.id" :label="member.fullname" size="sm"></f-switch>
+                <f-switch v-for="member in members.hits" :id="`member-${member.id}`" :key="member.id" v-model="selected" :value="member.id" :label="member.fullname" size="sm"></f-switch>
             </div>
-            <div v-if="members.meta.last_page" class="px-6">
+            <div class="px-6">
-                <ui-pagination class="mt-4" :value="members.meta" :only="['data']" @reload="reloadReal($event, false)"></ui-pagination>
+                <ui-search-pagination class="mt-4" :value="members" @reload="reloadReal($event)"></ui-search-pagination>
             </div>
         </form>
     </page-layout>
 </template>
 
 <script lang="js" setup>
-import { onBeforeUnmount, ref, defineProps, reactive, inject } from 'vue';
+import { onBeforeUnmount, ref, defineProps, watch, inject } from 'vue';
 import useQueueEvents from '../../composables/useQueueEvents.js';
-const { startListener, stopListener } = useQueueEvents('group', () => null);
+import useSearch from '../../composables/useSearch.js';
-const axios = inject('axios');
 
+const { startListener, stopListener } = useQueueEvents('group', () => null);
+const { search } = useSearch();
+const axios = inject('axios');
 startListener();
 onBeforeUnmount(() => stopListener());
 
-const meta = reactive({
-    activity_id: null,
-    subactivity_id: null,
-    group_id: null,
-});
-
 const props = defineProps({
     activities: {
         type: Object,
@@ -56,38 +52,39 @@ const props = defineProps({
     },
 });
 
-const members = ref({ meta: {}, data: [] });
+const meta = ref({
+    activity_id: null,
+    subactivity_id: null,
+    group_id: null,
+});
+
+const members = ref({
+    hits: [],
+    hitsPerPage: 1,
+    page: 1,
+    totalHits: 0,
+    totalPages: 1,
+});
+
 const selected = ref([]);
 
-async function reload(key, v) {
+watch(meta, async (newValue) => {
-    meta[key] = v;
+    if (!newValue.group_id || !newValue.subactivity_id || !newValue.activity_id) {
-
+        return;
-    reloadReal(1, true);
-}
-
-async function reloadReal(page, update) {
-    if (meta.activity_id && meta.subactivity_id && meta.group_id) {
-        const memberResponse = await axios.post('/api/member/search', {
-            page: page,
-            per_page: 80,
-        });
-        members.value = memberResponse.data;
-
-        if (update) {
-            const membershipResponse = await axios.post('/api/membership/member-list', meta);
-            selected.value = membershipResponse.data;
     }
-    }
+    const results = await search('', [`memberships.with_group = "${newValue.group_id}|${newValue.activity_id}|${newValue.subactivity_id}"`], { page: 1, hitsPerPage: 1000000 });
-}
+    selected.value = results.hits.map(member => member.id);
+}, { deep: true });
 
-async function setActivityId(id) {
+async function reloadReal(page) {
-    meta.subactivity_id = null;
+    const results = await search('', [], { page: page, hitsPerPage: 80 });
-    await reload('activity_id', id);
+    members.value = results;
 }
+reloadReal(1);
 
 async function submit() {
     await axios.post('/api/membership/masslist', {
-        ...meta,
+        ...meta.value,
         members: selected.value,
     });
 }