164 lines
No EOL
3.6 KiB
Vue
164 lines
No EOL
3.6 KiB
Vue
<script setup lang="ts">
|
|
import Table from "@/components/content/partials/Table.vue";
|
|
import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
|
|
import {onBeforeMount, reactive, ref, watch} from "vue";
|
|
import {smartblock_page} from "@/composables/content/smartblock_page.ts";
|
|
import SmartBlockEditor from "@partials/SmartBlockEditor.vue";
|
|
import {useSmartBlockStore} from "@/stores/smartblock.store.ts";
|
|
import {baseSmartBlock} from "@models/smartblock/smartblock.ts";
|
|
|
|
const props = defineProps({
|
|
hideColumns: {
|
|
type: Array,
|
|
required: false
|
|
},
|
|
isDraggable: {
|
|
type: Boolean,
|
|
required: false
|
|
}
|
|
});
|
|
|
|
|
|
const smartBlockStore = useSmartBlockStore()
|
|
|
|
const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = smartblock_page()
|
|
|
|
const itemEdited = ref({
|
|
id: null
|
|
})
|
|
|
|
const bulk = ref(false)
|
|
const dialog = reactive({
|
|
open: false,
|
|
type: '',
|
|
title: '',
|
|
text: ''
|
|
})
|
|
|
|
const visibleHeaders = ref(headers)
|
|
|
|
const openDialog = (type, title = '', text = '') => {
|
|
dialog.open = true
|
|
dialog.type = type
|
|
dialog.title = title
|
|
dialog.text = text
|
|
}
|
|
|
|
const edit = (item) => {
|
|
if (item === 0) {
|
|
item = baseSmartBlock();
|
|
}
|
|
smartBlockStore.loadSmartBlock(item);
|
|
itemEdited.value = item;
|
|
console.log(smartBlockStore)
|
|
}
|
|
|
|
const saveItem = (item) => {
|
|
const saved = editItem(item);
|
|
console.log(saved)
|
|
smartBlockStore.updateField({key: 'id', value: saved.id});
|
|
// resetItemEdited()
|
|
}
|
|
|
|
const cancel = (item) => {
|
|
bulk.value = Array.isArray(item);
|
|
itemEdited.value = item;
|
|
openDialog(
|
|
'delete',
|
|
'Cancella',
|
|
bulk.value ? 'Vuoi cancellare i file selezionati?' : 'Vuoi cancellare il file selezionato?'
|
|
)
|
|
}
|
|
|
|
const confirmDelete = (confirm) => {
|
|
if (confirm) {
|
|
if (!bulk) {
|
|
deleteItem(itemEdited.value.id)
|
|
} else {
|
|
itemEdited.value.forEach(el => {
|
|
deleteItem(el.id)
|
|
})
|
|
}
|
|
}
|
|
itemEdited.value = {}
|
|
selected.value = []
|
|
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 = () => {
|
|
itemEdited.value = {
|
|
id: null,
|
|
}
|
|
smartBlockStore.loadSmartBlock(baseSmartBlock())
|
|
}
|
|
|
|
watch(search, (newValue, oldValue) => {
|
|
getItems(listData)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<SmartBlockEditor
|
|
v-if="itemEdited.id !== null && !dialog.open"
|
|
:item="smartBlockStore.currentSmartBlock"
|
|
@go-back="resetItemEdited"
|
|
@save-item="saveItem"
|
|
/>
|
|
<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="edit(0)">
|
|
Crea un nuovo blocco dinamico
|
|
</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"
|
|
@confirm="confirmDelete"
|
|
@after-leave="closeDialog"
|
|
/>
|
|
</v-dialog>
|
|
</template>
|
|
</Table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |