From 04adad3a7576edf7d0e4c31518bacddcce86c0f3 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Sun, 21 May 2023 20:13:03 +0300 Subject: [PATCH] RED-6713: add select domain menu --- apps/red-ui/src/app/app.module.ts | 6 ++ .../base-screen/base-screen.component.html | 15 +---- .../base-screen/base-screen.component.ts | 52 +---------------- .../tenants-menu/tenants-menu.component.html | 14 +++++ .../tenants-menu/tenants-menu.component.scss | 13 +++++ .../tenants-menu/tenants-menu.component.ts | 29 ++++++++++ .../user-menu/user-menu.component.html | 20 +++++++ .../user-menu/user-menu.component.scss | 3 + .../user-menu/user-menu.component.ts | 56 +++++++++++++++++++ apps/red-ui/src/assets/i18n/redact/de.json | 1 + apps/red-ui/src/assets/i18n/redact/en.json | 3 +- apps/red-ui/src/assets/i18n/scm/de.json | 1 + apps/red-ui/src/assets/i18n/scm/en.json | 3 +- 13 files changed, 150 insertions(+), 66 deletions(-) create mode 100644 apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.html create mode 100644 apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.scss create mode 100644 apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.ts create mode 100644 apps/red-ui/src/app/components/user-menu/user-menu.component.html create mode 100644 apps/red-ui/src/app/components/user-menu/user-menu.component.scss create mode 100644 apps/red-ui/src/app/components/user-menu/user-menu.component.ts diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 6be71a305..aeff40854 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -67,6 +67,9 @@ import { RedRoleGuard } from '@users/red-role.guard'; import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component'; import { DossierSkeletonComponent } from '@components/skeleton/dossier-skeleton/dossier-skeleton.component'; import { SkeletonStatsComponent } from '@components/skeleton/skeleton-stats/skeleton-stats.component'; +import { UserMenuComponent } from '@components/user-menu/user-menu.component'; +import { TenantsMenuComponent } from '@components/tenants-menu/tenants-menu.component'; +import { MatDividerModule } from '@angular/material/divider'; export const appModuleFactory = (config: AppConfig) => { @NgModule({ @@ -81,6 +84,8 @@ export const appModuleFactory = (config: AppConfig) => { SkeletonTopBarComponent, SkeletonStatsComponent, BaseScreenComponent, + UserMenuComponent, + TenantsMenuComponent, DownloadsListScreenComponent, ], imports: [ @@ -163,6 +168,7 @@ export const appModuleFactory = (config: AppConfig) => { IqserListingModule, IconButtonComponent, TenantPipe, + MatDividerModule, ], providers: [ { diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index ad8515fae..00385ac90 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -21,8 +21,8 @@ @@ -36,18 +36,7 @@ - + diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index 06b06d7d0..983ac23bf 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -5,7 +5,6 @@ import { NavigationStart, Router } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-search-action'; -import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { filter, map, startWith } from 'rxjs/operators'; import { BASE_HREF, IqserPermissionsService, List, shareDistinctLast, TenantsService } from '@iqser/common-ui'; import { BreadcrumbsService } from '@services/breadcrumbs.service'; @@ -14,15 +13,6 @@ import { ARCHIVE_ROUTE, DOSSIERS_ARCHIVE, DOSSIERS_ROUTE } from '@red/domain'; import { ROLES } from '@users/roles'; import { REDDocumentViewer } from '../../modules/pdf-viewer/services/document-viewer.service'; -interface MenuItem { - readonly id: string; - readonly name: string; - readonly routerLink?: string; - readonly show: boolean; - readonly action?: () => void; - readonly showDot?: () => boolean; -} - const isNavigationStart = event => event instanceof NavigationStart; const isSearchScreen: (url: string) => boolean = url => url.includes('/search'); @@ -34,38 +24,6 @@ export class BaseScreenComponent { readonly roles = ROLES; readonly documentViewer = inject(REDDocumentViewer); readonly currentUser = this.userService.currentUser; - readonly userMenuItems: readonly MenuItem[] = [ - { - id: 'account', - name: _('top-bar.navigation-items.my-account.children.account'), - routerLink: '/main/account', - show: true, - }, - { - id: 'admin', - name: _('top-bar.navigation-items.my-account.children.admin'), - routerLink: '/main/admin', - show: (this.currentUser.isManager || this.currentUser.isUserAdmin) && this.permissionsService.has([ROLES.templates.read]), - }, - { - id: 'downloads', - name: _('top-bar.navigation-items.my-account.children.downloads'), - routerLink: '/main/downloads', - show: this.currentUser.isUser && this.permissionsService.has(ROLES.readDownloadStatus), - }, - { - id: 'trash', - name: _('top-bar.navigation-items.my-account.children.trash'), - routerLink: '/main/trash', - show: this.currentUser.isUser && this.permissionsService.has([ROLES.dossiers.read, ROLES.files.readStatus]), - }, - { - id: 'select-tenant', - name: _('top-bar.navigation-items.my-account.children.select-tenant'), - action: () => this.selectTenant(), - show: this._tenantsService.hasMultiple(), - }, - ]; readonly searchActions: List = [ { text: this._translateService.instant('search.this-dossier'), @@ -98,7 +56,7 @@ export class BaseScreenComponent { private readonly _router: Router, private readonly _translateService: TranslateService, private readonly _featuresService: FeaturesService, - private readonly _tenantsService: TenantsService, + protected readonly _tenantsService: TenantsService, readonly permissionsService: IqserPermissionsService, readonly userService: UserService, readonly userPreferenceService: UserPreferenceService, @@ -116,14 +74,6 @@ export class BaseScreenComponent { return !isDossierOverview; } - trackByName(_index: number, item: MenuItem) { - return item.name; - } - - selectTenant() { - window.open(window.location.origin + this.#baseHref, '_blank'); - } - #search(query: string, dossierIds: string[], onlyActive = false) { const queryParams = { query, dossierIds: dossierIds.join(','), onlyActive }; this._router.navigate([`/${this._tenantsService.activeTenantId}/main/search`], { queryParams }).then(); diff --git a/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.html b/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.html new file mode 100644 index 000000000..1fcae0254 --- /dev/null +++ b/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.html @@ -0,0 +1,14 @@ +
+ +
{{ item.tenant.displayName }}
+ + + {{ item.email }} + + + + + + + +
diff --git a/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.scss b/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.scss new file mode 100644 index 000000000..79680a493 --- /dev/null +++ b/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.scss @@ -0,0 +1,13 @@ +:host { + display: contents; +} + +.label { + font-family: var(--iqser-font-family); + font-size: var(--iqser-font-size); + background-color: var(--iqser-background); + color: var(--iqser-disabled); + padding-left: 17px; + padding-top: 5px; + padding-bottom: 5px; +} diff --git a/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.ts b/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.ts new file mode 100644 index 000000000..6c080dc26 --- /dev/null +++ b/apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.ts @@ -0,0 +1,29 @@ +import { Component, computed, inject } from '@angular/core'; +import { BASE_HREF, IStoredTenant, TenantsService } from '@iqser/common-ui'; + +@Component({ + selector: 'app-tenants-menu', + templateUrl: './tenants-menu.component.html', + styleUrls: ['./tenants-menu.component.scss'], +}) +export class TenantsMenuComponent { + readonly tenantsService = inject(TenantsService); + + readonly storedTenants = computed(() => this.#getStoredTenants(this.tenantsService.activeTenant().tenantId)); + readonly #baseHref = inject(BASE_HREF); + + trackBy(_index: number, item: IStoredTenant) { + return item.tenant.tenantId; + } + + selectTenant(tenantId?: string) { + const tenant = tenantId ? '/' + tenantId : '/'; + window.open(window.location.origin + this.#baseHref + tenant, '_blank'); + } + + #getStoredTenants(activeTenantId: string) { + const storedTenants = this.tenantsService.getStoredTenants(); + + return storedTenants.filter(t => t.tenant.tenantId !== activeTenantId); + } +} diff --git a/apps/red-ui/src/app/components/user-menu/user-menu.component.html b/apps/red-ui/src/app/components/user-menu/user-menu.component.html new file mode 100644 index 000000000..a768c0b38 --- /dev/null +++ b/apps/red-ui/src/app/components/user-menu/user-menu.component.html @@ -0,0 +1,20 @@ + + + + + diff --git a/apps/red-ui/src/app/components/user-menu/user-menu.component.scss b/apps/red-ui/src/app/components/user-menu/user-menu.component.scss new file mode 100644 index 000000000..b7ca8fa44 --- /dev/null +++ b/apps/red-ui/src/app/components/user-menu/user-menu.component.scss @@ -0,0 +1,3 @@ +:host { + display: contents; +} diff --git a/apps/red-ui/src/app/components/user-menu/user-menu.component.ts b/apps/red-ui/src/app/components/user-menu/user-menu.component.ts new file mode 100644 index 000000000..f0012aa5d --- /dev/null +++ b/apps/red-ui/src/app/components/user-menu/user-menu.component.ts @@ -0,0 +1,56 @@ +import { Component, inject } from '@angular/core'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { ROLES } from '@users/roles'; +import { getCurrentUser, IqserPermissionsService, List, TenantsService } from '@iqser/common-ui'; +import { User } from '@red/domain'; +import { UserService } from '@users/user.service'; +interface MenuItem { + readonly id: string; + readonly name: string; + readonly routerLink?: string; + readonly show: boolean; + readonly action?: () => void; + readonly showDot?: () => boolean; +} + +@Component({ + selector: 'app-user-menu', + templateUrl: './user-menu.component.html', + styleUrls: ['./user-menu.component.scss'], +}) +export class UserMenuComponent { + readonly currentUser = getCurrentUser(); + readonly tenantsService = inject(TenantsService); + readonly userService = inject(UserService); + readonly #permissionsService = inject(IqserPermissionsService); + readonly userMenuItems: List = [ + { + id: 'account', + name: _('top-bar.navigation-items.my-account.children.account'), + routerLink: '/main/account', + show: true, + }, + { + id: 'admin', + name: _('top-bar.navigation-items.my-account.children.admin'), + routerLink: '/main/admin', + show: (this.currentUser.isManager || this.currentUser.isUserAdmin) && this.#permissionsService.has([ROLES.templates.read]), + }, + { + id: 'downloads', + name: _('top-bar.navigation-items.my-account.children.downloads'), + routerLink: '/main/downloads', + show: this.currentUser.isUser && this.#permissionsService.has(ROLES.readDownloadStatus), + }, + { + id: 'trash', + name: _('top-bar.navigation-items.my-account.children.trash'), + routerLink: '/main/trash', + show: this.currentUser.isUser && this.#permissionsService.has([ROLES.dossiers.read, ROLES.files.readStatus]), + }, + ]; + + trackBy(_index: number, item: MenuItem) { + return item.id; + } +} diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index b7b6b5df1..2ba253eae 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -2094,6 +2094,7 @@ "account": "Konto", "admin": "Einstellungen", "downloads": "Meine Downloads", + "join-another-tenant": "", "language": { "de": "Deutsch", "en": "Englisch", diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index 0efc2f074..49293c69e 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -2094,13 +2094,14 @@ "account": "Account", "admin": "Settings", "downloads": "My Downloads", + "join-another-tenant": "Join another domain", "language": { "de": "German", "en": "English", "label": "Language" }, "logout": "Logout", - "select-tenant": "Select Tenant", + "select-tenant": "Switch accounts", "trash": "Trash" } } diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index 753de987d..ff01dbc00 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -2094,6 +2094,7 @@ "account": "Konto", "admin": "Einstellungen", "downloads": "Meine Downloads", + "join-another-tenant": "", "language": { "de": "Deutsch", "en": "Englisch", diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index c819222f4..57e9a2719 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -2094,13 +2094,14 @@ "account": "Account", "admin": "Settings", "downloads": "My Downloads", + "join-another-tenant": "Join another domain", "language": { "de": "German", "en": "English", "label": "Language" }, "logout": "Logout", - "select-tenant": "Select Tenant", + "select-tenant": "Switch accounts", "trash": "Trash" } }