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

<script setup lang="ts">
import {ref, type PropType, onMounted} from "vue";
import {type Show} from "@models/show/show.ts";
import ShowScheduleForm from "@partials/show/ShowScheduleForm.vue";
import {useShowStore} from "@/stores/show.store.ts";
import {getUser} from "@models/User.ts";
import {getPlaylist} from "@models/playlist.ts";
import ColorPickerButton from "@partials/fields/misc/ColorPickerButton.vue";

const props = defineProps({
  show: {
    type: Object as PropType<Show>,
    required: true,
  },
});

let usersDJs = ref([])
let playlists = ref([])
const isLoading = ref(false);
const showScheduleFormMode = ref(false);

const showFormStore = useShowStore()
onMounted(async () => {
  isLoading.value = true
  await showFormStore.loadShow(props.show)
  usersDJs.value = await getUser({role: 'dj'});
  playlists.value = await getPlaylist({});
  isLoading.value = false
})

const toggleScheduleForm = () => {
  showScheduleFormMode.value = !showScheduleFormMode.value;
}
</script>

<template>
  <v-card>
    <v-card-title>
      <h3>Trasmissione</h3>
    </v-card-title>

    <template v-if="showScheduleFormMode">
      <ShowScheduleForm
          v-model="showFormStore.currentShow.showDays"
          @toggle-show-schedule-form="toggleScheduleForm"
          @save-show-schedule="showFormStore.saveSchedule"
      />
    </template>

    <template v-else>
      <v-form>
        <v-card-text>
          <v-row no-gutters>
            <!-- Name Field -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-text-field
                    v-model="showFormStore.currentShow.name"
                    label="Nome"
                    density="compact"
                    :required="true"
                    @update:modelValue="value => showFormStore.updateField({ key: 'name', value })"
                />
              </v-card>
            </v-col>

            <!-- URL Field -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-text-field
                    v-model="showFormStore.currentShow.url"
                    label="URL"
                    density="compact"
                    :required="true"
                    @update:modelValue="value => showFormStore.updateField({ key: 'url', value })"
                />
              </v-card>
            </v-col>

            <!-- Genre Field -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-text-field
                    v-model="showFormStore.currentShow.genre"
                    label="Genere"
                    density="compact"
                    :required="true"
                    @update:modelValue="value => showFormStore.updateField({ key: 'genre', value })"
                />
              </v-card>
            </v-col>

            <!-- Description Field -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-textarea
                    v-model="showFormStore.currentShow.description"
                    label="Descrizione"
                    density="compact"
                    rows="2"
                    @update:modelValue="value => showFormStore.updateField({ key: 'description', value })"
                />
              </v-card>
            </v-col>

            <!-- Background Color Picker -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <ColorPickerButton
                    v-model="showFormStore.currentShow.backgroundColor"
                    label="Colore di sfondo"
                    @update:modelValue="value => showFormStore.updateField({ key: 'backgroundColor', value })"
                />
              </v-card>
            </v-col>

            <!-- Image Path File Input -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-file-input
                    v-model="showFormStore.currentShow.imagePath"
                    label="Percorso immagine"
                    density="compact"
                    type="file"
                    @update:modelValue="value => showFormStore.updateField({ key: 'imagePath', value })"
                />
              </v-card>
            </v-col>

            <!-- Autoplaylist Conditional -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-card>
                  <v-checkbox
                      label="Attivare regole di ripetizione?"
                      v-model="showFormStore.currentShow.hasAutoplaylist"
                  ></v-checkbox>
                  <v-checkbox
                      v-model="showFormStore.currentShow.autoplaylistRepeat"
                      label="Ripetere playlist?"
                      :disabled="!showFormStore.currentShow.hasAutoplaylist"
                      @update:modelValue="value => showFormStore.updateField({ key: 'autoplaylistRepeat', value })"
                  />

                  <v-select
                      v-model="showFormStore.currentShow.autoplaylist_id"
                      :items="playlists"
                      label="Playlist"
                      density="compact"
                      item-title="name"
                      item-value="id"
                      :disabled="!showFormStore.currentShow.hasAutoplaylist"
                      @update:modelValue="value => showFormStore.updateField({ key: 'autoplaylistId', value })"
                  />
                </v-card>
              </v-card>
            </v-col>

            <!-- DJs Select -->
            <v-col cols="12" md="6" lg="4">
              <v-card>
                <v-select
                    v-model="showFormStore.currentShow.showDjs"
                    :items="usersDJs"
                    label="DJs"
                    density="compact"
                    item-title="login"
                    item-value="id"
                    multiple
                    @update:modelValue="value => showFormStore.updateField({ key: 'showDjs', value })"
                />
              </v-card>
            </v-col>
          </v-row>
        </v-card-text>

        <v-card-actions>
          <v-btn color="accent" @click="$emit('goBack')">Torna indietro</v-btn>
          <v-btn color="accent" @click="showFormStore.saveShow">Salva</v-btn>
          <v-btn color="accent" @click="toggleScheduleForm">Salva e schedula</v-btn>
        </v-card-actions>
      </v-form>
    </template>
  </v-card>
</template>

<style scoped></style>