Add popup for deleting member

resources/img/svg/danger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><path d="M400.268 175.599a8.53 8.53 0 0 0-7.731-4.932h-101.12l99.797-157.568a8.529 8.529 0 0 0 .265-8.678A8.533 8.533 0 0 0 384.003 0H247.47a8.541 8.541 0 0 0-7.637 4.719l-128 256a8.522 8.522 0 0 0 .375 8.294 8.546 8.546 0 0 0 7.262 4.053h87.748l-95.616 227.089a8.55 8.55 0 0 0 3.413 10.59 8.55 8.55 0 0 0 10.983-1.775l273.067-324.267a8.541 8.541 0 0 0 1.203-9.104z"/></svg>

resources/img/svg/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.577 111.577" style="enable-background:new 0 0 111.577 111.577" xml:space="preserve"><path d="m78.962 99.536-1.559 6.373c-4.677 1.846-8.413 3.251-11.195 4.217-2.785.969-6.021 1.451-9.708 1.451-5.662 0-10.066-1.387-13.207-4.142-3.141-2.766-4.712-6.271-4.712-10.523 0-1.646.114-3.339.351-5.064.239-1.727.619-3.672 1.139-5.846l5.845-20.688c.52-1.981.962-3.858 1.316-5.633.359-1.764.532-3.387.532-4.848 0-2.642-.547-4.49-1.636-5.529-1.089-1.036-3.167-1.562-6.252-1.562-1.511 0-3.064.242-4.647.71-1.59.47-2.949.924-4.09 1.346l1.563-6.378c3.829-1.559 7.489-2.894 10.99-4.002 3.501-1.111 6.809-1.667 9.938-1.667 5.623 0 9.962 1.359 13.009 4.077 3.047 2.72 4.57 6.246 4.57 10.591 0 .899-.1 2.483-.315 4.747-.21 2.269-.601 4.348-1.171 6.239l-5.82 20.605c-.477 1.655-.906 3.547-1.279 5.676-.385 2.115-.569 3.731-.569 4.815 0 2.736.61 4.604 1.833 5.597 1.232.993 3.354 1.487 6.368 1.487 1.415 0 3.025-.251 4.814-.744 1.784-.493 3.085-.926 3.892-1.305zm1.476-86.506c0 3.59-1.353 6.656-4.072 9.177-2.712 2.53-5.98 3.796-9.803 3.796-3.835 0-7.111-1.266-9.854-3.796-2.738-2.522-4.11-5.587-4.11-9.177 0-3.583 1.372-6.654 4.11-9.207C59.447 1.274 62.729 0 66.563 0c3.822 0 7.091 1.277 9.803 3.823 2.721 2.553 4.072 5.625 4.072 9.207z"/></svg>

resources/img/svg/warning.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><path d="M20.64 5.22A2.935 2.935 0 0 0 17.72 2h-3.44a2.935 2.935 0 0 0-2.92 3.22l1.55 15.4a2.913 2.913 0 0 0 2.91 2.64h.36a2.913 2.913 0 0 0 2.91-2.64zM16 24.15a2.925 2.925 0 1 0 2.93 2.92A2.932 2.932 0 0 0 16 24.15z"/></g></svg>

resources/js/components/Ui/Note.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="relative p-3 border-2 rounded-lg flex space-x-2 items-start" :class="types[type].container">
+        <div class="absolute flex items-center justify-center top-0 left-0 mt-[-12px] ml-[-12px] w-8 h-8">
+            <svg class="absolute top-0 left-0 w-full h-full flex-none rotate-[105deg]" viewBox="-16 -16 32 32" :class="types[type].iconContainer">
+                <circle cx="0" cy="0" r="15" stroke-dasharray="62.76896820 31.38448410" stroke-width="2"></circle>
+            </svg>
+            <svg-sprite :src="types[type].icon" class="relative w-4 h-4" :class="types[type].iconClass"></svg-sprite>
+        </div>
+        <div>
+            <h3 class="font-semibold" :class="types[type].heading" v-text="types[type].intro"></h3>
+            <div :class="types[type].body">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function () {
+        return {
+            types: {
+                warning: {
+                    container: 'bg-yellow-800 border-yellow-600',
+                    heading: 'text-yellow-200',
+                    icon: 'warning',
+                    intro: 'Warnung',
+                    body: 'text-yello-100',
+                    iconContainer: 'stroke-yellow-600 fill-yellow-800',
+                    iconClass: 'text-yellow-500',
+                },
+                danger: {
+                    container: 'bg-red-800 border-red-600',
+                    heading: 'text-red-200',
+                    icon: 'danger',
+                    intro: 'Achtung',
+                    body: 'text-red-100',
+                    iconContainer: 'stroke-red-600 fill-red-800',
+                    iconClass: 'text-red-500',
+                },
+                info: {
+                    container: 'bg-blue-800 border-blue-600',
+                    heading: 'text-blue-200',
+                    icon: 'info',
+                    intro: 'Info',
+                    body: 'text-blue-100',
+                    iconContainer: 'stroke-blue-600 fill-blue-800',
+                    iconClass: 'text-blue-500',
+                },
+            },
+        };
+    },
+
+    props: {
+        type: {
+            default: () => 'info',
+            required: false,
+            type: String,
+        },
+    },
+};
+</script>

resources/js/views/activity/VForm.vue

@@ -56,7 +56,7 @@ export default {
     components: {
         'checkboxes-label': () => import('../../components/Form/CheckboxesLabel'),
         'subactivity-form': () => import('./SubactivityForm.vue'),
-        'popup': () => import('../../components/Popup.vue'),
+        'popup': () => import(/* webpackChunkName: "ui" */ '../../components/Ui/Popup.vue'),
     },
 
     methods: {

resources/js/views/activity/VIndex.vue

@@ -59,7 +59,7 @@ export default {
     },
 
     components: {
-        popup: () => import('../../components/Popup.vue'),
+        popup: () => import(/* webpackChunkName: "ui" */ '../../components/Ui/Popup.vue'),
     },
 
     mixins: [indexHelpers],

resources/js/views/member/VForm.vue

@@ -156,7 +156,7 @@ export default {
     },
 
     components: {
-        popup: () => import('../../components/Popup.vue'),
+        popup: () => import(/* webpackChunkName: "ui" */ '../../components/Ui/Popup.vue'),
     },
 
     computed: {

resources/js/views/member/VIndex.vue

@@ -5,6 +5,20 @@
             <toolbar-button :href="data.meta.links.allpayment" color="primary" icon="invoice" v-if="hasModule('bill')">Rechnungen erstellen</toolbar-button>
             <toolbar-button :href="data.meta.links.sendpayment" color="info" icon="envelope" v-if="hasModule('bill')">Rechnungen versenden</toolbar-button>
         </div>
+        <popup heading="Mitglied löschen?" v-if="deleting !== null" @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>
+                <note class="mt-5" type="warning" v-if="!deleting.member.has_nami"> Dieses Mitglied ist nicht in NaMi vorhanden und wird daher nur in der AdReMa gelöscht werden. </note>
+                <note class="mt-5" type="danger" v-if="deleting.member.has_nami">
+                    Dieses Mitglied ist in NaMi vorhanden und wird daher in NaMi abgemeldet werden. Sofern "Datenweiterverwendung" eingeschaltet ist, wird das Mitglied auf inaktiv gesetzt.
+                </note>
+                <div class="grid grid-cols-2 gap-3 mt-6">
+                    <a href="#" @click.prevent="deleting.resolve()" class="text-center btn btn-danger">Mitglied loschen</a>
+                    <a href="#" @click.prevent="deleting.reject()" class="text-center btn btn-primary">Abbrechen</a>
+                </div>
+            </div>
+        </popup>
         <div class="px-6 py-2 flex border-b border-gray-600 items-center space-x-3">
             <f-text :value="getFilter('search')" @input="setFilter('search', $event)" id="search" name="search" label="Suchen …" size="sm"></f-text>
             <f-switch v-show="hasModule('bill')" id="ausstand" @input="setFilter('ausstand', $event)" :items="getFilter('ausstand')" label="Nur Ausstände" size="sm"></f-switch>
@@ -129,6 +143,7 @@ export default {
         return {
             sidebar: null,
             single: null,
+            deleting: null,
         };
     },
 
@@ -141,16 +156,25 @@ export default {
         'age-groups': () => import(/* webpackChunkName: "member" */ './AgeGroups'),
         'tags': () => import(/* webpackChunkName: "member" */ './Tags'),
         'actions': () => import(/* webpackChunkName: "member" */ './index/Actions'),
+        'popup': () => import(/* webpackChunkName: "ui" */ '../../components/Ui/Popup.vue'),
+        'note': () => import(/* webpackChunkName: "ui" */ '../../components/Ui/Note.vue'),
     },
 
     methods: {
         exportMembers() {
             window.open(`/member-export?filter=${this.filterString}`);
         },
-        remove(member) {
+        async remove(member) {
-            if (window.confirm('Mitglied löschen?')) {
+            new Promise((resolve, reject) => {
-                this.$inertia.delete(`/member/${member.id}`);
+                this.deleting = {resolve, reject, member};
-            }
+            })
+                .then(() => {
+                    this.$inertia.delete(`/member/${member.id}`);
+                    this.deleting = null;
+                })
+                .catch(() => {
+                    this.deleting = null;
+                });
         },
         openSidebar(index, name) {
             this.single = index;

tests/Feature/Member/IndexTest.php

@@ -31,6 +31,7 @@ class IndexTest extends TestCase
 
         $this->assertComponent('member/VIndex', $response);
         $this->assertInertiaHas('::firstname::', $response, 'data.data.0.firstname');
+        $this->assertInertiaHas(false, $response, 'data.data.0.has_nami');
         $this->assertInertiaHas('Kölner Str 3, 33333 Hilden', $response, 'data.data.0.full_address');
         $this->assertInertiaHas($group->id, $response, 'data.data.0.group_id');
     }