sintonia_webapp/resources/js/components/content/partials/show/ShowScheduleForm.vue

<script setup lang="ts">
import {onMounted, type PropType, ref, watch} from 'vue';
import {showRepetitionData} from "@models/show/ShowRepetition.ts";
import DaysCheckbox from "@partials/fields/show/DaysCheckbox.vue";
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
import {useShowDaysStore} from "@stores/show/showDays.store.ts";

// Emits and props
const emits = defineEmits(['toggle-show-schedule-form', 'trigger-show-creation'])
const props = defineProps({
  showId: {
    type: Number as PropType<number | null>,
    required: true,
    default: null,
  }
})
// Store
const showDaysStore = useShowDaysStore();
showDaysStore.resetShowDays()

// Data
const checkBoxEnd = ref(false)
const checkBoxRepetition = ref(false)
const isFormValid = ref(false)
const showDuration = ref("")
const showStartDate = ref()

// Funcs
onMounted(async () => {
  if (props.showId == null) {
    showStartDate.value = showDaysStore.currentShowDays.firstShow;
    const startDayShow = showDaysStore.currentShowDays.firstShow.getDay();
    let showDays = checkBoxRepetition.value ? showDaysStore.currentShowDays.day : [];
    showDays.push(startDayShow);
    showDaysStore.updateField({key: 'day', value: showDays});
    return
  }
  await showDaysStore.getShowDays({flattenShowDays: true, showId: props.showId})
  showStartDate.value = showDaysStore.currentShowDays.firstShow;
  if (showDaysStore.currentShowDays.repeatType != "noRepeat") {
    checkBoxRepetition.value = true
  }
  showDuration.value = showDaysStore.currentShowDays.duration
});

const updateShowStartDay = (newStartDate) => {
  const previousStartDayShow = showDaysStore.currentShowDays.firstShow.getDay();
  const newStartDayShow = newStartDate.getDay();

  let showDays = showDaysStore.currentShowDays.day.filter((item) => item !== previousStartDayShow);
  showDays.push(newStartDayShow);
  showStartDate.value = newStartDate;
  showDaysStore.updateField({key: 'day', value: showDays});
  showDaysStore.updateField({key: 'firstShow', value: newStartDate});
};

const goBack = () => {
  emits("toggle-show-schedule-form");
};

const saveShowSchedule = async () => {
  if (props.showId != null) {
    return await showDaysStore.updateShowDays(props.showId);
  }
  emits('trigger-show-creation')
};

watch(checkBoxEnd, (checkBoxEnd) => {
  if (checkBoxEnd == false) showDaysStore.updateField({key: 'lastShow', value: null})
})

watch(checkBoxRepetition, (newValue) => {
  if (!newValue) {
    const startDayShow = showDaysStore.currentShowDays.firstShow.getDay();
    showDaysStore.updateField({key: 'day', value: [startDayShow]});
    showDaysStore.updateField({key: 'repeatType', value: 'noRepeat'});
  }
});
</script>

<template>
  <v-card>
    <v-card-title>
      <h3>Regole di programmazione</h3>
    </v-card-title>
    <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="showStartDate"
                :min="new Date().toISOString().substring(0, 10)"
                :title="'Data inizio'"
                label="Data inizio"
                density="compact"
                required="true"
                v-on:update:modelValue="updateShowStartDay"
            />
          </v-col>

          <!-- Last Show Date with Checkbox Conditional -->
          <v-col cols="12" md="6" lg="4">
            <v-checkbox
                label="impostare una data di fine per lo show?"
                v-model="checkBoxEnd"
            ></v-checkbox>
            <v-date-picker
                v-model="showDaysStore.currentShowDays.lastShow"
                :min="showDaysStore.currentShowDays.firstShow"
                :disabled="!checkBoxEnd"
                label="Data fine"
                title="Data fine"
                density="compact"
            />
          </v-col>

          <!-- Start Time and Duration -->
          <v-col cols="12" md="6" lg="4">
            <ShowStartEndTime
                v-model="showDaysStore.currentShowDays.startTime"
                :start-time-label="'Ora inizio show'"
                :duration-label="'Durata'"
                :end-time-label="'Orario di fine della trasmissione'"
                :pre-set-duration="showDaysStore.currentShowDays.duration"
                @update:duration="value => showDaysStore.updateField({ key: 'duration', value })"
                required="true"
            />
          </v-col>

          <!-- Repeat Options -->
          <v-col cols="12" md="6" lg="4">
            <v-checkbox
                label="Attivare regole di ripetizione?"
                v-model="checkBoxRepetition"
            ></v-checkbox>
            <v-select
                v-model="showDaysStore.currentShowDays.repeatType"
                :items="showRepetitionData"
                label="Ripetizione"
                density="compact"
                item-title="repeatName"
                item-value="type"
                :disabled="!checkBoxRepetition"
            />

            <DaysCheckbox
                v-model="showDaysStore.currentShowDays.day"
                :disabled="!checkBoxRepetition || (showDaysStore.currentShowDays.repeatType === 'noRepeat')"
                :fixedDay="showDaysStore.currentShowDays.firstShow.getDay()"
                @update:modelValue="value => showDaysStore.updateField({ key: 'day', value })"
                label="Giorni"
            />
          </v-col>
        </v-row>
      </v-card-text>

      <v-card-actions>
        <v-btn color="accent" @click="goBack">Torna indietro</v-btn>
        <v-btn color="accent" @click="saveShowSchedule" :disabled="!isFormValid">Salva</v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>