feat(FE): show forms reset btn and model

resources/js/components/content/partials/show/ShowInstanceForm.vue

@@ -2,7 +2,7 @@
 import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
 import {useShowInstanceStore} from "@/stores/showInstance.store.ts";
 import {onMounted, ref, watch, type PropType} from "vue";
-import type {ShowInstance} from "@models/show/showInstance.ts";
+import {baseShowInstance, type ShowInstance} from "@models/show/showInstance.ts";
 import {extractTime} from "@/helpers/DateFormatter.ts";
 import {getPlaylistContent} from "@models/playlist.ts";
 import Sources from "@partials/Sources.vue";
@@ -27,22 +27,10 @@ showStore.resetShow()
 
 // Data
 const playlist = ref({tracks: []});
-const showInstanceEndTime = ref(showInstanceStore.currentShowInstance.endTime);
-
+const showInstanceForm = ref<ShowInstance>(baseShowInstance());
 // Funcs
-onMounted(async () => {
-  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 = () => {
-  showInstanceStore.resetShowInstance();
-  emits('toggle-menu-edit-instance');
-}
-
 const updateShowInstance = async () => {
+  showInstanceStore.currentShowInstance = showInstanceForm.value;
   await showInstanceStore.updateShowInstance();
   goBack()
 }
@@ -50,6 +38,23 @@ const updateShowInstance = async () => {
 const updateTracks = async () => {
   console.log('updated')
 }
+
+const goBack = () => {
+  showInstanceStore.resetShowInstance();
+  emits('toggle-menu-edit-instance');
+}
+
+const resetForm = () => {
+  console.log()
+  showInstanceForm.value = { ...showInstanceStore.currentShowInstance};
+}
+
+onMounted(async () => {
+  await showInstanceStore.getShowInstance(props.showInstance, {withShow: true});
+  showStore.loadShow(showInstanceStore.currentShowInstance.show);
+  playlist.value = await getPlaylistContent(showStore.currentShow.autoplaylistId)
+  showInstanceForm.value = { ...showInstanceStore.currentShowInstance};
+})
 </script>
 <template>
   <v-row no-gutters>
@@ -66,7 +71,7 @@ const updateTracks = async () => {
       <v-col cols="12">
         <v-card>
           <v-textarea
-              v-model="showInstanceStore.currentShowInstance.instanceDescription"
+              v-model="showInstanceForm.description"
               label="Descrizione istanza"
               density="compact"
               :required="true"
@@ -80,7 +85,7 @@ const updateTracks = async () => {
     <v-row no-gutters>
       <v-col cols="12" md="6" lg="6">
         <v-date-picker
-            v-model="showInstanceStore.currentShowInstance.starts"
+            v-model="showInstanceForm.starts"
             :min="new Date().toISOString().substring(0, 10)"
             label="Data inizio"
             density="compact"
@@ -88,8 +93,8 @@ const updateTracks = async () => {
       </v-col>
       <v-col cols="12" md="6" lg="6">
         <v-date-picker
-            v-model="showInstanceStore.currentShowInstance.ends"
-            :min="showInstanceStore.currentShowInstance.starts"
+            v-model="showInstanceForm.ends"
+            :min="showInstanceForm.starts"
             label="Data fine"
             title="Data fine"
             density="compact"
@@ -101,12 +106,12 @@ const updateTracks = async () => {
     <v-row no-gutters>
       <v-col cols="12" md="6" lg="6">
         <ShowStartEndTime
-            v-model="showInstanceStore.currentShowInstance.startTime"
+            v-model="showInstanceForm.startTime"
             :start-time-label="'Ora inizio della puntata'"
             :duration-label="'Durata'"
             :end-time-label="'Orario di fine della puntata'"
-            :pre-set-end-time="showInstanceEndTime"
-            @update:endTime="value => showInstanceStore.updateField({key:'endTime', value: value})"
+            :pre-set-end-time="showInstanceForm.endTime"
+            @update:endTime="value => showInstanceForm.endTime = value"
         />
       </v-col>
     </v-row>
@@ -126,8 +131,9 @@ const updateTracks = async () => {
 
     <!-- Actions -->
     <v-card-actions>
-      <v-btn color="accent" @click="goBack">Torna indietro</v-btn>
-      <v-btn color="accent" @click="updateShowInstance">Salva</v-btn>
+      <v-btn color="red" @click="goBack">Torna indietro</v-btn>
+      <v-btn color="green" @click="updateShowInstance">Salva</v-btn>
+      <v-btn color="warning" @click="resetForm">Reset Form</v-btn>
     </v-card-actions>
   </v-form>
 </template>

resources/js/composables/content/models/show/showInstance.ts

@@ -9,7 +9,7 @@ export interface ShowInstance {
     startTime?: string;
     ends: Date | string;
     endTime?: string;
-    instanceDescription: '',
+    description: '',
     showId: number;
     record: number;
     rebroadcast: number;
@@ -30,7 +30,7 @@ export const baseShowInstance = (): ShowInstance => {
         startTime: '',
         ends: new Date(),
         endTime: '',
-        instanceDescription: '',
+        description: '',
         showId: 0,
         record: 0,
         rebroadcast: 0,
@@ -78,5 +78,8 @@ export async function getShowInstance(options: {
 }
 
 export const deleteShowInstance = async (showInstancesIds: Number[]) => {
-    return axios.delete(`/showInstances`, {data: {'showInstancesIds': showInstancesIds}})
+    for (const showInstanceId of showInstancesIds) {
+        await axios.delete(`/showInstances/${showInstanceId}`)
+    }
+
 }