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

feat(FE): show forms and data

Browse source
This commit is contained in:
Michael 2025-04-09 10:34:41 +02:00
parent 28736e5bed
commit 437a290bdc
9 changed files with 288 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

72
resources/js/components/content/partials/show/ShowInstanceForm.vue
View file

@ -1,41 +1,40 @@
<script setup lang="ts">
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
import {useShowInstanceStore} from "@/stores/showInstance.store.ts";
import {onMounted, ref, type PropType} from "vue";
import {onMounted, ref, watch, type PropType} from "vue";
import type {ShowInstance} from "@models/show/showInstance.ts";
import {extractTime} from "@/helpers/DateFormatter.ts";
import Playlist from "@components/content/Playlist.vue";
import {getPlaylist, getPlaylistContent} from "@models/playlist.ts";
import {getUser} from "@models/User.ts";
import PlaylistEditor from "@partials/PlaylistEditor.vue";
import {getPlaylistContent} from "@models/playlist.ts";
import Sources from "@partials/Sources.vue";
import TrackList from "@partials/TrackList.vue";
import {DateTime} from "luxon";
import {useShowStore} from "@/stores/show.store.ts";
const emits = defineEmits(['toggle-menu-edit-instance']);
// Props
const props = defineProps({
showInstance: {
type: Object as PropType<ShowInstance>,
type: Number,
required: true,
},
});
// Data
// Store
const showInstanceStore = useShowInstanceStore();
showInstanceStore.loadShowInstance(props.showInstance);
const showStore = useShowStore()
showInstanceStore.resetShowInstance()
showStore.resetShow()
const showInstanceTime = ref({
startsDate: new Date(showInstanceStore.currentShowInstance.starts),
startsTime: extractTime(showInstanceStore.currentShowInstance.starts, true),
endsDate: new Date(showInstanceStore.currentShowInstance.ends),
endsTime: extractTime(showInstanceStore.currentShowInstance.ends, true),
});
// Data
const playlist = ref({tracks: []});
const showInstanceEndTime = ref(showInstanceStore.currentShowInstance.endTime);
// Funcs
onMounted(async () => {
playlist.value = await getPlaylistContent(showInstanceStore.currentShowInstance.show.autoplaylist_id)
await showInstanceStore.getShowInstance(props.showInstance, {withShow: true});
showStore.loadShow(showInstanceStore.currentShowInstance.show);
showInstanceEndTime.value = showInstanceStore.currentShowInstance.endTime;
playlist.value = await getPlaylistContent(showStore.currentShow.autoplaylistId)
})
const goBack = () => {
@ -43,19 +42,13 @@ const goBack = () => {
emits('toggle-menu-edit-instance');
}
const saveInstance = async () => {
const startsDateTime = showInstanceTime.value.startsDate + ' ' + showInstanceTime.value.startsTime;
const endsDateTime = showInstanceTime.value.endsDate + ' ' + showInstanceTime.value.endsTime;
showInstanceStore.updateField({key: 'starts', value: startsDateTime})
showInstanceStore.updateField({key: 'ends', value: endsDateTime})
await showInstanceStore.saveShowInstance();
const updateShowInstance = async () => {
await showInstanceStore.updateShowInstance();
goBack()
}
const update = () => {
console.log('update')
const updateTracks = async () => {
console.log('updated')
}
</script>
<template>
@ -64,16 +57,16 @@ const update = () => {
label="Trasmissione"
density="compact"
>
Trasmissione - {{ showInstanceStore.currentShowInstance.show.name }}
Trasmissione - {{ showStore.currentShow.name }}
</v-label>
</v-row>
<v-form>
<!-- Description (takes the whole row) -->
<!-- Description -->
<v-row no-gutters>
<v-col cols="12">
<v-card>
<v-textarea
v-model="showInstanceStore.currentShowInstance.instance_description"
v-model="showInstanceStore.currentShowInstance.instanceDescription"
label="Descrizione istanza"
density="compact"
:required="true"
@ -83,11 +76,11 @@ const update = () => {
</v-col>
</v-row>
<!-- StartDate and EndDate (on another row) -->
<!-- StartDate and EndDate -->
<v-row no-gutters>
<v-col cols="12" md="6" lg="6">
<v-date-picker
v-model="showInstanceTime.startsDate"
v-model="showInstanceStore.currentShowInstance.starts"
:min="new Date().toISOString().substring(0, 10)"
label="Data inizio"
density="compact"
@ -95,8 +88,8 @@ const update = () => {
</v-col>
<v-col cols="12" md="6" lg="6">
<v-date-picker
v-model="showInstanceTime.endsDate"
:min="showInstanceTime.startsDate"
v-model="showInstanceStore.currentShowInstance.ends"
:min="showInstanceStore.currentShowInstance.starts"
label="Data fine"
title="Data fine"
density="compact"
@ -104,25 +97,26 @@ const update = () => {
</v-col>
</v-row>
<!-- StartTime and EndTime (on another row) -->
<!-- StartTime and EndTime -->
<v-row no-gutters>
<v-col cols="12" md="6" lg="6">
<ShowStartEndTime
v-model="showInstanceTime.startsTime"
v-model="showInstanceStore.currentShowInstance.startTime"
:start-time-label="'Ora inizio della puntata'"
:duration-label="'Durata'"
:end-time-label="'Orario di fine della puntata'"
@update:endTime="value => showInstanceTime.endsTime = value"
:pre-set-end-time="showInstanceEndTime"
@update:endTime="value => showInstanceStore.updateField({key:'endTime', value: value})"
/>
</v-col>
</v-row>
<!-- Empty row for custom component -->
<!-- Playlist -->
<v-row no-gutters>
<v-col>
<TrackList
:tracks="playlist.tracks"
@update-tracks="update"
@update-tracks="updateTracks"
/>
</v-col>
<v-col>
@ -133,7 +127,7 @@ const update = () => {
<!-- Actions -->
<v-card-actions>
<v-btn color="accent" @click="goBack">Torna indietro</v-btn>
<v-btn color="accent" @click="saveInstance">Salva</v-btn>
<v-btn color="accent" @click="updateShowInstance">Salva</v-btn>
</v-card-actions>
</v-form>
</template>