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

Auth Web - Implements Shared Breadcrumb #1874

Merged
merged 7 commits into from
Jan 12, 2022
Merged

Auth Web - Implements Shared Breadcrumb #1874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
70a070e
initial commit - crumb implementation
cameron-eyds Jan 12, 2022
c878650
Removed obsolete code
cameron-eyds Jan 12, 2022
33a9c5e
removed unused import
cameron-eyds Jan 12, 2022
105a656
Code smell fix
cameron-eyds Jan 12, 2022
381fe03
version fixes
cameron-eyds Jan 12, 2022
069a377
Some pr updates
cameron-eyds Jan 12, 2022
1663206
Fixed an override
cameron-eyds Jan 12, 2022
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
68 changes: 53 additions & 15 deletions auth-web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions auth-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "auth-web",
"version": "0.1.0",
"version": "0.1.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
Expand All @@ -13,7 +13,9 @@
"start": "vue-cli-service serve"
},
"dependencies": {
"@bcrs-shared-components/bread-crumb": "^1.0.2",
"@bcrs-shared-components/corp-type-module": "1.0.4",
"@bcrs-shared-components/interfaces": "1.0.28",
"@mdi/font": "^4.5.95",
"@sentry/browser": "^5.27.2",
"@sentry/integrations": "^5.27.2",
Expand All @@ -27,7 +29,7 @@
"regenerator-runtime": "^0.13.3",
"register-service-worker": "^1.6.2",
"sbc-common-components": "2.4.28",
"vue": "^2.6.11",
"vue": "^2.6.12",
"vue-i18n": "^8.0.0",
"vue-plugin-helper-decorator": "0.0.12",
"vue-property-decorator": "^9.1.2",
Expand Down Expand Up @@ -70,7 +72,7 @@
"typescript": "^3.9.7",
"vue-class-component": "^7.1.0",
"vue-cli-plugin-vuetify": "^2.0.3",
"vue-template-compiler": "^2.6.10",
"vue-template-compiler": "^2.6.12",
"vue-test-utils-helpers": "git+https://github.com/AmpleOrganics/vue-test-utils-helpers.git",
"vuex-module-decorators": "^0.10.1",
"workbox-webpack-plugin": "^4.3.1"
Expand Down
58 changes: 18 additions & 40 deletions auth-web/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<v-icon>mdi-close</v-icon>
</v-btn>
</v-snackbar>
<navigation-bar :configuration="navigationBarConfig" :hide="!showNavigationBar" />
<BreadCrumb v-if="showNavigationBar" :breadcrumbs="breadcrumbs" />
<pay-system-alert />
</div>
<div class="app-body">
Expand All @@ -43,10 +43,13 @@
</template>

<script lang="ts">
import { AccessType, LoginSource, Pages, Permission, SessionStorageKeys } from '@/util/constants'
import { AccessType, LoginSource, Pages, Permission, Role, SessionStorageKeys } from '@/util/constants'
import { Component, Mixins } from 'vue-property-decorator'
import { HomeBreadCrumb, StaffDashboardBreadcrumb } from '@/resources/BreadcrumbResources'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import AuthModule from 'sbc-common-components/src/store/modules/auth'
import { BreadCrumb } from '@bcrs-shared-components/bread-crumb'
import { BreadcrumbIF } from '@bcrs-shared-components/interfaces'
import BusinessModule from './store/modules/business'
import CommonUtils from '@/util/common-util'
import ConfigHelper from '@/util/config-helper'
Expand All @@ -55,8 +58,6 @@ import { EventBus } from '@/event-bus'
import { KCUserProfile } from 'sbc-common-components/src/models/KCUserProfile'
import KeyCloakService from 'sbc-common-components/src/services/keycloak.services'
import { MembershipStatus } from '@/models/Organization'
import NavigationBar from 'sbc-common-components/src/components/NavigationBar.vue'
import { NavigationBarConfig } from 'sbc-common-components/src/models/NavigationBarConfig'
import NextPageMixin from '@/components/auth/mixins/NextPageMixin.vue'
import PaySystemAlert from 'sbc-common-components/src/components/PaySystemAlert.vue'
import SbcFooter from 'sbc-common-components/src/components/SbcFooter.vue'
Expand All @@ -66,11 +67,11 @@ import { getModule } from 'vuex-module-decorators'

@Component({
components: {
BreadCrumb,
SbcHeader,
SbcFooter,
SbcLoader,
PaySystemAlert,
NavigationBar
PaySystemAlert
},
computed: {
...mapState('org', [
Expand All @@ -97,17 +98,6 @@ export default class App extends Mixins(NextPageMixin) {
private toastTimeout = 6000
private logoutUrl = ''
private readonly needMissingBusinessDetailsRedirect!: boolean
private navigationBarConfig: NavigationBarConfig = {
titleItem: {
name: '',
url: '',
meta: {
requiresAuth: false,
requiresAccount: false
}
},
menuItems: []
}

$refs: {
header: SbcHeader
Expand All @@ -117,27 +107,18 @@ export default class App extends Mixins(NextPageMixin) {
return this.$route.meta.showNavBar
}

private setupNavigationBar (): void {
this.navigationBarConfig = {
titleItem: {
name: 'Business Registry',
url: `/home`,
meta: {
requiresAuth: false,
requiresAccount: false
}
},
menuItems: [
{
name: 'Manage Businesses',
url: `/account/${this.currentAccountSettings?.id || '0'}/business`,
meta: {
requiresAuth: true,
requiresAccount: true
}
}
]
/** The route breadcrumbs list. */
get breadcrumbs (): Array<BreadcrumbIF> {
const breadcrumbs = [...(this.$route?.meta?.breadcrumb || [])]

// Apply dynamic return crumb depending on user role
// This will be replaced when we have our UBER dashboard / high level marketing page
const defaultCrumb = this.currentUser?.roles?.includes(Role.Staff) ? StaffDashboardBreadcrumb : HomeBreadCrumb
if (this.$route?.name === 'business') {
breadcrumbs.unshift(defaultCrumb)
}

return breadcrumbs
}

private startAccountSwitch () {
Expand Down Expand Up @@ -173,7 +154,6 @@ export default class App extends Mixins(NextPageMixin) {
if (ConfigHelper.getFromSession(SessionStorageKeys.SessionSynced) === 'true' && !CommonUtils.isSigningIn() && !CommonUtils.isSigningOut()) {
this.loadUserInfo()
await this.syncUser()
this.setupNavigationBar()
this.$store.commit('loadComplete')
}
}
Expand Down Expand Up @@ -217,11 +197,9 @@ export default class App extends Mixins(NextPageMixin) {
}
this.loadUserInfo()
await this.syncUser()
this.setupNavigationBar()
} catch (e) {
// eslint-disable-next-line no-console
console.log('App.vue.setup Error: ' + e)
this.navigationBarConfig.menuItems = []
this.$store.dispatch('user/reset')
this.$store.commit('loadComplete')
this.$router.push('/home')
Expand Down
5 changes: 0 additions & 5 deletions auth-web/src/assets/scss/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,6 @@
// Increase column padding to 1rem (16px)
// ~32px gutters to provide some additional space between columns

.row {
margin-right: -1rem;
margin-left: -1rem;
}

.col {
padding: 1rem;
}
Expand Down
1 change: 1 addition & 0 deletions auth-web/src/assets/scss/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ $BCgovFontColorInverted: #ffffff;
$app-blue: #1669bb; // same as the Vuetify theme primary
$app-lt-blue: #E2E8EE; // LOW OPACITY PRIMARY BLUE
$app-background-blue: #E4EDF7; // Hover Background Blue
$app-dk-blue: #38598a;

// p, span tag text color incase needs to be same as vuetify component text
$TextColorGray: #00000099;
1 change: 1 addition & 0 deletions auth-web/src/assets/styles/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "$assets/scss/theme.scss";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good for now. Once we minify and build @bcrs-shared-components , we can avoid this pattern 👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, yea i look forward to learning more about that approach!

4 changes: 2 additions & 2 deletions auth-web/src/components/auth/manage-business/EntityManagement.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
</div>
</div>

<v-row no-gutters id="dashboard-actions" class="mb-n3 pl-4">
<v-row no-gutters id="dashboard-actions" class="mb-n3">
<v-col cols="9">
<!-- Add Existing Name Request or Business -->
<v-menu
Expand Down Expand Up @@ -57,7 +57,7 @@
</v-list>
</v-menu>
</v-col>
<v-col class="mr-4">
<v-col>
<v-select
dense filled multiple
class="column-selector"
Expand Down
19 changes: 19 additions & 0 deletions auth-web/src/resources/BreadcrumbResources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { BreadcrumbIF } from '@bcrs-shared-components/interfaces'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this common for all applications? if so we can import from shared components only. We don't have a resources folder yet. Can we use this file inside the util folder for better structure? This will be one file inside folder

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't common for all as of yet.
I believe once the Uber Dashboard or highest level landing/marketing page is complete, we can then then create a common resource. Could look at doing this now though, whatever you prefer.

Copy link
Collaborator Author

@cameron-eyds cameron-eyds Jan 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To follow up on this, it will be tricky as until each UI has a set configuration object.
Currently this differs between them.
ie the filings UI refers to Auth Web home as the BUSINESS_URL and auth web refers to itself as AUTH_WEB_URL etc.
So in order to make 1 common resource we would either need..
a) all the configuration objects to follow a standard naming convention
b) have local customization of these resourced objects (which we sort of land us in the same spot we are now anywho)


export const HomeBreadCrumb: BreadcrumbIF = {
text: 'Business Registry Home',
to: { name: 'home' },
href: `${sessionStorage.getItem('AUTH_WEB_URL')}`
}

export const DashboardBreadcrumb: BreadcrumbIF = {
text: 'My Business Registry',
to: { name: 'business' },
href: `${sessionStorage.getItem('AUTH_WEB_URL')}/business`
}

export const StaffDashboardBreadcrumb: BreadcrumbIF = {
text: 'Staff Dashboard',
to: { name: 'staff-dashboard' },
href: `${sessionStorage.getItem('AUTH_WEB_URL')}/staff/dashboard/active`
}
Loading