From 8310c50a1026f118f09b9b04930ce37fbbc86ccd Mon Sep 17 00:00:00 2001
From: deetz99 <dietrich@wolpert.ca>
Date: Tue, 20 Aug 2024 16:52:11 -0700
Subject: [PATCH 1/6] filter table results

---
 .../app/composables/useAffiliations.ts        | 112 +++++++++++++-----
 .../app/locales/en-CA.ts                      |  10 +-
 .../app/locales/fr-CA.ts                      |  10 +-
 .../app/pages/index.vue                       |  71 ++++++-----
 4 files changed, 134 insertions(+), 69 deletions(-)

diff --git a/business-registry-dashboard/app/composables/useAffiliations.ts b/business-registry-dashboard/app/composables/useAffiliations.ts
index 1f8e8fd..074fc63 100644
--- a/business-registry-dashboard/app/composables/useAffiliations.ts
+++ b/business-registry-dashboard/app/composables/useAffiliations.ts
@@ -3,15 +3,18 @@ export const useAffiliations = () => {
   const { t } = useI18n()
   // const { getAffiliationInvitations } = useAffiliationInvitations()
 
-  const affiliations = (reactive({
+  const affiliations = reactive({
     filters: {
       isActive: false,
-      filterPayload: {}
-    } as AffiliationFilterParams,
+      businessName: '',
+      businessNumber: '',
+      type: '',
+      status: ''
+    },
     loading: false,
     results: [] as Business[],
     count: 0
-  }) as unknown) as AffiliationState
+  })
 
   // TODO: handle affiliation invitations
   // async function handleAffiliationInvitations (affiliatedEntities: Business[]): Promise<void> {
@@ -72,6 +75,7 @@ export const useAffiliations = () => {
             }
             entity.nameRequest = buildNameRequestObject(nr)
           }
+
           affiliations.results.push(entity)
           affiliations.count = affiliations.results.length
           // TODO: add affilaition invites to business object
@@ -97,30 +101,16 @@ export const useAffiliations = () => {
     affiliations.loading = false
     affiliations.results = []
     affiliations.count = 0
-    affiliations.filters.filterPayload = {}
-    affiliations.filters.isActive = false
+    resetFilters()
   }
 
-  // const updateFilter = (filterField?: string, value?: any) => {
-  //   if (filterField) {
-  //     if (value) {
-  //       affiliations.filters.filterPayload[filterField] = value
-  //       affiliations.filters.isActive = true
-  //     } else {
-  //       delete affiliations.filters.filterPayload[filterField]
-  //     }
-  //   }
-  //   if (Object.keys(affiliations.filters.filterPayload).length === 0) {
-  //     affiliations.filters.isActive = false
-  //   } else {
-  //     affiliations.filters.isActive = true
-  //   }
-  // }
-
-  // const clearAllFilters = () => {
-  //   affiliations.filters.filterPayload = {}
-  //   affiliations.filters.isActive = false
-  // }
+  function resetFilters () {
+    affiliations.filters.businessName = ''
+    affiliations.filters.businessNumber = ''
+    affiliations.filters.type = ''
+    affiliations.filters.status = ''
+    affiliations.filters.isActive = false
+  }
 
   const nameColumn = { key: 'legalName', label: 'Name' }
   const actionColumn = { key: 'actions', label: 'Actions' }
@@ -177,6 +167,67 @@ export const useAffiliations = () => {
     ]
   }
 
+  const filteredResults = computed(() => {
+    let results = affiliations.results
+
+    if (affiliations.filters.businessName) {
+      results = results.filter((result) => {
+        const businessName = affiliationName(result)
+        return businessName.toLowerCase().includes(affiliations.filters.businessName.toLowerCase())
+      })
+    }
+
+    if (affiliations.filters.businessNumber) {
+      results = results.filter((result) => {
+        const businessNumber = number(result)
+        return businessNumber.toLowerCase().includes(affiliations.filters.businessNumber.toLowerCase())
+      })
+    }
+
+    if (affiliations.filters.type) {
+      results = results.filter((result) => {
+        const type = affiliationType(result)
+        return type.includes(affiliations.filters.type)
+      })
+    }
+
+    if (affiliations.filters.status) {
+      results = results.filter((result) => {
+        const status = affiliationStatus(result)
+        return status.includes(affiliations.filters.status)
+      })
+    }
+
+    return results
+  })
+
+  const statusOptions = computed(() => {
+    const optionSet = new Set<string>()
+
+    affiliations.results.forEach((item) => {
+      optionSet.add(affiliationStatus(item))
+    })
+
+    return Array.from(optionSet)
+  })
+
+  const typeOptions = computed(() => {
+    const optionSet = new Set<string>()
+
+    affiliations.results.forEach((item) => {
+      optionSet.add(affiliationType(item))
+    })
+
+    return Array.from(optionSet)
+  })
+
+  const hasFilters = computed(() => {
+    return affiliations.filters.businessName !== '' ||
+      affiliations.filters.businessNumber !== '' ||
+      affiliations.filters.type !== '' ||
+      affiliations.filters.status !== ''
+  })
+
   return {
     getAffiliatedEntities,
     affiliations,
@@ -184,8 +235,11 @@ export const useAffiliations = () => {
     visibleColumns,
     optionalColumns,
     selectedColumns,
-    setColumns
-    // clearAllFilters,
-    // updateFilter,
+    setColumns,
+    filteredResults,
+    statusOptions,
+    typeOptions,
+    hasFilters,
+    resetFilters
   }
 }
diff --git a/business-registry-dashboard/app/locales/en-CA.ts b/business-registry-dashboard/app/locales/en-CA.ts
index f03bede..9c1eb8d 100644
--- a/business-registry-dashboard/app/locales/en-CA.ts
+++ b/business-registry-dashboard/app/locales/en-CA.ts
@@ -111,7 +111,8 @@ export default {
       show: 'Help with Starting and Managing a Business',
       hide: 'Hide Help'
     },
-    moreOptions: 'More Options'
+    moreOptions: 'More Options',
+    clearFilters: 'Clear Filters'
   },
   currency: {
     cad: 'CAD',
@@ -216,7 +217,8 @@ export default {
     addresses: 'Addresses',
     directors: 'Directors',
     confirm: 'Confirm',
-    select: 'Select'
+    select: 'Select',
+    none: 'None'
   },
   page: {
     notFound: {
@@ -292,7 +294,7 @@ export default {
           }
         },
         legalType: {
-          aria: 'Filter by legal type, {count} selected',
+          aria: 'Filter by legal type, current filter: {filter}',
           placeholder: 'Type',
           selected: '{count} selected',
           clear: {
@@ -301,7 +303,7 @@ export default {
           }
         },
         busStates: {
-          aria: 'Filter by business status, {count} selected',
+          aria: 'Filter by business status, current filter: {filter}',
           placeholder: 'Status',
           selected: '{count} selected',
           clear: {
diff --git a/business-registry-dashboard/app/locales/fr-CA.ts b/business-registry-dashboard/app/locales/fr-CA.ts
index dcdfb0e..e1f49e4 100644
--- a/business-registry-dashboard/app/locales/fr-CA.ts
+++ b/business-registry-dashboard/app/locales/fr-CA.ts
@@ -111,7 +111,8 @@ export default {
       show: "Aide à la Création et à la Gestion d'une Entreprise",
       hide: "Masquer l'Aide"
     },
-    moreOptions: "Plus d'options"
+    moreOptions: "Plus d'options",
+    clearFilters: 'Effacer les Filtres'
   },
   currency: {
     cad: 'CAD',
@@ -216,7 +217,8 @@ export default {
     addresses: 'Adresses',
     directors: 'Directeurs',
     confirm: 'Confirmer',
-    select: 'Sélectionner'
+    select: 'Sélectionner',
+    none: 'Aucun'
   },
   page: {
     notFound: {
@@ -292,7 +294,7 @@ export default {
           }
         },
         legalType: {
-          aria: 'Filtrer par type juridique, {count} sélectionnés',
+          aria: 'Filtre par type juridique, filtre actuel: {filter}',
           placeholder: 'Taper',
           selected: '{count} sélectionnés',
           clear: {
@@ -301,7 +303,7 @@ export default {
           }
         },
         busStates: {
-          aria: "Filtrer par statut d'entreprise, {count} sélectionnés",
+          aria: "Filtrer par statut d'entreprise, filtre actuel: {filter}",
           placeholder: 'Statut',
           selected: '{count} sélectionnés',
           clear: {
diff --git a/business-registry-dashboard/app/pages/index.vue b/business-registry-dashboard/app/pages/index.vue
index ded60a3..6e7b4df 100644
--- a/business-registry-dashboard/app/pages/index.vue
+++ b/business-registry-dashboard/app/pages/index.vue
@@ -20,16 +20,13 @@ const {
   visibleColumns,
   optionalColumns,
   selectedColumns,
-  setColumns
-  // clearAllFilters,
-  // updateFilter,
+  setColumns,
+  filteredResults,
+  typeOptions,
+  statusOptions,
+  hasFilters,
+  resetFilters
 } = useAffiliations()
-
-const busTypes = ['BC Sole Proprietorship', 'Name Request', 'Incorporation Application', 'Registration']
-const selectedTypes = ref([])
-
-const busStates = ['Active', 'Expired', 'Draft']
-const selectedStates = ref([])
 </script>
 <template>
   <div class="mx-auto flex flex-col gap-4 px-2 py-8 sm:px-4 sm:py-10">
@@ -150,11 +147,11 @@ const selectedStates = ref([])
       <!-- affiliations table -->
       <UTable
         :columns="visibleColumns"
-        :rows="affiliations.results"
+        :rows="filteredResults"
         :ui="{
           th: {
             padding: 'px-0 py-3.5'
-          },
+          }
         }"
       >
         <!-- start table header slots -->
@@ -163,13 +160,14 @@ const selectedStates = ref([])
           <TableColumnHeader
             :label="$t('labels.busName')"
             :clear-button="{
-              show: selectedTypes.length > 0,
+              show: affiliations.filters.businessName !== '',
               tooltip: $t('table.affiliation.filter.busName.clear.tooltip'),
               aria: $t('table.affiliation.filter.busName.clear.aria')
             }"
-            @clear="selectedTypes = []"
+            @clear="affiliations.filters.businessName = ''"
           >
             <UInput
+              v-model="affiliations.filters.businessName"
               variant="bcGovSm"
               :placeholder="$t('table.affiliation.filter.busName.placeholder')"
               :aria-label="$t('table.affiliation.filter.busName.aria')"
@@ -182,13 +180,14 @@ const selectedStates = ref([])
           <TableColumnHeader
             :label="$t('labels.number')"
             :clear-button="{
-              show: selectedTypes.length > 0,
+              show: affiliations.filters.businessNumber !== '',
               tooltip: $t('table.affiliation.filter.busNumber.clear.tooltip'),
               aria: $t('table.affiliation.filter.busNumber.clear.aria')
             }"
-            @clear="selectedTypes = []"
+            @clear="affiliations.filters.businessNumber = ''"
           >
             <UInput
+              v-model="affiliations.filters.businessNumber"
               variant="bcGovSm"
               :placeholder="$t('table.affiliation.filter.busNumber.placeholder')"
               :aria-label="$t('table.affiliation.filter.busNumber.aria')"
@@ -201,25 +200,24 @@ const selectedStates = ref([])
           <TableColumnHeader
             :label="$t('labels.type')"
             :clear-button="{
-              show: selectedTypes.length > 0,
+              show: affiliations.filters.type !== '',
               tooltip: $t('table.affiliation.filter.legalType.clear.tooltip'),
               aria: $t('table.affiliation.filter.legalType.clear.aria')
             }"
-            @clear="selectedTypes = []"
+            @clear="affiliations.filters.type = ''"
           >
             <USelectMenu
               v-slot="{ open }"
-              v-model="selectedTypes"
-              :options="busTypes"
-              multiple
+              v-model="affiliations.filters.type"
+              :options="typeOptions"
               :ui="{ trigger: 'flex items-center w-full h-[42px]' }"
             >
               <UButton
                 variant="select_menu_trigger"
                 class="flex-1 justify-between text-gray-700"
-                :aria-label="$t('table.affiliation.filter.legalType.aria', { count: selectedTypes.length })"
+                :aria-label="$t('table.affiliation.filter.legalType.aria', { filter: affiliations.filters.type || $t('words.none') })"
               >
-                {{ selectedTypes.length > 0 ? $t('table.affiliation.filter.legalType.selected', { count: selectedTypes.length }) : $t('table.affiliation.filter.legalType.placeholder') }}
+                {{ affiliations.filters.type !== '' ? affiliations.filters.type : $t('table.affiliation.filter.legalType.placeholder') }}
 
                 <UIcon name="i-mdi-caret-down" class="size-5 text-gray-700 transition-transform" :class="[open && 'rotate-180']" />
               </UButton>
@@ -232,25 +230,24 @@ const selectedStates = ref([])
           <TableColumnHeader
             :label="$t('labels.status')"
             :clear-button="{
-              show: selectedStates.length > 0,
+              show: affiliations.filters.status !== '',
               tooltip: $t('table.affiliation.filter.busStates.clear.tooltip'),
               aria: $t('table.affiliation.filter.busStates.clear.aria')
             }"
-            @clear="selectedStates = []"
+            @clear="affiliations.filters.status = ''"
           >
             <USelectMenu
               v-slot="{ open }"
-              v-model="selectedStates"
-              :options="busStates"
-              multiple
+              v-model="affiliations.filters.status"
+              :options="statusOptions"
               :ui="{ trigger: 'flex items-center w-full h-[42px]' }"
             >
               <UButton
                 variant="select_menu_trigger"
                 class="flex-1 justify-between text-gray-700"
-                :aria-label="$t('table.affiliation.filter.busStates.aria', { count: selectedStates.length })"
+                :aria-label="$t('table.affiliation.filter.busStates.aria', { filter: affiliations.filters.status || $t('words.none') })"
               >
-                {{ selectedStates.length > 0 ? $t('table.affiliation.filter.busStates.selected', { count: selectedStates.length }) : $t('table.affiliation.filter.busStates.placeholder') }}
+                {{ affiliations.filters.status !== '' ? affiliations.filters.status : $t('table.affiliation.filter.busStates.placeholder') }}
 
                 <UIcon name="i-mdi-caret-down" class="size-5 text-gray-700 transition-transform" :class="[open && 'rotate-180']" />
               </UButton>
@@ -264,7 +261,16 @@ const selectedStates = ref([])
             :label="$t('labels.actions')"
             :clear-button="{ show: false }"
           >
-            <div class="h-[42px]" />
+            <div class="flex h-[42px] items-center">
+              <UButton
+                variant="outline"
+                :label="$t('btn.clearFilters')"
+                icon="i-mdi-close"
+                trailing
+                :disabled="!hasFilters"
+                @click="resetFilters"
+              />
+            </div>
           </TableColumnHeader>
         </template>
         <!-- end table header slots -->
@@ -294,14 +300,15 @@ const selectedStates = ref([])
                   name="i-mdi-check"
                   aria-hidden="true"
                 />
-                <span v-if="isApprovedName(nrName)" class="sr-only">{{ $t('table.affiliation.cell.name.approved', { name: nrName.name }) }}</span>
-                <span v-if="isRejectedName(nrName)" class="sr-only">{{ $t('table.affiliation.cell.name.rejected', { name: nrName.name }) }}</span>
                 <div
                   class="table-cell pl-2 align-top font-semibold"
                   aria-hidden="true"
                 >
                   {{ nrName.name }}
                 </div>
+                <span v-if="isApprovedName(nrName)" class="sr-only">{{ $t('table.affiliation.cell.name.approved', { name: nrName.name }) }}</span>
+                <span v-else-if="isRejectedName(nrName)" class="sr-only">{{ $t('table.affiliation.cell.name.rejected', { name: nrName.name }) }}</span>
+                <span v-else class="sr-only">{{ nrName.name }}</span>
               </div>
             </strong>
             <strong

From a56ccdacf12f409a85b710583ef77bcc007b9ae3 Mon Sep 17 00:00:00 2001
From: deetz99 <dietrich@wolpert.ca>
Date: Wed, 21 Aug 2024 10:19:13 -0700
Subject: [PATCH 2/6] add comments, update filter computeds

---
 .../app/composables/useAffiliations.ts        | 41 ++++++++-----------
 .../app/pages/index.vue                       |  1 +
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/business-registry-dashboard/app/composables/useAffiliations.ts b/business-registry-dashboard/app/composables/useAffiliations.ts
index 074fc63..4d7b466 100644
--- a/business-registry-dashboard/app/composables/useAffiliations.ts
+++ b/business-registry-dashboard/app/composables/useAffiliations.ts
@@ -1,11 +1,10 @@
 export const useAffiliations = () => {
   const accountStore = useConnectAccountStore()
-  const { t } = useI18n()
+  const { t, locale } = useI18n()
   // const { getAffiliationInvitations } = useAffiliationInvitations()
 
   const affiliations = reactive({
     filters: {
-      isActive: false,
       businessName: '',
       businessNumber: '',
       type: '',
@@ -89,6 +88,7 @@ export const useAffiliations = () => {
     }
   }
 
+  // load new affiliations when user changes accounts
   watch(
     [() => accountStore.currentAccount.id],
     async () => {
@@ -109,20 +109,23 @@ export const useAffiliations = () => {
     affiliations.filters.businessNumber = ''
     affiliations.filters.type = ''
     affiliations.filters.status = ''
-    affiliations.filters.isActive = false
   }
 
+  // label required for columns type but overwritten in header slot, i18n not required
   const nameColumn = { key: 'legalName', label: 'Name' }
   const actionColumn = { key: 'actions', label: 'Actions' }
 
+  // optional table columns, i18n required because this is also used to populate the 'columns to show' dropdown
   const optionalColumns = [
     { key: 'identifier', label: t('labels.number') },
     { key: 'legalType', label: t('labels.type') },
     { key: 'state', label: t('labels.status') }
   ]
 
+  // default user selectedColumns columns = optionalColumns
   const selectedColumns = ref([...optionalColumns])
 
+  // default visible columns as all columns
   const visibleColumns = ref([
     nameColumn,
     ...optionalColumns,
@@ -131,9 +134,11 @@ export const useAffiliations = () => {
 
   const { width } = useWindowSize()
 
+  // update default columns on page width change
   watchDebounced(
     width,
     (newVal) => {
+      resetFilters() // reset filters so active filters do not get hidden when screen size changes
       if (newVal < 640) {
         // Mobile view
         visibleColumns.value = [nameColumn, actionColumn]
@@ -156,9 +161,10 @@ export const useAffiliations = () => {
         ]
       }
     },
-    { debounce: 500, immediate: true }
+    { debounce: 100, immediate: true }
   )
 
+  // used to update columns @change on the 'columns to show' dropdown
   function setColumns () {
     visibleColumns.value = [
       nameColumn,
@@ -173,14 +179,14 @@ export const useAffiliations = () => {
     if (affiliations.filters.businessName) {
       results = results.filter((result) => {
         const businessName = affiliationName(result)
-        return businessName.toLowerCase().includes(affiliations.filters.businessName.toLowerCase())
+        return businessName.toLocaleLowerCase(locale.value).includes(affiliations.filters.businessName.toLocaleLowerCase(locale.value))
       })
     }
 
     if (affiliations.filters.businessNumber) {
       results = results.filter((result) => {
         const businessNumber = number(result)
-        return businessNumber.toLowerCase().includes(affiliations.filters.businessNumber.toLowerCase())
+        return businessNumber.toLocaleLowerCase(locale.value).includes(affiliations.filters.businessNumber.toLocaleLowerCase(locale.value))
       })
     }
 
@@ -201,31 +207,18 @@ export const useAffiliations = () => {
     return results
   })
 
+  // create status filter options relevant to affiliations.results
   const statusOptions = computed(() => {
-    const optionSet = new Set<string>()
-
-    affiliations.results.forEach((item) => {
-      optionSet.add(affiliationStatus(item))
-    })
-
-    return Array.from(optionSet)
+    return Array.from(new Set(affiliations.results.map(affiliationStatus)))
   })
 
+  // create type filter options relevant to affiliations.results
   const typeOptions = computed(() => {
-    const optionSet = new Set<string>()
-
-    affiliations.results.forEach((item) => {
-      optionSet.add(affiliationType(item))
-    })
-
-    return Array.from(optionSet)
+    return Array.from(new Set(affiliations.results.map(affiliationType)))
   })
 
   const hasFilters = computed(() => {
-    return affiliations.filters.businessName !== '' ||
-      affiliations.filters.businessNumber !== '' ||
-      affiliations.filters.type !== '' ||
-      affiliations.filters.status !== ''
+    return Object.values(affiliations.filters).some(value => value !== '')
   })
 
   return {
diff --git a/business-registry-dashboard/app/pages/index.vue b/business-registry-dashboard/app/pages/index.vue
index 6e7b4df..442ecf7 100644
--- a/business-registry-dashboard/app/pages/index.vue
+++ b/business-registry-dashboard/app/pages/index.vue
@@ -148,6 +148,7 @@ const {
       <UTable
         :columns="visibleColumns"
         :rows="filteredResults"
+        :loading="affiliations.loading"
         :ui="{
           th: {
             padding: 'px-0 py-3.5'

From b6a3e35f92e42652c952311d74b275bf295c44a6 Mon Sep 17 00:00:00 2001
From: deetz99 <dietrich@wolpert.ca>
Date: Wed, 21 Aug 2024 10:29:02 -0700
Subject: [PATCH 3/6] organize index.vue

---
 .../app/pages/index.vue                       | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/business-registry-dashboard/app/pages/index.vue b/business-registry-dashboard/app/pages/index.vue
index 442ecf7..cd3a5de 100644
--- a/business-registry-dashboard/app/pages/index.vue
+++ b/business-registry-dashboard/app/pages/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 const accountStore = useConnectAccountStore()
+const nrWebUrl = useRuntimeConfig().public.nrURL
 
 useHead({
   title: t('page.home.title')
@@ -10,10 +11,7 @@ definePageMeta({
   order: 0
 })
 
-const selected = ref('reg')
-
-const config = useRuntimeConfig()
-const nrWebUrl = config.public.nrURL
+const searchType = ref('reg')
 
 const {
   affiliations,
@@ -72,25 +70,25 @@ const {
         }"
       >
         <AsyncComboBox
-          :key="selected"
-          :search-fn="selected === 'reg' ? regSearch : namexSearch"
-          :id-attr="selected === 'reg' ? 'identifier' : 'nrNum'"
-          :value-attr="selected === 'reg' ? 'name' : 'nrNum'"
-          :text="{ placeholder: $t(`search.${selected}.placeholder`), arialabel: $t(`search.${selected}.arialabel`)}"
+          :key="searchType"
+          :search-fn="searchType === 'reg' ? regSearch : namexSearch"
+          :id-attr="searchType === 'reg' ? 'identifier' : 'nrNum'"
+          :value-attr="searchType === 'reg' ? 'name' : 'nrNum'"
+          :text="{ placeholder: $t(`search.${searchType}.placeholder`), arialabel: $t(`search.${searchType}.arialabel`)}"
           @select="(e) => console.log('select: ', e)"
         >
           <template #empty>
             <div class="flex flex-col gap-2 px-4 py-2">
-              <span class="font-semibold">{{ $t(`search.${selected}.empty.title`) }}</span>
-              <span>{{ $t(`search.${selected}.empty.content`) }}</span>
+              <span class="font-semibold">{{ $t(`search.${searchType}.empty.title`) }}</span>
+              <span>{{ $t(`search.${searchType}.empty.content`) }}</span>
             </div>
           </template>
           <template #item="{ item }">
             <div class="flex items-center justify-between gap-2">
               <div class="max-w-36 flex-1">
-                <span>{{ selected === 'reg' ? item.identifier : item.nrNum }}</span>
+                <span>{{ searchType === 'reg' ? item.identifier : item.nrNum }}</span>
               </div>
-              <div v-if="selected === 'reg'" class="flex-1">
+              <div v-if="searchType === 'reg'" class="flex-1">
                 <span>{{ item.name }}</span>
               </div>
               <div v-else class="flex flex-1 flex-col gap-1">
@@ -106,7 +104,7 @@ const {
 
       <!-- TODO: link with search query -->
       <URadioGroup
-        v-model="selected"
+        v-model="searchType"
         :legend="$t('page.home.busOrNRSearch.opts.legend')"
         :options="[{value: 'reg', label: $t('page.home.busOrNRSearch.opts.existingBus')}, {value: 'namex', label: $t('page.home.busOrNRSearch.opts.nr')}]"
         :ui="{

From f09a8606baafc9ce0549a4b229f20f8f9af2e006 Mon Sep 17 00:00:00 2001
From: deetz99 <dietrich@wolpert.ca>
Date: Wed, 21 Aug 2024 11:23:39 -0700
Subject: [PATCH 4/6] test affiliation filtering

---
 .../tests/mocks/mockedData.ts                 | 367 ++++++------------
 .../unit/composables/useAffiliations.test.ts  | 260 ++++++++++++-
 2 files changed, 385 insertions(+), 242 deletions(-)

diff --git a/business-registry-dashboard/tests/mocks/mockedData.ts b/business-registry-dashboard/tests/mocks/mockedData.ts
index 4ff42a8..911b0b4 100644
--- a/business-registry-dashboard/tests/mocks/mockedData.ts
+++ b/business-registry-dashboard/tests/mocks/mockedData.ts
@@ -1,254 +1,139 @@
-export const mockedOrgs = {
-  orgs: [
+export const mockAffiliationResponse = {
+  entities: [
     {
-      accessType: 'accessType1',
-      branchName: 'branchName1',
-      created: 'created1',
-      createdBy: 'createdBy1',
-      hasApiAccess: true,
-      id: 1,
-      isBusinessAccount: true,
-      mailingAddress: [{ city: 'City1', country: 'Country1', postalCode: 'PostalCode1', region: 'Region1', street: 'Street1', streetAdditional: 'StreetAdditional1' }],
-      modified: 'modified1',
-      name: 'Name1',
-      orgStatus: 'orgStatus1',
-      orgType: 'OrgType1',
-      statusCode: 'statusCode1',
-      uuid: 'uuid1'
+      draftStatus: 'DRAFT',
+      draftType: 'ATMP',
+      identifier: 'TcVfviwwf8',
+      legalName: 'Numbered Limited Company',
+      legalType: 'BC',
+      nrNumber: 'NR 3819593',
+      nameRequest: {
+        actions: [
+          {
+            URL: null,
+            entitiesFilingName: null,
+            filingName: 'Incorporation',
+            learTemplate: null
+          },
+          {
+            URL: null,
+            entitiesFilingName: null,
+            filingName: 'Amalgamation',
+            learTemplate: null
+          }
+        ],
+        applicants: [
+          {
+            emailAddress: 'namesteamtesting@gmail.com',
+            phoneNumber: '1112223333'
+          }
+        ],
+        consentFlag: null,
+        corpNum: null,
+        entityTypeCd: 'CR',
+        expirationDate: '2024-10-10T06:59:00+00:00',
+        id: 2268804,
+        legalType: 'BC',
+        names: [
+          {
+            name: 'SOME TEST NAME 321',
+            state: 'APPROVED'
+          },
+          {
+            name: 'TESTS ARE US',
+            state: 'NE'
+          },
+          {
+            name: 'A TEST A DAY',
+            state: 'NE'
+          }
+        ],
+        natureBusinessInfo: 'Testing stuff',
+        nrNum: 'NR 3819593',
+        requestTypeCd: 'CR',
+        requestActionCd: 'AML',
+        stateCd: 'APPROVED',
+        target: 'lear'
+      }
     },
     {
-      accessType: 'accessType2',
-      branchName: 'branchName2',
-      created: 'created2',
-      createdBy: 'createdBy2',
-      hasApiAccess: true,
-      id: 2,
-      isBusinessAccount: true,
-      mailingAddress: [{ city: 'City2', country: 'Country2', postalCode: 'PostalCode2', region: 'Region2', street: 'Street2', streetAdditional: 'StreetAdditional2' }],
-      modified: 'modified2',
-      name: 'Name2',
-      orgStatus: 'orgStatus2',
-      orgType: 'OrgType2',
-      statusCode: 'statusCode2',
-      uuid: 'uuid2'
+      adminFreeze: false,
+      goodStanding: true,
+      identifier: 'BC0871227',
+      inDissolution: false,
+      legalName: 'SEVERIN LIMITED COMPANY CORP.',
+      legalType: 'BC',
+      state: 'HISTORICAL'
     },
     {
-      accessType: 'accessType3',
-      branchName: 'branchName3',
-      created: 'created3',
-      createdBy: 'createdBy3',
-      hasApiAccess: true,
-      id: 123,
-      isBusinessAccount: true,
-      mailingAddress: [{ city: 'City3', country: 'Country3', postalCode: 'PostalCode3', region: 'Region3', street: 'Street3', streetAdditional: 'StreetAdditional3' }],
-      modified: 'modified3',
-      name: 'Name3',
-      orgStatus: 'orgStatus3',
-      orgType: 'OrgType3',
-      statusCode: 'statusCode3',
-      uuid: 'uuid3'
-    }
-  ]
-}
-
-export const mockNewAccount = {
-  accessType: 'accessType3',
-  branchName: 'branchName3',
-  created: 'created3',
-  createdBy: 'createdBy3',
-  hasApiAccess: true,
-  id: 3,
-  isBusinessAccount: true,
-  mailingAddress: [{ city: 'City3', country: 'Country3', postalCode: 'PostalCode3', region: 'Region3', street: 'Street3', streetAdditional: 'StreetAdditional3' }],
-  modified: 'modified3',
-  name: 'Mock New Account',
-  orgStatus: 'orgStatus3',
-  orgType: 'OrgType3',
-  statusCode: 'statusCode3',
-  uuid: 'uuid3'
-}
-
-export const mockedArFilingResponse: ArFiling = {
-  filing: {
-    annualReport: {
-      annualGeneralMeetingDate: '2024-04-30',
-      annualReportDate: '2024-04-30',
-      votedForNoAGM: false,
-      unanimousResolutionDate: null
+      adminFreeze: false,
+      goodStanding: true,
+      identifier: 'BC0871274',
+      inDissolution: false,
+      legalName: 'AC BC 2022.DEC.6 18.24 TEST CORP.',
+      legalType: 'BC',
+      state: 'ACTIVE'
     },
-    header: {
-      certifiedBy: 'some user',
-      certifiedByDisplayName: 'STING',
-      colinIds: [123, 456, 789],
-      date: '2024-04-30',
-      completionDate: null,
-      filingDateTime: '2024-04-30',
-      filingYear: 2024,
-      id: 1,
-      name: 'Annual Report',
-      paymentStatus: 'PAID',
-      paymentAccount: '1',
-      paymentToken: 123456,
-      status: 'Submitted',
-      submitter: null
+    {
+      adminFreeze: false,
+      goodStanding: true,
+      identifier: 'BC0814603',
+      inDissolution: false,
+      legalName: 'CLIMATE LAW CORPORATION - IMPORT_TEST',
+      legalType: 'BC',
+      state: 'HISTORICAL',
+      taxId: '123'
     },
-    documents: []
-  }
-}
-
-export const mockedBusinessNano: BusinessNano = {
-  identifier: '123456789',
-  legalName: 'Test Business',
-  legalType: 'BC',
-  taxId: '986395507BC0001'
-}
-
-export const mockedBusinessFull: { business: BusinessFull } = {
-  business: {
-    taxId: '234653465',
-    corpState: 'ACT',
-    corpStateClass: 'some class',
-    email: 'some email',
-    foundingDate: '2020-10-10',
-    goodStanding: true,
-    hasFutureEffectiveFilings: false,
-    homeCompanyName: null,
-    homeJurisdictionNumber: null,
-    homeRecognitionDate: null,
-    identifier: '123456789',
-    jurisdiction: 'BC',
-    invitationEmail: 'test@example.com',
-    lastAgmDate: null,
-    lastArDate: '2020-10-10',
-    lastLedgerTimestamp: '',
-    legalName: 'Test Business Inc',
-    legalType: 'BC',
-    nextARYear: 2021,
-    status: 'some status'
-  }
-}
-
-export const mockedFilingTask = {
-  tasks: [
     {
-      task: {
-        filing: {
-          business: mockedBusinessFull.business,
-          annualReport: {
-            annualGeneralMeetingDate: null,
-            annualReportDate: '2020-10-10',
-            votedForNoAGM: false
-          },
-          header: {
-            certifiedBy: null,
-            colinIds: [],
-            completionDate: null,
-            date: '2024-10-10',
-            filingDateTime: '2024-10-10',
-            filingYear: '2024',
-            id: '1',
-            name: 'some name',
-            paymentAccount: '123',
-            paymentStatus: null,
-            paymentToken: 123,
-            status: 'PAID',
-            submitter: null
-          }
-        }
-      }
-    }
-  ]
-}
-
-export const mockedTodoTask = {
-  tasks: [{
-    task: {
-      todo: {
-        business: mockedBusinessFull.business,
-        header: {
-          ARFilingYear: 2021,
-          name: 'Some Name',
-          status: 'NEW'
-        }
-      }
-    }
-  }]
-}
-
-const mockTax: Tax = {
-  gst: 5,
-  pst: 7
-}
-
-export const mockFeeInfo: FeeInfo = {
-  filingFees: 100,
-  filingType: 'Example Filing Type',
-  filingTypeCode: 'FTC001',
-  futureEffectiveFees: 50,
-  priorityFees: 25,
-  processingFees: 30,
-  serviceFees: 20,
-  tax: mockTax,
-  total: 260
-}
-
-export const mockFilingData: FilingData = {
-  filingDescription: 'Example Filing Description',
-  filingTypeCode: 'FTC001',
-  entityType: 'Example Entity Type',
-  waiveFees: false,
-  priority: true,
-  futureEffective: false
-}
-
-export const mockAddress: BusinessAddress = {
-  actions: [],
-  addressCity: 'Victoria',
-  addressCountry: 'Canada',
-  addressId: 1,
-  addressRegion: 'BC',
-  deliveryInstructions: '',
-  postalCode: '123 456',
-  streetAddress: '123 Test St',
-  streetAddressAdditional: ''
-}
-
-export const mockBusiness: Business = {
-  business: mockedBusinessFull.business,
-  offices: {
-    recordsOffice: {
-      deliveryAddress: mockAddress,
-      mailingAddress: mockAddress
+      adminFreeze: false,
+      goodStanding: true,
+      identifier: 'BC0871505',
+      inDissolution: false,
+      legalName: '0871505 B.C. LTD.',
+      legalType: 'BEN',
+      state: 'ACTIVE'
     },
-    registeredOffice: {
-      deliveryAddress: mockAddress,
-      mailingAddress: mockAddress
-    }
-  },
-  parties: [
     {
-      actions: [],
-      appointmentDate: '2020-10-10',
-      cessationDate: null,
-      deliveryAddress: mockAddress,
-      endEventId: '1',
-      id: 1,
-      mailingAddress: mockAddress,
-      officer: {
-        firstName: 'First Name',
-        lastName: 'Last Name',
-        middleInitial: 'T',
-        orgName: 'Test Org 3000'
-      },
-      roles: [
-        {
-          appointmentDate: '2020-10-10',
-          cessationDate: null,
-          roleType: 'Director'
-        }
-      ],
-      startEventId: '',
-      title: 'Director'
+      draftStatus: 'DRAFT',
+      draftType: 'RTMP',
+      identifier: 'T1ktKZPcOG',
+      legalName: null,
+      legalType: 'SP',
+      nrNumber: 'NR 7114831',
+      nameRequest: {
+        actions: [
+          {
+            URL: null,
+            entitiesFilingName: null,
+            filingName: 'Registration',
+            learTemplate: null
+          }
+        ],
+        applicants: [
+          {
+            emailAddress: 'mihai.dinu@gov.bc.ca',
+            phoneNumber: '7789967591'
+          }
+        ],
+        consentFlag: null,
+        corpNum: '',
+        entityTypeCd: 'FR',
+        expirationDate: '2023-11-29T07:59:00+00:00',
+        id: 2267075,
+        legalType: 'SP',
+        names: [
+          {
+            name: 'TEST SP OCT 3',
+            state: 'APPROVED'
+          }
+        ],
+        natureBusinessInfo: 'Testing',
+        nrNum: 'NR 7114831',
+        requestTypeCd: 'FR',
+        requestActionCd: 'NEW',
+        stateCd: 'EXPIRED',
+        target: 'lear'
+      }
     }
   ]
 }
diff --git a/business-registry-dashboard/tests/unit/composables/useAffiliations.test.ts b/business-registry-dashboard/tests/unit/composables/useAffiliations.test.ts
index cb7fdd3..ea6f9b2 100644
--- a/business-registry-dashboard/tests/unit/composables/useAffiliations.test.ts
+++ b/business-registry-dashboard/tests/unit/composables/useAffiliations.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 import { flushPromises } from '@vue/test-utils'
 import { setActivePinia, createPinia } from 'pinia'
+import { mockAffiliationResponse } from '~~/tests/mocks/mockedData'
 
 let mockAuthenticated = true
 mockNuxtImport('useNuxtApp', () => {
@@ -37,7 +38,10 @@ mockNuxtImport('useWindowSize', () => {
 mockNuxtImport('useI18n', () => {
   return () => (
     {
-      t: (key: string) => key
+      t: (key: string) => key,
+      locale: {
+        value: 'en-CA'
+      }
     }
   )
 })
@@ -312,4 +316,258 @@ describe('useAffiliations', () => {
       })
     })
   })
+
+  describe('affiliation filtering', () => {
+    describe('filter by name', () => {
+      it('should filter a name request object', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.businessName = 'SOME TEST NAME 321'
+
+        expect(filteredResults.value).toHaveLength(1)
+        expect(filteredResults.value[0]?.nameRequest?.names?.some(item => item.name === 'SOME TEST NAME 321')).toEqual(true)
+      })
+
+      it('should filter a business object', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.businessName = '0871505 B.C. LTD.'
+
+        expect(filteredResults.value).toHaveLength(1)
+        expect(filteredResults.value).toEqual([
+          {
+            businessIdentifier: 'BC0871505',
+            name: '0871505 B.C. LTD.',
+            corpType: { code: 'BEN' },
+            corpSubType: { code: 'BEN' },
+            adminFreeze: false,
+            goodStanding: true,
+            status: 'ACTIVE'
+          }
+        ])
+      })
+    })
+
+    describe('filter by number', () => {
+      it('should filter a name request object', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.businessNumber = 'NR 3819593'
+
+        expect(filteredResults.value).toHaveLength(1)
+        expect(filteredResults.value[0]?.nameRequest?.names?.some(item => item.name === 'SOME TEST NAME 321')).toEqual(true)
+      })
+
+      it('should filter a business object', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.businessNumber = 'BC0871227'
+
+        expect(filteredResults.value).toHaveLength(1)
+        expect(filteredResults.value).toEqual([
+          {
+            businessIdentifier: 'BC0871227',
+            name: 'SEVERIN LIMITED COMPANY CORP.',
+            corpType: { code: 'BC' },
+            corpSubType: { code: 'BC' },
+            adminFreeze: false,
+            goodStanding: true,
+            status: 'HISTORICAL'
+          }
+        ])
+      })
+    })
+
+    describe('filter by type', () => {
+      it('should filter an Amalgamation Application', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.type = 'Amalgamation Application'
+
+        expect(filteredResults.value).toHaveLength(1)
+        expect(filteredResults.value.every(item => affiliationType(item) === 'Amalgamation Application')).toEqual(true)
+      })
+
+      it('should filter a BC Limited Company', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.type = 'BC Limited Company'
+
+        expect(filteredResults.value).toHaveLength(3)
+        expect(filteredResults.value.every(item => affiliationType(item) === 'BC Limited Company')).toEqual(true)
+      })
+    })
+
+    describe('filter by status', () => {
+      it('should filter by draft', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.status = 'Draft'
+
+        expect(filteredResults.value).toHaveLength(2)
+        expect(filteredResults.value.every(item => affiliationStatus(item) === 'Draft')).toEqual(true)
+      })
+
+      it('should filter by historical', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { affiliations, filteredResults } = useAffiliations()
+        await flushPromises()
+
+        affiliations.filters.status = 'Historical'
+
+        expect(filteredResults.value).toHaveLength(2)
+        expect(filteredResults.value.every(item => affiliationStatus(item) === 'Historical')).toEqual(true)
+      })
+    })
+
+    describe('statusOptions', () => {
+      it('should be created based off the results objects', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { statusOptions } = useAffiliations()
+        await flushPromises()
+
+        expect(statusOptions.value).toEqual(['Draft', 'Historical', 'Active'])
+      })
+    })
+
+    describe('typeOptions', () => {
+      it('should be created based off the results objects', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { typeOptions } = useAffiliations()
+        await flushPromises()
+
+        expect(typeOptions.value).toEqual([
+          'Amalgamation Application',
+          'BC Limited Company',
+          'BC Benefit Company',
+          'Registration'
+        ])
+      })
+    })
+
+    describe('hasFilters', () => {
+      it('should be false by default', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { hasFilters } = useAffiliations()
+        await flushPromises()
+
+        expect(hasFilters.value).toEqual(false)
+      })
+
+      it('should be true with a name filter active', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { hasFilters, affiliations } = useAffiliations()
+        await flushPromises()
+
+        expect(hasFilters.value).toEqual(false)
+
+        affiliations.filters.businessName = 'test'
+
+        expect(hasFilters.value).toEqual(true)
+      })
+
+      it('should be true with a number filter active', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { hasFilters, affiliations } = useAffiliations()
+        await flushPromises()
+
+        expect(hasFilters.value).toEqual(false)
+
+        affiliations.filters.businessNumber = 'test'
+
+        expect(hasFilters.value).toEqual(true)
+      })
+
+      it('should be true with a type filter active', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { hasFilters, affiliations } = useAffiliations()
+        await flushPromises()
+
+        expect(hasFilters.value).toEqual(false)
+
+        affiliations.filters.type = 'test'
+
+        expect(hasFilters.value).toEqual(true)
+      })
+
+      it('should be true with a status filter active', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { hasFilters, affiliations } = useAffiliations()
+        await flushPromises()
+
+        expect(hasFilters.value).toEqual(false)
+
+        affiliations.filters.status = 'test'
+
+        expect(hasFilters.value).toEqual(true)
+      })
+    })
+
+    describe('resetFilters', () => {
+      it('should reset all filters', async () => {
+        const _fetch = vi.fn().mockResolvedValue(mockAffiliationResponse)
+        vi.stubGlobal('$fetch', _fetch)
+
+        const { hasFilters, affiliations, resetFilters } = useAffiliations()
+        await flushPromises()
+
+        expect(hasFilters.value).toEqual(false)
+
+        affiliations.filters.businessName = 'test'
+        affiliations.filters.businessNumber = 'test'
+        affiliations.filters.type = 'test'
+        affiliations.filters.status = 'test'
+
+        expect(hasFilters.value).toEqual(true)
+
+        resetFilters()
+
+        expect(hasFilters.value).toEqual(false)
+      })
+    })
+  })
 })

From 23e7cf360676b6689188aa89dacc0683b637f3ca Mon Sep 17 00:00:00 2001
From: deetz99 <dietrich@wolpert.ca>
Date: Wed, 21 Aug 2024 12:57:15 -0700
Subject: [PATCH 5/6] set fixed table height, sticky thead

---
 .../app/components/Table/Column/Header.vue                   | 4 ++--
 business-registry-dashboard/app/locales/en-CA.ts             | 3 ++-
 business-registry-dashboard/app/locales/fr-CA.ts             | 3 ++-
 business-registry-dashboard/app/pages/index.vue              | 5 ++++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/business-registry-dashboard/app/components/Table/Column/Header.vue b/business-registry-dashboard/app/components/Table/Column/Header.vue
index a8f14ab..e802003 100644
--- a/business-registry-dashboard/app/components/Table/Column/Header.vue
+++ b/business-registry-dashboard/app/components/Table/Column/Header.vue
@@ -11,9 +11,9 @@ defineProps<{
 defineEmits(['clear'])
 </script>
 <template>
-  <div class="flex flex-col gap-2 font-normal">
+  <div class="flex flex-col gap-2 border-b border-gray-200 font-normal">
     <span class="border-b border-gray-200 p-2 font-semibold">{{ label }}</span>
-    <div class="inline-flex -space-x-px px-2 pt-2">
+    <div class="inline-flex -space-x-px p-2">
       <div class="grow">
         <slot />
       </div>
diff --git a/business-registry-dashboard/app/locales/en-CA.ts b/business-registry-dashboard/app/locales/en-CA.ts
index 9c1eb8d..6707e28 100644
--- a/business-registry-dashboard/app/locales/en-CA.ts
+++ b/business-registry-dashboard/app/locales/en-CA.ts
@@ -204,7 +204,8 @@ export default {
     removeFromTable: 'Remove From Table',
     manageBusiness: 'Manage Business',
     cancelRequest: 'Cancel Request',
-    amalgamateNowShortForm: 'Amalgamate Now (Short Form)'
+    amalgamateNowShortForm: 'Amalgamate Now (Short Form)',
+    noAffiliationRecords: 'No Affiliation Records'
   },
   links: {
     busCorpAct: {
diff --git a/business-registry-dashboard/app/locales/fr-CA.ts b/business-registry-dashboard/app/locales/fr-CA.ts
index e1f49e4..636fb98 100644
--- a/business-registry-dashboard/app/locales/fr-CA.ts
+++ b/business-registry-dashboard/app/locales/fr-CA.ts
@@ -204,7 +204,8 @@ export default {
     removeFromTable: 'Supprimer du Tableau',
     manageBusiness: 'Gérer les Affaires',
     cancelRequest: 'Annuler la Demande',
-    amalgamateNowShortForm: 'Fusionner Maintenant (Forme Courte)'
+    amalgamateNowShortForm: 'Fusionner Maintenant (Forme Courte)',
+    noAffiliationRecords: "Aucun dossier d'affiliation"
   },
   links: {
     busCorpAct: {
diff --git a/business-registry-dashboard/app/pages/index.vue b/business-registry-dashboard/app/pages/index.vue
index cd3a5de..96ffb26 100644
--- a/business-registry-dashboard/app/pages/index.vue
+++ b/business-registry-dashboard/app/pages/index.vue
@@ -147,9 +147,12 @@ const {
         :columns="visibleColumns"
         :rows="filteredResults"
         :loading="affiliations.loading"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: $t('labels.noAffiliationRecords') }"
         :ui="{
+          wrapper: 'relative overflow-x-auto h-[512px]',
+          thead: 'sticky top-0 bg-white z-10',
           th: {
-            padding: 'px-0 py-3.5'
+            padding: 'px-0 py-0'
           }
         }"
       >

From 942017cf5fd93b2784daf81d1c11a112ae185f04 Mon Sep 17 00:00:00 2001
From: deetz99 <dietrich@wolpert.ca>
Date: Wed, 21 Aug 2024 15:33:52 -0700
Subject: [PATCH 6/6] fix prerender error

---
 .../app/components/HelpTextSection.vue                        | 4 ++--
 .../content/fr-CA/start-manage-business-help-text.md          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/business-registry-dashboard/app/components/HelpTextSection.vue b/business-registry-dashboard/app/components/HelpTextSection.vue
index be4a01b..60e4513 100644
--- a/business-registry-dashboard/app/components/HelpTextSection.vue
+++ b/business-registry-dashboard/app/components/HelpTextSection.vue
@@ -12,11 +12,11 @@ const toggleHelpText = () => {
   }
 }
 
-const { data: helpText } = await useAsyncData('start-manage-business-help-text', () => {
+const { data: helpText } = await useAsyncData('start-manage-business-help-text-' + locale.value, () => {
   return queryContent()
     .where({ _locale: locale.value, _path: { $contains: 'start-manage-business-help-text' } })
     .findOne()
-}, { watch: [locale] })
+})
 </script>
 <template>
   <UButton
diff --git a/business-registry-dashboard/content/fr-CA/start-manage-business-help-text.md b/business-registry-dashboard/content/fr-CA/start-manage-business-help-text.md
index 818876e..00791e1 100644
--- a/business-registry-dashboard/content/fr-CA/start-manage-business-help-text.md
+++ b/business-registry-dashboard/content/fr-CA/start-manage-business-help-text.md
@@ -1,4 +1,4 @@
-### Help with Starting and Managing a Business
+### Help with Starting and Managing a Business FRENCH
 
 Start a named or numbered business in B.C. by following these steps: