Added timestamps for calendars

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>

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>

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>

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">

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({

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>

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">

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[]>()
 })

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
 

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 (