Add popup for conflict

app/Member/MemberController.php

@@ -105,6 +105,7 @@ class MemberController extends Controller
             'subscriptions' => Subscription::pluck('name', 'id'),
             'data' => new MemberResource($member),
             'mode' => 'edit',
+            'conflict' => '1' === $request->query('conflict', '0'),
         ]);
     }
 

resources/css/buttons.css

@@ -32,10 +32,7 @@
         }
     }
     &.btn-danger {
-        @apply bg-red-700;
-        &:not(.disabled):hover {
-            @apply bg-red-500;
-        }
+        @apply bg-red-400 text-red-100 hover:bg-red-300;
     }
 
     &.label {

resources/js/components/Popup.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="fixed z-40 top-0 left-0 w-full h-full flex items-center justify-center p-6">
+        <div
+            class="rounded-lg p-8 bg-zinc-800 shadow-2xl shadow-black border border-zinc-700 border-solid w-full max-w-xl"
+        >
+            <h3 class="font-semibold text-primary-200 text-xl" v-html="heading"></h3>
+            <div class="text-primary-100">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        heading: {},
+    },
+};
+</script>

resources/js/views/member/VForm.vue

@@ -1,5 +1,21 @@
 <template>
     <form class="flex grow relative" @submit.prevent="submit">
+        <popup heading="Ein Konflikt ist aufgetreten" v-if="conflict === true">
+            <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="#" @click.prevent="resync" class="text-center btn btn-primary">Neu synchronisieren</a>
+                    <a href="#" @click.prevent="forceWrite" class="text-center btn btn-danger">Änderungen schreiben</a>
+                </div>
+            </div>
+        </popup>
+
         <!-- ****************************** menu links ******************************* -->
         <div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
             <div class="grid gap-1">
@@ -236,6 +252,7 @@ export default {
         nationalities: {},
         confessions: {},
         billKinds: {},
+        conflict: {},
     },
 
     methods: {
@@ -250,6 +267,12 @@ export default {
                 ? this.$inertia.post(`/member`, this.inner)
                 : this.$inertia.patch(`/member/${this.inner.id}`, this.inner);
         },
+        resync() {},
+        forceWrite() {},
+    },
+
+    components: {
+        popup: () => import('../../components/Popup.vue'),
     },
 
     computed: {