Added toast on deleted entities

components/calendar/dialog/Delete.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { PhCircleNotch } from "@phosphor-icons/vue";
+import { useToast } from "~/components/ui/toast";
 import type { Calendar } from "~/models/CalendarConfig";
 
+const { toast } = useToast()
+const { t } = useI18n()
+
 const props = defineProps<{
   modalState: boolean,
   calendar: Calendar | null
@@ -19,11 +23,20 @@ async function handleAction(): Promise<void> {
 
   try {
     await $fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" })
+    emit("on-close")
 
-    // isDeleteEventModalOpen.value = false
+    toast({
+      title: t("entity.calendar.deletedToast.title", { calendar: props.calendar.name }),
+      variant: "success",
+      duration: 3000
+    })
   } catch (err) {
+    console.log(err)
     if (err instanceof Error) {
-      // formErrors.message = err.message
+      toast({
+        title: err.message,
+        variant: "destructive"
+      })
     }
   } finally {
     isLoading.value = false

components/calendar/form/DeleteEvent.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import { PhCircleNotch } from "@phosphor-icons/vue";
+import { useToast } from "~/components/ui/toast";
 
 const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
+const { toast } = useToast()
+const { t } = useI18n()
+
 const isLoading = ref<boolean>(false)
 
 const formErrors = reactive<{ message: string | null }>({
@@ -22,16 +26,24 @@ async function handleAction(): Promise<void> {
 
   isLoading.value = true
 
+  const eventTitle = eventSkeleton.value.title
+
   try {
     await deleteEventFromSkeleton()
 
     isDeleteEventModalOpen.value = false
+    resetSkeleton()
+
+    toast({
+      title: t("entity.calendar.event.deletedToast.title", { event: eventTitle }),
+      variant: "success",
+      duration: 3000
+    })
   } catch (err) {
     if (err instanceof Error) {
       formErrors.message = err.message
     }
   } finally {
-    resetSkeleton()
     isLoading.value = false
   }
 }

components/ui/toast/ToastTitle.vue

@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-[.85em] font-semibold', props.class)">
     <slot />
   </ToastTitle>
 </template>

components/ui/toast/index.ts

@@ -14,13 +14,13 @@ export { default as ToastProvider } from "./ToastProvider.vue"
 export { toast, useToast } from "./use-toast"
 
 export const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
         default: "border bg-background text-foreground",
-        destructive:
-                    "destructive group border-destructive bg-destructive text-destructive-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+        success: "success group border-success bg-success-muted text-success-foreground"
       },
     },
     defaultVariants: {

components/ui/toast/use-toast.ts

@@ -2,7 +2,7 @@ import { computed, ref } from "vue"
 import type { Component, VNode } from "vue"
 import type { ToastProps } from "."
 
-const TOAST_LIMIT = 1
+const TOAST_LIMIT = 3
 const TOAST_REMOVE_DELAY = 1000000
 
 export type StringOrVNode =