Move alertDialog to AppLayout fixes #33

resources/js/layouts/AppLayout.vue

@@ -2,14 +2,18 @@
 import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 // import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; 
 import type { BreadcrumbItemType } from '@/types';
-import { computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import 'vue-sonner/style.css'
 import { Toaster } from 'vue-sonner'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog'
 import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
+import { Button } from '@/components/ui/button'
+import { alertStore } from '@/stores/alertStore';
 
 interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
+const alert = alertStore()
 
 withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
@@ -24,7 +28,6 @@ onMounted(() => {
 </script>
 
 <template>
-    <!-- :duration="120000" -->
     <Toaster position="top-right" :expand="true" closeButton :visible-toasts="6" :offset="'1rem'" :toastOptions="{
         unstyled: true,
         classes: {
@@ -63,4 +66,21 @@ onMounted(() => {
         <slot />
     </AppLayout>
 
+    <AlertDialog v-model:open="alert.open">
+        <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>{{ alert.title }}</AlertDialogTitle>
+                <AlertDialogDescription>{{ alert.message }}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <Button v-if="alert.onCancel" @click="alert.onCancel">{{ alert.cancelText }}</Button>
+                <Button :variant="alert.actionVariant" v-if="alert.onAction" @click="alert.onAction">{{
+                    alert.actionText
+                }}</Button>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+
+
+
 </template>