Added state on calendar preview

components/calendar/PreviewCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhCalendarDots, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
+import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
 import { DateTime } from "luxon";
 import type { Calendar } from "~/models/CalendarConfig";
 
@@ -26,8 +26,21 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
     class="w-full h-full flex flex-col transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
     :link="calendarLink"
   >
-    <UiCardHeader>
+    <UiCardHeader class="gap-4">
       <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
+
+      <div v-if="calendar.state === 'published'" class="flex items-center gap-1 text-sm">
+        <PhFile size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.published') }}</span>
+      </div>
+      <div v-if="calendar.state === 'draft'" class="flex items-center gap-1 text-sm">
+        <PhFileDashed size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.draft') }}</span>
+      </div>
+      <div v-if="calendar.state === 'archived'" class="flex items-center gap-1 text-sm">
+        <PhArchive size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.archived') }}</span>
+      </div>
     </UiCardHeader>
 
     <UiCardContent class="grow">

components/calendar/form/Update.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Calendar } from "~/models/CalendarConfig";
-import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
+import { PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
 
 const props = defineProps<{
   calendar: Calendar | null,
@@ -68,7 +68,7 @@ function handleFormCancel() {
   <template v-if="calendarSkeleton">
     <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
       <UiTabs v-model:model-value="activeTab">
-        <UiTabsList class="grid w-full grid-cols-3 mb-4">
+        <UiTabsList class="grid w-full grid-cols-1 mb-4">
           <UiTabsTrigger value="global" class="font-bold">
             <div class="flex items-center gap-1">
               <PhWrench size="18" weight="fill" />
@@ -76,7 +76,7 @@ function handleFormCancel() {
               {{ $t('entity.calendar.actionDialog.tabs.general.title') }}
             </div>
           </UiTabsTrigger>
-          <UiTabsTrigger value="months" class="font-bold">
+          <!-- <UiTabsTrigger value="months" class="font-bold">
             <div class="flex items-center gap-1">
               <PhCalendarDots size="18" weight="fill" />
 
@@ -89,7 +89,7 @@ function handleFormCancel() {
 
               {{ $t('entity.calendar.actionDialog.tabs.today.title') }}
             </div>
-          </UiTabsTrigger>
+          </UiTabsTrigger> -->
         </UiTabsList>
         <UiTabsContent value="global" class="grid gap-4">
           <input
@@ -119,12 +119,12 @@ function handleFormCancel() {
             <InputColor id="new-calendar-color" v-model="calendarSkeleton.color" />
           </div>
         </UiTabsContent>
-        <UiTabsContent value="months">
+        <!-- <UiTabsContent value="months">
           <CalendarInputMonthList v-model:model-value="calendarSkeleton.months" />
         </UiTabsContent>
         <UiTabsContent value="today">
           <CalendarInputTodaySelect v-model:model-value="calendarSkeleton.today" :available-months="calendarSkeleton.months"/>
-        </UiTabsContent>
+        </UiTabsContent> -->
       </UiTabs>
 
       <footer class="flex justify-end gap-2 mt-6">

server/api/worlds/query.get.ts

@@ -26,6 +26,7 @@ export default defineEventHandler(async (event) => {
       name,
       color,
       today,
+      state,
       createdAt:created_at,
       updatedAt:updated_at,
       eventNb:calendar_events(count)