Fixed filter and pagenation (#2877)

# Conflicts: # auth-web/package-lock.json # auth-web/package.json
bcgov · Jun 20, 2024 · aec75c8 · aec75c8
1 parent a0485d5
commit aec75c8
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 37 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": "2.6.31",
+  "version": "2.6.34",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

diff --git a/auth-web/src/components/auth/common/StaffAccountsTable.vue b/auth-web/src/components/auth/common/StaffAccountsTable.vue
@@ -19,12 +19,11 @@
               :footer-props="{
                 itemsPerPageOptions: paginationOptions
               }"
-              :items-per-page="numOfItems"
               hide-default-header
               fixed-header
               :loading="isTableLoading"
               :mobile-breakpoint="0"
-              @update:items-per-page="saveItemsPerPage"
+              @update:options="updateItemsPerPage"
             >
               <!-- Loading -->
               <template #loading>
@@ -190,9 +189,7 @@ import {
   cachePageInfo,
   getAndPruneCachedPageInfo,
   getPaginationOptions,
-  hasCachedPageInfo,
-  numberOfItems,
-  saveItemsPerPage
+  hasCachedPageInfo
 } from '@/components/datatable/resources'
 import { OrgAccountTypes, OrgFilterParams, OrgMap, Organization } from '@/models/Organization'
 import { PropType, computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
@@ -212,10 +209,18 @@ export default defineComponent({
       type: String as PropType<AccountStatus>,
       default: AccountStatus.ACTIVE
     },
-    sessionStorageKeys: {
+    sessionStorageKey: {
       type: String as PropType<SessionStorageKeys>,
       default: SessionStorageKeys.OrgSearchFilter
-    }
+    },
+    paginationNumberOfItemsKey: {
+      type: String as PropType<SessionStorageKeys>,
+      default: SessionStorageKeys.PaginationNumberOfItems
+    },
+    paginationOptionsKey: {
+      type: String as PropType<SessionStorageKeys>,
+      default: SessionStorageKeys.PaginationOptions
+    },
   },
   setup (props, { root }) {
     const { t } = useI18n()
@@ -289,9 +294,8 @@ export default defineComponent({
 
     state.accountTypes = Array.from(Object.keys(state.accountTypeMap))
     const paginationOptions = computed(() => getPaginationOptions())
-    const numOfItems = computed(() => numberOfItems())
 
-    const debouncedOrgSearch = debounce(async function (page = 1, pageLimit = numOfItems.value) {
+    const debouncedOrgSearch = debounce(async function (page = 1, pageLimit = state.tableDataOptions.itemsPerPage) {
       try {
         state.isTableLoading = true
         const completeSearchParams: OrgFilterParams = {
@@ -314,20 +318,21 @@ export default defineComponent({
 
     function mounted () {
       state.tableDataOptions = DEFAULT_DATA_OPTIONS
-      const orgSearchFilter = ConfigHelper.getFromSession(props.sessionStorageKeys) || ''
+      const orgSearchFilter = ConfigHelper.getFromSession(props.sessionStorageKey) || ''
       try {
         state.searchParams = JSON.parse(orgSearchFilter)
       } catch {
         // Do nothing, we have defaults for searchParams.
       }
-      if (hasCachedPageInfo) {
-        state.tableDataOptions = getAndPruneCachedPageInfo()
+      const hasInfo = hasCachedPageInfo(props.paginationOptionsKey);
+      if (hasInfo) {
+        state.tableDataOptions = getAndPruneCachedPageInfo(props.paginationOptionsKey)
       }
     }
 
     watch(() => state.searchParams, function (value) {
       state.searchParamsExist = doSearchParametersExist(value)
-      state.tableDataOptions = { ...getAndPruneCachedPageInfo(), page: 1 }
+      state.tableDataOptions = { ...getAndPruneCachedPageInfo(props.paginationOptionsKey), page: 1 }
       setSearchFilterToStorage(JSON.stringify(value))
       debouncedOrgSearch()
     }, { deep: true })
@@ -360,7 +365,7 @@ export default defineComponent({
     }
 
     async function syncBeforeNavigate (org: Organization) {
-      cachePageInfo(state.tableDataOptions)
+      cachePageInfo(state.tableDataOptions, props.paginationOptionsKey)
       await orgStore.syncOrganization(org.id)
       await orgStore.addOrgSettings(org)
       await orgStore.syncMembership(org.id)
@@ -370,6 +375,10 @@ export default defineComponent({
       return `${tag}-${index}`
     }
 
+    function updateItemsPerPage (options: DataOptions): void {
+      cachePageInfo(options, props.paginationOptionsKey)
+    }
+
     function getOrgAndAccessTypeFromAccountType (accountType: string): object {
       return state.accountTypeMap[accountType]
     }
@@ -407,7 +416,7 @@ export default defineComponent({
     })
 
     function setSearchFilterToStorage (val: string): void {
-      ConfigHelper.addToSession(props.sessionStorageKeys, val)
+      ConfigHelper.addToSession(props.sessionStorageKey, val)
     }
 
     function doSearchParametersExist (params: OrgFilterParams): boolean {
@@ -439,8 +448,7 @@ export default defineComponent({
       setSearchFilterToStorage,
       doSearchParametersExist,
       paginationOptions,
-      numOfItems,
-      saveItemsPerPage,
+      updateItemsPerPage,
       isActiveAccounts
     }
   }

diff --git a/auth-web/src/components/auth/staff/account-management/StaffActiveAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffActiveAccountsTable.vue
@@ -1,5 +1,10 @@
 <template>
-  <StaffAccountsTable :accountStatus="accountStatus" :sessionStorageKeys="sessionStorageKeys" />
+  <StaffAccountsTable
+    :accountStatus="accountStatus"
+    :sessionStorageKey="sessionStorageKey"
+    :paginationNumberOfItemsKey="paginationNumberOfItemsKey"
+    :paginationOptionsKey="paginationOptionsKey"
+  />
 </template>
 
 <script lang="ts">
@@ -15,7 +20,9 @@ export default defineComponent({
   data () {
     return {
       accountStatus: AccountStatus.ACTIVE as AccountStatus,
-      sessionStorageKeys: SessionStorageKeys.OrgSearchFilter
+      sessionStorageKey: SessionStorageKeys.OrgSearchFilter,
+      paginationNumberOfItemsKey: SessionStorageKeys.PaginationNumberOfItems,
+      paginationOptionsKey: SessionStorageKeys.PaginationOptions,
     }
   }
 })

diff --git a/auth-web/src/components/auth/staff/account-management/StaffInactiveAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffInactiveAccountsTable.vue
@@ -1,5 +1,10 @@
 <template>
-  <StaffAccountsTable :accountStatus="accountStatus" :sessionStorageKeys="sessionStorageKeys" />
+  <StaffAccountsTable
+    :accountStatus="accountStatus"
+    :sessionStorageKey="sessionStorageKey"
+    :paginationNumberOfItemsKey="paginationNumberOfItemsKey"
+    :paginationOptionsKey="paginationOptionsKey"
+  />
 </template>
 
 <script lang="ts">
@@ -15,7 +20,9 @@ export default defineComponent({
   data () {
     return {
       accountStatus: AccountStatus.INACTIVE as AccountStatus,
-      sessionStorageKeys: SessionStorageKeys.InactiveSearchFilter
+      sessionStorageKey: SessionStorageKeys.InactiveSearchFilter,
+      paginationNumberOfItemsKey: SessionStorageKeys.InactivePaginationNumberOfItems,
+      paginationOptionsKey: SessionStorageKeys.InactivePaginationOptions,
     }
   }
 })

diff --git a/auth-web/src/components/datatable/resources/index.ts b/auth-web/src/components/datatable/resources/index.ts
@@ -16,32 +16,31 @@ export const DEFAULT_DATA_OPTIONS: DataOptions = {
   mustSort: false
 }
 
-const getNumberOfItemsFromSessionStorage = (): number | undefined => {
-  const items = +ConfigHelper.getFromSession(SessionStorageKeys.PaginationNumberOfItems)
+const getNumberOfItemsFromSessionStorage = (key: SessionStorageKeys): number | undefined => {
+  const items = +ConfigHelper.getFromSession(key)
   return !isNaN(items) ? items : undefined
 }
 
-export const numberOfItems = (): number => {
-  return getNumberOfItemsFromSessionStorage() || DEFAULT_ITEMS_PER_PAGE
+export const numberOfItems = (key: SessionStorageKeys): number => {
+  return getNumberOfItemsFromSessionStorage(key) || DEFAULT_ITEMS_PER_PAGE
 }
 
-export const saveItemsPerPage = (val: number): void => {
-  ConfigHelper.addToSession(SessionStorageKeys.PaginationNumberOfItems, val)
+export const saveItemsPerPage = (val: number, key: SessionStorageKeys): void => {
+  ConfigHelper.addToSession(key, val)
 }
 
-export const cachePageInfo = (tableDataOptions: Partial<DataOptions>): void => {
-  ConfigHelper.addToSession(SessionStorageKeys.PaginationOptions, JSON.stringify(tableDataOptions))
+export const cachePageInfo = (tableDataOptions: Partial<DataOptions>, key: SessionStorageKeys): void => {
+  ConfigHelper.addToSession(key, JSON.stringify(tableDataOptions))
 }
 
-export const hasCachedPageInfo = (): boolean => {
-  const paginationOptions = JSON.parse(ConfigHelper.getFromSession(SessionStorageKeys.PaginationOptions) || '{}')
+export const hasCachedPageInfo = (key: SessionStorageKeys): boolean => {
+  const paginationOptions = JSON.parse(ConfigHelper.getFromSession(key) || '{}')
   return Object.keys(paginationOptions).length !== 0
 }
 
-export const getAndPruneCachedPageInfo = (): Partial<DataOptions> | undefined => {
-  const paginationOptions = JSON.parse(ConfigHelper.getFromSession(SessionStorageKeys.PaginationOptions) || '{}')
+export const getAndPruneCachedPageInfo = (key: SessionStorageKeys): Partial<DataOptions> | undefined => {
+  const paginationOptions = JSON.parse(ConfigHelper.getFromSession(key) || '{}')
   if (Object.keys(paginationOptions).length !== 0) {
-    ConfigHelper.removeFromSession(SessionStorageKeys.PaginationOptions)
     return paginationOptions
   }
   return undefined

diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
@@ -9,7 +9,9 @@ export enum SessionStorageKeys {
     SessionSynced = 'SESSION_SYNCED',
     InvitationToken = 'INV_TOKEN',
     PaginationOptions = 'PAGINATION_OPTIONS',
+    InactivePaginationOptions = 'INACTIVE_PAGINATION_OPTIONS',
     PaginationNumberOfItems = 'PAGINATION_NUMBER_OF_ITEMS',
+    InactivePaginationNumberOfItems = 'INACTIVE_PAGINATION_NUMBER_OF_ITEMS',
     OrgSearchFilter = 'ORG_SEARCH_FILTER',
     InactiveSearchFilter = 'INACTIVE_SEARCH_FILTER',
     ShortNamesSummaryFilter = 'SHORT_NAMES_SUMMARY_FILTER',