config/scout.php

@@ -141,18 +141,12 @@ 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

@@ -1,88 +0,0 @@
-<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,39 +5,42 @@
         </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.activity_id"
+                    :model-value="meta.subactivity_id"
-                    :options="props.activities"
+                    :options="props.subactivities[meta.activity_id]"
-                    label="Tätigkeit"
+                    name="subactivity_id"
+                    label="Untertätigkeit"
                     size="sm"
-                    name="activity_id"
+                    @update:model-value="reload('subactivity_id', $event)"
-                    @update:model-value="meta = {...meta, activity_id: $event, subactivity_id: null}"
                 ></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 :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.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id"></f-select>
-                <f-text id="search_text" v-model="searchText" label="Suchen …" size="sm" name="search_text"></f-text>
             </div>
             <div class="grid gap-2 grid-cols-6 mt-4">
-                <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>
+                <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>
             </div>
-            <div class="px-6">
+            <div v-if="members.meta.last_page" class="px-6">
-                <ui-search-pagination class="mt-4" :value="members" @reload="reloadReal($event)"></ui-search-pagination>
+                <ui-pagination class="mt-4" :value="members.meta" :only="['data']" @reload="reloadReal($event, false)"></ui-pagination>
             </div>
         </form>
     </page-layout>
 </template>
 
 <script lang="js" setup>
-import { onBeforeUnmount, ref, defineProps, watch, inject } from 'vue';
+import { onBeforeUnmount, ref, defineProps, reactive, inject } from 'vue';
 import useQueueEvents from '../../composables/useQueueEvents.js';
-import useSearch from '../../composables/useSearch.js';
-
 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,
@@ -53,44 +56,38 @@ const props = defineProps({
     },
 });
 
-const searchText = ref('');
+const members = ref({ meta: {}, data: [] });
-watch(searchText, (newValue) => {
-    reloadReal(1);
-});
-
-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([]);
 
-watch(meta, async (newValue) => {
+async function reload(key, v) {
-    if (!newValue.group_id || !newValue.subactivity_id || !newValue.activity_id) {
+    meta[key] = v;
-        return;
-    }
-    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 reloadReal(page) {
+    reloadReal(1, true);
-    const results = await search(searchText.value, [], { page: page, hitsPerPage: 80 });
+}
-    members.value = results;
+
+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;
+        }
+    }
+}
+
+async function setActivityId(id) {
+    meta.subactivity_id = null;
+    await reload('activity_id', id);
 }
-reloadReal(1);
 
 async function submit() {
     await axios.post('/api/membership/masslist', {
-        ...meta.value,
+        ...meta,
         members: selected.value,
     });
 }