fix(fe archive): moved table logic to Table.vue component

resources/js/components/content/Archive.vue

@@ -5,6 +5,7 @@ import { archive } from "@/composables/content/archive.js.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 { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive()
 
@@ -24,7 +25,6 @@ const openDialog = (type, title = '', text = '', bulk = false) => {
   dialog.text = text
 }
 
-
 const edit = (item) => {
   console.log(item)
   itemEdited.value = item
@@ -61,6 +61,10 @@ const confirmDelete = (confirm, bulk) => {
 
 const closeDialog = () => dialog.open = false
 
+const updateSearch = (text) => {
+  search.value = text
+}
+
 watch(search, (newValue, oldValue) => {
   getItems(listData)
 })
@@ -68,94 +72,51 @@ watch(search, (newValue, oldValue) => {
 </script>
 
 <template>
-  <div>
-    <v-data-table-server
+  <Table
       :headers="headers"
-      v-model="selected"
-      v-model:items-per-page="listData.itemsPerPage"
+      v-model:selected="selected"
+      v-model:search="search"
+      :list-data="listData"
       :items="items"
-      :items-length="listData.total_items"
-      loading-text="Loading..."
       :loading="loading"
-      @update:options="getItems"
-      item-value="track_title"
-      disable-sort
-      return-object
-      show-select
-    >
-      <template v-slot:top>
-        <v-toolbar flat>
-          <v-text-field
-              v-model="search"
-              class="ma-2 search"
-              density="compact"
-              placeholder="Cerca"
-              hide-details
-          ></v-text-field>
-          <v-divider />
-          <v-btn color="primary" @click="openDialog('upload')">
-            Upload
-          </v-btn>
-          <v-divider />
-          <v-btn color="primary">
-            <v-icon
-                class="me-2"
-                size="small"
-                :disabled="selected.length === 0"
-                @click="cancel(selected)"
-                >
-              mdi-delete
-            </v-icon>
-          </v-btn>
-        </v-toolbar>
-        <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>
-
-      <template v-slot:item.artwork="{ item }">
-        <div v-if="item.artwork != ''" v-html="`<img src='/${item.artwork}.jpg' />`"></div>
-      </template>
-
-      <template v-slot:item.actions="{ item }">
-        <v-icon
-            class="me-2"
-            size="small"
-            @click="edit(item)"
-        >
-          mdi-pencil
-        </v-icon>
-        <v-icon
-            size="small"
-            @click="cancel(item)"
-        >
-          mdi-delete
-        </v-icon>
-      </template>
-    </v-data-table-server>
-  </div>
+      :get-items="getItems"
+      :actions="true"
+      :item-value="'track_title'"
+      :show-select="true"
+      @update-table="getItems"
+      @delete-item="cancel"
+      @update-search="updateSearch"
+  >
+    <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%;
   }
-  .search {
-    min-width:250px;
-  }
 </style>