131 lines
No EOL
3.2 KiB
Vue
131 lines
No EOL
3.2 KiB
Vue
<script setup lang="ts">
|
|
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";
|
|
import ShowForm from "@partials/show/ShowForm.vue";
|
|
import {baseShow, type Show} from "@models/show/show";
|
|
import {useShowTypeStore} from "@stores/showType.store.ts";
|
|
|
|
const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = show_page()
|
|
|
|
const showTypeStore = useShowTypeStore();
|
|
const showCreateEditMode = ref(false);
|
|
let showSelected = ref<Number | null>(null);
|
|
|
|
const bulk = ref({
|
|
state: false,
|
|
items: [] as Show[],
|
|
})
|
|
|
|
const dialog = reactive({
|
|
open: false,
|
|
type: '',
|
|
title: '',
|
|
text: ''
|
|
})
|
|
|
|
// Funcs
|
|
const openDialog = (type, title: string = '', text: string = '') => {
|
|
dialog.open = true
|
|
dialog.type = type
|
|
dialog.title = title
|
|
dialog.text = text
|
|
}
|
|
|
|
const edit = (showSelectedFromUser) => {
|
|
showSelected.value = showSelectedFromUser.id
|
|
showCreateEditMode.value = true
|
|
}
|
|
|
|
const create = () => {
|
|
showSelected.value = null
|
|
showCreateEditMode.value = true
|
|
}
|
|
|
|
const saveItem = (item) => {
|
|
const saved = editItem(item)
|
|
closeDialog()
|
|
}
|
|
|
|
const cancel = (item) => {
|
|
let deleteMessage = `Vuoi cancellare lo ${showTypeStore.currentType} selezionato?`
|
|
if (bulk.value.state) deleteMessage = `Vuoi cancellare gli ${showTypeStore.currentType} selezionati?`
|
|
bulk.value.items = item
|
|
showSelected.value = item?.id
|
|
openDialog(
|
|
'delete',
|
|
'Cancella',
|
|
deleteMessage
|
|
)
|
|
}
|
|
|
|
const confirmDelete = (confirm) => {
|
|
if (confirm) {
|
|
const showId = showSelected.value == 0 ? null : showSelected.value;
|
|
deleteItem(showId)
|
|
}
|
|
closeDialog()
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
dialog.open = false
|
|
resetItemEdited()
|
|
}
|
|
|
|
const updateSearch = (text) => {
|
|
search.value = text
|
|
}
|
|
|
|
const resetItemEdited = () => {
|
|
showSelected.value = null
|
|
}
|
|
|
|
const goBack = () => {
|
|
showCreateEditMode.value = false
|
|
showSelected.value = null
|
|
}
|
|
|
|
watch(search, (newValue, oldValue) => {
|
|
const options = {...listData};
|
|
getItems(options)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ShowForm v-if="showCreateEditMode" :showId="showSelected" :showType="showTypeStore.currentType" @go-back="goBack"/>
|
|
<Table
|
|
v-else
|
|
:headers="headers"
|
|
v-model:selected="selected"
|
|
v-model:search="search"
|
|
:list-data="listData"
|
|
:items="items"
|
|
:loading="loading"
|
|
:get-items="getItems"
|
|
:actions="true"
|
|
:show-select="true"
|
|
@update-table="getItems"
|
|
@update-search="updateSearch"
|
|
@delete-item="cancel"
|
|
@edit-item="edit"
|
|
>
|
|
<template v-slot:header-buttons>
|
|
<v-btn color="primary" @click="create">
|
|
<span>Crea un nuovo {{ showTypeStore.currentType }} </span>
|
|
</v-btn>
|
|
</template>
|
|
<template v-slot:dialog>
|
|
<v-dialog v-model="dialog.open">
|
|
<ConfirmDelete
|
|
v-if="dialog.type === 'delete'"
|
|
:title="dialog.title"
|
|
:text="dialog.text"
|
|
:bulk="bulk.state"
|
|
@confirm="confirmDelete"
|
|
@after-leave="closeDialog"
|
|
/>
|
|
</v-dialog>
|
|
</template>
|
|
</Table>
|
|
</template> |