From 535a73162c3b50740c71ca53fcd0343182c36ab1 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 17 Dec 2024 17:17:13 +0100
Subject: [PATCH] Added user change validation and read status

This might be better to just refetch the data with anonymous authorizations
---
 components/calendar/Calendar.vue             |  5 ++---
 components/calendar/CalendarEventDetails.vue |  4 ++--
 components/calendar/CalendarMenu.vue         |  3 ++-
 pages/calendars/[id].vue                     |  5 -----
 pages/my/calendars/[id].vue                  |  3 ---
 stores/CalendarStore.ts                      | 21 ++++++++++++++++----
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 07722ec..445a1ee 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -46,15 +46,14 @@ onMounted(() => {
 
 <template>
   <div class="h-full w-full relative">
-  {{ isReadOnly }}
     <div class="h-full grid grid-rows-[auto,1fr]">
       <CalendarMenu />
 
       <component :is="currentViewComponent" />
 
       <CalendarSearch />
-      <CalendarDialogUpdateEvent />
-      <CalendarDialogDeleteEvent />
+      <CalendarDialogUpdateEvent v-if="!isReadOnly" />
+      <CalendarDialogDeleteEvent v-if="!isReadOnly" />
     </div>
   </div>
 </template>
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 8d8afa7..f2892e5 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -15,7 +15,7 @@ import {
 } from "@phosphor-icons/vue"
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { lastActiveEvent } = storeToRefs(useCalendar())
+const { lastActiveEvent, isReadOnly } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   event: CalendarEvent
@@ -151,7 +151,7 @@ function deployDeleteModal() {
       </template>
     </div>
 
-    <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
+    <menu v-if="!isReadOnly" class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
       <UiPopover v-model:open="commandMenuOpened">
         <UiPopoverTrigger as-child>
           <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index 12f593e..0cb67af 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -4,13 +4,14 @@ import { useCalendar } from "@/stores/CalendarStore"
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 const { revealAdvancedSearch } = useCalendar()
+const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
   <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
     <div class="px-6 flex justify-between">
       <menu class="flex items-center gap-2">
-        <li>
+        <li v-if="!isReadOnly">
           <CalendarDialogQuickCreateEvent />
         </li>
         <li>
diff --git a/pages/calendars/[id].vue b/pages/calendars/[id].vue
index 91982ef..9a38b86 100644
--- a/pages/calendars/[id].vue
+++ b/pages/calendars/[id].vue
@@ -11,11 +11,6 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
-
-const user = useSupabaseUser()
-
-const { setReadStatus } = useCalendar()
-setReadStatus(user.value, cal.value)
 </script>
 
 <template>
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 6d6c2d5..4e7c657 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -23,9 +23,6 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
-
-const { setReadStatus } = useCalendar()
-setReadStatus(user.value, cal.value)
 </script>
 
 <template>
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index b39af3b..6f07e1d 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -33,6 +33,7 @@ type DateDirectionTranslationKeys = {
 
 export const useCalendar = defineStore("calendar", () => {
   const { t } = useI18n()
+  const user = useSupabaseUser()
 
   /**
    * Static calendar config
@@ -45,14 +46,22 @@ export const useCalendar = defineStore("calendar", () => {
     "year"
   ])
 
-  const activeCalendar = ref<{ id: number; name: string; today: RPGDate } | null>(null)
+  const activeCalendar = ref<{ id: number; name: string; today: RPGDate, gmId: string | undefined } | null>(null)
 
   const isReadOnly = ref<boolean>(true)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function setReadStatus(user: any, calendar: Calendar) {
-    isReadOnly.value = (!user) || (calendar.world?.gmId !== user?.id)
+
+  function setReadStatus(gmId: string) {
+    // If the user is not logged in, or the calendar is not owned by the user, it's read-only
+    isReadOnly.value = (!user) || (gmId !== user.value?.id)
   }
 
+  // Watch for user changes
+  watch(user, () => {
+    if (activeCalendar.value) {
+      setReadStatus(activeCalendar.value.gmId!)
+    }
+  })
+
   /**
    * Month list (queried from API)
    */
@@ -66,10 +75,14 @@ export const useCalendar = defineStore("calendar", () => {
         id: calendarData.id,
         name: calendarData.name,
         today: calendarData.today,
+        gmId: calendarData.world?.gmId
       }
 
       setDefaultDate(activeCalendar.value.today)
       selectDate(activeCalendar.value.today)
+      if (calendarData.world) {
+        setReadStatus(activeCalendar.value.gmId!)
+      }
 
       if (!params.day) {
         params.day = defaultDate.value.day.toString()