Mod popup for copying event

resources/css/buttons.css

@@ -31,6 +31,12 @@
             @apply bg-yellow-500 text-yellow-100;
         }
     }
+    &.btn-default {
+        @apply bg-gray-700 text-gray-300;
+        &:not(.disabled):hover {
+            @apply bg-gray-500 text-gray-100;
+        }
+    }
     &.btn-info {
         @apply bg-blue-700 text-blue-300;
         &:not(.disabled):hover {

resources/img/svg/warning-triangle-light.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1.225 21.225A1.678 1.678 0 0 0 2.707 22H22.28a1.68 1.68 0 0 0 1.484-.775 1.608 1.608 0 0 0 .003-1.656L13.995 1.827a1.745 1.745 0 0 0-2.969 0l-9.8 17.742a1.603 1.603 0 0 0 0 1.656zm.859-1.143l9.82-17.773A.71.71 0 0 1 12.508 2a.73.73 0 0 1 .629.342l9.751 17.708a.626.626 0 0 1 .017.662.725.725 0 0 1-.626.288H2.708a.723.723 0 0 1-.623-.286.605.605 0 0 1-.001-.632zM13 15h-1V8h1zm-1.5 2.5a1 1 0 1 1 1 1 1.002 1.002 0 0 1-1-1z"/><path fill="none" d="M0 0h24v24H0z"/></svg>

resources/js/components/page/Popups.vue

@@ -1,18 +1,17 @@
 <template>
-    <div>
+    <ui-popup v-for="(popup, index) in swal.popups" :key="index" :icon="popup.icon" :heading="popup.title" @close="popup.reject(popup.id)">
-        <ui-popup v-for="(popup, index) in swal.popups" :key="index" :heading="popup.title">
+        <div class="mt-4">
-            <div class="space-y-4 mt-4">
+            <div class="text-center" v-text="popup.body" />
-                <div v-text="popup.body" />
+            <div class="flex justify-center space-x-4 mt-8">
-                <div class="space-x-4">
+                <ui-button type="button" class="btn-primary" @click.prevent="popup.resolve(popup.id)">{{ popup.confirmButton }}</ui-button>
-                    <ui-button type="button" class="btn-danger" @click.prevent="popup.resolve(popup.id)">{{ popup.confirmButton }}</ui-button>
+                <ui-button type="button" class="btn-default" @click.prevent="popup.reject(popup.id)">{{ popup.cancelButton }}</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/ActionButton.vue

@@ -1,28 +1,14 @@
 <template>
     <a v-tooltip="tooltip" :href="href" :target="blank ? '_BLANK' : '_SELF'" class="inline-flex btn btn-sm">
-        <ui-sprite :src="icon"></ui-sprite>
+        <ui-sprite :src="icon" />
     </a>
 </template>
 
-<script setup>
+<script lang="ts" setup>
-defineProps({
+withDefaults(defineProps<{
-    tooltip: {
+    tooltip: string;
-        required: true,
+    href?: string;
-        type: String,
+    blank?: boolean,
-    },
+    icon: string,
-    href: {
+}>(), {href: '#', blank: false});
-        type: String,
-        default: () => '#',
-        required: false,
-    },
-    blank: {
-        type: Boolean,
-        default: () => false,
-        required: false,
-    },
-    icon: {
-        type: String,
-        required: true,
-    },
-});
 </script>

resources/js/components/ui/Popup.vue

@@ -9,7 +9,10 @@
                     <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" />
+            <div class="flex justify-center">
+                <ui-sprite v-if="icon" class="text-yellow-700 size-28" :src="icon" />
+            </div>
+            <h3 v-if="heading" class="font-semibold text-primary-200 text-xl" :class="{'text-center mt-5': icon !== null}" v-html="heading" />
             <div class="text-primary-100 group is-popup grow flex flex-col">
                 <suspense>
                     <div>
@@ -24,21 +27,15 @@
     </div>
 </template>
 
-<script>
+<script lang="ts" setup>
-export default {
+defineEmits<{
-    props: {
+    close: [],
-        heading: {
+}>();
-            type: String,
+withDefaults(defineProps<{
-            default: () => '',
+    visible: boolean,
-        },
+    heading?: string,
-        innerWidth: {
+    innerWidth?: string,
-            default: () => 'max-w-xl',
+    full?: boolean,
-            type: String,
+    icon?: string|null,
-        },
+}>(), {innerWidth: 'max-w-xl', full: false, heading: '', icon: null});
-        full: {
-            type: Boolean,
-            default: () => false,
-        },
-    },
-};
 </script>

resources/js/stores/swalStore.ts

@@ -6,6 +6,7 @@ interface Popup {
     id: string;
     title: string;
     body: string;
+    icon: string|null;
     confirmButton: string;
     cancelButton: string;
     resolve: (id: string) => void;
@@ -28,6 +29,7 @@ export default defineStore('swal', {
                         resolve,
                         reject,
                         id: uuidv4(),
+                        icon: 'warning-triangle-light',
                     });
                 }).then((id) => {
                     this.remove(id);

resources/js/views/form/Index.vue

@@ -5,22 +5,6 @@
             <page-toolbar-button color="primary" icon="plus" @click.prevent="create">Veranstaltung erstellen</page-toolbar-button>
         </template>
 
-        <ui-popup v-if="deleting !== null" :heading="`Veranstaltung ${deleting.name} löschen?`" @close="deleting = null">
-            <div>
-                <p class="mt-4">Diese Veranstaltung löschen?</p>
-                <div class="grid grid-cols-2 gap-3 mt-6">
-                    <a href="#"
-                       class="text-center btn btn-danger"
-                       @click.prevent="
-                           remove(deleting);
-                           deleting = null;
-                       "
-                    >Veranstaltung löschen</a>
-                    <a href="#" class="text-center btn btn-primary" @click.prevent="deleting = null">Abbrechen</a>
-                </div>
-            </div>
-        </ui-popup>
-
         <ui-popup v-if="single !== null && single.config === null" heading="Vorlage auswählen" @close="cancel">
             <div class="mt-3 grid gap-3 grid-cols-2">
                 <a v-for="(template, index) in meta.templates" :key="index" class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#" @click.prevent="setTemplate(template)">
@@ -178,7 +162,7 @@
                             <ui-action-button :href="form.links.frontend" target="_BLANK" tooltip="zur Anmeldeseite" class="btn-info" icon="eye" />
                             <ui-action-button tooltip="Kopieren" class="btn-info" icon="copy" @click="onCopy(form)" />
                             <ui-action-button :href="form.links.export" target="_BLANK" tooltip="als Tabellendokument exportieren" class="btn-info" icon="document" />
-                            <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = form" />
+                            <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="onDelete(form)" />
                         </div>
                     </td>
                 </tr>
@@ -205,7 +189,6 @@ const { meta, data, reloadPage, reload, create, single, edit, cancel, submit, re
 const axios = inject('axios');
 const toast = useToast();
 
-const deleting = ref(null);
 const showing = ref(null);
 const fileSettingPopup = ref(null);
 
@@ -236,6 +219,11 @@ async function onCopy(form) {
     reload(false);
 }
 
+async function onDelete(form) {
+    await swal.confirm('Diese Veranstaltung löschen?', `Die Veranstaltung ${form.name} wird gelöscht werden.`);
+    await remove(form);
+}
+
 function setTemplate(template) {
     active.value = 0;
     single.value.config = template.config;