fix(git): manual merging commit

resources/js/components/content/Dashboard.vue

@@ -1,9 +1,34 @@
 <script setup lang="ts">
+import CalendarShowEvent from "@/components/content/partials/CalendarShowEvent.vue";
+import {useRouter} from "vue-router";
+import {ref} from "vue";
+import {useAuthStore} from "@/stores/auth.store.ts";
 
+const auth = useAuthStore();
+const userRole = auth.userData.user.role;
+
+const editMode = ref(false);
+
+const toggleEditMode = () => {
+  editMode.value = !editMode.value;
+};
+
+const router = useRouter();
+const navigateToCreateShow = () => {
+  // TODO Change route to correct one
+  router.push({name: 'CreateShow'});
+};
 </script>
 
 <template>
-  <div>dashboard</div>
+  <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>
 
 <style scoped>

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type {Ref} from 'vue';
+import type {ShowInstances} from "@models/show/showInstances";
+import type {ContextMenuType} from "@models/misc/contextMenu"
+import {type calendarShowEvent, 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 calendar = ref(null);
+const currentCalendarDate = ref(null);
+const selectedShowInstance = ref(null);
+const contextMenu = ref<ContextMenuType>({
+  visible: false,
+  position: {
+    top: 0,
+    left: 0,
+  },
+  menu: calendarShowEventMenu
+});
+
+
+// Props
+const props = defineProps({
+  editMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// Funcs
+const openContextMenu = (showInstance: Record<string, unknown>, browserEvent: MouseEvent) => {
+  if (!props.editMode) return;
+
+  selectedShowInstance.value = showInstance;
+  contextMenu.value.visible = true;
+  contextMenu.value.position.top = browserEvent.y;
+  contextMenu.value.position.left = browserEvent.x + 5;
+};
+
+const hideContextMenu = () => {
+  contextMenu.value.visible = false;
+};
+
+
+const contextMenuAction = (action: string) => {
+  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;
+  }
+
+  contextMenu.value.visible = false;
+};
+
+const formatTime = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+}
+</script>
+
+<template>
+  <v-calendar
+      ref="calendar"
+      v-model="currentCalendarDate"
+      :events="shows"
+      :event-margin-bottom="3"
+      @contextmenu:event="openContextMenu"
+  >
+    <template v-slot:event="{ event }">
+      <div
+          class="v-event mx-1 event-content"
+          :style="{ backgroundColor: event.color as string }"
+          @click="(e) => openContextMenu(event, e)"
+          @click.self="hideContextMenu"
+      >
+        <span>{{ event.title }}</span>
+        <br/>
+        <span>{{ formatTime(event.start as string) }} - {{ formatTime(event.end as string) }}</span>
+      </div>
+    </template>
+  </v-calendar>
+
+  <ContextMenu v-if="contextMenu.visible" @contextMenuAction="contextMenuAction" :event="selectedShowInstance"
+               :menu="contextMenu.menu" :top="contextMenu.position.top" :left="contextMenu.position.left"/>
+</template>
+
+<style scoped>
+.event-content {
+  position: relative;
+  white-space: normal;
+  line-height: 1.2;
+  padding: 4px 8px;
+  background-color: #7492b9;
+  border-radius: 8px;
+  color: white;
+}
+</style>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type {ContextMenu} from "@models/misc/contextMenu.ts";
+import {menuEntryWithAction, menuEntryWithChildren} from "@models/misc/contextMenu.ts";
+
+import {type PropType} from 'vue';
+
+const emit = defineEmits(['click']);
+
+const props = defineProps({
+  top: {
+    type: Number,
+  },
+  left: {
+    type: Number,
+  },
+  menu: {
+    type: Object as PropType<ContextMenu>,
+  }
+});
+
+function triggerAction(item: string) {
+  console.log(item);
+}
+</script>
+
+<template>
+  <v-card
+      class="mx-auto context-menu"
+      width="200"
+      ref="menuRef"
+      :style="{ top: `${props.top}px`, left: `${props.left}px` }"
+  >
+    <v-list>
+      <template v-for="(entry, i) in menu.entries">
+        <v-list-group
+            v-if="menuEntryWithChildren(entry) && entry.children"
+            :value="i"
+        >
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" :title=entry.menuText></v-list-item>
+          </template>
+          <v-list-item
+              v-for="(child, j) in entry.children"
+              :key="j"
+              @click="triggerAction(child.actionTrigger)"
+              :title="child.menuText"
+          ></v-list-item>
+        </v-list-group>
+
+        <!-- Render children if any -->
+        <v-list-item
+            v-else-if="menuEntryWithAction(entry)"
+            link
+            @click="triggerAction(entry.actionTrigger)"
+        >
+          <v-list-item-title>{{ entry.menuText }}</v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-card>
+</template>
+
+<style scoped>
+.context-menu {
+  position: absolute;
+  width: 200px
+}
+</style>

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

@@ -2,7 +2,7 @@
 import {computed, ref} from "vue";
 import draggable from "vuedraggable";
 draggable.compatConfig = { MODE: 3 };
-import DataTableRowHandler from "@/components/content/partials/table/DataTableRowHandler.vue";
+//import DataTableRowHandler from "@/components/content/partials/table/DataTableRowHandler.vue";
 
 const emit = defineEmits([
     'update:search',