From a4f084e590f40698a3f24cc3993010523ca17ed5 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 12 Sep 2024 11:14:59 +0200
Subject: [PATCH] --wip-- [skip ci]

---
 docker-compose.yml                          |   4 +
 resources/js/views/member/VForm.vue         | 323 +++++++++++---------
 resources/js/views/member/VIndex.vue        |  28 +-
 resources/js/views/member/index/Actions.vue |   2 +-
 4 files changed, 192 insertions(+), 165 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index aa27c717..50c63b6b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -92,6 +92,8 @@ services:
 
     socketi:
         image: quay.io/soketi/soketi:89604f268623cf799573178a7ba56b7491416bde-16-debian
+        ports:
+            - '6001:6001'
         environment:
             SOKETI_DEFAULT_APP_ID: adremaid
             SOKETI_DEFAULT_APP_KEY: adremakey
@@ -104,6 +106,8 @@ services:
 
     meilisearch:
         image: getmeili/meilisearch:v1.6
+        ports:
+            - '7700:7700'
         volumes:
             - ./data/meilisearch:/meili_data
         env_file:
diff --git a/resources/js/views/member/VForm.vue b/resources/js/views/member/VForm.vue
index b202a9e6..105c6201 100644
--- a/resources/js/views/member/VForm.vue
+++ b/resources/js/views/member/VForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <page-layout>
+    <!--
         <template #toolbar>
             <page-toolbar-button :href="meta.links.index" color="primary" icon="undo">zurück</page-toolbar-button>
             <page-toolbar-button v-if="mode === 'edit'" :href="data.links.show" color="primary" icon="eye">anschauen</page-toolbar-button>
@@ -7,175 +7,194 @@
         <template #right>
             <f-save-button form="memberedit"></f-save-button>
         </template>
-        <form id="memberedit" class="flex grow relative" @submit.prevent="submit">
-            <ui-popup v-if="conflict === true" heading="Ein Konflikt ist aufgetreten">
-                <div>
-                    <p class="mt-4">Dieses Mitglied wurde vorher bereits aktualisiert. Daher könnte ein Update zu Datenverlust führen.</p>
-                    <p class="mt-2">Wir empfehlen, die Daten aus NaMi zunächst neu zu synchronisieren und dann die Änderungen hier in der Adrema erneut vorzunehmen.</p>
-                    <div class="grid grid-cols-2 gap-3 mt-6">
-                        <a href="#" class="text-center btn btn-primary" @click.prevent="resync">Neu synchronisieren</a>
-                        <a href="#" class="text-center btn btn-danger" @click.prevent="forceWrite">Änderungen schreiben</a>
+        -->
+    <form id="memberedit" class="flex grow relative" @submit.prevent="submit">
+        <ui-popup v-if="conflict === true" heading="Ein Konflikt ist aufgetreten">
+            <div>
+                <p class="mt-4">Dieses Mitglied wurde vorher bereits aktualisiert. Daher könnte ein Update zu Datenverlust führen.</p>
+                <p class="mt-2">Wir empfehlen, die Daten aus NaMi zunächst neu zu synchronisieren und dann die Änderungen hier in der Adrema erneut vorzunehmen.</p>
+                <div class="grid grid-cols-2 gap-3 mt-6">
+                    <a href="#" class="text-center btn btn-primary" @click.prevent="resync">Neu synchronisieren</a>
+                    <a href="#" class="text-center btn btn-danger" @click.prevent="forceWrite">Änderungen schreiben</a>
+                </div>
+            </div>
+        </ui-popup>
+
+        <!-- ***************************** Hauptbereich ****************************** -->
+        <div class="grow grid md:grid-cols-2 gap-3">
+            <ui-box heading="Stammdaten">
+                <div class="grid sm:grid-cols-2 gap-3">
+                    <div class="grid grid-cols-2 gap-3">
+                        <f-select id="gender_id" v-model="inner.gender_id" name="gender_id" :options="meta.genders" label="Geschlecht" size="sm"></f-select>
+                        <f-text id="salutation" v-model="inner.salutation" size="sm" label="Anrede"></f-text>
+                    </div>
+                    <f-select id="nationality_id" v-model="inner.nationality_id" :options="meta.nationalities" label="Staatsangehörigkeit" name="nationality_id" size="sm"></f-select>
+                    <f-text id="firstname" v-model="inner.firstname" size="sm" label="Vorname" required></f-text>
+                    <f-text id="lastname" v-model="inner.lastname" size="sm" label="Nachname" required></f-text>
+                    <f-text id="address" v-model="inner.address" size="sm" label="Adresse"></f-text>
+                    <f-text id="further_address" v-model="inner.further_address" size="sm" label="Adresszusatz"></f-text>
+                    <f-text id="zip" v-model="inner.zip" size="sm" label="PLZ"></f-text>
+                    <f-text id="location" v-model="inner.location" size="sm" label="Ort"></f-text>
+                    <f-text id="birthday" v-model="inner.birthday" type="date" size="sm" label="Geburtsdatum"></f-text>
+                    <f-select id="region_id" v-model="inner.region_id" :options="meta.regions" name="region_id" label="Bundesland" size="sm"></f-select>
+                    <f-select id="country_id" v-model="inner.country_id" :options="meta.countries" label="Land" name="country_id" size="sm" required></f-select>
+                    <f-text id="other_country" v-model="inner.other_country" label="Andere Staatsangehörigkeit" size="sm"></f-text>
+                </div>
+            </ui-box>
+            <ui-box heading="Kontakt">
+                <div class="grid gap-3 sm:grid-cols-2">
+                    <f-text id="main_phone" v-model="inner.main_phone" size="sm" label="Telefon (Eltern)"></f-text>
+                    <f-text id="mobile_phone" v-model="inner.mobile_phone" size="sm" label="Handy (Eltern)"></f-text>
+                    <f-text id="work_phone" v-model="inner.work_phone" size="sm" label="Tel geschäftlich (Eltern)"></f-text>
+                    <f-text id="children_phone" v-model="inner.children_phone" size="sm" label="Telefon (Kind)"></f-text>
+                    <f-text id="email" v-model="inner.email" size="sm" label="E-Mail"></f-text>
+                    <f-text id="email_parents" v-model="inner.email_parents" size="sm" label="E-Mail eltern"></f-text>
+                    <f-text id="fax" v-model="inner.fax" size="sm" label="Fax"></f-text>
+                    <f-textarea id="letter_address" v-model="inner.letter_address" class="sm:col-span-2" :rows="3" label="Brief-Adresse" size="sm"></f-textarea>
+                </div>
+            </ui-box>
+            <ui-box heading="System">
+                <div class="grid gap-3">
+                    <f-select id="bill_kind" v-model="inner.bill_kind" :options="meta.billKinds" label="Rechnung versenden über" name="bill_kind" size="sm"></f-select>
+                    <f-select id="subscription_id" v-model="inner.subscription_id" :options="meta.subscriptions" label="Beitrag" name="subscription_id" size="sm"></f-select>
+                    <f-switch id="has_nami" v-model="inner.has_nami" name="has_nami" size="sm" label="In Nami eintragen"></f-switch>
+                    <f-switch id="send_newspaper" v-model="inner.send_newspaper" name="send_newspaper" label="Mittendrin versenden" size="sm"></f-switch>
+                    <f-text id="joined_at" v-model="inner.joined_at" class="sm:col-span-2" type="date" label="Eintrittsdatum" size="sm" required></f-text>
+                    <f-textarea id="comment" v-model="inner.comment" :rows="3" class="col-span-2" label="Kommentar" size="sm"></f-textarea>
+                    <div v-if="mode === 'create' || (original.has_nami === false && inner.has_nami === true)" class="contents">
+                        <f-select
+                            id="first_activity_id"
+                            v-model="inner.first_activity_id"
+                            :options="meta.formCreateActivities"
+                            label="Erste Tätigkeit"
+                            name="first_activity_id"
+                            size="sm"
+                            required
+                        ></f-select>
+                        <f-select
+                            v-if="inner.first_activity_id"
+                            id="first_subactivity_id"
+                            v-model="inner.first_subactivity_id"
+                            :options="meta.formCreateSubactivities[inner.first_activity_id]"
+                            label="Erste Untertätigkeit"
+                            name="first_subactivity_id"
+                            size="sm"
+                            required
+                        ></f-select>
                     </div>
                 </div>
-            </ui-popup>
-
-            <!-- ***************************** Hauptbereich ****************************** -->
-            <div class="grow grid md:grid-cols-2 gap-3 p-3">
-                <ui-box heading="Stammdaten">
-                    <div class="grid sm:grid-cols-2 gap-3">
-                        <div class="grid grid-cols-2 gap-3">
-                            <f-select id="gender_id" v-model="inner.gender_id" name="gender_id" :options="meta.genders" label="Geschlecht" size="sm"></f-select>
-                            <f-text id="salutation" v-model="inner.salutation" size="sm" label="Anrede"></f-text>
+            </ui-box>
+            <ui-box heading="Prävention">
+                <div class="grid sm:grid-cols-[minmax(min-content,max-content)_minmax(min-content,max-content)] gap-2">
+                    <div class="grid grid-cols-[minmax(min-content,max-content)_8rem] gap-1">
+                        <f-switch id="has_efz" v-model="hasEfz" name="has_efz" size="sm" label="Führungszeugnis eingesehen"></f-switch>
+                        <div>
+                            <f-text v-if="inner.efz !== null" id="efz" v-model="inner.efz" type="date" label="am" size="sm"></f-text>
                         </div>
-                        <f-select id="nationality_id" v-model="inner.nationality_id" :options="meta.nationalities" label="Staatsangehörigkeit" name="nationality_id" size="sm"></f-select>
-                        <f-text id="firstname" v-model="inner.firstname" size="sm" label="Vorname" required></f-text>
-                        <f-text id="lastname" v-model="inner.lastname" size="sm" label="Nachname" required></f-text>
-                        <f-text id="address" v-model="inner.address" size="sm" label="Adresse"></f-text>
-                        <f-text id="further_address" v-model="inner.further_address" size="sm" label="Adresszusatz"></f-text>
-                        <f-text id="zip" v-model="inner.zip" size="sm" label="PLZ"></f-text>
-                        <f-text id="location" v-model="inner.location" size="sm" label="Ort"></f-text>
-                        <f-text id="birthday" v-model="inner.birthday" type="date" size="sm" label="Geburtsdatum"></f-text>
-                        <f-select id="region_id" v-model="inner.region_id" :options="meta.regions" name="region_id" label="Bundesland" size="sm"></f-select>
-                        <f-select id="country_id" v-model="inner.country_id" :options="meta.countries" label="Land" name="country_id" size="sm" required></f-select>
-                        <f-text id="other_country" v-model="inner.other_country" label="Andere Staatsangehörigkeit" size="sm"></f-text>
-                    </div>
-                </ui-box>
-                <ui-box heading="Kontakt">
-                    <div class="grid gap-3 sm:grid-cols-2">
-                        <f-text id="main_phone" v-model="inner.main_phone" size="sm" label="Telefon (Eltern)"></f-text>
-                        <f-text id="mobile_phone" v-model="inner.mobile_phone" size="sm" label="Handy (Eltern)"></f-text>
-                        <f-text id="work_phone" v-model="inner.work_phone" size="sm" label="Tel geschäftlich (Eltern)"></f-text>
-                        <f-text id="children_phone" v-model="inner.children_phone" size="sm" label="Telefon (Kind)"></f-text>
-                        <f-text id="email" v-model="inner.email" size="sm" label="E-Mail"></f-text>
-                        <f-text id="email_parents" v-model="inner.email_parents" size="sm" label="E-Mail eltern"></f-text>
-                        <f-text id="fax" v-model="inner.fax" size="sm" label="Fax"></f-text>
-                        <f-textarea id="letter_address" v-model="inner.letter_address" class="sm:col-span-2" :rows="3" label="Brief-Adresse" size="sm"></f-textarea>
-                    </div>
-                </ui-box>
-                <ui-box heading="System">
-                    <div class="grid gap-3">
-                        <f-select id="bill_kind" v-model="inner.bill_kind" :options="meta.billKinds" label="Rechnung versenden über" name="bill_kind" size="sm"></f-select>
-                        <f-select id="subscription_id" v-model="inner.subscription_id" :options="meta.subscriptions" label="Beitrag" name="subscription_id" size="sm"></f-select>
-                        <f-switch id="has_nami" v-model="inner.has_nami" name="has_nami" size="sm" label="In Nami eintragen"></f-switch>
-                        <f-switch id="send_newspaper" v-model="inner.send_newspaper" name="send_newspaper" label="Mittendrin versenden" size="sm"></f-switch>
-                        <f-text id="joined_at" v-model="inner.joined_at" class="sm:col-span-2" type="date" label="Eintrittsdatum" size="sm" required></f-text>
-                        <f-textarea id="comment" v-model="inner.comment" :rows="3" class="col-span-2" label="Kommentar" size="sm"></f-textarea>
-                        <div v-if="mode === 'create' || (original.has_nami === false && inner.has_nami === true)" class="contents">
-                            <f-select
-                                id="first_activity_id"
-                                v-model="inner.first_activity_id"
-                                :options="meta.formCreateActivities"
-                                label="Erste Tätigkeit"
-                                name="first_activity_id"
+                        <f-switch id="has_ps" v-model="hasPs" name="has_ps" size="sm" label="Hat Präventionsschulung"></f-switch>
+                        <div>
+                            <f-text v-if="inner.ps_at !== null" id="ps_at" v-model="inner.ps_at" type="date" label="am" size="sm"></f-text>
+                        </div>
+                        <f-switch id="has_more_ps" v-model="hasMorePs" name="has_more_ps" size="sm" label="Hat Vertiefungsschulung"></f-switch>
+                        <div>
+                            <f-text v-if="inner.more_ps_at !== null" id="more_ps_at" v-model="inner.more_ps_at" type="date" label="am" size="sm"></f-text>
+                        </div>
+                        <f-switch id="is_recertified" v-model="isRecertified" name="is_recertified" size="sm" label="Hat Rezertifizierung"></f-switch>
+                        <div>
+                            <f-text v-if="inner.recertified_at !== null" id="recertified_at" v-model="inner.recertified_at" type="date" label="am" size="sm"></f-text>
+                        </div>
+                        <f-switch id="has_without_education" v-model="hasWithoutEducation" name="has_without_education" label="Einsatz ohne Schulung" size="sm"></f-switch>
+                        <div>
+                            <f-text
+                                v-if="inner.without_education_at !== null"
+                                id="without_education_at"
+                                v-model="inner.without_education_at"
+                                name="without_education_at"
+                                type="date"
+                                label="am"
                                 size="sm"
-                                required
-                            ></f-select>
-                            <f-select
-                                v-if="inner.first_activity_id"
-                                id="first_subactivity_id"
-                                v-model="inner.first_subactivity_id"
-                                :options="meta.formCreateSubactivities[inner.first_activity_id]"
-                                label="Erste Untertätigkeit"
-                                name="first_subactivity_id"
-                                size="sm"
-                                required
-                            ></f-select>
+                            ></f-text>
+                        </div>
+                        <f-switch id="has_without_efz" v-model="hasWithoutEfz" name="has_without_efz" size="sm" label="Einsatz ohne EFZ"></f-switch>
+                        <div>
+                            <f-text v-if="inner.without_efz_at !== null" id="without_efz_at" v-model="inner.without_efz_at" type="date" label="am" size="sm"></f-text>
                         </div>
                     </div>
-                </ui-box>
-                <ui-box heading="Prävention">
-                    <div class="grid sm:grid-cols-[minmax(min-content,max-content)_minmax(min-content,max-content)] gap-2">
-                        <div class="grid grid-cols-[minmax(min-content,max-content)_8rem] gap-1">
-                            <f-switch id="has_efz" v-model="hasEfz" name="has_efz" size="sm" label="Führungszeugnis eingesehen"></f-switch>
-                            <div>
-                                <f-text v-if="inner.efz !== null" id="efz" v-model="inner.efz" type="date" label="am" size="sm"></f-text>
-                            </div>
-                            <f-switch id="has_ps" v-model="hasPs" name="has_ps" size="sm" label="Hat Präventionsschulung"></f-switch>
-                            <div>
-                                <f-text v-if="inner.ps_at !== null" id="ps_at" v-model="inner.ps_at" type="date" label="am" size="sm"></f-text>
-                            </div>
-                            <f-switch id="has_more_ps" v-model="hasMorePs" name="has_more_ps" size="sm" label="Hat Vertiefungsschulung"></f-switch>
-                            <div>
-                                <f-text v-if="inner.more_ps_at !== null" id="more_ps_at" v-model="inner.more_ps_at" type="date" label="am" size="sm"></f-text>
-                            </div>
-                            <f-switch id="is_recertified" v-model="isRecertified" name="is_recertified" size="sm" label="Hat Rezertifizierung"></f-switch>
-                            <div>
-                                <f-text v-if="inner.recertified_at !== null" id="recertified_at" v-model="inner.recertified_at" type="date" label="am" size="sm"></f-text>
-                            </div>
-                            <f-switch id="has_without_education" v-model="hasWithoutEducation" name="has_without_education" label="Einsatz ohne Schulung" size="sm"></f-switch>
-                            <div>
-                                <f-text
-                                    v-if="inner.without_education_at !== null"
-                                    id="without_education_at"
-                                    v-model="inner.without_education_at"
-                                    name="without_education_at"
-                                    type="date"
-                                    label="am"
-                                    size="sm"
-                                ></f-text>
-                            </div>
-                            <f-switch id="has_without_efz" v-model="hasWithoutEfz" name="has_without_efz" size="sm" label="Einsatz ohne EFZ"></f-switch>
-                            <div>
-                                <f-text v-if="inner.without_efz_at !== null" id="without_efz_at" v-model="inner.without_efz_at" type="date" label="am" size="sm"></f-text>
-                            </div>
-                        </div>
-                        <div class="grid gap-1">
-                            <f-switch id="has_svk" v-model="inner.has_svk" name="has_svk" size="sm" label="SVK unterschrieben"></f-switch>
-                            <f-switch id="has_vk" v-model="inner.has_vk" name="has_vk" size="sm" label="Verhaltenskodex unterschrieben"></f-switch>
-                            <f-switch id="multiply_pv" v-model="inner.multiply_pv" name="multiply_pv" label="Multiplikator*in Präventionsschulung" size="sm"></f-switch>
-                            <f-switch id="multiply_more_pv" v-model="inner.multiply_more_pv" name="multiply_more_pv" label="Multiplikator*in Vertiefungsschulung" size="sm"></f-switch>
-                        </div>
+                    <div class="grid gap-1">
+                        <f-switch id="has_svk" v-model="inner.has_svk" name="has_svk" size="sm" label="SVK unterschrieben"></f-switch>
+                        <f-switch id="has_vk" v-model="inner.has_vk" name="has_vk" size="sm" label="Verhaltenskodex unterschrieben"></f-switch>
+                        <f-switch id="multiply_pv" v-model="inner.multiply_pv" name="multiply_pv" label="Multiplikator*in Präventionsschulung" size="sm"></f-switch>
+                        <f-switch id="multiply_more_pv" v-model="inner.multiply_more_pv" name="multiply_more_pv" label="Multiplikator*in Vertiefungsschulung" size="sm"></f-switch>
                     </div>
-                </ui-box>
-            </div>
-        </form>
-    </page-layout>
+                </div>
+            </ui-box>
+        </div>
+    </form>
 </template>
 
-<script>
+<script setup>
+import {ref, computed, inject} from 'vue';
+const axios = inject('axios');
+
 function issetComputed(val) {
     return {
         set(v) {
-            this.inner[val] = v ? '' : null;
+            inner.value[val] = v ? '' : null;
         },
         get() {
-            return this.inner[val] !== null;
+            return inner.value[val] !== null;
         },
     };
 }
 
-export default {
-    props: {
-        mode: {},
-        data: {},
-        conflict: {},
-        meta: {},
-    },
-    data: function () {
-        return {
-            original: this.mode === 'create' ? {...this.meta.default} : {...this.data},
-            inner: this.mode === 'create' ? {...this.meta.default} : {...this.data},
-            active: 0,
-        };
-    },
+const props = defineProps({
+    mode: {},
+    data: {},
+    conflict: {},
+    model: {},
+    meta: {},
+});
 
-    methods: {
-        submit() {
-            this.mode === 'create' ? this.$inertia.post(`/member`, this.inner) : this.$inertia.patch(`/member/${this.inner.id}`, this.inner);
-        },
-        resync() {
-            this.$inertia.get(`/member/${this.inner.id}/resync`);
-        },
-        forceWrite() {},
-    },
+const inner = ref({});
+const original = ref({});
+const activeTab = ref(0);
+const tabs = ref([{title: 'Kontakt'}, {title: 'System'}, {title: 'Prävention'}]);
 
-    computed: {
-        hasEfz: issetComputed('efz'),
-        hasPs: issetComputed('ps_at'),
-        hasMorePs: issetComputed('more_ps_at'),
-        isRecertified: issetComputed('recertified_at'),
-        hasWithoutEfz: issetComputed('without_efz_at'),
-        hasWithoutEducation: issetComputed('without_education_at'),
-    },
-};
+async function load() {
+    if (props.model.id) {
+        const response = await axios.get(props.model.links.show);
+        inner.value = response.data.data;
+    } else {
+        inner.value = props.model;
+        original.value = props.model;
+    }
+}
+
+await load();
+
+// data: function () {
+//     return {
+//         original: this.mode === 'create' ? {...this.meta.default} : {...this.data},
+//         inner: this.mode === 'create' ? {...this.meta.default} : {...this.data},
+//     };
+// },
+//
+// methods: {
+//     submit() {
+//         this.mode === 'create' ? this.$inertia.post(`/member`, this.inner) : this.$inertia.patch(`/member/${this.inner.id}`, this.inner);
+//     },
+//     resync() {
+//         this.$inertia.get(`/member/${this.inner.id}/resync`);
+//     },
+//     forceWrite() {},
+// },
+//
+// computed: {
+const hasEfz = computed(issetComputed('efz'));
+const hasPs = computed(issetComputed('ps_at'));
+const hasMorePs = computed(issetComputed('more_ps_at'));
+const isRecertified = computed(issetComputed('recertified_at'));
+const hasWithoutEfz = computed(issetComputed('without_efz_at'));
+const hasWithoutEducation = computed(issetComputed('without_education_at'));
+// },
 </script>
diff --git a/resources/js/views/member/VIndex.vue b/resources/js/views/member/VIndex.vue
index 5901e236..dde14699 100644
--- a/resources/js/views/member/VIndex.vue
+++ b/resources/js/views/member/VIndex.vue
@@ -1,8 +1,11 @@
 <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 color="primary" icon="plus" @click="create">Mitglied anlegen</page-toolbar-button>
         </template>
+        <ui-popup v-if="single !== null" heading="Mitglied erstellen" full @close="cancel">
+            <v-form :meta="meta" :model="single"></v-form>
+        </ui-popup>
         <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>
@@ -109,7 +112,7 @@
                     <ui-label :value="member.pending_payment" fallback="---"></ui-label>
                 </td>
                 <td>
-                    <actions :member="member" @sidebar="openSidebar($event, member)" @remove="remove(member)"></actions>
+                    <actions :member="member" @sidebar="openSidebar($event, member)" @edit="edit(member)" @remove="remove(member)"></actions>
                 </td>
             </tr>
         </table>
@@ -124,7 +127,7 @@
                     <tags :member="member"></tags>
                     <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)" @edit="edit(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>
                 </div>
@@ -135,10 +138,10 @@
             <ui-pagination class="mt-4" :value="meta" @reload="reloadPage"></ui-pagination>
         </div>
 
-        <ui-sidebar v-if="single !== null" @close="closeSidebar">
-            <member-invoice-positions v-if="single.type === 'invoicePosition'" :url="single.model.links.invoiceposition_index" @close="closeSidebar"></member-invoice-positions>
-            <member-memberships v-if="single.type === 'membership'" :url="single.model.links.membership_index" @close="closeSidebar"></member-memberships>
-            <member-courses v-if="single.type === 'courses'" :url="single.model.links.course_index" @close="closeSidebar"></member-courses>
+        <ui-sidebar v-if="sidebar !== null" @close="closeSidebar">
+            <member-invoice-positions v-if="sidebar.type === 'invoicePosition'" :url="sidebar.model.links.invoiceposition_index" @close="closeSidebar"></member-invoice-positions>
+            <member-memberships v-if="sidebar.type === 'membership'" :url="sidebar.model.links.membership_index" @close="closeSidebar"></member-memberships>
+            <member-courses v-if="sidebar.type === 'courses'" :url="sidebar.model.links.course_index" @close="closeSidebar"></member-courses>
         </ui-sidebar>
     </page-layout>
 </template>
@@ -149,15 +152,16 @@ 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 VForm from './VForm.vue';
+import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import { ref, defineProps } from 'vue';
 
-const single = ref(null);
+const sidebar = ref(null);
 const deleting = ref(null);
 const membershipFilters = ref(null);
 
 const props = defineProps(indexProps);
-var { router, data, meta, getFilter, setFilter, filterString, reloadPage } = useIndex(props.data, 'member');
+var { router, data, meta, getFilter, setFilter, filterString, reloadPage, edit, create, single, cancel } = useIndex(props.data, 'member');
 
 function exportMembers() {
     window.open(`/member-export?filter=${filterString.value}`);
@@ -175,12 +179,12 @@ async function remove(member) {
 }
 
 function openSidebar(type, model) {
-    single.value = {
+    sidebar.value = {
         type: type,
         model: model,
     };
 }
 function closeSidebar() {
-    single.value = null;
+    sidebar.value = null;
 }
 </script>
diff --git a/resources/js/views/member/index/Actions.vue b/resources/js/views/member/index/Actions.vue
index 0f45815f..26cab595 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.links.edit" class="inline-flex btn btn-warning btn-sm"><ui-sprite src="pencil"></ui-sprite></i-link>
+        <a v-tooltip="`Bearbeiten`" class="inline-flex btn btn-warning btn-sm" @click.prevent="$emit('edit')"><ui-sprite src="pencil"></ui-sprite></a>
         <a v-show="hasModule('bill')" v-tooltip="`Zahlungen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="$emit('sidebar', 'invoicePosition')"
             ><ui-sprite src="money"></ui-sprite
         ></a>