144 lines
No EOL
3.2 KiB
Vue
144 lines
No EOL
3.2 KiB
Vue
<script setup lang="ts">
|
|
import {ref, reactive, watch, onBeforeMount} from "vue";
|
|
import {archive_page} from "@/composables/content/archive_page.ts";
|
|
import FileUpload from "@/components/content/partials/dialogs/FileUpload.vue";
|
|
import FileEdit from "@/components/content/partials/dialogs/FileEdit.vue";
|
|
import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
|
|
import Table from "@/components/content/partials/Table.vue";
|
|
|
|
const props = defineProps({
|
|
hideColumns: {
|
|
type: Array,
|
|
required: false
|
|
},
|
|
isDraggable: {
|
|
type: Boolean,
|
|
required: false
|
|
}
|
|
});
|
|
|
|
const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive_page()
|
|
|
|
const itemEdited = ref({})
|
|
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) => {
|
|
console.log(item)
|
|
itemEdited.value = item
|
|
openDialog('edit')
|
|
}
|
|
|
|
const saveItem = (item) => {
|
|
const saved = editItem(item)
|
|
closeDialog()
|
|
}
|
|
|
|
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, bulk) => {
|
|
if (confirm) {
|
|
if (!bulk) {
|
|
deleteItem(itemEdited.value.id)
|
|
} else {
|
|
itemEdited.value.forEach(el => {
|
|
deleteItem(el.id)
|
|
})
|
|
}
|
|
}
|
|
closeDialog()
|
|
}
|
|
|
|
const closeDialog = () => dialog.open = false
|
|
|
|
const updateSearch = (text) => {
|
|
search.value = text
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
if(props.hideColumns != undefined) {
|
|
visibleHeaders.value = headers.filter(el => {
|
|
return !props.hideColumns.includes(el.value)
|
|
});
|
|
}
|
|
})
|
|
|
|
watch(search, (newValue, oldValue) => {
|
|
getItems(listData)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Table
|
|
:headers="visibleHeaders"
|
|
v-model:selected="selected"
|
|
v-model:search="search"
|
|
:list-data="listData"
|
|
:items="items"
|
|
:loading="loading"
|
|
:get-items="getItems"
|
|
:is-draggable="isDraggable"
|
|
:actions="true"
|
|
:item-value="'track_title'"
|
|
: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="openDialog('upload')">
|
|
Upload
|
|
</v-btn>
|
|
</template>
|
|
<template v-slot:dialog>
|
|
<v-dialog v-model="dialog.open">
|
|
<FileUpload
|
|
v-if="dialog.type === 'upload'"
|
|
@close-dialog="closeDialog"
|
|
/>
|
|
<FileEdit
|
|
v-else-if="dialog.type === 'edit'"
|
|
:item="itemEdited"
|
|
@edit-item="saveItem"
|
|
/>
|
|
<ConfirmDelete
|
|
v-else-if="dialog.type === 'delete'"
|
|
:title="dialog.title"
|
|
:text="dialog.text"
|
|
:bulk="bulk"
|
|
@confirm="confirmDelete"
|
|
/>
|
|
</v-dialog>
|
|
</template>
|
|
</Table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-data-table {
|
|
width:100%;
|
|
}
|
|
</style> |