fix(fe archive): updated logic with dialogs

resources/js/components/content/Archive.vue

@@ -1,74 +1,152 @@
 <script setup lang="ts">
 import axios from "axios";
-import {useAuthStore} from "@/stores/auth.store.ts";
-import {ref, onMounted, reactive, computed} from "vue";
-const auth = useAuthStore()
-const items = ref([])
+import {ref, reactive, watch, computed, onMounted} from "vue";
+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";
 
-const listData = reactive({
-  'per_page': 5,
-  'first_page': null,
-  'last_page': null,
-  'total_items': 0,
-  'current_page': 1,
+const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive()
+
+const itemEdited = ref({})
+const bulk = ref(false)
+const dialog = reactive({
+  open: false,
+  type: '',
+  title: '',
+  text: ''
 })
 
-const active_columns = reactive({
-  'track_title': 'Track Title',
-  'artist_name': 'Artist',
-  'genre': 'Genre',
-  'track_type': 'Track Type',
-  'length': 'Length',
-  'mtime': 'Uploaded'
-})
-
-/**
- * ToDo: understand why per_page and other filters doesn't work
- * @param page_info created by v-data-table-server on update
- */
-const getItems = (page_info) => {
-  console.log(page_info);
-  return axios.get(`/file`, {
-    params: {
-      page: page_info.page,
-      per_page: page_info.itemsPerPage,
-    }
-  }).then((response) => {
-    console.log(response)
-    listData.per_page     = response.data.per_page;
-    listData.first_page   = response.data.from;
-    listData.last_page    = response.data.last_page;
-    listData.current_page = response.data.current_page;
-    listData.total_items  = response.data.total;
-
-    items.value = response.data.data.map((el) => {
-      Object.keys(el).forEach((key) => {
-        if (Object.keys(active_columns).includes(key)) {
-          el[active_columns[key]] = el[key];
-        }
-        delete el[key];
-      })
-      return el;
-    });
-    console.log(listData);
-  }).catch((error) => {
-    console.log("Error: "+error);
-  })
+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
+
+watch(search, (newValue, oldValue) => {
+  getItems(listData)
+})
+
 </script>
 
 <template>
   <div>
     <v-data-table-server
-      v-model:items-per-page="listData.per_page"
+      :headers="headers"
+      v-model="selected"
+      v-model:items-per-page="listData.itemsPerPage"
       :items="items"
       :items-length="listData.total_items"
       loading-text="Loading..."
-      :loading="items.length === 0"
+      :loading="loading"
       @update:options="getItems"
-      @update:items-per-page="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>
 </template>
@@ -77,4 +155,7 @@ const getItems = (page_info) => {
   .v-data-table {
     width:100%;
   }
+  .search {
+    min-width:250px;
+  }
 </style>