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>

resources/js/components/content/partials/CalendarShowEvent.vue

@@ -1,35 +1,19 @@
 <script setup lang="ts">
-import type {Ref} from 'vue';
-import type {ShowInstances} from "@models/show/showInstances";
+import type { PropType} from "vue";
 import type {ContextMenuType} from "@models/misc/contextMenu"
-import {type calendarShowEvent, calendarShowEventMenu} from "@models/misc/calendarShowEvent";
-
+import type {calendarShowEvent, ShowEventActionTrigger} from "@models/misc/calendarShowEvent.ts";
+import {calendarShowEventMenu} from "@models/misc/calendarShowEvent";
 import {ref, computed, onMounted} from 'vue';
-import {getShowInstances} from "@models/show/showInstances";
 import ContextMenu from '@partials/ContextMenu.vue';
 
-// Data
-const showInstances = ref<ShowInstances[]>([]);
-onMounted(async () => {
-  showInstances.value = await getShowInstances({
-    withShow: true,
-    starts: `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`,
-  });
-});
-const shows: Ref<calendarShowEvent[]> = computed(() => {
-  return showInstances.value.flatMap(showInstance => {
-        return {
-          showInstanceId: showInstance.id,
-          title: showInstance.show.name,
-          color: showInstance.show.color,
-          start: new Date(showInstance.starts),
-          end: new Date(showInstance.ends),
-          timed: true
-        }
-      }
-  );
-});
+const emit = defineEmits([
+  'contextMenuEditInstance',
+  'contextMenuEditShow',
+  'contextMenuDeleteInstance',
+  'contextMenuDeleteShow'
+]);
 
+// Data
 const calendar = ref(null);
 const currentCalendarDate = ref(null);
 const selectedShowInstance = ref(null);
@@ -42,13 +26,16 @@ const contextMenu = ref<ContextMenuType>({
   menu: calendarShowEventMenu
 });
 
-
 // Props
 const props = defineProps({
   editMode: {
     type: Boolean,
     default: false,
   },
+  shows: {
+    type: Array as PropType<calendarShowEvent[]>,
+    default: false,
+  }
 });
 
 // Funcs
@@ -65,32 +52,9 @@ const hideContextMenu = () => {
   contextMenu.value.visible = false;
 };
 
-
-const contextMenuAction = (action: string) => {
+const contextMenuAction = (action: ShowEventActionTrigger, item: Object) => {
   if (!selectedShowInstance.value) return;
-
-  switch (action) {
-    case 'contextMenuEditInstance':
-      console.log('Edit instance', selectedShowInstance.value);
-      // Add logic to edit the instance here
-      break;
-    case 'contextMenuEditShow':
-      console.log('Edit show', selectedShowInstance.value);
-      // Add logic to edit the show here
-      break;
-    case 'contextMenuDeleteInstance':
-      console.log('Delete instance', selectedShowInstance.value);
-      // Add logic to delete the instance here
-      break;
-    case 'contextMenuDeleteShow':
-      console.log('Delete show', selectedShowInstance.value);
-      // Add logic to delete the show here
-      break;
-    default:
-      console.log('Unknown action:', action);
-      break;
-  }
-
+  emit(action, selectedShowInstance.value.showInstanceIndex);
   contextMenu.value.visible = false;
 };
 

resources/js/components/content/partials/ContextMenu.vue

@@ -4,7 +4,7 @@ import {menuEntryWithAction, menuEntryWithChildren} from "@models/misc/contextMe
 
 import {type PropType} from 'vue';
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['contextMenuAction']);
 
 const props = defineProps({
   top: {
@@ -19,7 +19,7 @@ const props = defineProps({
 });
 
 function triggerAction(item: string) {
-  console.log(item);
+  emit('contextMenuAction', item);
 }
 </script>