120 lines
No EOL
4 KiB
Vue
120 lines
No EOL
4 KiB
Vue
<script setup lang="ts">
|
|
import {computed, onActivated, onDeactivated, ref} from "vue";
|
|
import {useAuthStore} from "@/stores/auth.store.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 ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
|
|
import ShowForm from "@partials/show/ShowForm.vue";
|
|
import CalendarShowEvent from "@partials/show/CalendarShowEvent.vue"
|
|
|
|
// Store
|
|
const auth = useAuthStore();
|
|
const userRole = auth.userData.user.role;
|
|
|
|
// Data
|
|
const editMode = ref(false);
|
|
const showCreateEditMode = ref(false);
|
|
const showInstanceCreateEditMode = ref(false);
|
|
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
|
|
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],
|
|
};
|
|
showInstances.value = await getShowInstances(options);
|
|
isRunning.value = false;
|
|
}
|
|
|
|
const toggleEditMode = () => {
|
|
editMode.value = !editMode.value;
|
|
};
|
|
|
|
const contextMenuEditInstance = (showInstanceId: number) => {
|
|
selectedShowInstance.value = showInstances.value[showInstanceId].id;
|
|
showInstanceCreateEditMode.value = true;
|
|
};
|
|
|
|
const contextMenuEditShow = async (showInstanceId: number) => {
|
|
showSelected.value = showInstances.value[showInstanceId].show.id;
|
|
showCreateEditMode.value = true;
|
|
};
|
|
|
|
const contextMenuDeleteInstance = async (showInstanceId: number) => {
|
|
await deleteShowInstance([showInstances.value[showInstanceId].id])
|
|
await triggerFetchShowInstances(new Date());
|
|
};
|
|
|
|
const contextMenuDeleteShow = async (showInstanceId: number) => {
|
|
await deleteShow([showInstances.value[showInstanceId].show.id])
|
|
await triggerFetchShowInstances(new Date());
|
|
};
|
|
|
|
const createShow = () => {
|
|
showSelected.value = null;
|
|
showCreateEditMode.value = true;
|
|
};
|
|
|
|
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
|
|
onActivated(async () => {
|
|
await triggerFetchShowInstances(new Date());
|
|
intervalId = setInterval(async () => {
|
|
if (!isRunning.value) {
|
|
await triggerFetchShowInstances(new Date());
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
onDeactivated(() => {
|
|
clearInterval(intervalId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="showCreateEditMode || showInstanceCreateEditMode">
|
|
<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>
|
|
</template>
|
|
</v-row>
|
|
<CalendarShowEvent
|
|
:edit-mode="editMode"
|
|
:shows="shows"
|
|
@contextMenuEditInstance="contextMenuEditInstance"
|
|
@contextMenuEditShow="contextMenuEditShow"
|
|
@contextMenuDeleteInstance="contextMenuDeleteInstance"
|
|
@contextMenuDeleteShow="contextMenuDeleteShow"
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style> |