Add filters to the datatable

frontend/src/components/object/ObjectFilters.vue

@@ -39,6 +39,9 @@ const searching = ref(false);
 const selectedMetadata: Ref<MetadataPair[]> = ref([]);
 const selectedTags: Ref<Tag[]> = ref([]);
 
+// Emits
+const emit = defineEmits(['selectedFilters']);
+
 // Store subscriptions
 objectStore.$onAction(({ name, args }) => {
   // If someone calls fetchObjects to refresh the table, clear the filter
@@ -118,7 +121,8 @@ const selectedFilterValuesChanged = () => {
   // Get the 'display' property out from selected tag and metadata
   const metaToSearch: Array<MetadataPair> = selectedMetadata.value.map(({ ...meta }: any) => meta);
   const tagSetToSearch: Array<Tag> = selectedTags.value.map(({ ...tag }: any) => tag);
-
+  console.log(metaToSearch);
+  emit('selectedFilters', { metaToSearch, tagSetToSearch });
   // Search the object store with the tagset as a param and metadata as headers
   objectStore.fetchObjects(
     {

frontend/src/components/object/ObjectTable.vue

@@ -12,7 +12,7 @@ import {
 } from '@/components/object';
 import { SyncButton } from '@/components/common';
 import { ShareObjectButton } from '@/components/object/share';
-import { Button, Column, DataTable, Dialog, FilterMatchMode, InputText, useToast } from '@/lib/primevue';
+import { Button, Column, DataTable, Dialog, FilterMatchMode, InputText, useToast, MultiSelect } from '@/lib/primevue';
 import { useAuthStore, useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
@@ -55,21 +55,30 @@ const permissionsVisible = ref(false);
 const permissionsObjectId = ref('');
 const permissionsObjectName: Ref<string | undefined> = ref('');
 const tableData: Ref<Array<COMSObjectDataSource>> = ref([]);
-
+const dt = ref();
 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' }
+});
+
+const initPaginationState = {
+  first: 0,
+  rows: 3,
+  page: 0,
+  sortField: 'updatedAt',
+  sortOrder: 'desc',
+  filters: filters
+};
+
+const tagset = Array<{ key: string; value: string }>;
 // Actions
 const toast = useToast();
 
-function clearSelected() {
-  selectAll.value = false;
-  objectStore.setSelectedObjects([]);
-}
-
 const formatShortUuid = (uuid: string) => uuid?.slice(0, 8) ?? uuid;
 const onDeletedSuccess = () => {
   toast.success('File deleted');
@@ -97,117 +106,117 @@ async function showPermissions(objectId: string) {
 }
 onMounted(() => {
   loading.value = true;
+  //lazyParams.value = initPaginationState;
+
   lazyParams.value = {
     first: 0,
-    rows: 10,
+    rows: dt.value.rows,
     sortField: 'updatedAt',
+    page: dt.value.page,
     sortOrder: 'desc',
-    filters: filters.value
+    filters: filters //filters.value
   };
   loadLazyData();
 });
 
 const loadLazyData = (event?: any) => {
-  lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
+  lazyParams.value = { ...lazyParams.value, first: event?.first || first.value, page: event?.page || 0 };
+
+  //console.log(lazyParams);
   objectService
     .searchObjects({
       bucketId: props.bucketId ? [props.bucketId] : undefined,
       deleteMarker: false,
       latest: true,
       permissions: true,
-      page: lazyParams.value.page ? lazyParams.value.page + 1 : 1,
+      page: lazyParams.value?.page ? ++lazyParams.value.page : 1,
+      name: lazyParams.value?.filters.name.value,
       limit: lazyParams.value.rows,
       sort: lazyParams.value.sortField,
       order: lazyParams.value.sortOrder === 1 ? 'asc' : 'desc'
+      //tagset: { t1: 't1', t2: 't2' }
     })
     .then((r: any) => {
       tableData.value = r.data;
       totalRecords.value = +r?.headers['x-total-rows'];
       loading.value = false;
     });
 };
-const onPage = (event: any) => {
+const onPage = (event?: any) => {
   lazyParams.value = event;
   loadLazyData(event);
 };
-const onSort = (event: any) => {
-  console.log('sort');
-  console.log(event);
+const onSort = (event?: any) => {
   lazyParams.value = event;
   loadLazyData(event);
 };
+const onFilter = (event?: any) => {
+  lazyParams.value.filters = filters;
+  loadLazyData(event);
+};
 // Clear selections when navigating away
 onUnmounted(() => {
   objectStore.setSelectedObjects([]);
 });
 
-// Datatable filter(s)
-const filters = ref({
-  // Need this till PrimeVue gets it together to un-break this again
-  // TODO: Revisit with PrimeVue 2.37+
-  // @ts-ignore
-  global: { value: null, matchMode: FilterMatchMode.CONTAINS }
-});
+const selectedFilters = (payload: any) => {
+  payload.metaToSearch.map((o: any) => o.value);
+  payload.tagToSearch.map((o: any) => o.value);
+  //debugger;
+};
 </script>
 
 <template>
   <div class="object-table">
     <DataTable
+      ref="dt"
       v-model:selection="selectedObjects"
       v-model:filters="filters"
       lazy
+      paginator
       :loading="loading"
       v-model:value="tableData"
       :total-records="totalRecords"
       data-key="id"
       class="p-datatable-sm"
       responsive-layout="scroll"
-      :paginator="true"
-      :rows="10"
+      :rows="3"
       :rows-per-page-options="[10, 20, 50]"
       sort-field="updatedAt"
       :sort-order="-1"
+      filterDisplay="row"
       :global-filter-fields="['name']"
-      :select-all="selectAll"
-      @select-all-change="
-        (e) => {
-          selectAll = e.checked;
-          if (e.checked) {
-            selectCurrentPage();
-          } else {
-            objectStore.setSelectedObjects([]);
-          }
-        }
-      "
+      :first="first"
+      update:filters
+      update:page
       @page="onPage($event)"
       @sort="onSort($event)"
-      @update:sort-order="clearSelected"
-      @update:sort-field="clearSelected"
-      @update:rows="clearSelected"
+      @filter="onFilter($event)"
     >
       <template #header>
         <div class="flex justify-content-end">
-          <ObjectFilters :bucket-id="props.bucketId" />
+          <ObjectFilters
+            :bucket-id="props.bucketId"
+            @selected-filters="selectedFilters"
+          />
 
           <span class="p-input-icon-left ml-4">
             <i class="pi pi-search" />
             <InputText
-              v-model="filters['global'].value"
+              v-model="filters.name.value"
               class="searchInput"
               placeholder="Search File Names"
-              @input="clearSelected()"
             />
             <Button
-              v-show="filters['global'].value !== null"
+              v-show="filters.name.value !== undefined"
               v-tooltip.bottom="'Clear'"
               class="ml-2 p-input-icon-clear-right"
               icon="pi pi-times"
               outlined
               aria-label="Clear"
               @click="
                 () => {
-                  filters['global'].value = null;
-                  clearSelected();
+                  filters.name.value = undefined;
                 }
               "
             />
@@ -220,7 +229,7 @@ const filters = ref({
             outlined
             rounded
             aria-label="Filter"
-            @click="objectStore.fetchObjects({ bucketId: props.bucketId, userId: getUserId, bucketPerms: true })"
+            @click="onFilter()"
           />
         </div>
       </template>