150 lines
3.5 KiB
Vue
150 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {onBeforeMount, reactive, ref, watch} from "vue";
|
|
import Table from "@partials/Table.vue";
|
|
import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
|
|
import {webstream_page} from "@/composables/content/webstream_page.ts";
|
|
import {baseWebstream, type Webstream} from "@models/webstream.ts";
|
|
import WebstreamForm from "@partials/WebstreamForm.vue";
|
|
|
|
const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = webstream_page()
|
|
|
|
const props = defineProps({
|
|
hideColumns: {
|
|
type: Array,
|
|
required: false
|
|
},
|
|
isDraggable: {
|
|
type: Boolean,
|
|
required: false
|
|
}
|
|
});
|
|
|
|
const webstreamCreateEditMode = ref(false);
|
|
let webstreamSelected = ref<Number | null>(null);
|
|
|
|
const visibleHeaders = ref(headers)
|
|
|
|
const bulk = ref({
|
|
state: false,
|
|
items: [] as Webstream[],
|
|
})
|
|
|
|
const dialog = reactive({
|
|
open: false,
|
|
type: '',
|
|
title: '',
|
|
text: ''
|
|
})
|
|
|
|
const openDialog = (type, title: string = '', text: string = '') => {
|
|
dialog.open = true
|
|
dialog.type = type
|
|
dialog.title = title
|
|
dialog.text = text
|
|
}
|
|
|
|
const edit = (webstreamSelectedFromUser) => {
|
|
webstreamSelected.value = webstreamSelectedFromUser.id
|
|
webstreamCreateEditMode.value = true
|
|
}
|
|
|
|
const create = () => {
|
|
webstreamSelected.value = null
|
|
webstreamCreateEditMode.value = true
|
|
}
|
|
|
|
const saveItem = (item) => {
|
|
const saved = editItem(item)
|
|
closeDialog()
|
|
}
|
|
|
|
const cancel = (item) => {
|
|
let deleteMessage = 'Vuoi cancellare il webstream selezionato?'
|
|
if(bulk.value.state) deleteMessage = 'Vuoi cancellare i webstream selezionati?'
|
|
bulk.value.items = item
|
|
webstreamSelected.value = item?.id
|
|
openDialog(
|
|
'delete',
|
|
'Cancella',
|
|
deleteMessage
|
|
)
|
|
}
|
|
|
|
const confirmDelete = (confirm) => {
|
|
if (confirm) {
|
|
const webstreamId = webstreamSelected.value == 0 ? null : webstreamSelected.value ;
|
|
deleteItem(webstreamId)
|
|
}
|
|
closeDialog()
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
dialog.open = false
|
|
resetItemEdited()
|
|
}
|
|
|
|
const updateSearch = (text) => {
|
|
search.value = text
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
if(props.hideColumns != undefined) {
|
|
visibleHeaders.value = headers.filter(el => {
|
|
return !props.hideColumns.includes(el.value)
|
|
});
|
|
}
|
|
})
|
|
|
|
const resetItemEdited = () => {
|
|
webstreamSelected.value = null
|
|
}
|
|
|
|
watch(search, (newValue, oldValue) => {
|
|
const options = {...listData};
|
|
getItems(options)
|
|
})
|
|
|
|
const goBack = () => {
|
|
webstreamCreateEditMode.value = false
|
|
webstreamSelected.value = null
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<WebstreamForm v-if="webstreamCreateEditMode" :webstreamId="webstreamSelected" @go-back="goBack"/>
|
|
<Table
|
|
v-else
|
|
:headers="visibleHeaders"
|
|
v-model:selected="selected"
|
|
v-model:search="search"
|
|
:list-data="listData"
|
|
:items="items"
|
|
:loading="loading"
|
|
:get-items="getItems"
|
|
:actions="true"
|
|
:show-select="true"
|
|
:is-draggable="isDraggable"
|
|
@update-table="getItems"
|
|
@update-search="updateSearch"
|
|
@delete-item="cancel"
|
|
@edit-item="edit"
|
|
>
|
|
<template v-slot:header-buttons>
|
|
<v-btn color="primary" @click="create">
|
|
Crea un nuovo webstream
|
|
</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>
|