feat: FE calendar, context menu, dashboard

resources/js/components/content/Dashboard.vue

@@ -1,34 +1,100 @@
 <script setup lang="ts">
 import CalendarShowEvent from "@/components/content/partials/CalendarShowEvent.vue";
-import {useRouter} from "vue-router";
-import {ref} from "vue";
+import {computed, onMounted, type Ref, ref} from "vue";
 import {useAuthStore} from "@/stores/auth.store.ts";
+import ShowCreateEditForm from "@partials/ShowCreateEditForm.vue";
+import {baseShow, deleteShow} from "@models/show/show.ts";
+import type {Show} from "@models/show/show";
+import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
+import type { PropType} from "vue";
+
+import {baseShowInstance, getShowInstances, type ShowInstance} from "@models/show/showInstance.ts";
+import {setShowInstancesForCalendar} from "@/composables/content/dashboard_page.ts";
 
 const auth = useAuthStore();
 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());
+
+onMounted(async () => {
+  const today = new Date();
+  const startOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+
+  const options = {
+    withShow: true,
+    starts: startOfMonth.toISOString().split('T')[0], // Format as YYYY-MM-DD
+  };
+  showInstances.value = await getShowInstances(options);
+});
+
+
+const shows: Ref<calendarShowEvent[]> = computed(() => setShowInstancesForCalendar(showInstances.value));
 
 const toggleEditMode = () => {
   editMode.value = !editMode.value;
 };
 
-const router = useRouter();
-const navigateToCreateShow = () => {
-  // TODO Change route to correct one
-  router.push({name: 'CreateShow'});
+const contextMenuEditInstance = (showInstanceId: number) => {
+  selectedShowInstance.value = showInstances.value[showInstanceId];
+  showInstanceCreateEditMode.value = true;
 };
+
+const contextMenuEditShow = (showInstanceId: number) => {
+  showSelected.value = showInstances.value[showInstanceId].show;
+  showCreateEditMode.value = true;
+};
+
+const contextMenuDeleteInstance = (showInstanceId: number) => {
+  // deleteShowInstance([showInstances.value[showInstanceId].id])
+};
+
+const contextMenuDeleteShow = (showInstanceId: number) => {
+  deleteShow([showInstances.value[showInstanceId].show.id])
+};
+
+const createShow = () => {
+  showSelected.value = baseShow();
+  showCreateEditMode.value = true;
+};
+
+const resetItemEdited = () => {
+  showSelected.value = baseShow()
+  selectedShowInstance.value = baseShowInstance();
+  showCreateEditMode.value = false;
+  showInstanceCreateEditMode.value = false;
+}
+
+const saveShow = () => {
+
+}
 </script>
 
 <template>
-  <v-row class="ma-4 justify-space-around">
-    <!--    TODO show only if user is Editor or admin-->
-    <template v-if="userRole && (userRole == 'admin' || userRole == 'editor')">
-      <v-btn color="primary" @click="navigateToCreateShow">Crea show</v-btn>
-      <v-btn color="secondary" @click="toggleEditMode">{{ editMode ? 'Disabilita modifica calendario' : 'Abilita modifica calendario' }}</v-btn>
-    </template>
-  </v-row>
-  <CalendarShowEvent :edit-mode="editMode"/>
+  <template v-if="showCreateEditMode || showInstanceCreateEditMode">
+    <ShowCreateEditForm v-if="showCreateEditMode" :show="showSelected"  @go-back="resetItemEdited" @save-show="saveShow"/>
+<!--    <ShowInstanceCreateEditForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance">-->
+  </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>
+      </template>
+    </v-row>
+    <CalendarShowEvent
+        :edit-mode="editMode"
+        :shows="shows"
+        @contextMenuEditInstance="contextMenuEditInstance"
+        @contextMenuEditShow="contextMenuEditShow"
+        @contextMenuDeleteInstance="contextMenuDeleteInstance"
+        @contextMenuDeleteShow="contextMenuDeleteShow"
+    />
+  </template>
 </template>
 
 <style scoped>