Add Popup confirm before copying a form

package-lock.json

@@ -27,6 +27,7 @@
                 "pusher-js": "^8.3.0",
                 "svg-sprite": "^2.0.2",
                 "typescript-eslint": "^8.34.0",
+                "uuid": "^11.1.0",
                 "vite": "^4.5.2",
                 "vue": "^3.3.4",
                 "vue-toastification": "^2.0.0-rc.5",
@@ -4830,6 +4831,18 @@
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
         },
+        "node_modules/uuid": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+            "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+            "funding": [
+                "https://github.com/sponsors/broofa",
+                "https://github.com/sponsors/ctavan"
+            ],
+            "bin": {
+                "uuid": "dist/esm/bin/uuid"
+            }
+        },
         "node_modules/vinyl": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",

package.json

@@ -44,6 +44,7 @@
         "pusher-js": "^8.3.0",
         "svg-sprite": "^2.0.2",
         "typescript-eslint": "^8.34.0",
+        "uuid": "^11.1.0",
         "vite": "^4.5.2",
         "vue": "^3.3.4",
         "vue-toastification": "^2.0.0-rc.5",

resources/js/components/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     PageFullLayout: typeof import('@/components/page/FullLayout.vue')['default']
     PageHeader: typeof import('@/components/page/Header.vue')['default']
     PageLayout: typeof import('@/components/page/Layout.vue')['default']
+    PagePopups: typeof import('@/components/page/Popups.vue')['default']
     PageSearchModal: typeof import('@/components/page/SearchModal.vue')['default']
     PageTitle: typeof import('@/components/page/Title.vue')['default']
     PageToolbarButton: typeof import('@/components/page/ToolbarButton.vue')['default']

resources/js/components/page/Popups.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <ui-popup v-for="(popup, index) in swal.popups" :key="index" :heading="popup.title">
+            <div class="space-y-4 mt-4">
+                <div v-text="popup.body" />
+                <div class="space-x-4">
+                    <ui-button type="button" class="btn-danger" @click.prevent="popup.resolve(popup.id)">{{ popup.confirmButton }}</ui-button>
+                    <ui-button type="button" class="btn-success" @click.prevent="popup.reject(popup.id)">{{ popup.cancelButton }}</ui-button>
+                </div>
+            </div>
+        </ui-popup>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import useSwal from '@/stores/swalStore.ts';
+const swal = useSwal();
+</script>

resources/js/components/ui/Button.vue

@@ -1,24 +1,22 @@
 <template>
     <button v-bind="$attrs" class="btn btn-primary relative group">
         <div :class="{hidden: !isLoading, flex: isLoading}" class="absolute items-center top-0 h-full left-0 ml-2">
-            <ui-spinner class="border-primary-400 w-6 h-6 group-hover:border-primary-200"></ui-spinner>
+            <ui-spinner class="border-primary-400 w-6 h-6 group-hover:border-primary-200" />
         </div>
-        <slot></slot>
+        <slot />
     </button>
 </template>
 
 <script>
-import {menuStore} from '../../stores/menuStore.js';
-
 export default {
-    data: function () {
-        return {};
-    },
     props: {
         isLoading: {
             type: Boolean,
             default: false,
         },
     },
+    data: function () {
+        return {};
+    },
 };
 </script>

resources/js/components/ui/Popup.vue

@@ -1,23 +1,22 @@
 <template>
     <div class="fixed z-40 top-0 left-0 w-full h-full flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm">
-        <div
+        <div class="relative rounded-lg p-8 bg-zinc-800 shadow-2xl shadow-black border border-zinc-700 border-solid w-full max-h-full flex flex-col overflow-auto"
-            class="relative rounded-lg p-8 bg-zinc-800 shadow-2xl shadow-black border border-zinc-700 border-solid w-full max-h-full flex flex-col overflow-auto"
              :class="full ? 'h-full' : innerWidth"
         >
             <div class="absolute top-0 right-0 mt-6 mr-6 flex space-x-6">
-                <slot name="actions"></slot>
+                <slot name="actions" />
                 <a href="#" @click.prevent="$emit('close')">
-                    <ui-sprite src="close" class="text-zinc-400 w-6 h-6"></ui-sprite>
+                    <ui-sprite src="close" class="text-zinc-400 w-6 h-6" />
                 </a>
             </div>
-            <h3 v-if="heading" class="font-semibold text-primary-200 text-xl" v-html="heading"></h3>
+            <h3 v-if="heading" class="font-semibold text-primary-200 text-xl" v-html="heading" />
             <div class="text-primary-100 group is-popup grow flex flex-col">
                 <suspense>
                     <div>
-                        <slot></slot>
+                        <slot />
                     </div>
                     <template #fallback>
-                        <ui-loading></ui-loading>
+                        <ui-loading />
                     </template>
                 </suspense>
             </div>

resources/js/layouts/AppLayout.vue

@@ -1,9 +1,8 @@
 <template>
-    <v-notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></v-notification>
+    <v-notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3" />
 
     <!-- ******************************** Sidebar ******************************** -->
-    <div
+    <div class="fixed z-40 bg-gray-800 p-6 w-56 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between transition-all"
-        class="fixed z-40 bg-gray-800 p-6 w-56 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between transition-all"
          :class="{
              '-left-[14rem]': !menuStore.isShifted,
              'left-0': menuStore.isShifted,
@@ -29,13 +28,15 @@
             <v-link icon="logout" href="/logout" @click.prevent="$inertia.post('/logout')">Abmelden</v-link>
         </div>
         <a v-if="menuStore.hideable" href="#" class="absolute right-0 top-0 mr-2 mt-2" @click.prevent="menuStore.hide()">
-            <ui-sprite src="close" class="w-5 h-5 text-gray-300"></ui-sprite>
+            <ui-sprite src="close" class="w-5 h-5 text-gray-300" />
         </a>
     </div>
 
-    <slot></slot>
+    <page-popups />
 
-    <page-search-modal v-if="searchVisible" @close="searchVisible = false"></page-search-modal>
+    <slot />
+
+    <page-search-modal v-if="searchVisible" @close="searchVisible = false" />
 </template>
 
 <script>

resources/js/stores/menuStore.js

@@ -1,5 +1,5 @@
-import {defineStore} from 'pinia';
+import { defineStore } from 'pinia';
-import {router} from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
 
 export const menuStore = defineStore('menu', {
     state: () => ({

resources/js/stores/swalStore.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { v4 as uuidv4 } from 'uuid';
+
+
+interface Popup {
+    id: string;
+    title: string;
+    body: string;
+    confirmButton: string;
+    cancelButton: string;
+    resolve: (id: string) => void;
+    reject: (id: string) => void;
+}
+
+export default defineStore('swal', {
+    state: () => ({
+        popups: [] as Popup[],
+    }),
+    actions: {
+        confirm(title: string, body: string): Promise<void> {
+            return new Promise((resolve, reject) =>  {
+                new Promise<string>((resolve, reject) => {
+                    this.popups.push({
+                        title,
+                        body,
+                        confirmButton: 'Okay',
+                        cancelButton: 'Abbrechen',
+                        resolve,
+                        reject,
+                        id: uuidv4(),
+                    });
+                }).then((id) => {
+                    this.remove(id);
+                    resolve();
+                }).catch((id) => {
+                    this.remove(id);
+                    reject();
+                });
+            });
+        },
+
+        remove(id: string) {
+            this.popups = this.popups.filter(p => p.id !== id);
+        }
+    },
+});

resources/js/views/form/Index.vue

@@ -198,6 +198,7 @@ import Participants from './Participants.vue';
 import Conditions from './Conditions.vue';
 import ConditionsForm from './ConditionsForm.vue';
 import { useToast } from 'vue-toastification';
+import useSwal from '@/stores/swalStore.ts';
 
 const props = defineProps(indexProps);
 const { meta, data, reloadPage, reload, create, single, edit, cancel, submit, remove, getFilter, setFilter } = useIndex(props.data, 'form');
@@ -212,6 +213,7 @@ const active = ref(0);
 const activeMailTab = ref(0);
 const tabs = [{ title: 'Allgemeines' }, { title: 'Beschreibung' }, { title: 'Formular' }, { title: 'Bestätigungs-E-Mail' }, { title: 'Export' }, { title: 'Prävention' }];
 const mailTabs = [{ title: 'vor Daten' }, { title: 'nach Daten' }];
+const swal = useSwal();
 
 const allFields = computed(() => {
     if (!single.value) {
@@ -229,6 +231,7 @@ const allFields = computed(() => {
 });
 
 async function onCopy(form) {
+    await swal.confirm('Diese Veranstaltung kopieren?', 'Nach dem Kopieren wird die Veranstaltung auf inaktiv gesetzt. Bitte aktiviere den Filter "inaktive zeigen", um die kopierte Veranstaltung zu sehen.');
     await axios.post(form.links.copy, {});
     reload(false);
 }