From 04bb0d09d7b0b28be5653ac8c6e4d3e1a0b9a5fb Mon Sep 17 00:00:00 2001
From: marcoc <marco@congegni.net>
Date: Wed, 12 Mar 2025 14:18:44 +0100
Subject: [PATCH] fix(fe archive): moved table logic to Table.vue component

---
 resources/js/components/content/Archive.vue   | 125 ++++++-----------
 .../js/components/content/partials/Table.vue  | 130 ++++++++++++++++++
 2 files changed, 173 insertions(+), 82 deletions(-)
 create mode 100644 resources/js/components/content/partials/Table.vue

diff --git a/resources/js/components/content/Archive.vue b/resources/js/components/content/Archive.vue
index 512e76e..8bcd6c0 100644
--- a/resources/js/components/content/Archive.vue
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/components/content/partials/Table.vue b/resources/js/components/content/partials/Table.vue
new file mode 100644
index 0000000..02e1c8f
--- /dev/null
+++ b/resources/js/components/content/partials/Table.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {computed, watch} from "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,
+})
+
+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 selected = ref([])
+// const search = ref('')
+//
+// watch(search, (newValue, oldValue) => {
+//   $emit('updateSearch', newValue)
+// })
+//
+// watch(selected, (newValue, oldValue) => {
+//   $emit('updateSelected', newValue)
+// })
+
+const update = (page_info) => {
+  console.log(page_info)
+  emit('updateTable', page_info)
+}
+</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"
+    >
+      <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-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('cancelItem', item)"
+        >
+          mdi-delete
+        </v-icon>
+      </template>
+    </v-data-table-server>
+  </div>
+</template>
+
+<style scoped>
+.search {
+  min-width:250px;
+}
+</style>
\ No newline at end of file