Merge pull request #59 from AlexisNP/bugfix/modal-issues

components/calendar/dialog/CreateEvent.vue

@@ -5,8 +5,6 @@ const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
 const { resetSkeleton } = useCalendar()
 const popoverOpen = ref(false)
 
-const isLoading = ref(false)
-
 const props = defineProps<{
   date?: RPGDate
   btnClass?: string
@@ -38,10 +36,8 @@ function openEventCreatePopover() {
  * @param e The closing event (can be keydown or click)
  */
 function handleClosing(e: Event) {
-  if (isLoading.value) {
+  popoverOpen.value = false
-    popoverOpen.value = false
+  e.preventDefault()
-    e.preventDefault()
-  }
 }
 </script>
 

components/calendar/dialog/QuickCreateEvent.vue

@@ -23,7 +23,7 @@ function toggleDialog() {
       <UiDialogTitle>
         {{ $t("entity.calendar.event.addSingle") }}
       </UiDialogTitle>
-      <CalendarFormCreateEvent />
+      <CalendarFormCreateEvent @event-created="toggleDialog" />
     </UiDialogContent>
   </UiDialog>
 </template>

components/calendar/form/Create.vue

@@ -2,7 +2,7 @@
 import type { Calendar } from "~/models/CalendarConfig";
 import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
 
-const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: []}
+const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: [], state: "draft" }
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
 
 onMounted(() => {

components/calendar/state/monthly/DayTile.vue

@@ -16,7 +16,7 @@ const calendarTile = ref()
 const calendarEventsList = ref()
 
 const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
-const { selectedDate, currentEvents } = storeToRefs(useCalendar())
+const { selectedDate, currentEvents, isReadOnly } = storeToRefs(useCalendar())
 
 /**
  * All events with a startDate / endDate that starts or ends on the tile
@@ -143,7 +143,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     </ClientOnly>
 
     <ClientOnly>
-      <LazyCalendarDialogCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
+      <LazyCalendarDialogCreateEvent v-if="!isReadOnly" :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
     </ClientOnly>
   </div>
 </template>

models/CalendarConfig.ts

@@ -13,7 +13,7 @@ export interface CalendarConfig {
 
 export interface Calendar extends CalendarConfig {
   id?: number
-  shortId: string
+  shortId?: string
   name: string
   events: CalendarEvent[]
   state: CalendarState