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

fix(FE): show schedule forms fields

Browse source
This commit is contained in:
Michael 2025-04-02 23:41:59 +02:00
parent 848b369b02
commit 87daec73d0
1 changed files with 59 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

89
resources/js/components/content/partials/show/ShowScheduleForm.vue
View file

@ -1,39 +1,65 @@
<script setup lang="ts">
<script setup lang="ts">
import {onMounted, ref, watch} from 'vue';
import {useShowStore} from "@/stores/show.store.ts";
import {showRepetitionData} from "@models/show/ShowRepetition.ts";
import DaysCheckbox from "@partials/fields/show/DaysCheckbox.vue";
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
const emits =defineEmits(['toggle-show-schedule-form'])
// Emits and props
const emits = defineEmits(['toggle-show-schedule-form', 'trigger-show-creation'])
const showFormStore = useShowStore();
// Store
const showStore = useShowStore();
// Data
const checkBoxEnd = ref(false)
const checkBoxRepetition = ref(false)
const isFormValid = ref(false)
// Funcs
onMounted(() => {
const startDayShow = showStore.currentShow.showDays.firstShow.getDay();
let showDays = checkBoxRepetition.value ? showStore.currentShow.showDays.day : [];
showDays.push(startDayShow);
showStore.updateShowDaysField({ key: 'day', value: showDays });
});
const updateShowStartDay = (newStartDate) => {
const previousStartDayShow = showStore.currentShow.showDays.firstShow.getDay();
let showDays = showStore.currentShow.showDays.day.filter((item) => item !== previousStartDayShow);
showStore.updateShowDaysField({ key: 'firstShow', value: newStartDate });
const newStartDayShow = newStartDate.getDay();
showDays.push(newStartDayShow);
showStore.updateShowDaysField({ key: 'day', value: showDays });
};
const goBack = () => {
// showFormStore.resetShowDays();
emits("toggle-show-schedule-form");
};
const saveShowSchedule = () => {
showFormStore.saveSchedule();
const saveShowSchedule = async () => {
if (showStore.currentShow.id) {
return await showStore.updateShowDays();
}
emits('trigger-show-creation')
};
const checkBoxEnd = ref(false)
const checkBoxRepetition = ref(false)
watch(checkBoxEnd, (checkBoxEnd) => {
if(checkBoxEnd == false) showFormStore.updateShowDaysField({ key: 'lastShow', value: null })
if(checkBoxEnd == false) showStore.updateShowDaysField({ key: 'lastShow', value: null })
})
watch(checkBoxRepetition, (checkBoxRepetition) => {
if(checkBoxRepetition == false) {
showFormStore.updateShowDaysField({key: 'day', value: []})
// TODO By restoring the noRepeat from the day enum
// one can toggle it's visibility based on the select box disabled value
// Only cosmetic
showFormStore.updateShowDaysField({key: 'repeatType', value: -1})
watch(checkBoxRepetition, (newValue) => {
if (!newValue) {
const startDayShow = showStore.currentShow.showDays.firstShow.getDay();
showStore.updateShowDaysField({ key: 'day', value: [startDayShow] });
showStore.updateShowDaysField({ key: 'repeatType', value: 'noRepeat' });
}
})
});
// TODO Create a fixed selected day for repetition extracted from the start date
// Create a local ref var that get's the day number from the startDate, pass it
// to the days component as a fixed date
</script>
<template>
@ -41,18 +67,19 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
<v-card-title>
<h3>Regole di programmazione</h3>
</v-card-title>
<v-form>
<v-form ref="form" v-model="isFormValid">
<v-card-text>
<v-row no-gutters>
<!-- First Show Date -->
<v-col cols="12" md="6" lg="4">
<v-date-picker
v-model="showFormStore.currentShow.showDays.firstShow"
:value="showStore.currentShow.showDays.firstShow"
:min="new Date().toISOString().substring(0, 10)"
:title="'Data inizio'"
label="Data inizio"
density="compact"
@update:modelValue="value => showFormStore.updateShowDaysField({ key: 'firstShow', value })"
required="true"
v-on:update:modelValue="updateShowStartDay"
/>
</v-col>
@ -63,8 +90,8 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
v-model="checkBoxEnd"
></v-checkbox>
<v-date-picker
v-model="showFormStore.currentShow.showDays.lastShow"
:min="showFormStore.currentShow.showDays.firstShow"
:v-model="showStore.currentShow.showDays.lastShow"
:min="showStore.currentShow.showDays.firstShow"
label="Data fine"
title="Data fine"
density="compact"
@ -75,11 +102,12 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
<!-- Start Time and Duration -->
<v-col cols="12" md="6" lg="4">
<ShowStartEndTime
v-model="showFormStore.currentShow.showDays.startTime"
v-model="showStore.currentShow.showDays.startTime"
:start-time-label="'Ora inizio show'"
:duration-label="'Durata'"
:end-time-label="'Orario di fine della trasmissione'"
@update:duration="value => showFormStore.updateShowDaysField({ key: 'duration', value })"
@update:duration="value => showStore.updateShowDaysField({ key: 'duration', value })"
required="true"
/>
</v-col>
@ -90,7 +118,7 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
v-model="checkBoxRepetition"
></v-checkbox>
<v-select
v-model="showFormStore.currentShow.showDays.repeatType"
v-model="showStore.currentShow.showDays.repeatType"
:items="showRepetitionData"
label="Ripetizione"
density="compact"
@ -100,10 +128,11 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
/>
<DaysCheckbox
v-model="showFormStore.currentShow.showDays.day"
v-model="showStore.currentShow.showDays.day"
:disabled="!checkBoxRepetition || (showStore.currentShow.showDays.repeatType === 'noRepeat')"
:fixedDay="showStore.currentShow.showDays.firstShow.getDay()"
@update:modelValue="value => showStore.updateShowDaysField({ key: 'day', value })"
label="Giorni"
:disabled="!checkBoxRepetition"
@update:modelValue="value => showFormStore.updateShowDaysField({ key: 'day', value })"
/>
</v-col>
</v-row>
@ -111,7 +140,7 @@ watch(checkBoxRepetition, (checkBoxRepetition) => {
<v-card-actions>
<v-btn color="accent" @click="goBack">Torna indietro</v-btn>
<v-btn color="accent" @click="saveShowSchedule">Salva</v-btn>
<v-btn color="accent" @click="saveShowSchedule" :disabled="!isFormValid">Salva</v-btn>
</v-card-actions>
</v-form>
</v-card>