Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
kyle1morel committed Feb 4, 2025
1 parent 509c6a2 commit 6e11e9e
Show file tree
Hide file tree
Showing 10 changed files with 367 additions and 221 deletions.
18 changes: 6 additions & 12 deletions frontend/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onBeforeMount, onErrorCaptured, ref } from 'vue';
import { RouterView, useRouter } from 'vue-router';
import { RouterView, useRoute } from 'vue-router';
import Breadcrumb from './components/common/Breadcrumb.vue';
import { AppLayout, Navbar, ProgressLoader } from '@/components/layout';
import { ConfirmDialog, Message, Toast, useToast } from '@/lib/primevue';
import { useAppStore, useAuthNStore, useConfigStore } from '@/store';
import { RouteName, ToastTimeout } from '@/utils/enums/application';
import { ToastTimeout } from '@/utils/enums/application';
import type { Ref } from 'vue';
// Store
const appStore = useAppStore();
const router = useRouter();
const route = useRoute();
const { getIsLoading } = storeToRefs(appStore);
const { getConfig } = storeToRefs(useConfigStore());
Expand Down Expand Up @@ -42,15 +43,7 @@ onErrorCaptured((e: Error) => {

<AppLayout>
<template #nav>
<Navbar
v-if="
router.currentRoute.value.name &&
router.currentRoute.value.name !== RouteName.HOME &&
![RouteName.OIDC_LOGIN, RouteName.OIDC_CALLBACK, RouteName.OIDC_LOGOUT].includes(
router.currentRoute.value.name as any
)
"
/>
<Navbar v-if="!route.meta.hideNavbar" />
</template>
<template #main>
<Message
Expand All @@ -60,6 +53,7 @@ onErrorCaptured((e: Error) => {
>
{{ getConfig?.notificationBanner }}
</Message>
<Breadcrumb v-if="!route.meta.hideBreadcrumb" />
<RouterView v-if="ready" />
</template>
</AppLayout>
Expand Down
80 changes: 62 additions & 18 deletions frontend/src/components/common/Breadcrumb.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,85 @@
import { Breadcrumb } from '@/lib/primevue';
import type { MenuItem } from 'primevue/menuitem';

Check warning on line 4 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (18.x)

'MenuItem' is defined but never used

Check warning on line 4 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (20.x)

'MenuItem' is defined but never used

Check warning on line 4 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (22.x)

'MenuItem' is defined but never used
import { ref, watch, type Ref } from 'vue';
import { useRoute, useRouter, type RouteLocationMatched, type RouteLocationNormalizedLoadedGeneric } from 'vue-router';
// Props
const { home, model } = defineProps<{
home: MenuItem;
model: Array<MenuItem>;
}>();
// const { home, model } = defineProps<{
// home: MenuItem;
// model: Array<MenuItem>;
// }>();
const route = useRoute();
const router = useRouter();
const routes: Ref<Array<RouteLocationNormalizedLoadedGeneric>> = ref([]);
const crumbs: Ref<Array<RouteLocationMatched>> = ref([]);
// Maps a param key to a callback function
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// const paramMap = new Map<string, (id: string) => any>([
// ['bc_submission', submissionStore.getSubmission],
// ['bc_permit', submissionStore.getPermit]
// ]);
// function generateName(item: RouteLocationMatched) {
// console.log(item.meta);
// if (item?.meta?.breadcrumb_dynamic) {
// console.log('dynamic');
// } else {
// return item.meta.breadcrumb;
// }
// }
// watch( submissionStore.getSubmission, () => {
// });
// watch(route.matched, () => {
// console.log('route.matched');
// });
watch(route, () => {
console.log(router.currentRoute);

Check warning on line 45 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (18.x)

Unexpected console statement

Check failure on line 45 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (18.x)

tests/unit/components/common/Breadcrumb.spec.ts > Breadcrumb.vue > renders

Error: [vitest] No "useRoute" export is defined on the "vue-router" mock. Did you forget to return it from "vi.mock"? If you need to partially mock a module, you can use "importOriginal" helper inside: vi.mock(import("vue-router"), async (importOriginal) => { const actual = await importOriginal() return { ...actual, // your mocked methods } }) ❯ setup src/components/common/Breadcrumb.vue:45:11 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25 ❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5159:7 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5125:9 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4654:11 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5269:11

Check warning on line 45 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (20.x)

Unexpected console statement

Check failure on line 45 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (20.x)

tests/unit/components/common/Breadcrumb.spec.ts > Breadcrumb.vue > renders

Error: [vitest] No "useRoute" export is defined on the "vue-router" mock. Did you forget to return it from "vi.mock"? If you need to partially mock a module, you can use "importOriginal" helper inside: vi.mock(import("vue-router"), async (importOriginal) => { const actual = await importOriginal() return { ...actual, // your mocked methods } }) ❯ setup src/components/common/Breadcrumb.vue:45:11 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25 ❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5159:7 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5125:9 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4654:11 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5269:11

Check warning on line 45 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (22.x)

Unexpected console statement

Check failure on line 45 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (22.x)

tests/unit/components/common/Breadcrumb.spec.ts > Breadcrumb.vue > renders

Error: [vitest] No "useRoute" export is defined on the "vue-router" mock. Did you forget to return it from "vi.mock"? If you need to partially mock a module, you can use "importOriginal" helper inside: vi.mock(import("vue-router"), async (importOriginal) => { const actual = await importOriginal() return { ...actual, // your mocked methods } }) ❯ setup src/components/common/Breadcrumb.vue:45:11 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19 ❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25 ❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5159:7 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5125:9 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4654:11 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5269:11
console.log(router.getRoutes());

Check warning on line 46 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (18.x)

Unexpected console statement

Check warning on line 46 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (20.x)

Unexpected console statement

Check warning on line 46 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (22.x)

Unexpected console statement
console.log(route);

Check warning on line 47 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (18.x)

Unexpected console statement

Check warning on line 47 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (20.x)

Unexpected console statement

Check warning on line 47 in frontend/src/components/common/Breadcrumb.vue

View workflow job for this annotation

GitHub Actions / Unit Tests (Frontend) (22.x)

Unexpected console statement
routes.value.push({ ...route });
let temp = route.matched;
// compute bunch of shit
// check each match if dynamic
// if dynamic get info from some store and modify meta
crumbs.value = temp;
});
// watch( submissionStore.getSubmission, () => {
// });
// watch( submissionStore.getPermit, () => {
// });
</script>

<template>
<Breadcrumb
:home="home"
:model="model"
>
<Breadcrumb :model="routes">
<template #separator>/</template>
<template #item="{ item }">
<!-- TODO: Dont link last item, just plain text -->
<router-link
v-if="item.route"
:to="{
name: item.route,
params: item.params
name: item.name,
params: item.params,
query: item.query,
hash: item.hash
}"
>
<span
class="app-primary-color cursor-pointer hover-underline"
:class="[item.class]"
>
{{ item.label }}
{{ item?.meta?.breadcrumb }}
</span>
</router-link>
<span
v-else
:class="[item.class]"
>
{{ item.label }}
</span>
</template>
</Breadcrumb>
</template>
Expand Down
226 changes: 226 additions & 0 deletions frontend/src/router/housing.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
import { useRouter } from 'vue-router';

import { accessHandler, createProps } from '@/router';
import useAuthZStore, { NavigationPermission } from '@/store/authzStore';
import { RouteName } from '@/utils/enums/application';

import type { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
{
path: '/housing',
meta: { requiresAuth: true, breadcrumb: 'Housing' },
children: [
{
path: '',
name: RouteName.HOUSING,
component: () => import('../views/housing/HousingView.vue'),
beforeEnter: () => {
const authzStore = useAuthZStore();
if (!authzStore.canNavigate(NavigationPermission.HOUSING)) {
useRouter().replace({ name: RouteName.HOUSING_SUBMISSIONS });
}
},
meta: {
access: [NavigationPermission.HOUSING],
breadcrumb: 'Housing'
}
},
{
path: 'enquiry',
children: [
{
path: '',
name: RouteName.HOUSING_ENQUIRY_INTAKE,
component: () => import('@/views/housing/enquiry/EnquiryIntakeView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_ENQUIRY_INTAKE],
breadcrumb: 'Enquiry Form'
}
// name: RouteName.HOUSING_ENQUIRY,
// component: () => import('../views/housing/enquiry/EnquiryView.vue'),
// beforeEnter: accessHandler,
// props: createProps,
// meta: {
// access: [NavigationPermission.HOUSING_ENQUIRY],
// breadcrumb: 'Enquiry Form'
// }
},
{
path: 'confirmation/:activityId',
name: RouteName.HOUSING_ENQUIRY_CONFIRMATION,
component: () => import('@/views/housing/enquiry/EnquiryConfirmationView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_ENQUIRY_INTAKE],
meta: { hideBreadcrumb: true }
}
}
// {
// path: 'intake',
// name: RouteName.HOUSING_ENQUIRY_INTAKE,
// component: () => import('@/views/housing/enquiry/EnquiryIntakeView.vue'),
// beforeEnter: accessHandler,
// props: createProps,
// meta: {
// access: [NavigationPermission.HOUSING_ENQUIRY_INTAKE],
// breadcrumb: 'Enquiry Form'
// }
// }
]
},
{
path: 'intake',
component: () => import('@/views/GenericView.vue'),
children: [
{
path: '',
alias: ':draftId', // Trying alias instead of duplicating whole thing with a different path
name: RouteName.HOUSING_SUBMISSION_INTAKE,
component: () => import('@/views/housing/submission/SubmissionIntakeView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_SUBMISSION_INTAKE]
}
},
{
path: 'confirmation/:activityId',
name: RouteName.HOUSING_SUBMISSION_CONFIRMATION,
component: () => import('@/views/housing/submission/SubmissionConfirmationView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_SUBMISSION_INTAKE]
}
}
]
},
{
path: 'project',
meta: {
access: [NavigationPermission.HOUSING_STATUS_TRACKER]
},
children: [
{
path: ':submissionId',
component: () => import('@/views/GenericView.vue'),
children: [
{
path: '',
component: () => import('@/views/housing/project/ProjectView.vue'),
beforeEnter: accessHandler,
meta: {
access: [NavigationPermission.HOUSING_STATUS_TRACKER],
breadcrumb: 'Project',
breadcrumb_dynamic: true
},
name: RouteName.HOUSING_PROJECT,
props: createProps
},
{
path: 'enquiry',
component: () => import('@/views/GenericView.vue'),
children: [
{
path: '',
alias: ':enquiryId', // Trying alias instead of duplicating whole thing with a different path
name: RouteName.HOUSING_ENQUIRY_INTAKE,
component: () => import('@/views/housing/enquiry/EnquiryIntakeView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_ENQUIRY_INTAKE],
breadcrumb: 'Enquiry Form'
}
}
]
},
{
path: 'intake',
name: RouteName.HOUSING_SUBMISSION_INTAKE,
component: () => import('@/views/housing/submission/SubmissionIntakeView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_SUBMISSION_INTAKE],
breadcrumb: 'Project Intake Form'
}
},
{
path: 'permit/:permitId',
component: () => import('@/views/GenericView.vue'),
children: [
{
path: '',
component: () => import('@/views/permit/PermitStatusView.vue'),
beforeEnter: accessHandler,
meta: {
access: [NavigationPermission.HOUSING_STATUS_TRACKER],
breadcrumb: 'Permit',
breadcrumb_dynamic: true
},
name: RouteName.HOUSING_PROJECT_PERMIT,
props: createProps
},
{
path: 'enquiry',
name: RouteName.HOUSING_ENQUIRY_INTAKE,
component: () => import('@/views/housing/enquiry/EnquiryIntakeView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_ENQUIRY_INTAKE]
}
}
]
}
]
}
]
},
{
path: 'submission',
children: [
{
path: '',
name: RouteName.HOUSING_SUBMISSION,
component: () => import('@/views/housing/submission/SubmissionView.vue'),
beforeEnter: accessHandler,
props: createProps,
meta: {
access: [NavigationPermission.HOUSING_SUBMISSION]
}
}
]
},
{
path: 'submissions',
name: RouteName.HOUSING_SUBMISSIONS,
component: () => import('@/views/housing/SubmissionsView.vue'),
beforeEnter: accessHandler,
meta: {
access: [NavigationPermission.HOUSING_SUBMISSIONS]
}
},
{
path: '/guide',
name: RouteName.HOUSING_GUIDE,
component: () => import('@/views/ComingSoon.vue'),
meta: { access: [NavigationPermission.HOUSING] }
},
{
path: '/user',
name: RouteName.USER_MANAGEMENT,
component: () => import('@/views/user/UserManagementView.vue'),
beforeEnter: accessHandler,
meta: { requiresAuth: true, access: [NavigationPermission.HOUSING_USER_MANAGEMENT] }
}
]
}
];

export default routes;
Loading

0 comments on commit 6e11e9e

Please sign in to comment.