fix(fe archive): added dynamic headers

resources/js/components/content/Archive.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
-import axios from "axios";
+import {ref, reactive, watch, onBeforeMount} from "vue";
-import {ref, reactive, watch, computed, onMounted} from "vue";
 import {archive_page} from "@/composables/content/archive_page.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 props = defineProps({
+  hideColumns: {
+    type: Array,
+    required: false
+  },
+  isDraggable: {
+    type: Boolean,
+    required: false
+  }
+});
+
 const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive_page()
 
 const itemEdited = ref({})
@@ -18,7 +28,9 @@ const dialog = reactive({
   text: ''
 })
 
-const openDialog = (type, title = '', text = '', bulk = false) => {
+const visibleHeaders = ref(headers)
+
+const openDialog = (type, title = '', text = '') => {
   dialog.open = true
   dialog.type = type
   dialog.title = title
@@ -65,6 +77,14 @@ const updateSearch = (text) => {
   search.value = text
 }
 
+onBeforeMount(() => {
+  if(props.hideColumns != undefined) {
+    visibleHeaders.value = headers.filter(el => {
+      return !props.hideColumns.includes(el.value)
+    });
+  }
+})
+
 watch(search, (newValue, oldValue) => {
   getItems(listData)
 })
@@ -73,13 +93,14 @@ watch(search, (newValue, oldValue) => {
 
 <template>
   <Table
-      :headers="headers"
+      :headers="visibleHeaders"
       v-model:selected="selected"
       v-model:search="search"
       :list-data="listData"
       :items="items"
       :loading="loading"
       :get-items="getItems"
+      :is-draggable="isDraggable"
       :actions="true"
       :item-value="'track_title'"
       :show-select="true"