Merge pull request #17 from deetz99/table-filters

BRD - UI: Table filters

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

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>

business-registry-dashboard/app/composables/useAffiliations.ts

@@ -1,17 +1,19 @@
 export const useAffiliations = () => {
   const accountStore = useConnectAccountStore()
-  const { t } = useI18n()
+  const { t, locale } = 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 +74,7 @@ export const useAffiliations = () => {
             }
             entity.nameRequest = buildNameRequestObject(nr)
           }
+
           affiliations.results.push(entity)
           affiliations.count = affiliations.results.length
           // TODO: add affilaition invites to business object
@@ -85,6 +88,7 @@ export const useAffiliations = () => {
     }
   }
 
+  // load new affiliations when user changes accounts
   watch(
     [() => accountStore.currentAccount.id],
     async () => {
@@ -97,42 +101,31 @@ 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 = ''
+  }
 
+  // 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,
@@ -141,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]
@@ -166,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,
@@ -177,15 +173,66 @@ export const useAffiliations = () => {
     ]
   }
 
+  const filteredResults = computed(() => {
+    let results = affiliations.results
+
+    if (affiliations.filters.businessName) {
+      results = results.filter((result) => {
+        const businessName = affiliationName(result)
+        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.toLocaleLowerCase(locale.value).includes(affiliations.filters.businessNumber.toLocaleLowerCase(locale.value))
+      })
+    }
+
+    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
+  })
+
+  // create status filter options relevant to affiliations.results
+  const statusOptions = computed(() => {
+    return Array.from(new Set(affiliations.results.map(affiliationStatus)))
+  })
+
+  // create type filter options relevant to affiliations.results
+  const typeOptions = computed(() => {
+    return Array.from(new Set(affiliations.results.map(affiliationType)))
+  })
+
+  const hasFilters = computed(() => {
+    return Object.values(affiliations.filters).some(value => value !== '')
+  })
+
   return {
     getAffiliatedEntities,
     affiliations,
     resetAffiliations,
     visibleColumns,
     optionalColumns,
     selectedColumns,
-    setColumns
-    // clearAllFilters,
-    // updateFilter,
+    setColumns,
+    filteredResults,
+    statusOptions,
+    typeOptions,
+    hasFilters,
+    resetFilters
   }
 }

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',
@@ -203,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: {
@@ -216,7 +218,8 @@ export default {
     addresses: 'Addresses',
     directors: 'Directors',
     confirm: 'Confirm',
-    select: 'Select'
+    select: 'Select',
+    none: 'None'
   },
   page: {
     notFound: {
@@ -292,7 +295,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 +304,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: {

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',
@@ -203,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: {
@@ -216,7 +218,8 @@ export default {
     addresses: 'Adresses',
     directors: 'Directeurs',
     confirm: 'Confirmer',
-    select: 'Sélectionner'
+    select: 'Sélectionner',
+    none: 'Aucun'
   },
   page: {
     notFound: {
@@ -292,7 +295,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 +304,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: {