fix: fixed a ton of UX table issues + misc. fixes (#31)

* fix: fixed a ton of UX table issues + misc. fixes * fix: fixed NR error modal in response to Jacqueline's comments * fix: fixed in response to conversation with Jacqueline + lint fix
bcgov · Nov 27, 2024 · 7da1a93 · 7da1a93
1 parent 172582d
commit 7da1a93
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 49 deletions.
diff --git a/business-registry-dashboard/app/app.config.ts b/business-registry-dashboard/app/app.config.ts
@@ -173,6 +173,7 @@ export default defineAppConfig({
       label: 'text-gray-700',
       rounded: 'rounded-none',
       width: 'min-w-fit',
+      padding: 'p-0',
       option: {
         rounded: 'rounded-none',
         active: 'text-primary-500',
@@ -247,15 +248,15 @@ export default defineAppConfig({
     tooltip: {
       wrapper: 'relative inline-flex max-h-min',
       container: 'z-20 group min-h-fit',
-      background: 'bg-gray-700',
+      background: 'bg-gray-700/90',
       color: 'text-white',
-      ring: 'ring-1 ring-gray-700',
+      ring: 'ring-1 ring-gray-700/90',
       rounded: 'rounded',
-      base: 'h-auto px-2 py-1 text-sm font-normal relative whitespace-normal',
+      base: 'h-auto p-4 text-sm font-normal relative whitespace-normal',
       arrow: {
         base: 'before:w-3 before:h-3',
-        ring: 'before:ring-1 before:ring-gray-700',
-        background: 'before:bg-gray-700',
+        ring: 'before:ring-1 before:ring-gray-700/90',
+        background: 'before:bg-gray-700/90',
         rounded: 'before:rounded-none'
       }
     },

diff --git a/business-registry-dashboard/app/components/BusinessLookup.vue b/business-registry-dashboard/app/components/BusinessLookup.vue
@@ -12,7 +12,7 @@ const searchType = ref<'reg' | 'namex'>('reg')
         label: {
           base: 'block font-normal text-gray-700 dark:text-gray-200'
         },
-        help: 'mt-2 ml-2 text-xs text-bcGovColor-midGray',
+        help: 'mt-2 ml-3 text-xs text-bcGovColor-midGray',
       }"
     >
       <AsyncComboBox

diff --git a/business-registry-dashboard/app/components/HelpTextSection.vue b/business-registry-dashboard/app/components/HelpTextSection.vue
@@ -24,7 +24,7 @@ const { data: helpText } = await useAsyncData('start-manage-business-help-text-'
     :label="showHelpText ? $t('btn.busStartHelp.hide') : $t('btn.busStartHelp.show')"
     variant="link"
     icon="i-mdi-help-circle-outline"
-    class="max-w-fit"
+    class="-mt-1 self-start"
     :aria-expanded="showHelpText"
     :padded="false"
     aria-controls="help-text-content"

diff --git a/business-registry-dashboard/app/components/Modal/ManageNameRequest.vue b/business-registry-dashboard/app/components/Modal/ManageNameRequest.vue
@@ -13,7 +13,7 @@ defineProps<{
     <!-- nr info section -->
     <div class="-mt-4 flex flex-col gap-2">
       <!-- nr names display -->
-      <div class="flex gap-8">
+      <div class="flex gap-2">
         <span class="font-semibold text-bcGovColor-darkGray">{{ $t('form.manageNR.requestedNames', nameRequest.names.length) }}</span>
         <ul>
           <li v-for="name in nameRequest.names" :key="name" class="text-bcGovColor-midGray">
@@ -22,7 +22,7 @@ defineProps<{
         </ul>
       </div>
       <!-- nr number display -->
-      <div class="flex gap-8">
+      <div class="flex gap-2">
         <span class="font-semibold text-bcGovColor-darkGray">{{ $t('form.manageNR.nrNum') }}</span>
         <span class="text-bcGovColor-midGray">{{ nameRequest.nrNum }}</span>
       </div>

diff --git a/business-registry-dashboard/app/components/Sbc/PageSection/Card.vue b/business-registry-dashboard/app/components/Sbc/PageSection/Card.vue
@@ -13,7 +13,7 @@ defineProps<{
       header: {
         base: 'rounded-t',
         background: 'bg-bcGovColor-gray2',
-        padding: 'px-4 py-5 sm:px-6',
+        padding: 'px-4 py-5 sm:px-4',
       },
       body: {
         padding: 'px-0 py-0 sm:p-0',

diff --git a/business-registry-dashboard/app/components/Table/AffiliatedEntity/Action.vue b/business-registry-dashboard/app/components/Table/AffiliatedEntity/Action.vue
@@ -384,7 +384,7 @@ const moreActionsDropdownOptions = computed<DropdownItem[][]>(() => {
       >
         <UButton
           :label="getPrimaryActionLabel(item)"
-          class="px-4"
+          class="w-44 px-4"
           :icon="affNav.isOpenExternal(item) ? 'i-mdi-open-in-new' : ''"
           @click="primaryAction(item)"
         />

diff --git a/business-registry-dashboard/app/components/Table/AffiliatedEntity/index.vue b/business-registry-dashboard/app/components/Table/AffiliatedEntity/index.vue
@@ -42,22 +42,38 @@ watch(
     <!-- columns to show dropdown -->
     <template #header-right>
       <USelectMenu
-        v-slot="{ open }"
         v-model="affStore.selectedColumns"
         :options="affStore.optionalColumns"
+        option-attribute="label"
         multiple
-        :ui="{ trigger: 'flex items-center w-full' }"
+        selected-icon="hidden"
         @change="affStore.setColumns"
       >
-        <UButton
-          color="white"
-          class="h-[42px] flex-1 justify-between text-gray-700"
-          :aria-label="$t('btn.colsToShow.aria', { count: affStore.selectedColumns.length })"
-        >
-          <span>{{ $t('btn.colsToShow.label') }}</span>
+        <template #default="{ open }">
+          <UButton
+            color="white"
+            class="h-[42px] w-[192px] flex-1 justify-between text-gray-700"
+            :aria-label="$t('btn.colsToShow.aria', { count: affStore.selectedColumns.length })"
+          >
+            <span>{{ $t('btn.colsToShow.label') }}</span>
+            <UIcon
+              name="i-mdi-caret-down"
+              class="size-5 text-gray-700 transition-transform"
+              :class="[open && 'rotate-180']"
+            />
+          </UButton>
+        </template>
 
-          <UIcon name="i-mdi-caret-down" class="size-5 text-gray-700 transition-transform" :class="[open && 'rotate-180']" />
-        </UButton>
+        <template #option="{ option, selected }">
+          <div class="flex cursor-pointer items-center gap-2 pb-1">
+            <UCheckbox
+              :model-value="selected"
+              :aria-label="$t('btn.colsToShow.checkbox.aria', { column: option.label })"
+              class="pointer-events-none"
+            />
+            <span class="pt-1">{{ option.label }}</span>
+          </div>
+        </template>
       </USelectMenu>
     </template>
     <!-- affiliations table -->
@@ -73,7 +89,24 @@ watch(
           padding: 'px-0 py-0'
         },
         td: {
-          base: 'whitespace-normal max-w-96 align-top',
+          base: `
+            /* Default text handling */
+            whitespace-normal
+            align-top
+
+            /* Standard column width constraints */
+            w-48
+            min-w-[192px]
+            max-w-[192px]
+
+            /* Wider first column for business names */
+            [&:first-child]:min-w-[250px]
+            [&:first-child]:max-w-[250px]
+
+            /* Wider third column for type */
+            [&:nth-child(3)]:min-w-[230px]
+            [&:nth-child(3)]:max-w-[230px]
+          `,
           padding: 'px-4 py-4',
           color: 'text-bcGovColor-midGray',
           font: '',
@@ -137,20 +170,32 @@ watch(
           @clear="affStore.affiliations.filters.type = ''"
         >
           <USelectMenu
-            v-slot="{ open }"
             v-model="affStore.affiliations.filters.type"
             :options="affStore.typeOptions"
+            selected-icon="hidden"
             :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', { filter: affStore.affiliations.filters.type || $t('words.none') })"
-            >
-              {{ affStore.affiliations.filters.type !== '' ? affStore.affiliations.filters.type : $t('table.affiliation.filter.legalType.placeholder') }}
+            <template #default="{ open }">
+              <UButton
+                variant="select_menu_trigger"
+                class="flex-1 justify-between text-gray-700"
+                :aria-label="$t('table.affiliation.filter.legalType.aria', { filter: affStore.affiliations.filters.type || $t('words.none') })"
+              >
+                {{ affStore.affiliations.filters.type !== '' ? affStore.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>
+            </template>
 
-              <UIcon name="i-mdi-caret-down" class="size-5 text-gray-700 transition-transform" :class="[open && 'rotate-180']" />
-            </UButton>
+            <template #option="{ option, selected }">
+              <div class="flex cursor-pointer items-center gap-2 pb-1">
+                <UCheckbox
+                  :model-value="selected"
+                  :aria-label="$t('btn.colsToShow.checkbox.aria', { column: option })"
+                  class="pointer-events-none"
+                />
+                <span>{{ option }}</span>
+              </div>
+            </template>
           </USelectMenu>
         </TableColumnHeader>
       </template>
@@ -168,20 +213,32 @@ watch(
           @clear="affStore.affiliations.filters.status = ''"
         >
           <USelectMenu
-            v-slot="{ open }"
             v-model="affStore.affiliations.filters.status"
             :options="affStore.statusOptions"
+            selected-icon="hidden"
             :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', { filter: affStore.affiliations.filters.status || $t('words.none') })"
-            >
-              {{ affStore.affiliations.filters.status !== '' ? affStore.affiliations.filters.status : $t('table.affiliation.filter.busStates.placeholder') }}
+            <template #default="{ open }">
+              <UButton
+                variant="select_menu_trigger"
+                class="flex-1 justify-between text-gray-700"
+                :aria-label="$t('table.affiliation.filter.busStates.aria', { filter: affStore.affiliations.filters.status || $t('words.none') })"
+              >
+                {{ affStore.affiliations.filters.status !== '' ? affStore.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>
+            </template>
 
-              <UIcon name="i-mdi-caret-down" class="size-5 text-gray-700 transition-transform" :class="[open && 'rotate-180']" />
-            </UButton>
+            <template #option="{ option, selected }">
+              <div class="flex cursor-pointer items-center gap-2 pb-1">
+                <UCheckbox
+                  :model-value="selected"
+                  :aria-label="$t('btn.colsToShow.checkbox.aria', { column: option })"
+                  class="pointer-events-none"
+                />
+                <span>{{ option }}</span>
+              </div>
+            </template>
           </USelectMenu>
         </TableColumnHeader>
       </template>

diff --git a/business-registry-dashboard/app/components/Table/Column/Header.vue b/business-registry-dashboard/app/components/Table/Column/Header.vue
@@ -12,8 +12,8 @@ defineEmits(['clear'])
 </script>
 <template>
   <div class="flex flex-col border-b border-gray-200 font-normal">
-    <span class="border-b border-gray-200 p-4 font-semibold">{{ label }}</span>
-    <div class="inline-flex -space-x-px p-4">
+    <span class="border-b border-gray-200 px-4 py-5 font-semibold">{{ label }}</span>
+    <div class="inline-flex -space-x-px px-4 py-5">
       <div class="grow">
         <slot />
       </div>

diff --git a/business-registry-dashboard/app/enums/affiliation-types.ts b/business-registry-dashboard/app/enums/affiliation-types.ts
@@ -1,6 +1,7 @@
 export enum AffiliationTypes {
   NAME_REQUEST = 'Name Request',
   AMALGAMATION_APPLICATION = 'Amalgamation Application',
+  CONTINUATION_APPLICATION = 'Continuation Application',
   INCORPORATION_APPLICATION = 'Incorporation Application',
   CORPORATION = 'Corporation',
   REGISTRATION = 'Registration'

diff --git a/business-registry-dashboard/app/locales/en-CA.ts b/business-registry-dashboard/app/locales/en-CA.ts
@@ -121,7 +121,7 @@ export default {
   },
   contactInfo: {
     bcRegGeneral: {
-      title: 'If you have trouble adding the business, please contact us at:',
+      title: 'If this problem continues, please contact us at:',
       tollFree: {
         title: 'Toll Free:',
         value: '1-877-370-1033'
@@ -598,7 +598,7 @@ export default {
       h1: 'Page Not Found'
     },
     home: {
-      title: 'Home - My Business Registry Dashboard',
+      title: 'My Business Registry',
       h1: 'My Business Registry',
       intro: 'Start B.C. based businesses and keep business records up to date.',
       busOrNRSearch: {
@@ -631,7 +631,7 @@ export default {
   },
   search: {
     reg: {
-      placeholder: 'My business name, incorporation number or registration number',
+      placeholder: 'My business name, incorporation number, or registration number',
       arialabel: 'Start typing to search by business name, incorporation number or registration number',
       empty: {
         title: 'No active B.C. business found',

diff --git a/business-registry-dashboard/app/locales/fr-CA.ts b/business-registry-dashboard/app/locales/fr-CA.ts
@@ -121,7 +121,7 @@ export default {
   },
   contactInfo: {
     bcRegGeneral: {
-      title: "Si vous avez des difficultés à ajouter l'entreprise, veuillez nous contacter à:",
+      title: 'Si ce problème persiste, veuillez nous contacter à:',
       tollFree: {
         title: 'Sans Frais:',
         value: '1-877-370-1033'
@@ -588,7 +588,7 @@ export default {
       h1: 'Page introuvable'
     },
     home: {
-      title: 'Accueil - Mon Tableau de Bord des Entreprises',
+      title: "Mon Registre d'Entreprise",
       h1: "Mon Registre d'Entreprise",
       intro: 'Commencer la CB entreprises basées et tenir à jour les dossiers commerciaux.',
       busOrNRSearch: {
@@ -621,7 +621,7 @@ export default {
   },
   search: {
     reg: {
-      placeholder: "Mon nom commercial, mon numéro d'entreprise ou mon numéro d'enregistrement",
+      placeholder: "Mon nom commercial, mon numéro d'entreprise, ou mon numéro d'enregistrement",
       arialabel: "Commencez à taper pour effectuer une recherche par nom d'entreprise, numéro de société ou numéro d'enregistrement.",
       empty: {
         title: 'Aucune entreprise active en C.B. trouvée.',

diff --git a/business-registry-dashboard/app/utils/affiliations.ts b/business-registry-dashboard/app/utils/affiliations.ts
@@ -62,6 +62,8 @@ export const tempDescription = (business: Business): string => {
   switch ((business.corpType?.code || business.corpType) as CorpTypes) {
     case CorpTypes.AMALGAMATION_APPLICATION:
       return AffiliationTypes.AMALGAMATION_APPLICATION
+    case CorpTypes.CONTINUATION_IN:
+      return AffiliationTypes.CONTINUATION_APPLICATION
     case CorpTypes.INCORPORATION_APPLICATION:
       return AffiliationTypes.INCORPORATION_APPLICATION
     case CorpTypes.REGISTRATION:
@@ -75,6 +77,7 @@ export const tempDescription = (business: Business): string => {
 export const isTemporaryBusiness = (business: Business): boolean => {
   return (
     (business.corpType?.code || business.corpType) === CorpTypes.AMALGAMATION_APPLICATION ||
+    (business.corpType?.code || business.corpType) === CorpTypes.CONTINUATION_IN ||
     (business.corpType?.code || business.corpType) === CorpTypes.INCORPORATION_APPLICATION ||
     (business.corpType?.code || business.corpType) === CorpTypes.REGISTRATION
   )

diff --git a/business-registry-dashboard/package.json b/business-registry-dashboard/package.json
@@ -2,7 +2,7 @@
   "name": "business-registry-dashboard",
   "private": true,
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",