From a212f20b2affb94254fb905bbca3a116fc666926 Mon Sep 17 00:00:00 2001 From: Dima K Date: Thu, 12 Sep 2024 10:43:06 -0700 Subject: [PATCH 1/8] Cleanup old content --- strr-web/lang/en.json | 2 -- strr-web/pages/listing-details/[listingId].vue | 4 ---- strr-web/pages/success/[id].vue | 4 ---- strr-web/tailwind.config.ts | 2 +- 4 files changed, 1 insertion(+), 11 deletions(-) diff --git a/strr-web/lang/en.json b/strr-web/lang/en.json index c3b966c8..99d0b3fb 100644 --- a/strr-web/lang/en.json +++ b/strr-web/lang/en.json @@ -175,8 +175,6 @@ "links": "Helpful Links", "status": "View your application status", "dashboard": "in your dashboard", - "bcrosLink": "Visit your BC Registries Online Services profile page", - "update": "to update your profile information", "haveAnotherProperty": "Have another rental property?", "startNewApplication": "Start a new application" }, diff --git a/strr-web/pages/listing-details/[listingId].vue b/strr-web/pages/listing-details/[listingId].vue index f67267cc..4b956330 100644 --- a/strr-web/pages/listing-details/[listingId].vue +++ b/strr-web/pages/listing-details/[listingId].vue @@ -29,10 +29,6 @@ {{ tApplicationConfirm('status') }} {{ tApplicationConfirm('dashboard') }}

-

- - {{ tApplicationConfirm('bcrosLink') }} {{ tApplicationConfirm('update') }} -

{{ tApplicationConfirm('haveAnotherProperty') }}

diff --git a/strr-web/pages/success/[id].vue b/strr-web/pages/success/[id].vue index 0ad9603f..f2b3a504 100644 --- a/strr-web/pages/success/[id].vue +++ b/strr-web/pages/success/[id].vue @@ -29,10 +29,6 @@ {{ tApplicationConfirm('status') }} {{ tApplicationConfirm('dashboard') }}

-

- - {{ tApplicationConfirm('bcrosLink') }} {{ tApplicationConfirm('update') }} -

{{ tApplicationConfirm('haveAnotherProperty') }}

diff --git a/strr-web/tailwind.config.ts b/strr-web/tailwind.config.ts index 0949ee43..8e329d5e 100644 --- a/strr-web/tailwind.config.ts +++ b/strr-web/tailwind.config.ts @@ -50,7 +50,7 @@ export default >{ lightBlue: '#E4EDF7', // LINES hairlinesOnWhite: '#DEE2E6', - specialityDottedLines: '#899EB2', + specialtyDottedLines: '#899EB2', formFieldLines: '#6F7780', // RESULT COLOURS caution: '#F8661A', // use on Caution Icon or Large 19px bold+ text only (on white backgrounds only). Not for small text. From 17fc63d5d5f0f5afd6ee04b528332e13164486e4 Mon Sep 17 00:00:00 2001 From: Dima K Date: Thu, 12 Sep 2024 11:52:46 -0700 Subject: [PATCH 2/8] Add Breadcrumb component, composable, interfaces, etc. --- strr-web/app.config.ts | 4 + strr-web/components/Breadcrumb.vue | 29 ++++ strr-web/composables/useBreadcrumb.ts | 128 ++++++++++++++++++ strr-web/enums/route-name-e.ts | 5 - strr-web/enums/route-names-e.ts | 15 ++ strr-web/interfaces/breadcrumb-i.ts | 8 ++ strr-web/lang/en.json | 1 + strr-web/page-data/breadcrumbs.ts | 47 +++++++ .../[id]/auto-approval/index.vue | 3 + .../pages/application-details/[id]/index.vue | 6 + .../application-details/[id]/ltsa/index.vue | 3 + .../pages/registration-details/[id]/index.vue | 8 ++ strr-web/pages/success/[id].vue | 4 - strr-web/stores/state/strr-state-model.ts | 6 + strr-web/stores/store.ts | 45 ++++++ 15 files changed, 303 insertions(+), 9 deletions(-) create mode 100644 strr-web/components/Breadcrumb.vue create mode 100644 strr-web/composables/useBreadcrumb.ts delete mode 100644 strr-web/enums/route-name-e.ts create mode 100644 strr-web/enums/route-names-e.ts create mode 100644 strr-web/interfaces/breadcrumb-i.ts create mode 100644 strr-web/page-data/breadcrumbs.ts create mode 100644 strr-web/stores/state/strr-state-model.ts create mode 100644 strr-web/stores/store.ts diff --git a/strr-web/app.config.ts b/strr-web/app.config.ts index a51d7e53..1f77458d 100644 --- a/strr-web/app.config.ts +++ b/strr-web/app.config.ts @@ -87,6 +87,10 @@ export default defineAppConfig({ ring: 'before:ring-1 before:ring-gray-700', background: 'before:bg-gray-700' } + }, + breadcrumb: { + label: 'text-white font-normal text-decoration-line', + base: 'text-white font-normal hover:text-white' } } }) diff --git a/strr-web/components/Breadcrumb.vue b/strr-web/components/Breadcrumb.vue new file mode 100644 index 00000000..c58b976d --- /dev/null +++ b/strr-web/components/Breadcrumb.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/strr-web/composables/useBreadcrumb.ts b/strr-web/composables/useBreadcrumb.ts new file mode 100644 index 00000000..abaf9c52 --- /dev/null +++ b/strr-web/composables/useBreadcrumb.ts @@ -0,0 +1,128 @@ +import { + applicationDetailsBreadcrumb, + breadcrumbs, + examinerApplicationDetailsBreadcrumb +} from '~/page-data/breadcrumbs' + +export const useBreadcrumb = () => { + const route = useRoute() + const strrStore = useStrrStore() + const { getApplicationId, getApplicationNickname, getRegistrationNumber } = storeToRefs(strrStore) + const { isExaminer } = useBcrosKeycloak() + const { t } = useTranslation() + + const { setApplicationId, setApplicationNickname, setRegistrationNumber } = useStrrStore() + + const NO_BREADCRUMB_ROUTES = [ + RouteNamesE.TERMS_OF_SERVICE, + RouteNamesE.FINALIZATION, + RouteNamesE.ACCOUNT_SELECT, + RouteNamesE.APPLICATION_SUBMITTED + ] + + // set store values for breadcrumb + const setupBreadcrumbData = (application: ApplicationI) => { + setApplicationId(application?.header.id.toString()) + setApplicationNickname(application?.registration.unitAddress.nickname) + setRegistrationNumber(application?.header.registrationNumber) + console.log('finished setting up') + } + + // Generate a breadcrumb array for Examiner role + const getExaminerBreadcrumb = () => { + const examinerBreadcrumb = [...examinerApplicationDetailsBreadcrumb] + + examinerBreadcrumb[1] = { + label: `${getApplicationNickname.value ? `${getApplicationNickname.value}, ` : ''}Application #${ + getApplicationId.value + }`, + to: `/${RouteNamesE.APPLICATION_DETAILS}/${getApplicationId.value}` + } + + return examinerBreadcrumb + } + + // Remove '-id' suffix and language codes (e.g., '___en') from route names to match RouteNamesE enum values + const cleanupRoute = (routeName: string) => { + return routeName?.replace(/(-id|___\w{2}$)/g, '') as RouteNamesE + } + + /** + * Create breadcrumb links for the current route, including dynamic labels based on + * application or registration details. + * + * @returns {BreadcrumbI[]} An array of breadcrumb objects for the current route + */ + const getBreadcrumbLinks = computed((): BreadcrumbI[] => { + const routeName = route.name?.toString() + + // cleanup route from locale and id suffix + const currentRouteName = cleanupRoute(routeName as RouteNamesE) + + // set base breadcrumb + let baseBreadcrumb = [...(breadcrumbs[currentRouteName as RouteNamesE] || applicationDetailsBreadcrumb)] + + // get nickname or set as empty string + const nickname = getApplicationNickname.value ? `${getApplicationNickname.value}, ` : '' + + // ad custom Breadcrumb info based on route + switch (currentRouteName) { + case RouteNamesE.APPLICATION_DETAILS: + if (isExaminer) { + baseBreadcrumb = getExaminerBreadcrumb() + } + baseBreadcrumb[1] = { + label: `${nickname}Application #${getApplicationId.value}` + } + break + case RouteNamesE.APPLICATION_DETAILS_LTSA: + case RouteNamesE.APPLICATION_DETAILS_AUTO_APPROVAL: + if (isExaminer) { + baseBreadcrumb = getExaminerBreadcrumb() + } + + baseBreadcrumb[2] = { + label: + currentRouteName === RouteNamesE.APPLICATION_DETAILS_LTSA + ? t('ltsa.ltsaDetails') + : t('autoApproval.automaticDetails') + } + + break + case RouteNamesE.REGISTRATION_DETAILS: + baseBreadcrumb[1] = { + label: `${nickname}Registration #${getRegistrationNumber.value}` + } + break + default: + break + } + + return baseBreadcrumb + }) + + // Disable Dashboard Back Button when already at top route (eg Dashboard route) + const isDashboardButtonDisabled = computed((): boolean => { + return [RouteNamesE.REGISTRY_DASHBOARD, RouteNamesE.APPLICATION_STATUS].includes( + cleanupRoute(route.name?.toString() || '') + ) + }) + + // Check if breadcrumbs should be visible on certain routes + const isBreadcrumbVisible = computed((): boolean => + NO_BREADCRUMB_ROUTES.every(routeName => !route.name?.toString().startsWith(routeName)) + ) + + // Set the dashboard button link based on the role + const dashboardButtonLink: string = isExaminer + ? `/${RouteNamesE.REGISTRY_DASHBOARD}` + : `/${RouteNamesE.APPLICATION_STATUS}` + + return { + setupBreadcrumbData, + getBreadcrumbLinks, + isDashboardButtonDisabled, + dashboardButtonLink, + isBreadcrumbVisible + } +} diff --git a/strr-web/enums/route-name-e.ts b/strr-web/enums/route-name-e.ts deleted file mode 100644 index f3d3d160..00000000 --- a/strr-web/enums/route-name-e.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum RouteNameE { - BEN_OWNR_CHNG = 'beneficial-owner-change', - MY_REG_DETAILS = 'my-registries-details', - REVIEW_CONFIRM = 'review-confirm' -} diff --git a/strr-web/enums/route-names-e.ts b/strr-web/enums/route-names-e.ts new file mode 100644 index 00000000..e740966b --- /dev/null +++ b/strr-web/enums/route-names-e.ts @@ -0,0 +1,15 @@ +export enum RouteNamesE { + CREATE_ACCOUNT = 'create-account', + APPLICATION_DETAILS = 'application-details', + APPLICATION_STATUS = 'application-status', + REGISTRY_DASHBOARD = 'registry-dashboard', + REGISTRATION_DETAILS = 'registration-details', + APPLICATION_DETAILS_LTSA = 'application-details-ltsa', + APPLICATION_DETAILS_AUTO_APPROVAL = 'application-details-auto-approval', + + // No Breadcrumb routes + ACCOUNT_SELECT = 'account-select', + TERMS_OF_SERVICE = 'terms-of-service', + FINALIZATION = 'finalization', + APPLICATION_SUBMITTED = 'success' +} diff --git a/strr-web/interfaces/breadcrumb-i.ts b/strr-web/interfaces/breadcrumb-i.ts new file mode 100644 index 00000000..43440666 --- /dev/null +++ b/strr-web/interfaces/breadcrumb-i.ts @@ -0,0 +1,8 @@ +export interface BreadcrumbI { + label: string + to?: string +} + +export type BreadcrumbsI = { + [key in RouteNamesE]: BreadcrumbI[] +} diff --git a/strr-web/lang/en.json b/strr-web/lang/en.json index 99d0b3fb..20ef7368 100644 --- a/strr-web/lang/en.json +++ b/strr-web/lang/en.json @@ -57,6 +57,7 @@ "autoApproval": { "autoApprovalDetails": "Automatic Approval Details", "automaticLogic": "Automatic Approval Logic", + "automaticDetails": "Automatic Approval Details", "provisionalLogic": "Provisional Approval Logic", "renting": "Renting", "accommodationSelected": "Accommodation Service Provider Selected", diff --git a/strr-web/page-data/breadcrumbs.ts b/strr-web/page-data/breadcrumbs.ts new file mode 100644 index 00000000..3fa6f95f --- /dev/null +++ b/strr-web/page-data/breadcrumbs.ts @@ -0,0 +1,47 @@ +import { RouteNamesE } from '~/enums/route-names-e' +import { BreadcrumbsI } from '~/interfaces/breadcrumb-i' + +export const hostDashboardBreadcrumb: Array = [ + { + label: 'My STR Registry Dashboard' + } +] + +export const examinerDashboardBreadcrumb: Array = [ + { + label: 'My CEU STR Registry Dashboard' + } +] + +export const strRegistrationBreadcrumb: Array = [ + { + label: 'My STR Registry Dashboard', + to: '/' + RouteNamesE.APPLICATION_STATUS + }, + { + label: 'Short-Term Rental Registration' + } +] + +export const applicationDetailsBreadcrumb: Array = [ + { + label: 'My STR Registry Dashboard', + to: '/' + RouteNamesE.APPLICATION_STATUS + } +] + +export const examinerApplicationDetailsBreadcrumb: Array = [ + { + label: 'My CEU STR Registry Dashboard', + to: '/' + RouteNamesE.REGISTRY_DASHBOARD + } +] + +export const breadcrumbs: Partial = { + [RouteNamesE.APPLICATION_STATUS]: hostDashboardBreadcrumb, + [RouteNamesE.REGISTRY_DASHBOARD]: examinerDashboardBreadcrumb, + [RouteNamesE.APPLICATION_DETAILS]: applicationDetailsBreadcrumb, + [RouteNamesE.CREATE_ACCOUNT]: strRegistrationBreadcrumb, + [RouteNamesE.REGISTRATION_DETAILS]: applicationDetailsBreadcrumb + +} diff --git a/strr-web/pages/application-details/[id]/auto-approval/index.vue b/strr-web/pages/application-details/[id]/auto-approval/index.vue index 0de4462b..49f92bc1 100644 --- a/strr-web/pages/application-details/[id]/auto-approval/index.vue +++ b/strr-web/pages/application-details/[id]/auto-approval/index.vue @@ -56,6 +56,7 @@ const automaticRows = ref<{ [key: string]: string }[]>([]) const provisionalRows = ref<{ [key: string]: string }[]>([]) const { getAutoApproval, getApplication } = useApplications() +const { setupBreadcrumbData } = useBreadcrumb() const applicationId = route.params.id.toString() @@ -63,6 +64,8 @@ const application = await getApplication(applicationId) const data: AutoApprovalDataI[] = await getAutoApproval(applicationId) || {} as AutoApprovalDataI[] const applicationDetails: ApplicationDetailsI = application.registration +setupBreadcrumbData(application) + const buildAutomaticRows = (rowsData: AutoApprovalDataI[]) => { if (!rowsData.length || !rowsData[0].record) { return diff --git a/strr-web/pages/application-details/[id]/index.vue b/strr-web/pages/application-details/[id]/index.vue index aeab4a3b..1bf1de21 100644 --- a/strr-web/pages/application-details/[id]/index.vue +++ b/strr-web/pages/application-details/[id]/index.vue @@ -230,11 +230,17 @@ const { getDocument } = useApplications() +const { + setupBreadcrumbData +} = useBreadcrumb() + const [application, applicationHistory]: [ApplicationI, FilingHistoryEventI[]] = await Promise.all([ getApplication(applicationId), getApplicationHistory(applicationId) ]) +setupBreadcrumbData(application) + const applicationDetails: ApplicationDetailsI = application.registration // Get Supporting Documents from the Application response diff --git a/strr-web/pages/application-details/[id]/ltsa/index.vue b/strr-web/pages/application-details/[id]/ltsa/index.vue index cbbaba7a..5c42955f 100644 --- a/strr-web/pages/application-details/[id]/ltsa/index.vue +++ b/strr-web/pages/application-details/[id]/ltsa/index.vue @@ -136,12 +136,15 @@ const tLtsa = (translationKey: string) => t(`ltsa.${translationKey}`) const applicationId = route.params.id.toString() const { getLtsa, getApplication } = useApplications() +const { setupBreadcrumbData } = useBreadcrumb() const application = await getApplication(applicationId) const formatDate = (date: Date) => date.toLocaleDateString('en-US') const data: LtsaDataI[] = await getLtsa(applicationId) || {} as LtsaDataI[] const applicationDetails: ApplicationDetailsI = application.registration +setupBreadcrumbData(application) + const ownerRows = data.length > 0 ? [{ 'Given Name': data[0].record.ownershipGroups[0].titleOwners[0].givenName, diff --git a/strr-web/pages/registration-details/[id]/index.vue b/strr-web/pages/registration-details/[id]/index.vue index 4bb0595a..b7d0751f 100644 --- a/strr-web/pages/registration-details/[id]/index.vue +++ b/strr-web/pages/registration-details/[id]/index.vue @@ -232,6 +232,11 @@ const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' }) const registrationId = route.params.id.toString() +const { + setRegistrationNumber, + setApplicationNickname +} = useStrrStore() + const downloadEventTypes = ['CERTIFICATE_ISSUED'] const { @@ -282,6 +287,9 @@ const [application, history]: [RegistrationI, FilingHistoryEventI[]] = await Pro getRegistrationHistory(registrationId) ]) +setApplicationNickname(application.unitAddress.nickname) +setRegistrationNumber(application.registration_number || '') + // Get Supporting Documents from the Application response const documents: DocumentUploadI[] = application.documents || [] diff --git a/strr-web/pages/success/[id].vue b/strr-web/pages/success/[id].vue index f2b3a504..fc686bbd 100644 --- a/strr-web/pages/success/[id].vue +++ b/strr-web/pages/success/[id].vue @@ -49,10 +49,6 @@ const fetchedRegistration = ref() const { t } = useTranslation() const tApplicationConfirm = (translationKey: string) => t(`createAccount.applicationConfirm.${translationKey}`) -const { - goToAccountInfo -} = useBcrosNavigate() - const id = route.params.id const apiURL = useRuntimeConfig().public.strrApiURL diff --git a/strr-web/stores/state/strr-state-model.ts b/strr-web/stores/state/strr-state-model.ts new file mode 100644 index 00000000..9c23cf05 --- /dev/null +++ b/strr-web/stores/state/strr-state-model.ts @@ -0,0 +1,6 @@ +export const strrStateModel = { + applicationId: '', + applicationNickname: '', + registrationId: '', + registrationNumber: '' +} diff --git a/strr-web/stores/store.ts b/strr-web/stores/store.ts new file mode 100644 index 00000000..551ddca3 --- /dev/null +++ b/strr-web/stores/store.ts @@ -0,0 +1,45 @@ +import { strrStateModel } from './state/strr-state-model' + +export const useStrrStore = defineStore('strrStore', () => { + const state = ref({ ...strrStateModel }) + + // Getters + const getApplicationId = computed((): string => { + return state.value.applicationId + }) + + const getRegistrationId = computed((): string => { + return state.value.registrationId + }) + + const getApplicationNickname = computed((): string => { + return state.value.applicationNickname + }) + + const getRegistrationNumber = computed((): string => { + return state.value.registrationNumber + }) + + // Setters + function setApplicationId (appNum: string) { + state.value.applicationId = appNum + } + + function setApplicationNickname (appNickname: string) { + state.value.applicationNickname = appNickname + } + + function setRegistrationNumber (regNum: string) { + state.value.registrationNumber = regNum + } + + return { + getApplicationId, + getApplicationNickname, + getRegistrationId, + getRegistrationNumber, + setApplicationId, + setApplicationNickname, + setRegistrationNumber + } +}) From 3eb4baf03ff74cdf366a4caaae3a2553f761f450 Mon Sep 17 00:00:00 2001 From: Dima K Date: Thu, 12 Sep 2024 11:53:10 -0700 Subject: [PATCH 3/8] Add Breadcrumb component to layouts --- strr-web/layouts/default.vue | 1 + strr-web/layouts/wide.vue | 1 + strr-web/layouts/wideNoSpace.vue | 1 + 3 files changed, 3 insertions(+) diff --git a/strr-web/layouts/default.vue b/strr-web/layouts/default.vue index 1b72e680..a15bb9f4 100644 --- a/strr-web/layouts/default.vue +++ b/strr-web/layouts/default.vue @@ -2,6 +2,7 @@
+
diff --git a/strr-web/layouts/wide.vue b/strr-web/layouts/wide.vue index c0c1c4e3..5fc28b26 100644 --- a/strr-web/layouts/wide.vue +++ b/strr-web/layouts/wide.vue @@ -2,6 +2,7 @@
+
diff --git a/strr-web/layouts/wideNoSpace.vue b/strr-web/layouts/wideNoSpace.vue index e8f80645..1eb0aac2 100644 --- a/strr-web/layouts/wideNoSpace.vue +++ b/strr-web/layouts/wideNoSpace.vue @@ -2,6 +2,7 @@
+
From ec23d3cc873ea34ee9208fa7ca39130305d5636f Mon Sep 17 00:00:00 2001 From: Dima K Date: Fri, 13 Sep 2024 14:35:12 -0700 Subject: [PATCH 4/8] Update Breadcrumbs based on UXA and QA feedback --- strr-web/composables/useBreadcrumb.ts | 62 ++++++++++----------------- strr-web/page-data/breadcrumbs.ts | 12 +++++- 2 files changed, 32 insertions(+), 42 deletions(-) diff --git a/strr-web/composables/useBreadcrumb.ts b/strr-web/composables/useBreadcrumb.ts index abaf9c52..259e52c5 100644 --- a/strr-web/composables/useBreadcrumb.ts +++ b/strr-web/composables/useBreadcrumb.ts @@ -1,7 +1,6 @@ import { - applicationDetailsBreadcrumb, - breadcrumbs, - examinerApplicationDetailsBreadcrumb + hostBreadcrumbs, + examinerBreadcrumbs } from '~/page-data/breadcrumbs' export const useBreadcrumb = () => { @@ -25,21 +24,6 @@ export const useBreadcrumb = () => { setApplicationId(application?.header.id.toString()) setApplicationNickname(application?.registration.unitAddress.nickname) setRegistrationNumber(application?.header.registrationNumber) - console.log('finished setting up') - } - - // Generate a breadcrumb array for Examiner role - const getExaminerBreadcrumb = () => { - const examinerBreadcrumb = [...examinerApplicationDetailsBreadcrumb] - - examinerBreadcrumb[1] = { - label: `${getApplicationNickname.value ? `${getApplicationNickname.value}, ` : ''}Application #${ - getApplicationId.value - }`, - to: `/${RouteNamesE.APPLICATION_DETAILS}/${getApplicationId.value}` - } - - return examinerBreadcrumb } // Remove '-id' suffix and language codes (e.g., '___en') from route names to match RouteNamesE enum values @@ -59,52 +43,48 @@ export const useBreadcrumb = () => { // cleanup route from locale and id suffix const currentRouteName = cleanupRoute(routeName as RouteNamesE) - // set base breadcrumb - let baseBreadcrumb = [...(breadcrumbs[currentRouteName as RouteNamesE] || applicationDetailsBreadcrumb)] - // get nickname or set as empty string const nickname = getApplicationNickname.value ? `${getApplicationNickname.value}, ` : '' - // ad custom Breadcrumb info based on route + // set base Breadcrumb based on role + const breadcrumbLinks = isExaminer + ? [...(examinerBreadcrumbs[currentRouteName] || [])] + : [...(hostBreadcrumbs[currentRouteName] || [])] + + // add custom Breadcrumb info based on current route switch (currentRouteName) { case RouteNamesE.APPLICATION_DETAILS: - if (isExaminer) { - baseBreadcrumb = getExaminerBreadcrumb() - } - baseBreadcrumb[1] = { + breadcrumbLinks[1] = { label: `${nickname}Application #${getApplicationId.value}` } break case RouteNamesE.APPLICATION_DETAILS_LTSA: case RouteNamesE.APPLICATION_DETAILS_AUTO_APPROVAL: - if (isExaminer) { - baseBreadcrumb = getExaminerBreadcrumb() + breadcrumbLinks[1] = { + label: `${nickname}Application #${getApplicationId.value}`, + to: `/${RouteNamesE.APPLICATION_DETAILS}/${getApplicationId.value}` } - - baseBreadcrumb[2] = { + breadcrumbLinks[2] = { label: currentRouteName === RouteNamesE.APPLICATION_DETAILS_LTSA ? t('ltsa.ltsaDetails') : t('autoApproval.automaticDetails') } - break case RouteNamesE.REGISTRATION_DETAILS: - baseBreadcrumb[1] = { + breadcrumbLinks[1] = { label: `${nickname}Registration #${getRegistrationNumber.value}` } break - default: - break } - return baseBreadcrumb + return breadcrumbLinks }) // Disable Dashboard Back Button when already at top route (eg Dashboard route) const isDashboardButtonDisabled = computed((): boolean => { return [RouteNamesE.REGISTRY_DASHBOARD, RouteNamesE.APPLICATION_STATUS].includes( - cleanupRoute(route.name?.toString() || '') + cleanupRoute(route.name?.toString() ?? '') ) }) @@ -113,10 +93,12 @@ export const useBreadcrumb = () => { NO_BREADCRUMB_ROUTES.every(routeName => !route.name?.toString().startsWith(routeName)) ) - // Set the dashboard button link based on the role - const dashboardButtonLink: string = isExaminer - ? `/${RouteNamesE.REGISTRY_DASHBOARD}` - : `/${RouteNamesE.APPLICATION_STATUS}` + // Set the back button link to navigate one level up in breadcrumb + const dashboardButtonLink = computed(():string => { + const breadcrumbLinks = getBreadcrumbLinks.value + // return second to last link for one level up + return breadcrumbLinks[breadcrumbLinks.length - 2].to || '' + }) return { setupBreadcrumbData, diff --git a/strr-web/page-data/breadcrumbs.ts b/strr-web/page-data/breadcrumbs.ts index 3fa6f95f..e642a060 100644 --- a/strr-web/page-data/breadcrumbs.ts +++ b/strr-web/page-data/breadcrumbs.ts @@ -37,11 +37,19 @@ export const examinerApplicationDetailsBreadcrumb: Array = [ } ] -export const breadcrumbs: Partial = { +export const hostBreadcrumbs: Partial = { [RouteNamesE.APPLICATION_STATUS]: hostDashboardBreadcrumb, - [RouteNamesE.REGISTRY_DASHBOARD]: examinerDashboardBreadcrumb, [RouteNamesE.APPLICATION_DETAILS]: applicationDetailsBreadcrumb, [RouteNamesE.CREATE_ACCOUNT]: strRegistrationBreadcrumb, [RouteNamesE.REGISTRATION_DETAILS]: applicationDetailsBreadcrumb +} +export const examinerBreadcrumbs: Partial = { + [RouteNamesE.APPLICATION_STATUS]: examinerDashboardBreadcrumb, + [RouteNamesE.REGISTRY_DASHBOARD]: examinerDashboardBreadcrumb, + [RouteNamesE.APPLICATION_DETAILS]: examinerApplicationDetailsBreadcrumb, + [RouteNamesE.APPLICATION_DETAILS_LTSA]: examinerApplicationDetailsBreadcrumb, + [RouteNamesE.APPLICATION_DETAILS_AUTO_APPROVAL]: examinerApplicationDetailsBreadcrumb, + [RouteNamesE.CREATE_ACCOUNT]: examinerDashboardBreadcrumb, + [RouteNamesE.REGISTRATION_DETAILS]: examinerDashboardBreadcrumb } From ca6aa62d6abe49c9d09275f555d83f21ad391275 Mon Sep 17 00:00:00 2001 From: Dima K Date: Fri, 13 Sep 2024 15:08:42 -0700 Subject: [PATCH 5/8] Fix unit test --- strr-web/composables/useBreadcrumb.ts | 2 +- strr-web/tests/app.spec.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/strr-web/composables/useBreadcrumb.ts b/strr-web/composables/useBreadcrumb.ts index 259e52c5..00ecc34b 100644 --- a/strr-web/composables/useBreadcrumb.ts +++ b/strr-web/composables/useBreadcrumb.ts @@ -97,7 +97,7 @@ export const useBreadcrumb = () => { const dashboardButtonLink = computed(():string => { const breadcrumbLinks = getBreadcrumbLinks.value // return second to last link for one level up - return breadcrumbLinks[breadcrumbLinks.length - 2].to || '' + return breadcrumbLinks[breadcrumbLinks.length - 2]?.to || '' }) return { diff --git a/strr-web/tests/app.spec.ts b/strr-web/tests/app.spec.ts index 9ea738b3..a677fb5c 100644 --- a/strr-web/tests/app.spec.ts +++ b/strr-web/tests/app.spec.ts @@ -3,6 +3,7 @@ import { VueWrapper } from '@vue/test-utils' import { mountSuspended } from '@nuxt/test-utils/runtime' import { mockedI18n } from '~/tests/unit/utils/test-utils/mockedi18n' import app from '~/app.vue' +import Breadcrumb from '~/components/Breadcrumb.vue' describe('App level test', () => { let wrapper: VueWrapper @@ -12,8 +13,9 @@ describe('App level test', () => { }) afterEach(() => { wrapper.unmount() }) - test('app initializes with layouts and default page', () => { + test('app initializes with layouts and default page', async () => { expect(wrapper.find('#bcros-main-header').exists()).toBe(true) expect(wrapper.find('#bcros-main-footer').exists()).toBe(true) + expect(wrapper.findComponent(Breadcrumb).exists()).toBeTruthy() }) }) From 7fbbf30a82c1c107e30b180dd868b935bf18bddb Mon Sep 17 00:00:00 2001 From: Dima K Date: Fri, 13 Sep 2024 15:46:57 -0700 Subject: [PATCH 6/8] Fix lint --- strr-web/tests/app.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/strr-web/tests/app.spec.ts b/strr-web/tests/app.spec.ts index a677fb5c..475b0523 100644 --- a/strr-web/tests/app.spec.ts +++ b/strr-web/tests/app.spec.ts @@ -13,7 +13,7 @@ describe('App level test', () => { }) afterEach(() => { wrapper.unmount() }) - test('app initializes with layouts and default page', async () => { + test('app initializes with layouts and default page', () => { expect(wrapper.find('#bcros-main-header').exists()).toBe(true) expect(wrapper.find('#bcros-main-footer').exists()).toBe(true) expect(wrapper.findComponent(Breadcrumb).exists()).toBeTruthy() From 81936693f1f03753c64cb3f7e3d6c942c157f5e6 Mon Sep 17 00:00:00 2001 From: Dima K Date: Mon, 16 Sep 2024 10:00:56 -0700 Subject: [PATCH 7/8] UXA feedback --- strr-web/page-data/breadcrumbs.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/strr-web/page-data/breadcrumbs.ts b/strr-web/page-data/breadcrumbs.ts index e642a060..9e73ff24 100644 --- a/strr-web/page-data/breadcrumbs.ts +++ b/strr-web/page-data/breadcrumbs.ts @@ -37,6 +37,16 @@ export const examinerApplicationDetailsBreadcrumb: Array = [ } ] +export const examinerStrRegistrationBreadcrumb: Array = [ + { + label: 'My CEU STR Registry Dashboard', + to: '/' + RouteNamesE.REGISTRY_DASHBOARD + }, + { + label: 'Short-Term Rental Registration' + } +] + export const hostBreadcrumbs: Partial = { [RouteNamesE.APPLICATION_STATUS]: hostDashboardBreadcrumb, [RouteNamesE.APPLICATION_DETAILS]: applicationDetailsBreadcrumb, @@ -50,6 +60,6 @@ export const examinerBreadcrumbs: Partial = { [RouteNamesE.APPLICATION_DETAILS]: examinerApplicationDetailsBreadcrumb, [RouteNamesE.APPLICATION_DETAILS_LTSA]: examinerApplicationDetailsBreadcrumb, [RouteNamesE.APPLICATION_DETAILS_AUTO_APPROVAL]: examinerApplicationDetailsBreadcrumb, - [RouteNamesE.CREATE_ACCOUNT]: examinerDashboardBreadcrumb, + [RouteNamesE.CREATE_ACCOUNT]: examinerStrRegistrationBreadcrumb, [RouteNamesE.REGISTRATION_DETAILS]: examinerDashboardBreadcrumb } From 0564ddc59ac3e291b12e2b30dc92e293b3a99ba4 Mon Sep 17 00:00:00 2001 From: Dima K Date: Mon, 16 Sep 2024 16:13:46 -0700 Subject: [PATCH 8/8] Small cleanup --- strr-web/components/Breadcrumb.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/strr-web/components/Breadcrumb.vue b/strr-web/components/Breadcrumb.vue index c58b976d..a6714dd7 100644 --- a/strr-web/components/Breadcrumb.vue +++ b/strr-web/components/Breadcrumb.vue @@ -25,5 +25,3 @@ const { getBreadcrumbLinks, isDashboardButtonDisabled, isBreadcrumbVisible, dash
- -