Add filters to the datatable

bcgov · Feb 3, 2024 · a2035a3 · a2035a3
1 parent ca63165
commit a2035a3
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/frontend/src/components/object/ObjectTable.vue b/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';
@@ -102,7 +102,7 @@ onMounted(() => {
     rows: 10,
     sortField: 'updatedAt',
     sortOrder: 'desc',
-    filters: filters.value
+    filters: filters.value['global'].value
   };
   loadLazyData();
 });
@@ -116,6 +116,7 @@ const loadLazyData = (event?: any) => {
       latest: true,
       permissions: true,
       page: lazyParams.value.page ? lazyParams.value.page + 1 : 1,
+      name: lazyParams.value.filters,
       limit: lazyParams.value.rows,
       sort: lazyParams.value.sortField,
       order: lazyParams.value.sortOrder === 1 ? 'asc' : 'desc'
@@ -126,16 +127,20 @@ const loadLazyData = (event?: any) => {
       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) => {
+  console.log(ObjectFilters);
+  console.log(myProperty);
+  lazyParams.value.filters = filters.value['global'].value;
+  loadLazyData(event);
+};
 // Clear selections when navigating away
 onUnmounted(() => {
   objectStore.setSelectedObjects([]);
@@ -181,6 +186,7 @@ const filters = ref({
       "
       @page="onPage($event)"
       @sort="onSort($event)"
+      @filter="onFilter($event)"
       @update:sort-order="clearSelected"
       @update:sort-field="clearSelected"
       @update:rows="clearSelected"
@@ -195,7 +201,6 @@ const filters = ref({
               v-model="filters['global'].value"
               class="searchInput"
               placeholder="Search File Names"
-              @input="clearSelected()"
             />
             <Button
               v-show="filters['global'].value !== null"
@@ -220,7 +225,7 @@ const filters = ref({
             outlined
             rounded
             aria-label="Filter"
-            @click="objectStore.fetchObjects({ bucketId: props.bucketId, userId: getUserId, bucketPerms: true })"
+            @click="onFilter()"
           />
         </div>
       </template>