fix(FE): rename file
This commit is contained in:
parent
0ce6ff2ab3
commit
15e7606e45
2 changed files with 53 additions and 35 deletions
|
|
@ -3,7 +3,7 @@ import {reactive, ref, watch} from "vue";
|
|||
import Table from "@partials/Table.vue";
|
||||
import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
|
||||
import {show_page} from "@/composables/content/show/show_page.ts";
|
||||
import ShowCreateEditForm from "@partials/show/ShowCreateEditForm.vue";
|
||||
import ShowForm from "@partials/show/ShowForm.vue";
|
||||
import {baseShow, type Show} from "@models/show/show";
|
||||
|
||||
const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = show_page()
|
||||
|
|
@ -82,7 +82,7 @@ watch(search, (newValue, oldValue) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ShowCreateEditForm
|
||||
<ShowForm
|
||||
v-if="showSelected.id !== null && !dialog.open"
|
||||
:show="showSelected"
|
||||
@go-back="resetItemEdited"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {getUser} from "@models/User.ts";
|
|||
import {getPlaylist} from "@models/playlist.ts";
|
||||
import ColorPickerButton from "@partials/fields/misc/ColorPickerButton.vue";
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Object as PropType<Show>,
|
||||
|
|
@ -14,18 +15,22 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
// Data
|
||||
let usersDJs = ref([])
|
||||
let playlists = ref([])
|
||||
const isLoading = ref(false);
|
||||
const loading = ref(false);
|
||||
const showScheduleFormMode = ref(false);
|
||||
const isFormValid = ref(false);
|
||||
// Store
|
||||
const showStore = useShowStore()
|
||||
showStore.loadShow(props.show)
|
||||
|
||||
const showFormStore = useShowStore()
|
||||
// Funcs
|
||||
onMounted(async () => {
|
||||
isLoading.value = true
|
||||
await showFormStore.loadShow(props.show)
|
||||
loading.value = true
|
||||
usersDJs.value = await getUser({role: 'dj'});
|
||||
playlists.value = await getPlaylist({});
|
||||
isLoading.value = false
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
const toggleScheduleForm = () => {
|
||||
|
|
@ -34,32 +39,45 @@ const toggleScheduleForm = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card
|
||||
:disabled="loading"
|
||||
:loading="loading"
|
||||
>
|
||||
<template v-slot:loader="{ isActive }">
|
||||
<v-progress-linear
|
||||
:active="isActive"
|
||||
color="deep-purple"
|
||||
height="4"
|
||||
indeterminate
|
||||
></v-progress-linear>
|
||||
</template>
|
||||
|
||||
<v-card-title>
|
||||
<h3>Trasmissione</h3>
|
||||
</v-card-title>
|
||||
|
||||
<template v-if="showScheduleFormMode">
|
||||
<ShowScheduleForm
|
||||
v-model="showFormStore.currentShow.showDays"
|
||||
v-model="showStore.currentShow.showDays"
|
||||
@toggle-show-schedule-form="toggleScheduleForm"
|
||||
@save-show-schedule="showFormStore.saveSchedule"
|
||||
@trigger-show-creation="showStore.createShow"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<v-form>
|
||||
<v-form ref="form" v-model="isFormValid">
|
||||
<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"
|
||||
v-model="showStore.currentShow.name"
|
||||
label="Nome"
|
||||
density="compact"
|
||||
:required="true"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'name', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'name', value })"
|
||||
:rules="[v => !!v || 'Nome è obbligatorio']"
|
||||
required="true"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -68,11 +86,11 @@ const toggleScheduleForm = () => {
|
|||
<v-col cols="12" md="6" lg="4">
|
||||
<v-card>
|
||||
<v-text-field
|
||||
v-model="showFormStore.currentShow.url"
|
||||
v-model="showStore.currentShow.url"
|
||||
label="URL"
|
||||
density="compact"
|
||||
:required="true"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'url', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'url', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -81,11 +99,11 @@ const toggleScheduleForm = () => {
|
|||
<v-col cols="12" md="6" lg="4">
|
||||
<v-card>
|
||||
<v-text-field
|
||||
v-model="showFormStore.currentShow.genre"
|
||||
v-model="showStore.currentShow.genre"
|
||||
label="Genere"
|
||||
density="compact"
|
||||
:required="true"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'genre', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'genre', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -94,11 +112,11 @@ const toggleScheduleForm = () => {
|
|||
<v-col cols="12" md="6" lg="4">
|
||||
<v-card>
|
||||
<v-textarea
|
||||
v-model="showFormStore.currentShow.description"
|
||||
v-model="showStore.currentShow.description"
|
||||
label="Descrizione"
|
||||
density="compact"
|
||||
rows="2"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'description', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'description', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -107,9 +125,9 @@ const toggleScheduleForm = () => {
|
|||
<v-col cols="12" md="6" lg="4">
|
||||
<v-card>
|
||||
<ColorPickerButton
|
||||
v-model="showFormStore.currentShow.backgroundColor"
|
||||
v-model="showStore.currentShow.backgroundColor"
|
||||
label="Colore di sfondo"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'backgroundColor', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'backgroundColor', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -118,11 +136,11 @@ const toggleScheduleForm = () => {
|
|||
<v-col cols="12" md="6" lg="4">
|
||||
<v-card>
|
||||
<v-file-input
|
||||
v-model="showFormStore.currentShow.imagePath"
|
||||
v-model="showStore.currentShow.imagePath"
|
||||
label="Percorso immagine"
|
||||
density="compact"
|
||||
type="file"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'imagePath', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'imagePath', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -133,24 +151,24 @@ const toggleScheduleForm = () => {
|
|||
<v-card>
|
||||
<v-checkbox
|
||||
label="Attivare regole di ripetizione?"
|
||||
v-model="showFormStore.currentShow.hasAutoplaylist"
|
||||
v-model="showStore.currentShow.hasAutoplaylist"
|
||||
></v-checkbox>
|
||||
<v-checkbox
|
||||
v-model="showFormStore.currentShow.autoplaylistRepeat"
|
||||
v-model="showStore.currentShow.autoplaylistRepeat"
|
||||
label="Ripetere playlist?"
|
||||
:disabled="!showFormStore.currentShow.hasAutoplaylist"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'autoplaylistRepeat', value })"
|
||||
:disabled="!showStore.currentShow.hasAutoplaylist"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'autoplaylistRepeat', value })"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
v-model="showFormStore.currentShow.autoplaylist_id"
|
||||
v-model="showStore.currentShow.autoplaylistId"
|
||||
:items="playlists"
|
||||
label="Playlist"
|
||||
density="compact"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
:disabled="!showFormStore.currentShow.hasAutoplaylist"
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'autoplaylistId', value })"
|
||||
:disabled="!showStore.currentShow.hasAutoplaylist"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'autoplaylistId', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-card>
|
||||
|
|
@ -160,14 +178,14 @@ const toggleScheduleForm = () => {
|
|||
<v-col cols="12" md="6" lg="4">
|
||||
<v-card>
|
||||
<v-select
|
||||
v-model="showFormStore.currentShow.showDjs"
|
||||
v-model="showStore.currentShow.showDjs"
|
||||
:items="usersDJs"
|
||||
label="DJs"
|
||||
density="compact"
|
||||
item-title="login"
|
||||
item-value="id"
|
||||
multiple
|
||||
@update:modelValue="value => showFormStore.updateField({ key: 'showDjs', value })"
|
||||
@update:modelValue="value => showStore.updateField({ key: 'showDjs', value })"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
|
@ -176,8 +194,8 @@ const toggleScheduleForm = () => {
|
|||
|
||||
<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-btn v-if="showStore.currentShow.id" color="accent" @click="showStore.updateShow()" :disabled="!isFormValid" >Salva</v-btn>
|
||||
<v-btn color="accent" @click="toggleScheduleForm" :disabled="!isFormValid" >Regole di programmazione</v-btn>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue