Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 27, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a532ba4
fix: fixed a ton of UX table issues + misc. fixes
JazzarKarim Nov 22, 2024
282c7cf
fix: fixed NR error modal in response to Jacqueline's comments
JazzarKarim Nov 23, 2024
2171cb9
fix: fixed in response to conversation with Jacqueline + lint fix
JazzarKarim Nov 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions business-registry-dashboard/app/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
JazzarKarim marked this conversation as resolved.
Show resolved Hide resolved
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'
}
},
Expand Down
2 changes: 1 addition & 1 deletion business-registry-dashboard/app/components/BusinessLookup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion business-registry-dashboard/app/components/HelpTextSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
JazzarKarim marked this conversation as resolved.
Show resolved Hide resolved
:aria-expanded="showHelpText"
:padded="false"
aria-controls="help-text-content"
Expand Down
4 changes: 2 additions & 2 deletions business-registry-dashboard/app/components/Modal/ManageNameRequest.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion business-registry-dashboard/app/components/Sbc/PageSection/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion business-registry-dashboard/app/components/Table/AffiliatedEntity/Action.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
/>
Expand Down
115 changes: 86 additions & 29 deletions business-registry-dashboard/app/components/Table/AffiliatedEntity/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }">
JazzarKarim marked this conversation as resolved.
Show resolved Hide resolved
<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 -->
Expand All @@ -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]
JazzarKarim marked this conversation as resolved.
Show resolved Hide resolved
`,
padding: 'px-4 py-4',
color: 'text-bcGovColor-midGray',
font: '',
Expand Down Expand Up @@ -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
JazzarKarim marked this conversation as resolved.
Show resolved Hide resolved
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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions business-registry-dashboard/app/components/Table/Column/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions business-registry-dashboard/app/enums/affiliation-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export enum AffiliationTypes {
NAME_REQUEST = 'Name Request',
AMALGAMATION_APPLICATION = 'Amalgamation Application',
CONTINUATION_APPLICATION = 'Continuation Application',
JazzarKarim marked this conversation as resolved.
Show resolved Hide resolved
INCORPORATION_APPLICATION = 'Incorporation Application',
CORPORATION = 'Corporation',
REGISTRATION = 'Registration'
Expand Down
6 changes: 3 additions & 3 deletions business-registry-dashboard/app/locales/en-CA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions business-registry-dashboard/app/locales/fr-CA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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.',
Expand Down
3 changes: 3 additions & 0 deletions business-registry-dashboard/app/utils/affiliations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
)
Expand Down
2 changes: 1 addition & 1 deletion business-registry-dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading