Congegni/sintonia_webapp
7
0
Fork 0
Code Issues 33 Pull requests Projects Releases Packages Wiki Activity

feat(FE): dashboard add periodic fetchInstances, changed show and show instance form call

Browse source
This commit is contained in:
Michael 2025-04-09 10:29:39 +02:00
parent ae74a76e0c
commit 95fa9fd742
1 changed files with 50 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

89
resources/js/components/content/Dashboard.vue
View file

@ -1,15 +1,12 @@
<script setup lang="ts">
import {computed, onMounted, type Ref, ref} from "vue";
import {computed, onMounted, onBeforeUnmount, ref} from "vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import {baseShow, deleteShow} from "@models/show/show.ts";
import {baseShowInstance, getShowInstances, type ShowInstance} from "@models/show/showInstance.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 {baseShowDays, getShowDays} from "@models/show/showDays.ts";
import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
import ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
import ShowForm from "@partials/show/ShowForm.vue";
import CalendarShowEvent from "@partials/show/CalendarShowEvent.vue"
import {extractTime} from "@/helpers/DateFormatter.ts";
// Store
const auth = useAuthStore();
@ -19,79 +16,93 @@ 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());
const shows: Ref<calendarShowEvent[]> = computed(() => setShowInstancesForCalendar(showInstances.value));
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
onMounted(async () => {
const today = new Date();
const startOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
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], // Format as YYYY-MM-DD
starts: startOfMonth.toISOString().split('T')[0],
};
showInstances.value = await getShowInstances(options);
});
isRunning.value = false;
}
const toggleEditMode = () => {
editMode.value = !editMode.value;
};
const toggleMenuEditInstance = () => {
showInstanceCreateEditMode.value = !showInstanceCreateEditMode.value
}
const contextMenuEditInstance = (showInstanceId: number) => {
selectedShowInstance.value = showInstances.value[showInstanceId];
toggleMenuEditInstance()
selectedShowInstance.value = showInstances.value[showInstanceId].id;
showInstanceCreateEditMode.value = true;
};
const contextMenuEditShow = async (showInstanceId: number) => {
showSelected.value = showInstances.value[showInstanceId].show;
let showDaysRules = await getShowDays({show_id: showSelected.value.id, flattenShowDays: true});
showDaysRules.firstShow = new Date(showDaysRules.firstShow);
// TODO Timezone problems
showDaysRules.startTime = extractTime(showDaysRules.startTime, true);
showSelected.value.showDays = showDaysRules;
showSelected.value = showInstances.value[showInstanceId].show.id;
showCreateEditMode.value = true;
};
const contextMenuDeleteInstance = (showInstanceId: number) => {
// deleteShowInstance([showInstances.value[showInstanceId].id])
const contextMenuDeleteInstance = async (showInstanceId: number) => {
await deleteShowInstance([showInstances.value[showInstanceId].id])
await triggerFetchShowInstances(new Date());
};
const contextMenuDeleteShow = (showInstanceId: number) => {
deleteShow([showInstances.value[showInstanceId].show.id])
const contextMenuDeleteShow = async (showInstanceId: number) => {
await deleteShow([showInstances.value[showInstanceId].show.id])
await triggerFetchShowInstances(new Date());
};
const createShow = () => {
showSelected.value = baseShow();
showSelected.value.showDays = baseShowDays();
showSelected.value = 0;
showCreateEditMode.value = true;
};
const resetItemEdited = () => {
showSelected.value = baseShow()
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
onMounted(async () => {
await triggerFetchShowInstances(new Date());
intervalId = setInterval(async () => {
if (!isRunning.value) {
await triggerFetchShowInstances(new Date());
}
}, 1000);
});
onBeforeUnmount(() => {
clearInterval(intervalId);
});
</script>
<template>
<template v-if="showCreateEditMode || showInstanceCreateEditMode">
<ShowForm v-if="showCreateEditMode" :show="showSelected" @go-back="resetItemEdited" />
<ShowInstanceForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance" @toggle-menu-edit-instance="toggleMenuEditInstance" />
<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>
<v-btn color="secondary" @click="toggleEditMode">
{{ editMode ? 'Disabilita modifica calendario' : 'Abilita modifica calendario' }}
</v-btn>
</template>
</v-row>
<CalendarShowEvent