144 lines
No EOL
3 KiB
Vue
144 lines
No EOL
3 KiB
Vue
<script setup lang="ts">
|
|
import {playlist_page} from "@/composables/content/playlist_page.ts";
|
|
import Table from "@/components/content/partials/Table.vue";
|
|
import PlaylistEditor from "@/components/content/partials/PlaylistEditor.vue";
|
|
import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
|
|
import {reactive, ref, watch} from "vue";
|
|
|
|
const { items, listData, headers, selected, loading, search, getItems, editItem, createItem, deleteItem } = playlist_page()
|
|
|
|
const itemEdited = ref({
|
|
id: null
|
|
})
|
|
|
|
const bulk = ref(false)
|
|
const dialog = reactive({
|
|
open: false,
|
|
type: '',
|
|
title: '',
|
|
text: ''
|
|
})
|
|
|
|
const openDialog = (type, title = '', text = '', bulk = false) => {
|
|
dialog.open = true
|
|
dialog.type = type
|
|
dialog.title = title
|
|
dialog.text = text
|
|
}
|
|
|
|
const edit = (item) => {
|
|
console.log(item)
|
|
//Check if edit or create
|
|
if (typeof item === 'object') {
|
|
itemEdited.value = item
|
|
} else {
|
|
itemEdited.value.id = item
|
|
}
|
|
}
|
|
|
|
const save = (item) => {
|
|
if (item.name === '') {
|
|
//Check required fields
|
|
console.log('error!')
|
|
}
|
|
|
|
if (item.id > 0) {
|
|
const saved = editItem(item)
|
|
console.log(saved)
|
|
} else {
|
|
delete item.id
|
|
const saved = createItem(item)
|
|
console.log(saved)
|
|
}
|
|
}
|
|
|
|
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
|
|
resetItemEdited()
|
|
}
|
|
|
|
const updateSearch = (text) => {
|
|
search.value = text
|
|
}
|
|
|
|
const resetItemEdited = () => {
|
|
itemEdited.value = {
|
|
id: null,
|
|
}
|
|
}
|
|
|
|
watch(search, (newValue, oldValue) => {
|
|
getItems(listData)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<PlaylistEditor
|
|
v-if="itemEdited.id !== null && !dialog.open"
|
|
:item="itemEdited"
|
|
@go-back="resetItemEdited"
|
|
@save-item="save"
|
|
/>
|
|
<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="edit(0)">
|
|
Crea una nuova Playlist
|
|
</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> |