104 lines
No EOL
3.8 KiB
Vue
104 lines
No EOL
3.8 KiB
Vue
<script setup lang="ts">
|
|
import CalendarShowEvent from "@/components/content/partials/CalendarShowEvent.vue";
|
|
import {computed, onMounted, type Ref, ref} from "vue";
|
|
import {useAuthStore} from "@/stores/auth.store.ts";
|
|
import ShowCreateEditForm from "@partials/show/ShowCreateEditForm.vue";
|
|
import {baseShow, deleteShow} from "@models/show/show.ts";
|
|
import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
|
|
import { nextTick } from "vue";
|
|
|
|
import {baseShowInstance, getShowInstances, type ShowInstance} from "@models/show/showInstance.ts";
|
|
import {setShowInstancesForCalendar} from "@/composables/content/dashboard_page.ts";
|
|
import {baseShowDays, getShowDays} from "@models/show/showDays.ts";
|
|
import ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
|
|
|
|
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 toggleMenuEditInstance = () => {
|
|
showInstanceCreateEditMode.value = !showInstanceCreateEditMode.value
|
|
}
|
|
|
|
const contextMenuEditInstance = (showInstanceId: number) => {
|
|
selectedShowInstance.value = showInstances.value[showInstanceId];
|
|
toggleMenuEditInstance()
|
|
};
|
|
|
|
const contextMenuEditShow = async (showInstanceId: number) => {
|
|
showSelected.value = showInstances.value[showInstanceId].show;
|
|
showSelected.value.showDays = await getShowDays({showId: showSelected.value.id, flattenShowDays: true});
|
|
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();
|
|
showSelected.value.showDays = baseShowDays();
|
|
showCreateEditMode.value = true;
|
|
};
|
|
|
|
const resetItemEdited = () => {
|
|
showSelected.value = baseShow()
|
|
selectedShowInstance.value = baseShowInstance();
|
|
showCreateEditMode.value = false;
|
|
showInstanceCreateEditMode.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="showCreateEditMode || showInstanceCreateEditMode">
|
|
<ShowCreateEditForm v-if="showCreateEditMode" :show="showSelected" @go-back="resetItemEdited" />
|
|
<ShowInstanceForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance" @toggle-menu-edit-instance="toggleMenuEditInstance" />
|
|
</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>
|
|
</style> |