From 99a9f1ced20d2aa84673fcbaf19cd782105c0115 Mon Sep 17 00:00:00 2001
From: JatinderSingh <jatinder.singh@gov.bc.ca>
Date: Thu, 15 Feb 2024 17:26:42 -0800
Subject: [PATCH] Refactor filters and tags to work without objectstore

---
 .../src/components/object/ObjectFilters.vue   | 15 ++----
 frontend/src/components/object/ObjectList.vue |  7 +++
 .../src/components/object/ObjectTable.vue     | 53 ++++++++++++++++---
 frontend/src/services/objectService.ts        | 12 +++--
 frontend/src/store/metadataStore.ts           |  4 +-
 frontend/src/store/tagStore.ts                |  4 +-
 6 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/object/ObjectFilters.vue b/frontend/src/components/object/ObjectFilters.vue
index c178d8d6..c27ad23b 100644
--- a/frontend/src/components/object/ObjectFilters.vue
+++ b/frontend/src/components/object/ObjectFilters.vue
@@ -58,11 +58,7 @@ objectStore.$onAction(({ name, args }) => {
 
 // Computed
 const metadataValues = computed(() => {
-  // Filter out any tags that don't have an objectID that exist in getUnfilteredObjectIds
-  const filteredVals = getMetadataSearchResults.value.filter((searchRes) =>
-    getUnfilteredObjectIds.value.some((obj) => obj === searchRes.objectId)
-  );
-
+  const filteredVals = getMetadataSearchResults.value;
   return (
     filteredVals
       // Take the metadata for the objects, and flatten them into a single array
@@ -76,10 +72,7 @@ const metadataValues = computed(() => {
 });
 
 const tagsetValues = computed(() => {
-  // Filter out any tags that don't have an objectID that exist in getUnfilteredObjectIds
-  const filteredVals = getTagSearchResults.value.filter((searchRes) =>
-    getUnfilteredObjectIds.value.some((obj) => obj === searchRes.objectId)
-  );
+  const filteredVals = getTagSearchResults.value;
 
   return (
     filteredVals
@@ -137,13 +130,13 @@ const selectedFilterValuesChanged = () => {
 
 const searchMetadata = async () => {
   searching.value = true;
-  await metadataStore.searchMetadata();
+  await metadataStore.searchMetadata(props['bucketId']);
   searching.value = false;
 };
 
 const searchTagging = async () => {
   searching.value = true;
-  await tagStore.searchTagging();
+  await tagStore.searchTagging(props['bucketId']);
   searching.value = false;
 };
 </script>
diff --git a/frontend/src/components/object/ObjectList.vue b/frontend/src/components/object/ObjectList.vue
index 499ff228..e6cda0e5 100644
--- a/frontend/src/components/object/ObjectList.vue
+++ b/frontend/src/components/object/ObjectList.vue
@@ -35,6 +35,7 @@ const { getUserId } = storeToRefs(useAuthStore());
 // State
 const displayUpload = ref(false);
 const objectInfoId: Ref<string | undefined> = ref(undefined);
+const objectTable = ref();
 
 const selectedObjectIds = computed(() => {
   return getSelectedObjects.value.map((o) => o.id);
@@ -54,6 +55,10 @@ const showUpload = () => {
 
 const closeUpload = () => {
   displayUpload.value = false;
+  objectTable.value.updateDataTable();
+};
+const onDeletedSuccess = () => {
+  objectTable.value.updateDataTable();
 };
 </script>
 
@@ -92,6 +97,7 @@ const closeUpload = () => {
         :disabled="displayUpload"
         :ids="selectedObjectIds"
         :mode="ButtonMode.BUTTON"
+        @on-deleted-success="onDeletedSuccess"
       />
     </div>
 
@@ -101,6 +107,7 @@ const closeUpload = () => {
     >
       <div class="flex-grow-1">
         <ObjectTable
+          ref="objectTable"
           :bucket-id="props.bucketId"
           :object-info-id="objectInfoId"
           @show-object-info="showObjectInfo"
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 8fcdbef8..7067485a 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -18,6 +18,7 @@ import { Permissions } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
 import { formatDateLong } from '@/utils/formatters';
 import { objectService } from '@/services';
+
 import type { Ref } from 'vue';
 import type { COMSObject } from '@/types';
 
@@ -49,6 +50,7 @@ const permissionStore = usePermissionStore();
 const { getUserId } = storeToRefs(useAuthStore());
 
 // State
+const selectAll = ref(false);
 const permissionsVisible = ref(false);
 const permissionsObjectId = ref('');
 const permissionsObjectName: Ref<string | undefined> = ref('');
@@ -58,7 +60,6 @@ const loading = ref(false);
 const lazyParams: Ref<DataTableObjectSource> = ref({});
 const totalRecords = ref(0);
 const first = ref(0);
-const selectedObjects: any = ref();
 const filters = ref({
   name: { value: undefined, matchMode: 'contains' },
   tags: { value: undefined, matchMode: 'contains' },
@@ -82,6 +83,7 @@ async function showPermissions(objectId: string) {
   permissionsObjectId.value = objectId;
   permissionsObjectName.value = objectStore.findObjectById(objectId)?.name;
 }
+
 onMounted(() => {
   loading.value = true;
   lazyParams.value = {
@@ -117,7 +119,6 @@ const loadLazyData = (event?: any) => {
       tableData.value = r.data;
       totalRecords.value = +r?.headers['x-total-rows'];
       loading.value = false;
-
       // add to object store
       r.data.forEach((o: COMSObject) => {
         objectStore.$patch((state) => {
@@ -131,20 +132,34 @@ const loadLazyData = (event?: any) => {
       permissionStore.fetchObjectPermissions({ objectId: objects.map((o: COMSObject) => o.id) });
     });
 };
+
 const onPage = (event?: any) => {
   lazyParams.value = event;
   loadLazyData(event);
 };
+
 const onSort = (event?: any) => {
   lazyParams.value = event;
   loadLazyData(event);
 };
+
 const onFilter = (event?: any) => {
   lazyParams.value.filters = filters;
   // Seems to be a bug as current page is not being reset when filter trigger
   dt.value.resetPage();
   loadLazyData(event);
 };
+
+function selectCurrentPage() {
+  objectStore.setSelectedObjects(
+    tableData.value.filter((object) => {
+      return Array.from(document.querySelectorAll('[data-objectId]'))
+        .map((x) => x.getAttribute('data-objectId'))
+        .includes(object.id);
+    })
+  );
+}
+
 // Clear selections when navigating away
 onUnmounted(() => {
   objectStore.setSelectedObjects([]);
@@ -173,6 +188,14 @@ const selectedFilters = (payload: any) => {
     }, {});
   lazyParams.value.filters = filters;
 };
+// Exposed to update datatable rows
+function updateDataTable() {
+  loadLazyData();
+}
+
+defineExpose({
+  updateDataTable
+});
 </script>
 
 <template>
@@ -180,8 +203,9 @@ const selectedFilters = (payload: any) => {
     <DataTable
       ref="dt"
       v-model:value="tableData"
-      v-model:selection="selectedObjects"
+      v-model:selection="objectStore.selectedObjects"
       v-model:filters="filters"
+      :select-all="selectAll"
       lazy
       paginator
       :loading="loading"
@@ -189,11 +213,10 @@ const selectedFilters = (payload: any) => {
       data-key="id"
       class="p-datatable-sm"
       responsive-layout="scroll"
-      :rows="3"
+      :rows="10"
       :rows-per-page-options="[10, 20, 50]"
       sort-field="updatedAt"
       :sort-order="-1"
-      filter-display="row"
       :global-filter-fields="['name']"
       :first="first"
       update:filters
@@ -201,6 +224,16 @@ const selectedFilters = (payload: any) => {
       @page="onPage($event)"
       @sort="onSort($event)"
       @filter="onFilter($event)"
+      @select-all-change="
+        (e) => {
+          selectAll = e.checked;
+          if (e.checked) {
+            selectCurrentPage();
+          } else {
+            objectStore.setSelectedObjects([]);
+          }
+        }
+      "
     >
       <template #header>
         <div class="flex justify-content-end">
@@ -232,9 +265,9 @@ const selectedFilters = (payload: any) => {
           </span>
 
           <Button
-            v-tooltip.bottom="'Refresh'"
+            v-tooltip.bottom="'Search'"
             class="ml-2"
-            icon="pi pi-refresh"
+            icon="pi pi-search"
             outlined
             rounded
             aria-label="Filter"
@@ -256,7 +289,11 @@ const selectedFilters = (payload: any) => {
       <Column
         selection-mode="multiple"
         header-style="width: 3rem"
-      />
+      >
+        <template selection-mode="multiple">
+          <div v-tooltip.bottom="selectAll">Select all</div>
+        </template>
+      </Column>
       <Column
         field="name"
         sortable
diff --git a/frontend/src/services/objectService.ts b/frontend/src/services/objectService.ts
index f970c4ad..a7a00c51 100644
--- a/frontend/src/services/objectService.ts
+++ b/frontend/src/services/objectService.ts
@@ -191,11 +191,13 @@ export default {
    * @function searchMetadata
    * Gets a list of tags matching the given parameters
    * @param {Object} headers Optional request headers
+   * @param {bucketId}  bucketId optional
    * @returns {Promise} An axios response
    */
-  searchMetadata(headers: { metadata?: Array<MetadataPair> }) {
+  searchMetadata(headers: { metadata?: Array<MetadataPair> }, bucketId?: Array<string>) {
     const config = {
-      headers: {}
+      headers: {},
+      params: { bucketId: bucketId }
     };
 
     // Map the metadata if required
@@ -226,14 +228,16 @@ export default {
    * @function searchTagging
    * Gets a list of tags matching the given parameters
    * @param {Array<Tag>} tagset Query parameters to search on
+   * @param {bucketId} bucketId optional
    * @returns {Promise} An axios response
    */
-  searchTagging(tagset: Array<Tag>) {
+  searchTagging(tagset: Array<Tag>, bucketId?: Array<string>) {
     return (
       comsAxios()
         .get(`${PATH}/tagging`, {
           params: {
-            tagset: Object.fromEntries(tagset.map((x: { key: string; value: string }) => [x.key, x.value]))
+            tagset: Object.fromEntries(tagset.map((x: { key: string; value: string }) => [x.key, x.value])),
+            bucketId: bucketId
           }
         })
         // filter out a configured list of select tags
diff --git a/frontend/src/store/metadataStore.ts b/frontend/src/store/metadataStore.ts
index e89d422a..a3082eb6 100644
--- a/frontend/src/store/metadataStore.ts
+++ b/frontend/src/store/metadataStore.ts
@@ -87,10 +87,10 @@ export const useMetadataStore = defineStore('metadata', () => {
     }
   }
 
-  async function searchMetadata(metadataSet: Array<MetadataPair> = []) {
+  async function searchMetadata(bucketId: string = '', metadataSet: Array<MetadataPair> = []) {
     try {
       state.metadataSearchResults.value = [];
-      const response = (await objectService.searchMetadata({ metadata: metadataSet })).data;
+      const response = (await objectService.searchMetadata({ metadata: metadataSet }, bucketId)).data;
       state.metadataSearchResults.value = response;
     } catch (error: any) {
       toast.error('Searching metadata', error);
diff --git a/frontend/src/store/tagStore.ts b/frontend/src/store/tagStore.ts
index d9d50793..75d46c21 100644
--- a/frontend/src/store/tagStore.ts
+++ b/frontend/src/store/tagStore.ts
@@ -82,11 +82,11 @@ export const useTagStore = defineStore('tag', () => {
     }
   }
 
-  async function searchTagging(tagset: Array<Tag> = []) {
+  async function searchTagging(bucketId: string = '', tagset: Array<Tag> = []) {
     try {
       state.tagSearchResults.value = [];
       // await new Promise((resolve) => setTimeout(resolve, 4000));
-      const response = (await objectService.searchTagging(tagset)).data;
+      const response = (await objectService.searchTagging(tagset, bucketId)).data;
       state.tagSearchResults.value = response;
     } catch (error: any) {
       toast.error('Searching tags', error);