Added category deletion interface

components/calendar/form/Categories.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-const { categories } = storeToRefs(useCalendar())
-</script>
-
-<template>
-  <CalendarCategoryTable :categories />
-</template>

components/calendar/form/DeleteCategory.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import { useToast } from "~/components/ui/toast";
+import { ToastLifetime } from "~/components/ui/toast/use-toast";
+
+const { deleteCategoryFromSkeleton, cancelLatestRequest } = useCategoryStore()
+const { isDeletingCategory, categorySkeleton } = storeToRefs(useCategoryStore())
+
+const { toast } = useToast()
+const { t } = useI18n()
+
+const isLoading = ref<boolean>(false)
+
+const formErrors = reactive<{ message: string | null }>({
+  message: null
+})
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value && !categorySkeleton.value) return
+
+  isLoading.value = true
+
+  const categoryName = categorySkeleton.value?.name
+
+  try {
+    await deleteCategoryFromSkeleton()
+
+    toast({
+      title: t("entity.calendar.category.deletedToast.title", { category: categoryName }),
+      variant: "success",
+      duration: ToastLifetime.MEDIUM
+    })
+  } catch (err) {
+    if (err instanceof Error) {
+      formErrors.message = err.message
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Click on the cancel button
+ *
+ * Must cancel the abortController in the store, and stop the loading
+ */
+function handleCancel(): void {
+  cancelLatestRequest()
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleAction">
+    <div class="grid grid-cols-2 gap-y-4">
+      <div class="text-red-500 ml-8">
+        <span class="text-sm">
+          {{ formErrors.message }}
+        </span>
+      </div>
+    </div>
+
+    <footer class="flex gap-2 justify-between">
+      <UiButton type="button" size="sm" variant="outline" @click="() => isDeletingCategory = false">
+        {{ $t('ui.action.back') }}
+      </UiButton>
+
+      <div class="flex gap-2 justify-end">
+        <Transition name="fade-delay">
+          <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+            {{ $t('ui.action.cancel') }}
+          </UiButton>
+        </Transition>
+
+        <UiButton size="sm" variant="destructive" :disabled="isLoading">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+          </Transition>
+
+          {{ $t('ui.action.delete') }}
+        </UiButton>
+      </div>
+    </footer>
+  </form>
+</template>