feat(FE): spot

resources/js/components/content/Show.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {reactive, ref, watch} from "vue";
+import {onActivated, onBeforeMount, onMounted, type PropType, 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";
@@ -8,6 +8,16 @@ import {baseShow, type Show} from "@models/show/show";
 
 const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = show_page()
 
+// Props and data
+
+const props = defineProps({
+  showType: {
+    type: String as PropType<'show' | 'spot'>,
+    required: true,
+    validator: (value: string) => ['show', 'spot'].includes(value),
+  },
+});
+
 const showCreateEditMode = ref(false);
 let showSelected = ref<Number | null>(null);
 
@@ -23,6 +33,7 @@ const dialog = reactive({
   text: ''
 })
 
+// Funcs
 const openDialog = (type, title: string = '', text: string = '') => {
   dialog.open = true
   dialog.type = type
@@ -46,8 +57,8 @@ const saveItem = (item) => {
 }
 
 const cancel = (item) => {
-  let deleteMessage = 'Vuoi cancellare lo show selezionato?'
-  if(bulk.value.state)  deleteMessage = 'Vuoi cancellare gli show selezionati?'
+  let deleteMessage = `Vuoi cancellare lo ${props.showType} selezionato?`
+  if (bulk.value.state) deleteMessage = `Vuoi cancellare gli ${props.showType} selezionati?`
   bulk.value.items = item
   showSelected.value = item?.id
   openDialog(
@@ -59,7 +70,7 @@ const cancel = (item) => {
 
 const confirmDelete = (confirm) => {
   if (confirm) {
-    const showId = showSelected.value == 0 ? null : showSelected.value ;
+    const showId = showSelected.value == 0 ? null : showSelected.value;
     deleteItem(showId)
   }
   closeDialog()
@@ -78,19 +89,23 @@ const resetItemEdited = () => {
   showSelected.value = null
 }
 
-watch(search, (newValue, oldValue) => {
-  const options = {...listData};
-  getItems(options)
-})
-
 const goBack = () => {
   showCreateEditMode.value = false
   showSelected.value = null
 }
+
+onBeforeMount(() => {
+  listData.show_type = props.showType
+})
+
+watch(search, (newValue, oldValue) => {
+  const options = {...listData};
+  getItems(options)
+})
 </script>
 
 <template>
-  <ShowForm v-if="showCreateEditMode" :showId="showSelected" @go-back="goBack"/>
+  <ShowForm v-if="showCreateEditMode" :showId="showSelected" :showType="props.showType" @go-back="goBack"/>
   <Table
       v-else
       :headers="headers"
@@ -109,7 +124,7 @@ const goBack = () => {
   >
     <template v-slot:header-buttons>
       <v-btn color="primary" @click="create">
-        Crea una nuova trasmissione
+        <span>Crea un nuovo {{ props.showType }} </span>
       </v-btn>
     </template>
     <template v-slot:dialog>