fix(fe general and archive): added backoffice components first logic and archive page table with simple items fetch

resources/js/components/content/Archive.vue

@@ -0,0 +1,79 @@
+<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([])
+
+const listData = reactive({
+  'per_page': 5,
+  'first_page': null,
+  'last_page': null,
+  'total_items': 0,
+  'current_page': 1,
+})
+
+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.per_page,
+    }
+  }).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);
+  })
+}
+</script>
+
+<template>
+  <div>
+    <v-data-table-server
+      v-model:items-per-page="listData.per_page"
+      :items="items"
+      :items-length="listData.total_items"
+      loading-text="Loading..."
+      :loading="items.length === 0"
+      @update:options="getItems"
+      disable-sort
+    >
+    </v-data-table-server>
+  </div>
+</template>
+
+<style scoped>
+  .v-data-table {
+    width:100%;
+  }
+</style>