From d4d74db5d923185fd0b733d69b8e47418386db14 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Mar 2025 16:48:30 +0200
Subject: [PATCH] Refactored some stuff

---
 ...alendarCurrentDate.vue => CurrentDate.vue} |  0
 components/calendar/category/Item.vue         | 13 +++++++++
 components/calendar/category/List.vue         | 15 ++++++++++
 components/calendar/dialog/Categories.vue     | 19 ++++++++----
 .../Details.vue}                              |  0
 .../{CalendarEvent.vue => event/Event.vue}    |  0
 components/calendar/form/Categories.vue       |  7 +++++
 .../{CalendarMenu.vue => menu/Menu.vue}       |  0
 .../MenuSubnav.vue}                           |  0
 .../MenuToday.vue}                            |  0
 components/calendar/state/monthly/DayTile.vue |  2 +-
 i18n.config.ts                                | 10 ++++++-
 pages/calendars/[id].vue                      |  4 +--
 pages/my/calendars/[id].vue                   | 29 ++-----------------
 server/api/calendars/categories/query.get.ts  |  5 ++--
 stores/CalendarStore.ts                       |  2 ++
 16 files changed, 67 insertions(+), 39 deletions(-)
 rename components/calendar/{CalendarCurrentDate.vue => CurrentDate.vue} (100%)
 create mode 100644 components/calendar/category/Item.vue
 create mode 100644 components/calendar/category/List.vue
 rename components/calendar/{CalendarEventDetails.vue => event/Details.vue} (100%)
 rename components/calendar/{CalendarEvent.vue => event/Event.vue} (100%)
 create mode 100644 components/calendar/form/Categories.vue
 rename components/calendar/{CalendarMenu.vue => menu/Menu.vue} (100%)
 rename components/calendar/{CalendarMenuSubnav.vue => menu/MenuSubnav.vue} (100%)
 rename components/calendar/{CalendarMenuToday.vue => menu/MenuToday.vue} (100%)

diff --git a/components/calendar/CalendarCurrentDate.vue b/components/calendar/CurrentDate.vue
similarity index 100%
rename from components/calendar/CalendarCurrentDate.vue
rename to components/calendar/CurrentDate.vue
diff --git a/components/calendar/category/Item.vue b/components/calendar/category/Item.vue
new file mode 100644
index 0000000..ebcfea3
--- /dev/null
+++ b/components/calendar/category/Item.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { Category } from "~/models/Category";
+
+defineProps<{
+  category: Category
+}>()
+</script>
+
+<template>
+  <UiButton variant="secondary" size="sm" class="w-full text-left">
+    {{ category }}
+  </UiButton>
+</template>
diff --git a/components/calendar/category/List.vue b/components/calendar/category/List.vue
new file mode 100644
index 0000000..fa230f7
--- /dev/null
+++ b/components/calendar/category/List.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Category } from "~/models/Category";
+
+defineProps<{
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <ul>
+    <li v-for="category in categories" :key="category.id">
+      <CalendarCategoryItem :category="category" />
+    </li>
+  </ul>
+</template>
diff --git a/components/calendar/dialog/Categories.vue b/components/calendar/dialog/Categories.vue
index d63b49e..96753ba 100644
--- a/components/calendar/dialog/Categories.vue
+++ b/components/calendar/dialog/Categories.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { CalendarFormCategories } from "#components";
 import { PhX } from "@phosphor-icons/vue";
 
 const { toggleCategoriesModal } = useCalendar()
@@ -20,17 +21,23 @@ function handleClosing() {
       @interact-outside="handleClosing"
       @close-auto-focus="(e) => e.preventDefault()"
     >
-      <UiAlertDialogTitle>
-        <span class="text-2xl">
-          <strong class="font-bold">Gestion des catégories</strong>
-        </span>
-      </UiAlertDialogTitle>
+      <header>
+        <UiAlertDialogTitle>
+          <span class="text-2xl">
+            {{ $t('entity.category.manageDialog.title') }}
+          </span>
+        </UiAlertDialogTitle>
+
+        <UiAlertDialogDescription>
+          {{ $t('entity.category.manageDialog.subtitle') }}
+        </UiAlertDialogDescription>
+      </header>
 
       <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClosing">
         <PhX size="20" />
       </UiButton>
 
-      catégories là
+      <CalendarFormCategories />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/event/Details.vue
similarity index 100%
rename from components/calendar/CalendarEventDetails.vue
rename to components/calendar/event/Details.vue
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/event/Event.vue
similarity index 100%
rename from components/calendar/CalendarEvent.vue
rename to components/calendar/event/Event.vue
diff --git a/components/calendar/form/Categories.vue b/components/calendar/form/Categories.vue
new file mode 100644
index 0000000..ad03ed9
--- /dev/null
+++ b/components/calendar/form/Categories.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const { categories } = storeToRefs(useCalendar())
+</script>
+
+<template>
+  <CalendarCategoryList :categories />
+</template>
diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/menu/Menu.vue
similarity index 100%
rename from components/calendar/CalendarMenu.vue
rename to components/calendar/menu/Menu.vue
diff --git a/components/calendar/CalendarMenuSubnav.vue b/components/calendar/menu/MenuSubnav.vue
similarity index 100%
rename from components/calendar/CalendarMenuSubnav.vue
rename to components/calendar/menu/MenuSubnav.vue
diff --git a/components/calendar/CalendarMenuToday.vue b/components/calendar/menu/MenuToday.vue
similarity index 100%
rename from components/calendar/CalendarMenuToday.vue
rename to components/calendar/menu/MenuToday.vue
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 7d8f32a..4d596be 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -5,7 +5,7 @@ import { useElementBounding } from "@vueuse/core"
 import { storeToRefs } from "pinia"
 import { computed, ref, type ComputedRef } from "vue"
 
-import CalendarEventButton from "../../CalendarEvent.vue"
+import CalendarEventButton from "../../event/Event.vue"
 
 const props = defineProps<{
   date: RPGDate
diff --git a/i18n.config.ts b/i18n.config.ts
index 13d913f..6715aad 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -93,7 +93,11 @@ export default defineI18nConfig(() => ({
           search: "Search categories",
           notFoundAny: "No categories found.",
           addPrimary: "Add a primary category",
-          addSecondaries: "Add secondary categories"
+          addSecondaries: "Add secondary categories",
+          manageDialog: {
+            title: "Manage categories",
+            subtitle: "Add and change the categories of your calendar",
+          }
         },
         isLoading: "Loading in progress…",
         addDescription: "Add a description",
@@ -397,6 +401,10 @@ export default defineI18nConfig(() => ({
           notFoundAny: "Aucune catégorie trouvée.",
           addPrimary: "Ajouter une catégorie principale",
           addSecondaries: "Ajouter des catégories secondaires",
+          manageDialog: {
+            title: "Gestion des catégories",
+            subtitle: "Créer et modifier les catégories de votre calendrier",
+          }
         },
         isLoading: "Chargement en cours…",
         addDescription: "Ajouter une description",
diff --git a/pages/calendars/[id].vue b/pages/calendars/[id].vue
index 2b523f4..e17b120 100644
--- a/pages/calendars/[id].vue
+++ b/pages/calendars/[id].vue
@@ -14,7 +14,7 @@ const {
   refresh: calRefresh
 } = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
   {
-    key: `calendar-${shortId}`,
+    key: "active-calendar",
     query: {
       shortId,
       full: true
@@ -27,7 +27,7 @@ const {
   status: categoriesStatus,
   refresh: catRefresh
 } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
-  { key: `categories-${shortId}` }
+  { key: "active-categories" }
 )
 
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 219053f..5d0e96a 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -24,7 +24,7 @@ const {
   status: calendarStatus
 } = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
   {
-    key: `calendar-${id}`,
+    key: "active-calendar",
     query: {
       id,
       full: true
@@ -36,35 +36,10 @@ const {
   data: categories,
   status: categoriesStatus
 } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
-  { key: `categories-${id}` }
+  { key: "active-categories" }
 )
 
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
-
-// Set custom menu
-// This should be reserved for actions, not for breadcrumbs
-//
-// const { t } = useI18n()
-// const { setCurrentMenu } = useUiStore()
-
-// // Set menu once we have the calendar data
-// watch(calendar, (n) => {
-//   if (n?.data) {
-//     setCurrentMenu([
-//       {
-//         tooltip: t("entity.world.backToMy"),
-//         to: "/my",
-//         phIcon: "universe",
-//         phIconWeight: "regular"
-//       },
-//       {
-//         tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
-//         to: `/my/worlds/${calendar.value?.data.world?.id}`,
-//         phIcon: "world"
-//       },
-//     ])
-//   }
-// }, { immediate: true })
 </script>
 
 <template>
diff --git a/server/api/calendars/categories/query.get.ts b/server/api/calendars/categories/query.get.ts
index 8239d95..92da7ee 100644
--- a/server/api/calendars/categories/query.get.ts
+++ b/server/api/calendars/categories/query.get.ts
@@ -16,12 +16,13 @@ export default defineEventHandler(async (event) => {
     .from("calendar_event_categories")
     .select(`
       id,
-      name
+      name,
+      color
     `)
 
   if (query.id) {
     return output.eq("id", query.id).limit(1).single<Category>()
   }
 
-  return output.returns<Category[]>()
+  return output.overrideTypes<Category[]>()
 })
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index 57a94fe..63277b3 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -61,6 +61,8 @@ export const useCalendar = defineStore("calendar", () => {
   const months = ref<CalendarMonth[]>([])
 
   function setActiveCalendar(calendarData: Calendar, categoryData: Category[]) {
+    console.log("proced")
+
     try {
       if (!calendarData.id) return