fix: mismatch files

resources/js/components/content/Playlist.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import {playlist_page} from "@/composables/content/playlist_page.ts";
+import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
+import Table from "@/components/content/partials/Table.vue";
+import FileEdit from "@/components/content/partials/dialogs/FileEdit.vue";
+import FileUpload from "@/components/content/partials/dialogs/FileUpload.vue";
+import {reactive, ref, watch} from "vue";
+
+const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = playlist_page()
+
+const itemEdited = ref({})
+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)
+  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
+}
+
+watch(search, (newValue, oldValue) => {
+  getItems(listData)
+})
+
+</script>
+
+<template>
+  <Table
+      :headers="headers"
+      v-model:selected="selected"
+      v-model:search="search"
+      :list-data="listData"
+      :items="items"
+      :loading="loading"
+      :get-items="getItems"
+      :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')">
+        Crea una nuova Playlist
+      </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>
+
+</style>

resources/js/components/content/partials/Table.vue

@@ -114,7 +114,7 @@ const update = (page_info) => {
         </v-icon>
         <v-icon
             size="small"
-            @click="$emit('cancelItem', item)"
+            @click="$emit('deleteItem', item)"
         >
           mdi-delete
         </v-icon>

resources/js/components/content/partials/dialogs/FileEdit.vue

@@ -9,7 +9,7 @@ const props = defineProps({
 })
 
 const trackTypes = trackType(null)
-const fields = file()
+const fields = file(props.item)
 const item = props.item