Small fix for pagination changing after search. (#2156)

* Small fix for pagination changing after search. * Reorder page. * More fixes. * Change the count so it always displays the entire number of tasks. * Update package + package lock. * Fix code smells.
bcgov · Nov 16, 2022 · fe1a751 · fe1a751
1 parent 0884afe
commit fe1a751
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 45 deletions.
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/auth-web/src/components/auth/mixins/PaginationMixin.vue b/auth-web/src/components/auth/mixins/PaginationMixin.vue
@@ -31,7 +31,7 @@ export default class PaginationMixin extends Vue {
     return this.getNumberOfItemsFromSessionStorage() || this.DEFAULT_ITEMS_PER_PAGE
   }
 
-  private getNumberOfItemsFromSessionStorage (): number|undefined {
+  protected getNumberOfItemsFromSessionStorage (): number|undefined {
     let items = +ConfigHelper.getFromSession(SessionStorageKeys.PaginationNumberOfItems)
     return !isNaN(items) ? items : undefined
   }
@@ -52,6 +52,14 @@ export default class PaginationMixin extends Vue {
     return Object.keys(paginationOptions).length !== 0
   }
 
+  /**
+   * Helps to retain the current page information when the user went to detailed page and pressed refresh.
+   */
+  protected cachedPageInfo ():boolean {
+    const paginationOptions = JSON.parse(ConfigHelper.getFromSession(SessionStorageKeys.PaginationOptions) || '{}')
+    return Object.keys(paginationOptions).length !== 0
+  }
+
   /**
    * Return the pagination option.
    * Removes from session storage ; b

diff --git a/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue
@@ -179,7 +179,8 @@ export default class StaffPendingAccountsTable extends Mixins(PaginationMixin) {
     { desc: 'GovN', val: 'GovN' }
   ]
 
-  private searchParams: TaskFilterParams = {
+  private searchParams: TaskFilterParams = JSON.parse(ConfigHelper.getFromSession(SessionStorageKeys.PendingAccountsSearchFilter)) ||
+  {
     name: '',
     startDate: '',
     endDate: '',
@@ -200,12 +201,16 @@ export default class StaffPendingAccountsTable extends Mixins(PaginationMixin) {
 
   private formatDate = CommonUtils.formatDisplayDate
 
-  @Watch('searchParams', { deep: true })
+  @Watch('searchParams', { deep: true, immediate: true })
   async searchChanged (value: TaskFilterParams) {
     this.searchParamsExist = this.doSearchParametersExist(value)
-    this.tableDataOptions = { ...this.getAndPruneCachedPageInfo(), page: 1 }
+    const itemsPerPage = this.getNumberOfItemsFromSessionStorage() || this.DEFAULT_ITEMS_PER_PAGE
+    if (this.cachedPageInfo()) {
+      this.tableDataOptions = { ...this.getAndPruneCachedPageInfo(), itemsPerPage }
+    } else {
+      this.tableDataOptions = { ...this.tableDataOptions, page: 1, itemsPerPage }
+    }
     this.setPendingSearchFilterToStorage(JSON.stringify(value))
-    await this.searchStaffTasks()
   }
 
   @Watch('tableDataOptions', { deep: true })
@@ -220,19 +225,13 @@ export default class StaffPendingAccountsTable extends Mixins(PaginationMixin) {
         this.accountTypes.push({ desc: `Access Request (${element.desc})`, val: element.desc })
       })
     }
-    const pendingAccountsSearchFilter = ConfigHelper.getFromSession(SessionStorageKeys.PendingAccountsSearchFilter) || ''
     try {
-      this.searchParams = JSON.parse(pendingAccountsSearchFilter)
       if (this.searchParams.startDate && this.searchParams.endDate) {
         this.dateTxt = `${moment(this.searchParams.startDate).format('MMM DD, YYYY')} - ${moment(this.searchParams.endDate).format('MMM DD, YYYY')}`
       }
     } catch {
       // Do nothing
     }
-    this.tableDataOptions = this.DEFAULT_DATA_OPTIONS
-    if (this.hasCachedPageInfo) {
-      this.tableDataOptions = this.getAndPruneCachedPageInfo()
-    }
   }
 
   private getIndexedTag (tag, index): string {

diff --git a/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue
@@ -165,7 +165,7 @@ export default class StaffRejectedAccountsTable extends Mixins(PaginationMixin)
     { desc: 'GovN', val: 'GovN' }
   ]
 
-  private searchParams: TaskFilterParams = {
+  private searchParams: TaskFilterParams = JSON.parse(ConfigHelper.getFromSession(SessionStorageKeys.RejectedAccountsSearchFilter)) || {
     name: '',
     startDate: '',
     endDate: '',
@@ -186,12 +186,16 @@ export default class StaffRejectedAccountsTable extends Mixins(PaginationMixin)
 
   private formatDate = CommonUtils.formatDisplayDate
 
-  @Watch('searchParams', { deep: true })
+  @Watch('searchParams', { deep: true, immediate: true })
   async searchChanged (value: TaskFilterParams) {
     this.searchParamsExist = this.doSearchParametersExist(value)
-    this.tableDataOptions = { ...this.getAndPruneCachedPageInfo(), page: 1 }
+    const itemsPerPage = this.getNumberOfItemsFromSessionStorage() || this.DEFAULT_ITEMS_PER_PAGE
+    if (this.cachedPageInfo()) {
+      this.tableDataOptions = { ...this.getAndPruneCachedPageInfo(), itemsPerPage }
+    } else {
+      this.tableDataOptions = { ...this.tableDataOptions, page: 1, itemsPerPage }
+    }
     this.setRejectedSearchFilterToStorage(JSON.stringify(value))
-    await this.searchStaffTasks()
   }
 
   @Watch('tableDataOptions', { deep: true })
@@ -210,19 +214,13 @@ export default class StaffRejectedAccountsTable extends Mixins(PaginationMixin)
         this.accountTypes.push({ desc: `Access Request (${element.desc})`, val: element.desc })
       })
     }
-    const rejectedAccountsSearchFilter = ConfigHelper.getFromSession(SessionStorageKeys.RejectedAccountsSearchFilter) || ''
     try {
-      this.searchParams = JSON.parse(rejectedAccountsSearchFilter)
       if (this.searchParams.startDate && this.searchParams.endDate) {
         this.dateTxt = `${moment(this.searchParams.startDate).format('MMM DD, YYYY')} - ${moment(this.searchParams.endDate).format('MMM DD, YYYY')}`
       }
     } catch {
       // Do nothing
     }
-    this.tableDataOptions = this.DEFAULT_DATA_OPTIONS
-    if (this.hasCachedPageInfo) {
-      this.tableDataOptions = this.getAndPruneCachedPageInfo()
-    }
   }
 
   private async searchStaffTasks (page: number = 1, pageLimit: number = this.numberOfItems) {

diff --git a/auth-web/src/store/modules/task.ts b/auth-web/src/store/modules/task.ts
@@ -1,14 +1,13 @@
 import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'
-import { SessionStorageKeys, TaskRelationshipStatus, TaskStatus } from '@/util/constants'
 import { Task, TaskFilterParams } from '@/models/Task'
-import ConfigHelper from '@/util/config-helper'
+import { TaskRelationshipStatus, TaskStatus } from '@/util/constants'
 import TaskService from '@/services/task.services'
 
 @Module({ namespaced: true })
 export default class TaskModule extends VuexModule {
     currentTask: Task
-    pendingTasksCount: number = 0
-    rejectedTasksCount: number = 0
+    pendingTasksCount: number = null
+    rejectedTasksCount: number = null
 
     @Mutation
     public setCurrentTask (task: Task) {
@@ -36,34 +35,31 @@ export default class TaskModule extends VuexModule {
     // TODO: Add a new API call for fetching counts alone to reduce initial overload - For all calls made in StaffAccountManagement
     @Action({ rawError: true })
     public async syncTasks () {
-      const rejectedAccountsSearchFilter = ConfigHelper.getFromSession(SessionStorageKeys.RejectedAccountsSearchFilter) || ''
-      const pendingAccountsSearchFilter = ConfigHelper.getFromSession(SessionStorageKeys.PendingAccountsSearchFilter) || ''
-
-      if (!pendingAccountsSearchFilter) {
-        let taskFilter: TaskFilterParams = {
-          relationshipStatus: TaskRelationshipStatus.PENDING_STAFF_REVIEW,
-          statuses: [TaskStatus.OPEN, TaskStatus.HOLD]
-        }
-        await this.context.dispatch('fetchTasks', taskFilter)
+      let taskFilter: TaskFilterParams = {
+        relationshipStatus: TaskRelationshipStatus.PENDING_STAFF_REVIEW,
+        statuses: [TaskStatus.OPEN, TaskStatus.HOLD]
       }
+      await this.context.dispatch('fetchTasks', taskFilter)
 
-      if (!rejectedAccountsSearchFilter) {
-        let taskFilter: TaskFilterParams = {
-          relationshipStatus: TaskRelationshipStatus.REJECTED,
-          statuses: [TaskStatus.COMPLETED]
-        }
-        await this.context.dispatch('fetchTasks', taskFilter)
+      taskFilter = {
+        relationshipStatus: TaskRelationshipStatus.REJECTED,
+        statuses: [TaskStatus.COMPLETED]
       }
+      await this.context.dispatch('fetchTasks', taskFilter)
     }
 
     @Action({ rawError: true })
     public async fetchTasks (filterParams: TaskFilterParams) {
       const response = await TaskService.fetchTasks(filterParams)
       if (response?.data) {
         if (filterParams.relationshipStatus === TaskRelationshipStatus.PENDING_STAFF_REVIEW) {
-          this.context.commit('setPendingTasksCount', response.data.total)
+          if (!this.pendingTasksCount) {
+            this.context.commit('setPendingTasksCount', response.data.total)
+          }
         } else if (filterParams.relationshipStatus === TaskRelationshipStatus.REJECTED) {
-          this.context.commit('setRejectedTasksCount', response.data.total)
+          if (!this.rejectedTasksCount) {
+            this.context.commit('setRejectedTasksCount', response.data.total)
+          }
         }
         return {
           limit: response.data.limit,