From bfc4663ba4be0dd9821a4f2f44a86c961005f545 Mon Sep 17 00:00:00 2001
From: Philipp Lang <privat@zoomyboy.de>
Date: Fri, 13 Oct 2023 13:07:16 +0200
Subject: [PATCH] Add loading for memberships sidebar

---
 resources/css/app.css                         |   1 -
 resources/css/sidebar.css                     |   3 -
 resources/js/components/page/Header.vue       |  17 ++-
 resources/js/components/ui/Sidebar.vue        |  20 +++
 resources/js/composables/useApiIndex.js       |  77 +++++++++++
 .../js/views/member/MemberMemberships.vue     | 126 +++++++-----------
 resources/js/views/member/VIndex.vue          | 101 ++++++++------
 resources/js/views/member/index/Actions.vue   |  15 ++-
 8 files changed, 217 insertions(+), 143 deletions(-)
 delete mode 100644 resources/css/sidebar.css
 create mode 100644 resources/js/components/ui/Sidebar.vue
 create mode 100644 resources/js/composables/useApiIndex.js

diff --git a/resources/css/app.css b/resources/css/app.css
index 868d7e18..b6440267 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,6 +7,5 @@
 @import 'layout';
 @import 'buttons';
 @import 'table';
-@import 'sidebar';
 @import 'bool';
 @import 'form';
diff --git a/resources/css/sidebar.css b/resources/css/sidebar.css
deleted file mode 100644
index 40ff451c..00000000
--- a/resources/css/sidebar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.sidebar {
-    @apply fixed w-max shadow-2xl bg-gray-600 right-0 top-0 h-full;
-}
diff --git a/resources/js/components/page/Header.vue b/resources/js/components/page/Header.vue
index a0654323..a12e87e1 100644
--- a/resources/js/components/page/Header.vue
+++ b/resources/js/components/page/Header.vue
@@ -6,7 +6,7 @@
             <slot name="toolbar"></slot>
         </div>
         <div class="flex items-center space-x-2 ml-2">
-            <a href="#" v-if="$attrs.onClose" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
+            <a v-if="$attrs.onClose" href="#" class="btn label btn-primary-light icon" @click.prevent="$emit('close')">
                 <ui-sprite class="w-3 h-3" src="close"></ui-sprite>
             </a>
             <slot name="right"></slot>
@@ -14,14 +14,13 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        title: {
-            default: function () {
-                return '';
-            },
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        default: function () {
+            return '';
         },
     },
-};
+});
 </script>
diff --git a/resources/js/components/ui/Sidebar.vue b/resources/js/components/ui/Sidebar.vue
new file mode 100644
index 00000000..0614d8d9
--- /dev/null
+++ b/resources/js/components/ui/Sidebar.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="fixed w-full w-[80vw] max-w-[30rem] shadow-2xl bg-gray-600 right-0 top-0 h-full flex flex-col group is-bright">
+        <suspense>
+            <slot></slot>
+
+            <template #fallback>
+                <div class="flex flex-col h-full">
+                    <page-header title="Lade …" @close="$emit('close')"> </page-header>
+                    <div class="grow flex items-center justify-center">
+                        <ui-spinner class="border-primary-400 w-32 h-32"></ui-spinner>
+                    </div>
+                </div>
+            </template>
+        </suspense>
+    </div>
+</template>
+
+<script setup>
+defineEmits(['close']);
+</script>
diff --git a/resources/js/composables/useApiIndex.js b/resources/js/composables/useApiIndex.js
new file mode 100644
index 00000000..684f2cf1
--- /dev/null
+++ b/resources/js/composables/useApiIndex.js
@@ -0,0 +1,77 @@
+import {ref, inject, onBeforeUnmount} from 'vue';
+import {router} from '@inertiajs/vue3';
+import useQueueEvents from './useQueueEvents.js';
+
+export function useApiIndex(url, siteName) {
+    const axios = inject('axios');
+    const {startListener, stopListener} = useQueueEvents(siteName, () => reload());
+    const single = ref(null);
+    const inner = {
+        data: ref([]),
+        meta: ref({}),
+    };
+
+    async function reload(resetPage = true) {
+        var params = {
+            page: resetPage ? 1 : inner.meta.value.current_page,
+        };
+
+        var response = (await axios.post(url, params)).data;
+        inner.data.value = response.data;
+        inner.meta.value = response.meta;
+    }
+
+    function create() {
+        single.value = JSON.parse(JSON.stringify(inner.meta.value.default));
+    }
+
+    function edit(model) {
+        single.value = JSON.parse(JSON.stringify(model));
+    }
+
+    async function submit() {
+        single.value.id ? await axios.patch(single.value.links.update, single.value) : await axios.post(inner.meta.value.links.store, single.value);
+        await reload();
+        single.value = null;
+    }
+
+    async function remove(model) {
+        await axios.delete(model.links.destroy);
+        await reload();
+    }
+
+    function can(permission) {
+        return inner.meta.value.can[permission];
+    }
+
+    function requestCallback(successMessage, failureMessage) {
+        return {
+            onSuccess: () => {
+                this.$success(successMessage);
+                reload(false);
+            },
+            onFailure: () => {
+                this.$error(failureMessage);
+                reload(false);
+            },
+            preserveState: true,
+        };
+    }
+
+    startListener();
+    onBeforeUnmount(() => stopListener());
+
+    return {
+        data: inner.data,
+        meta: inner.meta,
+        single,
+        create,
+        edit,
+        reload,
+        can,
+        requestCallback,
+        router,
+        submit,
+        remove,
+    };
+}
diff --git a/resources/js/views/member/MemberMemberships.vue b/resources/js/views/member/MemberMemberships.vue
index cbae2762..b1cac382 100644
--- a/resources/js/views/member/MemberMemberships.vue
+++ b/resources/js/views/member/MemberMemberships.vue
@@ -1,94 +1,62 @@
 <template>
-    <div class="sidebar flex flex-col group is-bright">
-        <page-header title="Mitgliedschaften" @close="$emit('close')">
-            <template #toolbar>
-                <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue Mitgliedschaft</page-toolbar-button>
-                <page-toolbar-button v-if="single !== null" color="primary" icon="undo" @click.prevent="single = null">Zurück</page-toolbar-button>
-            </template>
-        </page-header>
+    <page-header title="Mitgliedschaften" @close="$emit('close')">
+        <template #toolbar>
+            <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue Mitgliedschaft</page-toolbar-button>
+            <page-toolbar-button v-if="single !== null" color="primary" icon="undo" @click.prevent="single = null">Zurück</page-toolbar-button>
+        </template>
+    </page-header>
 
-        <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
-            <f-select id="group_id" v-model="single.group_id" name="group_id" :options="data.meta.groups" label="Gruppierung" required></f-select>
-            <f-select id="activity_id" v-model="single.activity_id" name="activity_id" :options="data.meta.activities" label="Tätigkeit" required></f-select>
-            <f-select
-                v-if="single.activity_id"
-                id="subactivity_id"
-                v-model="single.subactivity_id"
-                name="subactivity_id"
-                :options="data.meta.subactivities[single.activity_id]"
-                label="Untertätigkeit"
-            ></f-select>
-            <f-switch id="has_promise" :model-value="single.promised_at !== null" label="Hat Versprechen" @update:modelValue="single.promised_at = $event ? '2000-02-02' : null"></f-switch>
-            <f-text v-show="single.promised_at !== null" id="promised_at" v-model="single.promised_at" type="date" label="Versprechensdatum" size="sm"></f-text>
-            <button type="submit" class="btn btn-primary">Absenden</button>
-        </form>
+    <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
+        <f-select id="group_id" v-model="single.group_id" name="group_id" :options="meta.groups" label="Gruppierung" required></f-select>
+        <f-select id="activity_id" v-model="single.activity_id" name="activity_id" :options="meta.activities" label="Tätigkeit" required></f-select>
+        <f-select
+            v-if="single.activity_id"
+            id="subactivity_id"
+            v-model="single.subactivity_id"
+            name="subactivity_id"
+            :options="meta.subactivities[single.activity_id]"
+            label="Untertätigkeit"
+        ></f-select>
+        <f-switch id="has_promise" :model-value="single.promised_at !== null" label="Hat Versprechen" @update:modelValue="single.promised_at = $event ? '2000-02-02' : null"></f-switch>
+        <f-text v-show="single.promised_at !== null" id="promised_at" v-model="single.promised_at" type="date" label="Versprechensdatum" size="sm"></f-text>
+        <button type="submit" class="btn btn-primary">Absenden</button>
+    </form>
 
-        <div v-else class="grow">
-            <table class="custom-table custom-table-light custom-table-sm text-sm">
-                <thead>
-                    <th>Tätigkeit</th>
-                    <th>Untertätigkeit</th>
-                    <th>Datum</th>
-                    <th>Aktiv</th>
-                    <th></th>
-                </thead>
+    <div v-else class="grow">
+        <table class="custom-table custom-table-light custom-table-sm text-sm">
+            <thead>
+                <th>Tätigkeit</th>
+                <th>Untertätigkeit</th>
+                <th>Datum</th>
+                <th>Aktiv</th>
+                <th></th>
+            </thead>
 
-                <tr v-for="(membership, index) in data.data" :key="index">
-                    <td v-text="membership.activity_name"></td>
-                    <td v-text="membership.subactivity_name"></td>
-                    <td v-text="membership.human_date"></td>
-                    <td><ui-boolean-display :value="membership.is_active" dark></ui-boolean-display></td>
-                    <td class="flex space-x-1">
-                        <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite src="pencil"></ui-sprite></a>
-                        <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite src="trash"></ui-sprite></a>
-                    </td>
-                </tr>
-            </table>
-        </div>
+            <tr v-for="(membership, index) in data" :key="index">
+                <td v-text="membership.activity_name"></td>
+                <td v-text="membership.subactivity_name"></td>
+                <td v-text="membership.human_date"></td>
+                <td><ui-boolean-display :value="membership.is_active" dark></ui-boolean-display></td>
+                <td class="flex space-x-1">
+                    <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite src="trash"></ui-sprite></a>
+                </td>
+            </tr>
+        </table>
     </div>
 </template>
 
 <script setup>
-import {ref, inject, onBeforeMount} from 'vue';
-const axios = inject('axios');
+defineEmits(['close']);
+import {useApiIndex} from '../../composables/useApiIndex.js';
 
 const props = defineProps({
-    value: {
-        type: Object,
+    url: {
+        type: String,
         required: true,
     },
 });
+const {data, meta, reload, single, create, edit, submit, remove} = useApiIndex(props.url, 'membership');
 
-const single = ref(null);
-const data = ref({
-    meta: {},
-    data: [],
-});
-
-async function reload() {
-    data.value = (await axios.post(props.value.links.membership_index)).data;
-}
-
-onBeforeMount(async () => {
-    await reload();
-});
-
-function create() {
-    single.value = JSON.parse(JSON.stringify(data.value.meta.default));
-}
-
-function edit(membership) {
-    single.value = JSON.parse(JSON.stringify(membership));
-}
-
-async function submit() {
-    single.value.id ? await axios.patch(single.value.links.update, single.value) : await axios.post(data.value.meta.links.store, single.value);
-    await reload();
-    single.value = null;
-}
-
-async function remove(membership) {
-    await axios.delete(membership.links.destroy);
-    await reload();
-}
+await reload();
 </script>
diff --git a/resources/js/views/member/VIndex.vue b/resources/js/views/member/VIndex.vue
index 95f10966..0ea169c5 100644
--- a/resources/js/views/member/VIndex.vue
+++ b/resources/js/views/member/VIndex.vue
@@ -1,23 +1,17 @@
 <template>
     <page-layout page-class="pb-6">
         <template #toolbar>
-            <page-toolbar-button :href="meta.links.create" color="primary" icon="plus">Mitglied
-                anlegen</page-toolbar-button>
-            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.allpayment" color="primary"
-                icon="invoice">Rechnungen erstellen</page-toolbar-button>
-            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.sendpayment" color="info"
-                icon="envelope">Rechnungen versenden</page-toolbar-button>
+            <page-toolbar-button :href="meta.links.create" color="primary" icon="plus">Mitglied anlegen</page-toolbar-button>
+            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.allpayment" color="primary" icon="invoice">Rechnungen erstellen</page-toolbar-button>
+            <page-toolbar-button v-if="hasModule('bill')" :href="meta.links.sendpayment" color="info" icon="envelope">Rechnungen versenden</page-toolbar-button>
         </template>
         <ui-popup v-if="deleting !== null" heading="Mitglied löschen?" @close="deleting.reject()">
             <div>
                 <p class="mt-4">Das Mitglied "{{ deleting.member.fullname }}" löschen?</p>
-                <p class="mt-2">Alle Zuordnungen (Ausbildungen, Rechnungen, Zahlungen, Tätigkeiten) werden ebenfalls
-                    entfernt.</p>
-                <ui-note v-if="!deleting.member.has_nami" class="mt-5" type="warning"> Dieses Mitglied ist nicht in NaMi
-                    vorhanden und wird daher nur in der AdReMa gelöscht werden. </ui-note>
+                <p class="mt-2">Alle Zuordnungen (Ausbildungen, Rechnungen, Zahlungen, Tätigkeiten) werden ebenfalls entfernt.</p>
+                <ui-note v-if="!deleting.member.has_nami" class="mt-5" type="warning"> Dieses Mitglied ist nicht in NaMi vorhanden und wird daher nur in der AdReMa gelöscht werden. </ui-note>
                 <ui-note v-if="deleting.member.has_nami" class="mt-5" type="danger">
-                    Dieses Mitglied ist in NaMi vorhanden und wird daher in NaMi abgemeldet werden. Sofern
-                    "Datenweiterverwendung" eingeschaltet ist, wird das Mitglied auf inaktiv gesetzt.
+                    Dieses Mitglied ist in NaMi vorhanden und wird daher in NaMi abgemeldet werden. Sofern "Datenweiterverwendung" eingeschaltet ist, wird das Mitglied auf inaktiv gesetzt.
                 </ui-note>
                 <div class="grid grid-cols-2 gap-3 mt-6">
                     <a href="#" class="text-center btn btn-danger" @click.prevent="deleting.resolve">Mitglied loschen</a>
@@ -26,22 +20,45 @@
             </div>
         </ui-popup>
         <page-filter breakpoint="xl">
-            <f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm"
-                @update:model-value="setFilter('search', $event)"></f-text>
-            <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände"
-                size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
-            <f-multipleselect id="group_ids" :options="meta.groups" :model-value="getFilter('group_ids')"
-                label="Gruppierungen" size="sm" name="group_ids"
-                @update:model-value="setFilter('group_ids', $event)"></f-multipleselect>
-            <f-select v-show="hasModule('bill')" id="billKinds" name="billKinds" :options="meta.billKinds"
-                :model-value="getFilter('bill_kind')" label="Rechnung" size="sm"
-                @update:model-value="setFilter('bill_kind', $event)"></f-select>
-            <f-multipleselect id="activity_ids" :options="meta.filterActivities" :model-value="getFilter('activity_ids')"
-                label="Tätigkeiten" size="sm" name="activity_ids"
-                @update:model-value="setFilter('activity_ids', $event)"></f-multipleselect>
-            <f-multipleselect id="subactivity_ids" :options="meta.filterSubactivities"
-                :model-value="getFilter('subactivity_ids')" label="Untertätigkeiten" size="sm" name="subactivity_ids"
-                @update:model-value="setFilter('subactivity_ids', $event)"></f-multipleselect>
+            <f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
+            <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände" size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
+            <f-multipleselect
+                id="group_ids"
+                :options="meta.groups"
+                :model-value="getFilter('group_ids')"
+                label="Gruppierungen"
+                size="sm"
+                name="group_ids"
+                @update:model-value="setFilter('group_ids', $event)"
+            ></f-multipleselect>
+            <f-select
+                v-show="hasModule('bill')"
+                id="billKinds"
+                name="billKinds"
+                :options="meta.billKinds"
+                :model-value="getFilter('bill_kind')"
+                label="Rechnung"
+                size="sm"
+                @update:model-value="setFilter('bill_kind', $event)"
+            ></f-select>
+            <f-multipleselect
+                id="activity_ids"
+                :options="meta.filterActivities"
+                :model-value="getFilter('activity_ids')"
+                label="Tätigkeiten"
+                size="sm"
+                name="activity_ids"
+                @update:model-value="setFilter('activity_ids', $event)"
+            ></f-multipleselect>
+            <f-multipleselect
+                id="subactivity_ids"
+                :options="meta.filterSubactivities"
+                :model-value="getFilter('subactivity_ids')"
+                label="Untertätigkeiten"
+                size="sm"
+                name="subactivity_ids"
+                @update:model-value="setFilter('subactivity_ids', $event)"
+            ></f-multipleselect>
             <button class="btn btn-primary label mr-2" @click.prevent="exportMembers">
                 <ui-sprite class="w-3 h-3 xl:mr-2" src="save"></ui-sprite>
                 <span class="hidden xl:inline">Exportieren</span>
@@ -90,14 +107,11 @@
                 <div class="text-xs text-gray-200" v-text="member.full_address"></div>
                 <div class="flex items-center mt-1 space-x-4">
                     <tags :member="member"></tags>
-                    <ui-label v-show="hasModule('bill')" class="text-gray-100 block" :value="member.pending_payment"
-                        fallback=""></ui-label>
+                    <ui-label v-show="hasModule('bill')" class="text-gray-100 block" :value="member.pending_payment" fallback=""></ui-label>
                 </div>
-                <actions class="mt-2" :member="member" @sidebar="openSidebar($event, member)" @remove="remove(member)">
-                </actions>
+                <actions class="mt-2" :member="member" @sidebar="openSidebar($event, member)" @remove="remove(member)"> </actions>
                 <div class="absolute right-0 top-0 h-full flex items-center mr-2">
-                    <i-link v-tooltip="`Details`" :href="member.links.show"><ui-sprite src="chevron"
-                            class="w-6 h-6 text-teal-100 -rotate-90"></ui-sprite></i-link>
+                    <i-link v-tooltip="`Details`" :href="member.links.show"><ui-sprite src="chevron" class="w-6 h-6 text-teal-100 -rotate-90"></ui-sprite></i-link>
                 </div>
             </ui-box>
         </div>
@@ -106,12 +120,11 @@
             <ui-pagination class="mt-4" :value="meta" :only="['data']"></ui-pagination>
         </div>
 
-        <member-payments v-if="single !== null && single.type === 'payment'" :subscriptions="meta.subscriptions"
-            :statuses="meta.statuses" :value="single.model" @close="closeSidebar"></member-payments>
-        <member-memberships v-if="single !== null && single.type === 'membership'" :activities="meta.formActivities"
-            :subactivities="meta.formSubactivities" :value="single.model" @close="closeSidebar"></member-memberships>
-        <member-courses v-if="single !== null && single.type === 'courses'" :courses="meta.courses" :value="single.model"
-            @close="closeSidebar"></member-courses>
+        <ui-sidebar v-if="single !== null" @close="closeSidebar">
+            <member-payments v-if="single.type === 'payment'" :subscriptions="meta.subscriptions" :statuses="meta.statuses" :value="single.model" @close="closeSidebar"></member-payments>
+            <member-memberships v-if="single.type === 'membership'" :url="single.model.links.membership_index" @close="closeSidebar"></member-memberships>
+            <member-courses v-if="single.type === 'courses'" :courses="meta.courses" :value="single.model" @close="closeSidebar"></member-courses>
+        </ui-sidebar>
     </page-layout>
 </template>
 
@@ -121,14 +134,14 @@ import MemberMemberships from './MemberMemberships.vue';
 import MemberCourses from './MemberCourses.vue';
 import Tags from './Tags.vue';
 import Actions from './index/Actions.vue';
-import { indexProps, useIndex } from '../../composables/useIndex.js';
-import { ref, defineProps } from 'vue';
+import {indexProps, useIndex} from '../../composables/useIndex.js';
+import {ref, defineProps} from 'vue';
 
 const single = ref(null);
 const deleting = ref(null);
 
 const props = defineProps(indexProps);
-var { router, data, meta, getFilter, setFilter, filterString } = useIndex(props.data, 'member');
+var {router, data, meta, getFilter, setFilter, filterString} = useIndex(props.data, 'member');
 
 function exportMembers() {
     window.open(`/member-export?filter=${filterString.value}`);
@@ -136,7 +149,7 @@ function exportMembers() {
 
 async function remove(member) {
     new Promise((resolve, reject) => {
-        deleting.value = { resolve, reject, member };
+        deleting.value = {resolve, reject, member};
     })
         .then(() => {
             router.delete(`/member/${member.id}`);
diff --git a/resources/js/views/member/index/Actions.vue b/resources/js/views/member/index/Actions.vue
index fcaf9da3..4201880f 100644
--- a/resources/js/views/member/index/Actions.vue
+++ b/resources/js/views/member/index/Actions.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex space-x-1">
         <i-link v-tooltip="`Details`" :href="member.links.show" class="inline-flex btn btn-primary btn-sm"><ui-sprite src="eye"></ui-sprite></i-link>
-        <i-link v-tooltip="`Bearbeiten`" :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm"><ui-sprite src="pencil"></ui-sprite></i-link>
+        <i-link v-tooltip="`Bearbeiten`" :href="member.links.edit" class="inline-flex btn btn-warning btn-sm"><ui-sprite src="pencil"></ui-sprite></i-link>
         <a v-show="hasModule('bill')" v-tooltip="`Zahlungen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="$emit('sidebar', 'payment')"><ui-sprite src="money"></ui-sprite></a>
         <a v-show="hasModule('courses')" v-tooltip="`Ausbildungen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="$emit('sidebar', 'courses')"
             ><ui-sprite src="course"></ui-sprite
@@ -12,10 +12,11 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        member: {},
-    },
-};
+<script setup>
+defineProps({
+    member: {
+        type: Object,
+        required: true,
+    }
+});
 </script>