Added toast on deleted entities

app.vue

@@ -43,6 +43,10 @@ const useIdFunction = () => useId()
         </div>
       </ConfigProvider>
     </NuxtLayout>
+
+    <ClientOnly>
+      <UiToaster />
+    </ClientOnly>
   </div>
 </template>
 

assets/main.css

@@ -31,6 +31,10 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
+    --success: 156 72% 67%;
+    --success-muted: 156 72% 90%;
+    --success-foreground: 222.2 84% 4.9%;
+
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
@@ -64,6 +68,10 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
+    --success: 142 72% 29%;
+    --success-muted: 142 72% 10%;
+    --success-foreground: 210 40% 98%;
+
     --ring: 212.7 26.8% 83.9%;
   }
 }

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 =

i18n.config.ts

@@ -107,7 +107,10 @@ export default defineI18nConfig(() => ({
             deleteDialog: {
               title: "Delete this event",
               subtitle: "Data associated with this event will be lost and you won't be able to retrieve it !",
-            }
+            },
+            deletedToast: {
+              title: "The event \"{event}\" has been successfuly deleted.",
+            },
           },
           createDialog: {
             title: "New calendar",
@@ -127,6 +130,9 @@ export default defineI18nConfig(() => ({
             title: "Are you sure you want to delete this calendar ?",
             subtitle: "Its events won't be accessible anymore and you won't be able to retrieve the deleted data !",
           },
+          deletedToast: {
+            title: "Calendar \"{calendar}\" has been successfuly deleted.",
+          },
           millennia: {
             nameSingular: "Millennia",
             nextSingular: "Next millennia",
@@ -273,7 +279,10 @@ export default defineI18nConfig(() => ({
             deleteDialog: {
               title: "Supprimer l'évènement",
               subtitle: "Les données associés à cet évènement seront supprimées et vous ne pourrez plus les récupérer !",
-            }
+            },
+            deletedToast: {
+              title: "L'évènement \"{event}\" a été supprimé avec succès.",
+            },
           },
           createDialog: {
             title: "Nouveau calendrier",
@@ -293,6 +302,9 @@ export default defineI18nConfig(() => ({
             title: "Êtes-vous sûr de supprimer ce calendrier ?",
             subtitle: "Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !",
           },
+          deletedToast: {
+            title: "Le calendrier \"{calendar}\" a été supprimé avec succès.",
+          },
           millennia: {
             nameSingular: "Millénaire",
             nextSingular: "Millénaire suivant",

tailwind.config.js

@@ -41,6 +41,11 @@ module.exports = {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          muted: "hsl(var(--success-muted))",
+          foreground: "hsl(var(--success-foreground))",
+        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",