From 3f4cb46ebf7f58576233362329f0da0802acb94a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 3 Mar 2025 23:13:13 +0100
Subject: [PATCH] Added timestamps for calendars

---
 components/calendar/PreviewCard.vue | 36 +++++++++++++++++++++++++----
 components/global/user/CTA.vue      |  2 +-
 components/ui/card/CardFooter.vue   |  2 +-
 components/world/PreviewCard.vue    |  1 +
 models/CalendarConfig.ts            |  2 ++
 pages/explore.vue                   | 19 ++-------------
 pages/my/worlds/[id].vue            |  2 +-
 server/api/calendars/query.get.ts   |  6 ++++-
 server/api/worlds/query.get.ts      | 33 ++++++++++++++++++++++++--
 supabase/migrations/202401_init.sql |  5 ++++
 10 files changed, 80 insertions(+), 28 deletions(-)

diff --git a/components/calendar/PreviewCard.vue b/components/calendar/PreviewCard.vue
index fd16774..5c16733 100644
--- a/components/calendar/PreviewCard.vue
+++ b/components/calendar/PreviewCard.vue
@@ -1,18 +1,30 @@
 <script lang="ts" setup>
-import { PhCalendarDots, PhTrash } from "@phosphor-icons/vue";
+import { PhCalendarDots, PhFilePlus, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
+import { DateTime } from "luxon";
 import type { Calendar } from "~/models/CalendarConfig";
 
-defineProps<{
-  calendar: Calendar
+const props = defineProps<{
+  calendar: Calendar,
+  gmId?: string,
+  showActions?: boolean,
 }>()
 
 const emit = defineEmits(["on-delete"])
+
+const { locale } = useI18n();
+
+const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value });
+const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
+
+const user = useSupabaseUser();
+const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId);
+const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`);
 </script>
 
 <template>
   <UiCard
     class="w-full h-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
-    :link="`/my/calendars/${calendar.id}`"
+    :link="calendarLink"
   >
     <UiCardHeader>
       <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
@@ -20,11 +32,12 @@ const emit = defineEmits(["on-delete"])
 
     <UiCardContent>
       <p class="flex items-center gap-1">
-        <PhCalendarDots size="24" />
+        <PhCalendarDots size="24" weight="fill" />
         <span>{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}</span>
       </p>
 
       <UiButton
+        v-if="isOwner && showActions"
         size="icon"
         variant="ghost"
         class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700"
@@ -33,5 +46,18 @@ const emit = defineEmits(["on-delete"])
         <PhTrash size="16" />
       </UiButton>
     </UiCardContent>
+
+    <UiCardFooter>
+      <ul class="grid gap-2">
+        <li class="flex gap-1 items-center">
+          <PhFilePlus size="20" />
+          <span>{{ $t('common.createdAt', { createdAt }) }}</span>
+        </li>
+        <li v-if="updatedAt" class="flex gap-1 items-center">
+          <PhPencilSimpleLine size="20" />
+          <span>{{ $t('common.updatedAt', { updatedAt }) }}</span>
+        </li>
+      </ul>
+    </UiCardFooter>
   </UiCard>
 </template>
diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index 57aa34a..14d8adb 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -70,7 +70,7 @@ function pushRoute(to: AvailableRoutes) {
             {{ $t('ui.sidebarMenu.avatarFallback') }}
           </UiAvatarFallback>
         </UiAvatar>
-        <UiButton v-else variant="outline" size="icon" class="rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-900 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
+        <UiButton v-else variant="outline" size="icon" class="rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-950 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
           <PhUserCircle size="24" />
         </UiButton>
       </UiDropdownMenuTrigger>
diff --git a/components/ui/card/CardFooter.vue b/components/ui/card/CardFooter.vue
index fad3928..faff6a3 100644
--- a/components/ui/card/CardFooter.vue
+++ b/components/ui/card/CardFooter.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div :class="cn('flex items-center p-6 border-t-2 border-t-slate-900', props.class)">
     <slot />
   </div>
 </template>
diff --git a/components/world/PreviewCard.vue b/components/world/PreviewCard.vue
index da860b2..91c2c3d 100644
--- a/components/world/PreviewCard.vue
+++ b/components/world/PreviewCard.vue
@@ -57,6 +57,7 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
         </UiButton>
       </div>
     </UiCardContent>
+
     <UiCardFooter>
       <ul class="grid gap-2">
         <li class="flex gap-1 items-center">
diff --git a/models/CalendarConfig.ts b/models/CalendarConfig.ts
index cd5f348..c122247 100644
--- a/models/CalendarConfig.ts
+++ b/models/CalendarConfig.ts
@@ -20,6 +20,8 @@ export interface Calendar extends CalendarConfig {
   state: CalendarState
   color?: string
   world?: World
+  createdAt?: string
+  updatedAt?: string
 }
 
 export const postCalendarSchema = z.object({
diff --git a/pages/explore.vue b/pages/explore.vue
index efe4759..1d01797 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { PhCalendarDots } from "@phosphor-icons/vue";
 import type { Calendar } from "~/models/CalendarConfig";
 
-const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars" })
+const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
 </script>
 
 <template>
@@ -23,21 +22,7 @@ const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/
 
         <ul v-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
           <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
-            <UiCard
-              class="w-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
-              :link="`/calendars/${calendar.shortId}`"
-            >
-              <UiCardHeader>
-                <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
-              </UiCardHeader>
-
-              <UiCardContent>
-                <p class="flex items-center gap-1">
-                  <PhCalendarDots size="24" />
-                  <span>{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}</span>
-                </p>
-              </UiCardContent>
-            </UiCard>
+            <CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
           </li>
         </ul>
       </Spacing>
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 727d9e8..a3f2bfe 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -190,7 +190,7 @@ function hideEditModal() {
 
           <ul class="grid md:grid-cols-3 gap-2">
             <li v-for="calendar in sortedCalendars" :key="calendar.id">
-              <CalendarPreviewCard :calendar="calendar" @on-delete="() => deployDeleteCalendarModal(calendar)" />
+              <CalendarPreviewCard :calendar="calendar" :gm-id="world.data.gmId" show-actions @on-delete="() => deployDeleteCalendarModal(calendar)" />
             </li>
 
             <li class="md:w-fit">
diff --git a/server/api/calendars/query.get.ts b/server/api/calendars/query.get.ts
index a438640..9430ec8 100644
--- a/server/api/calendars/query.get.ts
+++ b/server/api/calendars/query.get.ts
@@ -19,6 +19,8 @@ export default defineEventHandler(async (event) => {
     today,
     months:calendar_months (*),
     state,
+    createdAt:created_at,
+    updatedAt:updated_at,
     eventNb:calendar_events(count)
   `
 
@@ -29,6 +31,8 @@ export default defineEventHandler(async (event) => {
     today,
     months:calendar_months (*),
     state,
+    createdAt:created_at,
+    updatedAt:updated_at,
     events:calendar_events (
       id,
       title,
@@ -64,5 +68,5 @@ export default defineEventHandler(async (event) => {
     return output.eq("id", query.id).limit(1).single<Calendar>()
   }
 
-  return output.returns<Calendar[]>()
+  return output.overrideTypes<Calendar[]>()
 })
diff --git a/server/api/worlds/query.get.ts b/server/api/worlds/query.get.ts
index e38beb0..7d56ee2 100644
--- a/server/api/worlds/query.get.ts
+++ b/server/api/worlds/query.get.ts
@@ -12,8 +12,37 @@ export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
   const query = await getValidatedQuery(event, querySchema.parse)
 
-  const fullFields = "id, name, description, color, createdAt:created_at, updatedAt:updated_at, calendars (id, name, color, today, eventNb:calendar_events(count))"
-  const partialFields = "id, name, description, color, createdAt:created_at, updatedAt:updated_at, calendars (eventNb:calendar_events(count))"
+  const fullFields = `
+    id,
+    name,
+    description,
+    color,
+    createdAt:created_at,
+    updatedAt:updated_at,
+    gmId:gm_id,
+    calendars (
+      id,
+      name,
+      color,
+      today,
+      createdAt:created_at,
+      updatedAt:updated_at,
+      eventNb:calendar_events(count)
+    )
+  `
+  const partialFields = `
+    id,
+    name,
+    description,
+    color,
+    createdAt:created_at,
+    updatedAt:updated_at,
+    calendars (
+      createdAt:created_at,
+      updatedAt:updated_at,
+      eventNb:calendar_events(count)
+    )
+  `
 
   let output
 
diff --git a/supabase/migrations/202401_init.sql b/supabase/migrations/202401_init.sql
index 065f8e5..f10ac73 100644
--- a/supabase/migrations/202401_init.sql
+++ b/supabase/migrations/202401_init.sql
@@ -1,6 +1,7 @@
 --
 -- For use with https://github.com/supabase/supabase/tree/master/examples/slack-clone/nextjs-slack-clone
 --
+create extension if not exists moddatetime schema extensions;
 
 -- Custom types
 create type public.app_permission as enum ('events.see.hidden', 'users.ban');
@@ -49,6 +50,8 @@ create table public.worlds (
   gm_id         uuid references public.users on delete cascade
 );
 comment on table public.worlds is 'Worlds belonging to a single user ; a game master.';
+create trigger handle_updated_at before update on public.worlds
+  for each row execute procedure moddatetime (updated_at);
 
 -- World Players (join table)
 create table public.world_players (
@@ -73,6 +76,8 @@ create table public.calendars (
   world_id          bigint references public.worlds on delete cascade not null
 );
 comment on table public.calendars is 'Calendar settings and configuration attached to a single world.';
+create trigger handle_updated_at before update on public.calendars
+  for each row execute procedure moddatetime (updated_at);
 
 -- Calendar Months
 create table public.calendar_months (