made adjustment to pagination and load data

bcgov · Jan 26, 2024 · 2a50935 · 2a50935
1 parent d9c99ed
commit 2a50935
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 88 deletions.
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
@@ -26,6 +26,10 @@ type COMSObjectDataSource = {
   lastUpdatedDate?: string;
 } & COMSObject;
 
+type DataTableObjectSource = {
+  [key: string]: any;
+};
+
 // Props
 type Props = {
   bucketId?: string;
@@ -53,6 +57,12 @@ const permissionsObjectId = ref('');
 const permissionsObjectName: Ref<string | undefined> = ref('');
 const tableData: Ref<Array<COMSObjectDataSource>> = ref([]);
 
+const loading = ref(false);
+const lazyParams: Ref<DataTableObjectSource> = ref({});
+const totalRecords = ref(0);
+const first = ref(0);
+const selectedObjects: any = ref();
+
 // Actions
 const toast = useToast();
 
@@ -86,72 +96,43 @@ async function showPermissions(objectId: string) {
 
 watch(getObjects, async () => {
   clearSelected();
-
-  // Filter object cache to this specific bucket
-  // const objs: Array<COMSObjectDataSource> = getObjects.value.filter(
-  //   (x: COMSObject) => x.bucketId === props.bucketId
-  // ) as COMSObjectDataSource[];
-  // console.log('vicky');
-  // console.log(tableData.values);
-  // tableData.value = objs.map((x: COMSObjectDataSource) => {
-  //   x.lastUpdatedDate = x.updatedAt ?? x.createdAt;
-  //   return x;
-  // });
-  // console.log(tableData.value);
 });
 
 onMounted(() => {
   loading.value = true;
 
   lazyParams.value = {
     first: 0,
-    rows: 3,
+    rows: 10,
     sortField: null,
     sortOrder: null,
     filters: filters.value
   };
-  loadLazyData();
+  loadLazyData(lazyParams);
 });
-const loading = ref(false);
-const lazyParams = ref({});
-const totalRecords = ref(0);
-const first = ref(0);
 
-const loadLazyData = (event) => {
-  console.log(event);
+const loadLazyData = (event: any) => {
   lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
-  console.log(JSON.stringify(lazyParams.value));
-  console.log(lazyParams.value.page);
-  console.log(lazyParams.value.pageCount);
   objectService
     .searchObjects({
       bucketId: props.bucketId ? [props.bucketId] : undefined,
-      //objectId: uniqueIds,
-      //tagset: tagset ? tagset.reduce((acc, cur) => ({ ...acc, [cur.key]: cur.value }), {}) : undefined,
-
-      // Added to allow deletion of objects before versioning implementation
-      // TODO: Verify if needed after versioning implemented
       deleteMarker: false,
       latest: true,
       permissions: true,
       page: lazyParams.value.page ? lazyParams.value.page + 1 : 1,
       limit: lazyParams.value.rows
     })
-    .then((r) => {
+    .then((r: any) => {
       loading.value = true;
-      // console.log(r.headers['x-total-rows']);
-      // console.log(r.headers);
-      // console.log(r);
       tableData.value = r.data.map((x: COMSObjectDataSource) => {
         x.lastUpdatedDate = x.updatedAt ?? x.createdAt;
         return x;
       });
-      totalRecords.value = +r.headers['x-total-rows'];
+      totalRecords.value = +r?.headers['x-total-rows'];
       loading.value = false;
-      console.log(totalRecords.value);
     });
 };
-const onPage = (event) => {
+const onPage = (event: any) => {
   lazyParams.value = event;
   loadLazyData(event);
 };
@@ -172,18 +153,17 @@ const filters = ref({
 <template>
   <div class="object-table">
     <DataTable
-      v-model:selection="objectStore.selectedObjects"
+      v-model:selection="selectedObjects"
       v-model:filters="filters"
       lazy
-      paginator
       :loading="loading"
       :value="tableData"
-      :totalRecords="totalRecords"
+      :total-records="totalRecords"
       data-key="id"
       class="p-datatable-sm"
       responsive-layout="scroll"
       :paginator="true"
-      :rows="3"
+      :rows="10"
       :rows-per-page-options="[10, 20, 50]"
       sort-field="lastUpdatedDate"
       :sort-order="-1"

diff --git a/frontend/src/services/objectService.ts b/frontend/src/services/objectService.ts
@@ -220,55 +220,7 @@ export default {
    * @returns {Promise} An axios response
    */
   async searchObjects(params: SearchObjectsOptions = {}, headers: any = {}) {
-    // remove objectId array if its first element is undefined
-    if (params.objectId && params.objectId[0] === undefined) delete params.objectId;
-
-    if (params.objectId) {
-      /**
-       * split calls to COMS if query params (eg objectId's)
-       * will cause url length to excede 2000 characters
-       * see: https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers
-       *
-       * TODO: consider creating a utils function
-       * eg: `divideParam(params, attr)`
-       *      ...
-       *      return Promise.all(divideParam(params, objectId)
-       *        .map(zparam => comsAxios().get(PATH, {params: zparam, headers: headers});
-       */
-      let urlLimit = 2000;
-
-      const baseUrl = new URL(`${new ConfigService().getConfig().coms.apiPath}${PATH}`).toString();
-      urlLimit -= baseUrl.length; // subtract baseUrl length
-      if (params.deleteMarker) urlLimit -= 19; // subtract `deleteMarker=false`
-      if (params.latest) urlLimit -= 13; // subtract `latest=false`
-      if (params.bucketId) urlLimit -= 48; // subtract a single bucketId `bucketId[]=<uuid>`
-      // if tagset parameters passed
-      if (params.tagset) {
-        type TagsetObjectEntries = {
-          [K in keyof Tag]: [K, Tag[K]];
-        }[keyof Tag][];
-        for (const [key, value] of Object.entries(params.tagset) as TagsetObjectEntries) {
-          urlLimit -= 10 + key.length + value.length;
-        }
-      }
-
-      // number of allowed objectId's in each group - 48 chars for each objectId (&objectId[]=<uuid>)
-      const space = urlLimit;
-      const groupSize = Math.floor(space / 48);
-
-      // loop through each group and push COMS result to `groups` array
-      const iterations = Math.ceil(params.objectId.length / groupSize);
-      const groups = [];
-      for (let i = 0; i < iterations; i++) {
-        const ids = params.objectId.slice(i * groupSize, i * groupSize + groupSize);
-        groups.push(await comsAxios().get(PATH, { params: { ...params, objectId: ids }, headers: headers }));
-      }
-      return Promise.resolve({ data: groups.flatMap((result) => result.data) });
-    }
-    // else just call COMS once
-    else {
-      return comsAxios().get(PATH, { params: params, headers: headers });
-    }
+    return comsAxios().get(PATH, { params: params, headers: headers });
   },
 
   /**

diff --git a/frontend/src/types/options/SearchObjectsOptions.ts b/frontend/src/types/options/SearchObjectsOptions.ts
@@ -9,4 +9,9 @@ export type SearchObjectsOptions = {
   active?: boolean;
   deleteMarker?: boolean;
   latest?: boolean;
+  permissions?: boolean;
+  page?: number;
+  limit?: number;
+  sort?: string;
+  order?: string;
 };