150 lines
No EOL
3.5 KiB
Vue
150 lines
No EOL
3.5 KiB
Vue
<script setup lang="ts">
|
|
import {computed, ref} from "vue";
|
|
import draggable from "vuedraggable";
|
|
draggable.compatConfig = { MODE: 3 };
|
|
import DataTableRowHandler from "@/components/content/partials/table/DataTableRowHandler.vue";
|
|
|
|
const emit = defineEmits([
|
|
'update:search',
|
|
'update:selected',
|
|
'updateTable',
|
|
'deleteItems',
|
|
'editItem',
|
|
'cancelItem'
|
|
])
|
|
|
|
const props = defineProps({
|
|
headers: Array,
|
|
listData: Object,
|
|
items: Array,
|
|
selected: Array,
|
|
loading: Boolean,
|
|
search: String,
|
|
itemValue: String,
|
|
showSelect: Boolean,
|
|
actions: Boolean,
|
|
isDraggable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
})
|
|
|
|
const draggableItems = ref(props.items)
|
|
|
|
const searchValue = computed({
|
|
get() {
|
|
return props.search
|
|
},
|
|
set(value) {
|
|
console.log(value)
|
|
emit('update:search', value)
|
|
}
|
|
})
|
|
|
|
const selectedValues = computed({
|
|
get() {
|
|
return props.selected
|
|
},
|
|
set(values) {
|
|
console.log(props.selected, values)
|
|
emit('update:selected', values)
|
|
}
|
|
})
|
|
|
|
const update = (page_info) => {
|
|
console.log(page_info)
|
|
emit('updateTable', page_info)
|
|
}
|
|
|
|
const test = (ev) => {
|
|
console.log(ev)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<v-data-table-server
|
|
:headers="headers"
|
|
v-model="selectedValues"
|
|
v-model:items-per-page="listData.itemsPerPage"
|
|
:items="items"
|
|
:items-length="listData.total_items"
|
|
loading-text="Loading..."
|
|
:loading="loading"
|
|
@update:options="update"
|
|
:item-value="itemValue"
|
|
disable-sort
|
|
return-object
|
|
:show-select="showSelect"
|
|
:hide-default-body="isDraggable"
|
|
>
|
|
<template v-slot:top>
|
|
<v-toolbar flat>
|
|
<v-text-field
|
|
v-model="searchValue"
|
|
class="ma-2 search"
|
|
density="compact"
|
|
placeholder="Cerca"
|
|
hide-details
|
|
></v-text-field>
|
|
<v-divider />
|
|
<slot name="header-buttons"></slot>
|
|
<v-btn color="primary">
|
|
<v-icon
|
|
class="me-2"
|
|
size="small"
|
|
:disabled="selectedValues.length === 0"
|
|
@click="$emit('deleteItem', selected)"
|
|
>
|
|
mdi-delete
|
|
</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
<slot name="dialog"></slot>
|
|
</template>
|
|
|
|
<template v-if="isDraggable" #tbody="props">
|
|
<draggable
|
|
:list="props.items"
|
|
item-key="id"
|
|
tag="tbody"
|
|
:group="{ name: 'tracklist', pull: 'clone', push: false }"
|
|
>
|
|
<template #item="{ element }">
|
|
<tr class="v-data-table__tr v-data-table__tr--clickable">
|
|
<td v-for="header in headers" class="v-data-table__td v-data-table-column--align-start">
|
|
{{ element[header.value] }}
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</draggable>
|
|
</template>
|
|
|
|
<template v-slot:item.artwork="{ item }">
|
|
<div v-if="item.artwork != ''" v-html="`<img src='/${item.artwork}.jpg' />`"></div>
|
|
</template>
|
|
|
|
<template v-if="actions" v-slot:item.actions="{ item }">
|
|
<v-icon
|
|
class="me-2"
|
|
size="small"
|
|
@click="$emit('editItem', item)"
|
|
>
|
|
mdi-pencil
|
|
</v-icon>
|
|
<v-icon
|
|
size="small"
|
|
@click="$emit('deleteItem', item)"
|
|
>
|
|
mdi-delete
|
|
</v-icon>
|
|
</template>
|
|
</v-data-table-server>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search {
|
|
min-width:250px;
|
|
}
|
|
</style> |