From 95fa9fd74272bc4e47ec9b512ccc4da59f0689c0 Mon Sep 17 00:00:00 2001
From: Michael <michael@congegni.net>
Date: Wed, 9 Apr 2025 10:29:39 +0200
Subject: [PATCH] feat(FE): dashboard add periodic fetchInstances, changed show
 and show instance form call

---
 resources/js/components/content/Dashboard.vue | 89 +++++++++++--------
 1 file changed, 50 insertions(+), 39 deletions(-)

diff --git a/resources/js/components/content/Dashboard.vue b/resources/js/components/content/Dashboard.vue
index b21384f..aea2f4e 100644
--- a/resources/js/components/content/Dashboard.vue
+++ b/resources/js/components/content/Dashboard.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import {computed, onMounted, type Ref, ref} from "vue";
+import {computed, onMounted, onBeforeUnmount, ref} from "vue";
 import {useAuthStore} from "@/stores/auth.store.ts";
-import {baseShow, deleteShow} from "@models/show/show.ts";
-import {baseShowInstance, getShowInstances, type ShowInstance} from "@models/show/showInstance.ts";
+import {deleteShow} from "@models/show/show.ts";
+import {baseShowInstance, deleteShowInstance, getShowInstances} from "@models/show/showInstance.ts";
 import {setShowInstancesForCalendar} from "@/composables/content/dashboard_page.ts";
-import {baseShowDays, getShowDays} from "@models/show/showDays.ts";
-import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
 import ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
 import ShowForm from "@partials/show/ShowForm.vue";
 import CalendarShowEvent from "@partials/show/CalendarShowEvent.vue"
-import {extractTime} from "@/helpers/DateFormatter.ts";
 
 // Store
 const auth = useAuthStore();
@@ -19,79 +16,93 @@ const userRole = auth.userData.user.role;
 const editMode = ref(false);
 const showCreateEditMode = ref(false);
 const showInstanceCreateEditMode = ref(false);
-const showInstances = ref<ShowInstance[]>([]);
-let showSelected = ref(baseShow());
-let selectedShowInstance = ref(baseShowInstance());
-
-const shows: Ref<calendarShowEvent[]> = computed(() => setShowInstancesForCalendar(showInstances.value));
+const showInstances = ref([]);
+let showSelected = ref<number>(0);
+let selectedShowInstance = ref<number>(0);
+const isRunning = ref(true);
+let intervalId = 0;
+const shows = computed(() => setShowInstancesForCalendar(showInstances.value));
 
 // Funcs
-onMounted(async () => {
-  const today = new Date();
-  const startOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+const triggerFetchShowInstances = async (date: Date) => {
+  isRunning.value = true;
+  const startOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
 
   const options = {
     withShow: true,
-    starts: startOfMonth.toISOString().split('T')[0], // Format as YYYY-MM-DD
+    starts: startOfMonth.toISOString().split('T')[0],
   };
   showInstances.value = await getShowInstances(options);
-});
+  isRunning.value = false;
+}
 
 const toggleEditMode = () => {
   editMode.value = !editMode.value;
 };
 
-const toggleMenuEditInstance = () => {
-  showInstanceCreateEditMode.value = !showInstanceCreateEditMode.value
-}
-
 const contextMenuEditInstance = (showInstanceId: number) => {
-  selectedShowInstance.value = showInstances.value[showInstanceId];
-  toggleMenuEditInstance()
+  selectedShowInstance.value = showInstances.value[showInstanceId].id;
+  showInstanceCreateEditMode.value = true;
 };
 
 const contextMenuEditShow = async (showInstanceId: number) => {
-  showSelected.value = showInstances.value[showInstanceId].show;
-  let showDaysRules = await getShowDays({show_id: showSelected.value.id, flattenShowDays: true});
-  showDaysRules.firstShow = new Date(showDaysRules.firstShow);
-  // TODO Timezone problems
-  showDaysRules.startTime = extractTime(showDaysRules.startTime, true);
-  showSelected.value.showDays = showDaysRules;
+  showSelected.value = showInstances.value[showInstanceId].show.id;
   showCreateEditMode.value = true;
 };
 
-const contextMenuDeleteInstance = (showInstanceId: number) => {
-  // deleteShowInstance([showInstances.value[showInstanceId].id])
+const contextMenuDeleteInstance = async (showInstanceId: number) => {
+  await deleteShowInstance([showInstances.value[showInstanceId].id])
+  await triggerFetchShowInstances(new Date());
 };
 
-const contextMenuDeleteShow = (showInstanceId: number) => {
-  deleteShow([showInstances.value[showInstanceId].show.id])
+const contextMenuDeleteShow = async (showInstanceId: number) => {
+  await deleteShow([showInstances.value[showInstanceId].show.id])
+  await triggerFetchShowInstances(new Date());
 };
 
 const createShow = () => {
-  showSelected.value = baseShow();
-  showSelected.value.showDays = baseShowDays();
+  showSelected.value = 0;
   showCreateEditMode.value = true;
 };
 
-const resetItemEdited = () => {
-  showSelected.value = baseShow()
+const goBack = async () => {
   selectedShowInstance.value = baseShowInstance();
   showCreateEditMode.value = false;
   showInstanceCreateEditMode.value = false;
+  await triggerFetchShowInstances(new Date());
 }
+
+// TODO The timer may be moved inside the calendar
+//  so reducing the network calls sent
+//  That requires the handling of the context menu
+//  and the show/instance id in a different way though
+onMounted(async () => {
+  await triggerFetchShowInstances(new Date());
+  intervalId = setInterval(async () => {
+    if (!isRunning.value) {
+      await triggerFetchShowInstances(new Date());
+    }
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId);
+});
 </script>
 
 <template>
   <template v-if="showCreateEditMode || showInstanceCreateEditMode">
-    <ShowForm v-if="showCreateEditMode" :show="showSelected"  @go-back="resetItemEdited" />
-    <ShowInstanceForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance" @toggle-menu-edit-instance="toggleMenuEditInstance" />
+    <ShowForm v-if="showCreateEditMode" :showId="showSelected" @go-back="goBack"/>
+    <ShowInstanceForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance"
+                      @toggle-menu-edit-instance="goBack"/>
   </template>
   <template v-else>
     <v-row class="ma-4 justify-space-around">
       <template v-if="userRole && (userRole == 'admin' || userRole == 'editor')">
         <v-btn color="primary" @click="createShow">Crea show</v-btn>
-        <v-btn color="secondary" @click="toggleEditMode">{{ editMode ? 'Disabilita modifica calendario' : 'Abilita modifica calendario' }}</v-btn>
+        <v-btn color="secondary" @click="toggleEditMode">
+          {{ editMode ? 'Disabilita modifica calendario' : 'Abilita modifica calendario' }}
+        </v-btn>
       </template>
     </v-row>
     <CalendarShowEvent