Merge pull request #60 from AlexisNP/bugfix/quick-create-event-modal

Bugfix/quick create event modal

components/calendar/dialog/CreateEvent.vue

@@ -36,8 +36,8 @@ function openEventCreatePopover() {
  * @param e The closing event (can be keydown or click)
  */
 function handleClosing(e: Event) {
-  popoverOpen.value = false
   e.preventDefault()
+  popoverOpen.value = false
 }
 </script>
 
@@ -54,8 +54,6 @@ function handleClosing(e: Event) {
       :trap-focus="true"
       class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
-      @focus-outside="handleClosing"
-      @interact-outside="handleClosing"
       @pointer-down-outside="handleClosing"
     >
       <CalendarFormCreateEvent @event-created="handleClosing" />

components/calendar/dialog/UpdateEvent.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
 
-const isLoading = ref(false)
-
 // Watch the popover state
 watch(isEditEventModalOpen, (hasOpened, _o) => {
   if (hasOpened && lastActiveEvent.value) {
@@ -15,10 +13,8 @@ watch(isEditEventModalOpen, (hasOpened, _o) => {
  *
  * @param e The closing event (can be keydown or click)
  */
-function handleClosing(e: Event) {
-  if (isLoading.value) {
-    e.preventDefault()
-  }
+function handleClosing() {
+  isEditEventModalOpen.value = false
 }
 </script>
 
@@ -43,7 +39,7 @@ function handleClosing(e: Event) {
         </UiDialogDescription>
       </header>
 
-      <CalendarFormUpdateEvent />
+      <CalendarFormUpdateEvent @event-updated="handleClosing" />
     </UiDialogContent>
   </UiDialog>
 </template>

components/calendar/form/UpdateEvent.vue

@@ -3,6 +3,8 @@ import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpl
 import { useToast } from "~/components/ui/toast";
 import type { APIError } from "~/models/Errors";
 
+const emit = defineEmits(["event-updated"])
+
 const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
@@ -22,6 +24,14 @@ async function handleAction() {
 
   try {
     await updateEventFromSkeleton()
+
+    emit("event-updated")
+
+    toast({
+      title: t("entity.calendar.event.updatedToast.title", { event: eventSkeleton.value.title }),
+      variant: "success",
+      duration: 3000
+    })
   } catch (err) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const apiError = (err as any).data as APIError

components/global/sidebar/Sidebar.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { PhGlobeHemisphereWest, PhList } from "@phosphor-icons/vue"
+import { PhCompass, PhList } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType } from "./SidebarProps";
 
 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
 
-const user = useSupabaseUser()
+// const user = useSupabaseUser()
 
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
   if (actionType === "event-search") {
@@ -23,19 +23,19 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li v-if="user">
+      <li>
         <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                <RouterLink to="/my">
-                  <PhGlobeHemisphereWest size="24" weight="fill" />
+                <RouterLink to="/explore">
+                  <PhCompass size="24" weight="fill" />
                 </RouterLink>
               </UiButton>
             </UiTooltipTrigger>
             <UiTooltipContent :side="'right'" :side-offset="6">
               <p>
-                {{ $t('entity.world.namePlural') }}
+                {{ $t('pages.explore.menuLabel') }}
               </p>
             </UiTooltipContent>
           </UiTooltip>

components/global/user/CTA.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import { PhCheckCircle, PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
+import { PhCheckCircle, PhGear, PhUser, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
 import { cn } from "~/lib/utils";
 
 const router = useRouter()
@@ -82,9 +82,9 @@ function pushRoute(to: AvailableRoutes) {
           </p>
 
           <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my')">
-            <PhGlobeHemisphereWest size="20" weight="fill" />
+            <PhUser size="20" weight="fill" />
             <span>
-              {{ $t('entity.world.namePlural') }}
+              {{ $t('ui.sidebarMenu.profile') }}
             </span>
           </UiDropdownMenuItem>
 

i18n.config.ts

@@ -41,6 +41,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connected as {user}",
         anonymousGreeting: "Preferences",
         sidebarMenu: {
+          profile: "Profile",
           appearance: "Appearance",
           language: "Language",
           account: "Account",
@@ -94,9 +95,14 @@ export default defineI18nConfig(() => ({
         calendar: {
           nameSingular: "Calendar",
           namePlural: "Calendars",
+          namePublicSingular: "Public Calendar",
+          namePublicPlural: "Public Calendars",
           addSingle: "Add a calendar",
+          notFound: "Calendar not found",
+          notFoundDescription: "The link is not valid or the calendar has been deleted / archived.",
           notFoundForWorld: "No calendar for this world… yet !",
           isLoading: "Calendar is loading…",
+          hasXEvents: "This calendar has {count} public events",
           date: {
             start: "Start date",
             end: "End date",
@@ -149,6 +155,9 @@ export default defineI18nConfig(() => ({
               title: "Edit event",
               subtitle: "Update event data",
             },
+            updatedToast: {
+              title: "Event \"{event}\" has been successfuly updated.",
+            },
             editErrors: {
               toastTitle: "Event wasn't updated.",
               title_too_big: "Title should be less than 120 characters long.",
@@ -224,6 +233,12 @@ export default defineI18nConfig(() => ({
           nameSingular: "Character",
           namePlural: "Characters",
         }
+      },
+      pages: {
+        explore: {
+          menuLabel: "Explore",
+          title: "Explore worlds",
+        }
       }
     },
     fr: {
@@ -264,6 +279,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connecté en tant que {user}",
         anonymousGreeting: "Préférences",
         sidebarMenu: {
+          profile: "Profil",
           appearance: "Apparence",
           language: "Langue",
           account: "Compte",
@@ -317,9 +333,14 @@ export default defineI18nConfig(() => ({
         calendar: {
           nameSingular: "Calendriers",
           namePlural: "Calendrier",
+          namePublicSingular: "Calendrier Public",
+          namePublicPlural: "Calendriers Publics",
           addSingle: "Ajouter un calendrier",
+          notFound: "Aucun calendrier trouvé",
+          notFoundDescription: "Le lien n'est pas valide ou le calendrier a été supprimé / archivé.",
           notFoundForWorld: "Aucun calendrier pour ce monde… pour l'instant !",
           isLoading: "Chargement du calendrier…",
+          hasXEvents: "Ce calendrier contient {count} évènements publiques",
           date: {
             start: "Date de début",
             end: "Date de fin",
@@ -372,6 +393,9 @@ export default defineI18nConfig(() => ({
               title: "Modifier l'évènement",
               subtitle: "Mettre à jour les données de l'évènement",
             },
+            updatedToast: {
+              title: "L'évènement \"{event}\" a été modifié avec succès.",
+            },
             editErrors: {
               toastTitle: "L'évènement n'a pas été modifié",
               title_too_big: "Le titre doit être inférieur à 120 caractères.",
@@ -448,6 +472,12 @@ export default defineI18nConfig(() => ({
           nameSingular: "Personnage",
           namePlural: "Personnages",
         }
+      },
+      pages: {
+        explore: {
+          menuLabel: "Explorer",
+          title: "Explorer les mondes",
+        }
       }
     }
   }

models/CalendarConfig.ts

@@ -16,6 +16,7 @@ export interface Calendar extends CalendarConfig {
   shortId?: string
   name: string
   events: CalendarEvent[]
+  eventNb?: Array<{ count: number }>
   state: CalendarState
   color?: string
   world?: World

nuxt.config.ts

@@ -39,7 +39,8 @@ export default defineNuxtConfig({
       login: "/",
       callback: "/my/",
       exclude: [
-        "/calendars(/*)?"
+        "/calendars(/*)?",
+        "/explore(/*)?"
       ]
     }
   },

pages/calendars/[id].vue

@@ -1,16 +1,23 @@
 <script lang="ts" setup>
-import { PhCircleNotch } from "@phosphor-icons/vue";
+import { PhCalendarX, PhCircleNotch } from "@phosphor-icons/vue";
 import type { Calendar } from "~/models/CalendarConfig";
 import type { Category } from "~/models/Category";
 
 const route = useRoute()
 const shortId = route.params.id
 
-const { data: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${shortId}`, query: { shortId, full: true } })
-const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${shortId}` })
+const user = useSupabaseUser()
+
+const { data: calendarData, pending: calPending, refresh: calRefresh } = await useLazyFetch("/api/calendars/query", { key: `calendar-${shortId}`, query: { shortId, full: true } })
+const { data: catData, pending: catPending, refresh: catRefresh } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${shortId}` })
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
+
+watch(user, () => {
+  calRefresh()
+  catRefresh()
+})
 </script>
 
 <template>
@@ -34,4 +41,22 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
 
     <Calendar :calendar-data="cal" :categories />
   </div>
+
+  <div v-else class="h-full w-full grid place-items-center">
+    <Head>
+      <Title>{{ $t("entity.calendar.notFound") }}</Title>
+    </Head>
+
+    <div class="grid justify-items-center opacity-80">
+      <PhCalendarX size="75" class="opacity-60" />
+
+      <Heading level="h1">
+        {{ $t("entity.calendar.notFound") }}
+      </Heading>
+
+      <p>
+        {{ $t('entity.calendar.notFoundDescription') }}
+      </p>
+    </div>
+  </div>
 </template>

pages/calendars/index.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup></script>
+
+<template>
+  <main class="p-8">
+    <Head>
+      <Title>{{ $t("entity.world.namePlural") }}</Title>
+    </Head>
+
+    <Heading level="h1">Calendriers publics</Heading>
+  </main>
+</template>

pages/explore.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { Calendar } from "~/models/CalendarConfig";
+
+const { data } = await useFetch("/api/calendars/query")
+
+const availableCalendars = data.value?.data as Calendar[]
+</script>
+
+<template>
+  <main class="p-8">
+    <Head>
+      <Title>{{ $t("pages.explore.title") }}</Title>
+    </Head>
+
+    <Spacing size="lg">
+      <Heading level="h1">
+        {{ $t("pages.explore.title") }}
+      </Heading>
+
+      <Spacing size="lg">
+        <Heading level="h2">
+          {{ $t("entity.calendar.namePublicPlural") }}
+        </Heading>
+
+        <ul v-if="availableCalendars && availableCalendars?.length > 0" class="grid md:grid-cols-3 gap-2">
+          <li v-for="calendar in availableCalendars" :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>
+                  {{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}
+                </p>
+              </UiCardContent>
+            </UiCard>
+          </li>
+        </ul>
+      </Spacing>
+    </Spacing>
+  </main>
+</template>

server/api/calendars/query.get.ts

@@ -20,7 +20,8 @@ export default defineEventHandler(async (event) => {
     name,
     today,
     months:calendar_months (*),
-    state
+    state,
+    eventNb:calendar_events(count)
   `
 
   const fullFields = `
@@ -42,6 +43,7 @@ export default defineEventHandler(async (event) => {
       category:calendar_event_categories!calendar_events_category_fkey (*),
       secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
     ),
+    eventNb:calendar_events(count),
     world:worlds (
       id,
       gmId:gm_id

stores/CalendarStore.ts

@@ -55,13 +55,6 @@ export const useCalendar = defineStore("calendar", () => {
     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)
    */
@@ -80,9 +73,7 @@ export const useCalendar = defineStore("calendar", () => {
 
       setDefaultDate(activeCalendar.value.today)
       selectDate(activeCalendar.value.today)
-      if (calendarData.world) {
-        setReadStatus(activeCalendar.value.gmId!)
-      }
+      setReadStatus(activeCalendar.value.gmId!)
 
       if (!params.day) {
         params.day = defaultDate.value.day.toString()