From 5c8b48fec96488e550bedc6d80865b5f2eff9f8c Mon Sep 17 00:00:00 2001
From: Delphine <delphine.coursier@teamdlab.com>
Date: Mon, 30 Nov 2020 10:53:08 +0100
Subject: [PATCH] [US TRTL-519] Tenant & customer header selection refactoring
---
.../components/header/header.component.html | 28 +++++----
.../components/header/header.component.scss | 6 +-
.../components/header/header.component.ts | 22 +++----
.../components/header/header.module.ts | 8 +--
.../item-select/item-select.component.html | 9 +++
.../item-select/item-select.component.scss | 55 ++++++++++++++++++
.../item-select/item-select.component.ts | 34 +++++++++++
.../item-select.module.ts} | 10 ++--
.../header/menu/menu.component.html | 15 +++--
.../components/header/menu/menu.component.ts | 19 +++---
.../components/header/menu/menu.module.ts | 4 +-
.../select-customer.component.html | 9 ---
.../select-customer.component.scss | 58 -------------------
.../select-customer.component.ts | 35 -----------
.../select-tenant-dialog.component.html | 8 ++-
.../select-tenant-dialog.component.ts | 11 ++--
.../select-tenant-dialog.module.ts | 6 +-
.../select-tenant.component.html | 9 ---
.../select-tenant.component.scss | 57 ------------------
.../select-tenant/select-tenant.component.ts | 36 ------------
.../select-tenant/select-tenant.module.ts | 18 ------
.../vitamui-customer-select.component.ts | 37 ++++++++----
.../src/app/modules/vitamui-common.module.ts | 3 -
23 files changed, 201 insertions(+), 296 deletions(-)
create mode 100644 ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.html
create mode 100644 ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss
create mode 100644 ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.ts
rename ui/ui-frontend-common/src/app/modules/components/header/{select-customer/select-customer.module.ts => item-select/item-select.module.ts} (65%)
delete mode 100644 ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.html
delete mode 100644 ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.scss
delete mode 100644 ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.ts
delete mode 100644 ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.html
delete mode 100644 ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.ts
delete mode 100644 ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.module.ts
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/header.component.html b/ui/ui-frontend-common/src/app/modules/components/header/header.component.html
index 59961a476..235cfe1ec 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/header.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/header/header.component.html
@@ -8,21 +8,27 @@
<vitamui-common-select-language></vitamui-common-select-language>
<div class="selection-component">
- <vitamui-common-select-tenant
+ <!-- tenant selection -->
+ <vitamui-common-item-select
*ngIf="hasTenantSelection"
class="mx-4"
- [tenants]="tenants"
- [selectedTenant]="selectedTenant"
- (tenantSelected)="updateTenant($event)">
- </vitamui-common-select-tenant>
-
- <vitamui-common-select-customer
+ [label]="'SELECT-TENANT.SELECT' | translate"
+ [selectedLabel]="'SELECT-TENANT.SELECTED' | translate"
+ [items]="tenants"
+ [selectedItem]="selectedTenant"
+ (itemSelected)="updateTenant($event)">
+ </vitamui-common-item-select>
+
+ <!-- customer selection -->
+ <vitamui-common-item-select
*ngIf="hasCustomerSelection"
class="mx-4"
- [customers]="customers"
- [selectedCustomer]="selectedCustomer"
- (customerSelected)="updateCustomer($event)">
- </vitamui-common-select-customer>
+ [label]="'SELECT-CUSTOMER.SELECT' | translate"
+ [selectedLabel]="'SELECT-CUSTOMER.SELECTED' | translate"
+ [items]="customers"
+ [selectedItem]="selectedCustomer"
+ (itemSelected)="updateCustomer($event)">
+ </vitamui-common-item-select>
<div class="separator"></div>
</div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/header.component.scss b/ui/ui-frontend-common/src/app/modules/components/header/header.component.scss
index cd801a2e6..c554188f7 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/header.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/header/header.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../sass/variables/colors';
-
mat-toolbar {
z-index: 10;
}
@@ -49,11 +47,11 @@ mat-toolbar {
}
.apps-button {
- background-color: $white;
+ background-color: white;
}
.apps-button mat-icon {
- color: $charcoal-grey;
+ color: var(--vitamui-grey-700);
}
.vitamui-icon-apps-colored {
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/header.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/header.component.ts
index e0e4471a2..ac82e18bf 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/header.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/header.component.ts
@@ -41,13 +41,13 @@ export class HeaderComponent implements OnInit, OnDestroy {
private destroyer$ = new Subject();
- public selectedTenant: Tenant;
+ public selectedTenant: MenuOption;
public selectedCustomer: MenuOption;
public customers: MenuOption[];
- public tenants: Tenant[];
+ public tenants: MenuOption[];
public headerLogoUrl: SafeResourceUrl;
@@ -64,8 +64,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
private globalEventService: GlobalEventService) { }
ngOnInit() {
- this.tenants = this.tenantService.getTenants();
this.portalUrl = this.startupService.getPortalUrl();
+ this.tenants = this.tenantService.getTenants().map((tenant: Tenant) => {
+ return {value: tenant, label: tenant.name};
+ });
if (this.authService.user) {
this.currentUser = this.authService.user;
@@ -103,10 +105,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
.pipe(takeUntil(this.destroyer$))
.subscribe((tenant: Tenant) => {
if (!this.selectedTenant) {
- this.selectedTenant = tenant;
+ this.selectedTenant = {value: tenant, label: tenant.name};
} else {
- if (this.selectedTenant.identifier !== tenant.identifier) {
- this.selectedTenant = tenant;
+ if (this.selectedTenant.value.identifier !== tenant.identifier) {
+ this.selectedTenant = {value: tenant, label: tenant.name};
this.tenantService.saveSelectedTenant(tenant).toPromise();
}
}
@@ -117,9 +119,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
this.tenantService.getLastTenantIdentifier$()
.pipe(takeUntil(this.tenantService.getSelectedTenant$()), takeUntil(this.destroyer$))
.subscribe((identifier: number) => {
- const lastTenant = this.tenants.find(value => value.identifier === identifier);
+ const lastTenant = this.tenants.find((option: MenuOption) => option.value.identifier === identifier);
if (!this.selectedTenant && lastTenant) {
- this.tenantService.setSelectedTenant(lastTenant);
+ this.tenantService.setSelectedTenant(lastTenant.value);
}
});
@@ -132,8 +134,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
this.destroyer$.complete();
}
- public updateTenant(tenant: Tenant): void {
- this.tenantService.setSelectedTenant(tenant);
+ public updateTenant(tenant: MenuOption): void {
+ this.tenantService.setSelectedTenant(tenant.value);
}
public updateCustomer(customer: MenuOption): void {
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/header.module.ts b/ui/ui-frontend-common/src/app/modules/components/header/header.module.ts
index ce5d27a22..a147e2e78 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/header.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/header.module.ts
@@ -6,12 +6,10 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router';
import { HeaderComponent } from './header.component';
-import { SelectTenantModule } from './select-tenant/select-tenant.module';
-
+import { ItemSelectModule } from './item-select/item-select.module';
import { TranslateModule } from '@ngx-translate/core';
import { MenuModule } from './menu/menu.module';
import { SelectCustomerModule } from './select-customer/select-customer.module';
-import { SelectLanguageModule } from './select-language/select-language.module';
import { SelectTenantDialogComponent } from './select-tenant-dialog/select-tenant-dialog.component';
import { UserPhotoModule } from './user-photo/user-photo.module';
@@ -26,9 +24,7 @@ import { UserPhotoModule } from './user-photo/user-photo.module';
MatIconModule,
MatToolbarModule,
MatButtonModule,
- SelectTenantModule,
- SelectLanguageModule,
- SelectCustomerModule,
+ ItemSelectModule,
UserPhotoModule,
MenuModule.forRoot(),
TranslateModule
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.html b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.html
new file mode 100644
index 000000000..66a58660b
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.html
@@ -0,0 +1,9 @@
+<mat-form-field appearance="fill">
+ <mat-label *ngIf="selectedItem" class="selected-item-label">{{label}}</mat-label>
+ <mat-label *ngIf="!selectedItem" class="unselected-item-label">{{selectedLabel}}</mat-label>
+ <mat-select (selectionChange)="selectItem($event.source.value)" [(value)]="_selectedItem">
+ <mat-option *ngFor="let item of items" [value]="item.label">
+ {{ item.label }}
+ </mat-option>
+ </mat-select>
+</mat-form-field>
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss
new file mode 100644
index 000000000..afe7f3178
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss
@@ -0,0 +1,55 @@
+:host::ng-deep {
+ .selected-item-label, .unselected-item-label {
+ color: var(--vitamui-grey-600);
+ font-size: 16px;
+ }
+
+ .mat-form-field-underline {
+ display: none;
+ }
+
+ .mat-select-value-text {
+ font-weight: bold;
+ }
+
+ .mat-select-arrow {
+ color: var(--vitamui-primary);
+ }
+
+ .mat-form-field-wrapper {
+ padding-bottom: 0;
+ }
+
+ mat-form-field {
+ border: 1px solid var(--vitamui-grey-300);
+ background-color: white;
+ padding-left: 25px;
+ padding-right: 25px;
+ border-radius: 50px;
+ height: 50px;
+ display: inline-flex;
+ align-items: center;
+ }
+
+ .mat-form-field-flex {
+ background-color: white;
+ padding: 0!important;
+ }
+
+ mat-select {
+ color: var(--vitamui-grey-900);
+ font-size: 16px;
+ }
+
+ .mat-form-field-infix {
+ padding: 0;
+ }
+
+ .mat-select-arrow-wrapper {
+ vertical-align: inherit;
+ }
+
+ span.mat-select-placeholder {
+ margin-top: 0.4rem;
+ }
+}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.ts
new file mode 100644
index 000000000..472a211fa
--- /dev/null
+++ b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.ts
@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MenuOption } from '../../navbar/customer-menu/menu-option.interface';
+
+@Component({
+ selector: 'vitamui-common-item-select',
+ templateUrl: './item-select.component.html',
+ styleUrls: ['./item-select.component.scss']
+})
+export class ItemSelectComponent {
+
+ @Input() label: string;
+
+ @Input() selectedLabel: string;
+
+ @Input() items: MenuOption[];
+
+ @Output() itemSelected = new EventEmitter<MenuOption>();
+
+ @Input() set selectedItem(value: MenuOption) {
+ if (value) {
+ this._selectedItem = value.label;
+ }
+ }
+
+ // tslint:disable-next-line: variable-name
+ public _selectedItem: string;
+
+ constructor() { }
+
+ public selectItem(itemLabel: string): void {
+ const item = this.items.find(value => value.label === itemLabel);
+ this.itemSelected.emit(item);
+ }
+}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.module.ts b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.module.ts
similarity index 65%
rename from ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.module.ts
rename to ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.module.ts
index 07d17dc9a..d1c6cda6d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.module.ts
@@ -3,16 +3,16 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
-import { SelectCustomerComponent } from './select-customer.component';
+import { ItemSelectComponent } from './item-select.component';
@NgModule({
- declarations: [SelectCustomerComponent],
imports: [
CommonModule,
- MatSelectModule,
FormsModule,
+ MatSelectModule,
TranslateModule
],
- exports: [SelectCustomerComponent]
+ declarations: [ItemSelectComponent],
+ exports: [ItemSelectComponent]
})
-export class SelectCustomerModule { }
+export class ItemSelectModule { }
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
index 499722057..f92d5d6ce 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.html
@@ -4,18 +4,21 @@
>
<div class="row header">
<vitamui-common-search-bar
- class="col-5"
+ class="col-5 mr-2"
name="category-search"
(searchChanged)="onSearch($event)"
(clear)="resetSearch()"
placeholder="{{'MENU.GRAB_APPLICATION' | translate}}"
></vitamui-common-search-bar>
- <vitamui-common-select-tenant class="col-3 p-0 ml-5"
- [tenants]="tenants"
- [selectedTenant]="selectedTenant"
- (tenantSelected)="updateApps($event)"
- ></vitamui-common-select-tenant>
+ <vitamui-common-item-select
+ class="col-3 p-0 ml-5"
+ [label]="'SELECT-TENANT.SELECT' | translate"
+ [selectedLabel]="'SELECT-TENANT.SELECTED' | translate"
+ [items]="tenants"
+ [selectedItem]="selectedTenant"
+ (itemSelected)="updateApps($event)"
+ ></vitamui-common-item-select>
<div class="apps-container col-3 ml-auto" (click)="onClose()">
<span class="pr-2">{{'MENU.MY_APPLICATIONS' | translate}}</span>
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
index 9b791643b..ec3f4ea50 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.component.ts
@@ -9,6 +9,7 @@ import { ApplicationService } from '../../../application.service';
import { Category } from '../../../models';
import { Application } from '../../../models/application/application.interface';
import { TenantSelectionService } from '../../../tenant-selection.service';
+import { MenuOption } from '../../navbar';
import { Tenant } from './../../../models/customer/tenant.interface';
import { StartupService } from './../../../startup.service';
import { MenuOverlayRef } from './menu-overlay-ref';
@@ -72,9 +73,9 @@ export class MenuComponent implements OnInit, AfterViewInit {
private firstResultFocused = false;
- public selectedTenant: Tenant;
+ public selectedTenant: MenuOption;
- public tenants: Tenant[];
+ public tenants: MenuOption[];
private destroyer$ = new Subject();
@@ -107,16 +108,18 @@ export class MenuComponent implements OnInit, AfterViewInit {
ngOnInit() {
this.dialogRef.overlay.backdropClick().subscribe(() => this.onClose());
- this.tenants = this.tenantService.getTenants();
+ this.tenants = this.tenantService.getTenants().map((tenant: Tenant) => {
+ return {value: tenant, label: tenant.name};
+ });
// Display application list depending on the current active tenant.
// If no active tenant is set, then use the last tenant identifier.
- this.selectedTenant = this.tenantService.getSelectedTenant();
+ this.selectedTenant = {value: this.tenantService.getSelectedTenant(), label: this.tenantService.getSelectedTenant().name};
if (this.selectedTenant) {
this.updateApps(this.selectedTenant);
} else {
this.tenantService.getLastTenantIdentifier$().pipe(takeUntil(this.destroyer$)).subscribe((identifier: number) => {
- this.updateApps(this.tenants.find(value => value.identifier === identifier));
+ this.updateApps(this.tenants.find(option => option.value.identifier === identifier));
});
}
}
@@ -172,13 +175,13 @@ export class MenuComponent implements OnInit, AfterViewInit {
public openApplication(app: Application) {
this.onClose();
this.applicationService.
- openApplication(app, this.router, this.startupService.getConfigStringValue('UI_URL'), this.selectedTenant.identifier);
+ openApplication(app, this.router, this.startupService.getConfigStringValue('UI_URL'), this.selectedTenant.value.identifier);
}
- public updateApps(tenant: Tenant) {
+ public updateApps(tenant: MenuOption) {
if (tenant) {
this.selectedTenant = tenant;
- this.appMap = this.applicationService.getTenantAppMap(tenant);
+ this.appMap = this.applicationService.getTenantAppMap(tenant.value);
}
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.module.ts b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.module.ts
index 036fd24eb..c371b9b0b 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/menu/menu.module.ts
@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../../pipes/pipes.module';
import { SearchBarModule } from '../../search-bar/search-bar.module';
-import { SelectTenantModule } from '../select-tenant/select-tenant.module';
+import { ItemSelectModule } from '../item-select/item-select.module';
import { MenuApplicationTileComponent } from './menu-application-tile/menu-application-tile.component';
import { MenuOverlayService } from './menu-overlay.service';
import { MenuComponent } from './menu.component';
@@ -33,7 +33,7 @@ import { MenuComponent } from './menu.component';
SearchBarModule,
PipesModule,
TranslateModule,
- SelectTenantModule
+ ItemSelectModule
],
entryComponents: [
MenuComponent
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.html b/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.html
deleted file mode 100644
index 0166eed30..000000000
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<mat-form-field appearance="fill">
- <mat-label *ngIf="selectedCustomer" class="selected-customer-label">{{'SELECT-CUSTOMER.SELECTED' | translate}}</mat-label>
- <mat-label *ngIf="!selectedCustomer" class="unselected-customer-label">{{'SELECT-CUSTOMER.SELECT' | translate}}</mat-label>
- <mat-select (selectionChange)="selectCustomer($event.source.value)" [(value)]="selectedCustomer">
- <mat-option *ngFor="let customer of customers" [value]="customer">
- {{ customer.label }}
- </mat-option>
- </mat-select>
-</mat-form-field>
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.scss b/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.scss
deleted file mode 100644
index a0aa09a3b..000000000
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../../../../sass/variables/colors';
-
-:host::ng-deep {
-
- .selected-customer-label, .unselected-customer-label {
- color: var(--vitamui-grey-600);
- font-size: 16px;
- }
-
- .mat-form-field-underline {
- display: none;
- }
-
- .mat-select-value-text {
- font-weight: bold;
- }
-
- .mat-select-arrow {
- color: var(--vitamui-primary);
- }
-
- .mat-form-field-wrapper {
- padding-bottom: 0;
- }
-
- mat-form-field {
- border: 1px solid var(--vitamui-grey-300);
- background-color: white;
- padding-left: 25px;
- padding-right: 25px;
- border-radius: 50px;
- height: 50px;
- display: inline-flex;
- align-items: center;
- }
-
- .mat-form-field-flex {
- background-color: white;
- padding: 0!important;
- }
-
- mat-select {
- color: var(--vitamui-grey-900);
- font-size: 16px;
- }
-
- .mat-form-field-infix {
- padding: 0;
- }
-
- .mat-select-arrow-wrapper {
- vertical-align: inherit;
- }
-
- span.mat-select-placeholder {
- margin-top: 0.4rem;
- }
-}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.ts
deleted file mode 100644
index f559370d2..000000000
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subject } from 'rxjs';
-import { Customer } from '../../../models/customer/customer.interface';
-import { MenuOption } from '../../navbar/customer-menu/menu-option.interface';
-
-@Component({
- selector: 'vitamui-common-select-customer',
- templateUrl: './select-customer.component.html',
- styleUrls: ['./select-customer.component.scss']
-})
-export class SelectCustomerComponent implements OnInit, OnDestroy {
-
- @Input() customers: MenuOption[];
-
- @Input() selectedCustomer: MenuOption;
-
- @Output() customerSelected = new EventEmitter<MenuOption>();
-
- private destroyer$ = new Subject();
-
- constructor() { }
-
- ngOnInit() { }
-
- ngOnDestroy() {
- this.destroyer$.next();
- this.destroyer$.complete();
- }
-
- public selectCustomer(customer: MenuOption): void {
- this.selectedCustomer = customer;
- this.customerSelected.emit(this.selectedCustomer);
- }
-
-}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.html b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.html
index df25a1ba5..2bedbf30d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.html
@@ -3,7 +3,13 @@
<h2 class="col-12">{{ 'SELECT-TENANT.DIALOG_SUBTITLE' | translate }}</h2>
<p class="col-12">{{ 'SELECT-TENANT.DIALOG_INSTRUCTIONS' | translate }} <span class="asterix">*</span></p>
- <vitamui-common-select-tenant class="col-12" (tenantSelected)="selectedTenant = $event" [tenants]="tenants"></vitamui-common-select-tenant>
+ <vitamui-common-item-select
+ class="col-12"
+ [label]="'SELECT-TENANT.SELECT' | translate"
+ [selectedLabel]="'SELECT-TENANT.SELECTED' | translate"
+ (itemSelected)="selectedTenant = $event"
+ [items]="tenants">
+ </vitamui-common-item-select>
<button class="col-12 btn primary" [disabled]="!selectedTenant" (click)="closeDialog()">{{ 'SELECT-TENANT.DIALOG_BUTTON_LABEL' | translate }}</button>
<p><span class="asterix">*</span> {{ 'SELECT-TENANT.DIALOG_MESSAGE' | translate }}</p>
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.ts
index f0f7d3786..88079d68d 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.component.ts
@@ -2,6 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { Tenant } from '../../../models/customer/tenant.interface';
+import { MenuOption } from '../../navbar';
@Component({
selector: 'vitamui-common-select-tenant-dialog',
@@ -15,19 +16,21 @@ export class SelectTenantDialogComponent implements OnInit {
disableClose: true,
};
- public selectedTenant: Tenant;
+ public selectedTenant: MenuOption;
- public tenants: Tenant[];
+ public tenants: MenuOption[];
constructor(private dialogRef: MatDialogRef<SelectTenantDialogComponent>, @Inject(MAT_DIALOG_DATA) private data: any) { }
ngOnInit() {
- this.tenants = this.data.tenants;
+ this.tenants = this.data.tenants.getTenants().map((tenant: Tenant) => {
+ return {value: tenant, label: tenant.name};
+ });
}
public closeDialog(): void {
if (this.selectedTenant) {
- this.dialogRef.close(this.selectedTenant);
+ this.dialogRef.close(this.selectedTenant.value);
}
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.module.ts b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.module.ts
index ba1d32d1b..462387503 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant-dialog/select-tenant-dialog.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core';
-import { SelectTenantModule } from '../select-tenant/select-tenant.module';
+import { ItemSelectModule } from '../item-select/item-select.module';
import { SelectTenantDialogComponent } from './select-tenant-dialog.component';
@NgModule({
@@ -12,8 +12,8 @@ import { SelectTenantDialogComponent } from './select-tenant-dialog.component';
imports: [
CommonModule,
MatButtonModule,
- SelectTenantModule,
- TranslateModule
+ TranslateModule,
+ ItemSelectModule
],
exports: [
SelectTenantDialogComponent
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.html b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.html
deleted file mode 100644
index 62d22f0ce..000000000
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<mat-form-field appearance="fill">
- <mat-label *ngIf="selectedTenant" class="selected-tenant-label">{{'SELECT-TENANT.SELECTED' | translate}}</mat-label>
- <mat-label *ngIf="!selectedTenant" class="unselected-tenant-label">{{'SELECT-TENANT.SELECT' | translate}}</mat-label>
- <mat-select (selectionChange)="selectTenant($event.source.value)" [(value)]="selectedTenant">
- <mat-option *ngFor="let tenant of tenants" [value]="tenant">
- {{ tenant.name }}
- </mat-option>
- </mat-select>
-</mat-form-field>
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.scss b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.scss
index 4c8d6e5b2..e69de29bb 100644
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.scss
@@ -1,57 +0,0 @@
-:host::ng-deep {
-
- .selected-tenant-label, .unselected-tenant-label {
- color: var(--vitamui-grey-600);
- font-size: 16px;
- }
-
- .mat-form-field-underline {
- display: none;
- }
-
- .mat-select-value-text {
- font-weight: bold;
- color: #485053;
- }
-
- .mat-select-arrow {
- color: var(--vitamui-primary);
- }
-
- .mat-form-field-wrapper {
- padding-bottom: 0;
- }
-
- mat-form-field {
- border: 1px solid var(--vitamui-grey-300);
- background-color: white;
- padding-left: 25px;
- padding-right: 25px;
- border-radius: 50px;
- height: 50px;
- display: inline-flex;
- align-items: center;
- }
-
- .mat-form-field-flex {
- background-color: white;
- padding: 0!important;
- }
-
- mat-select {
- color: var(--vitamui-grey-900);
- font-size: 16px;
- }
-
- .mat-form-field-infix {
- padding: 0;
- }
-
- .mat-select-arrow-wrapper {
- vertical-align: inherit;
- }
-
- span.mat-select-placeholder {
- margin-top: 0.4rem;
- }
-}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.ts b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.ts
deleted file mode 100644
index c73a72d50..000000000
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subject } from 'rxjs';
-import { Tenant } from '../../../models/customer/tenant.interface';
-
-@Component({
- selector: 'vitamui-common-select-tenant',
- templateUrl: './select-tenant.component.html',
- styleUrls: ['./select-tenant.component.scss']
-})
-export class SelectTenantComponent implements OnInit, OnDestroy {
-
- /** Available tenant list to display */
- @Input() tenants: Tenant[];
-
- /** Current tenant in the select box */
- @Input() selectedTenant: Tenant;
-
- @Output() tenantSelected = new EventEmitter<Tenant>();
-
- private destroyer$ = new Subject();
-
- constructor() { }
-
- ngOnInit() { }
-
- ngOnDestroy() {
- this.destroyer$.next();
- this.destroyer$.complete();
- }
-
- public selectTenant(tenant: Tenant): void {
- this.selectedTenant = tenant;
- this.tenantSelected.emit(this.selectedTenant);
- }
-
-}
diff --git a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.module.ts b/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.module.ts
deleted file mode 100644
index dc4eb3ed8..000000000
--- a/ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
-import { TranslateModule } from '@ngx-translate/core';
-import { SelectTenantComponent } from './select-tenant.component';
-
-@NgModule({
- declarations: [SelectTenantComponent],
- imports: [
- CommonModule,
- MatSelectModule,
- FormsModule,
- TranslateModule,
- ],
- exports: [SelectTenantComponent]
-})
-export class SelectTenantModule { }
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-customer-select/vitamui-customer-select.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-customer-select/vitamui-customer-select.component.ts
index a755b9ee0..5ce0d07db 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-customer-select/vitamui-customer-select.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-customer-select/vitamui-customer-select.component.ts
@@ -34,10 +34,13 @@
* The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms.
*/
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
import { ApplicationId } from '../../application-id.enum';
+import { GlobalEventService } from '../../global-event.service';
import { MenuOption } from '../navbar/customer-menu/menu-option.interface';
@Component({
@@ -45,21 +48,33 @@ import { MenuOption } from '../navbar/customer-menu/menu-option.interface';
templateUrl: './vitamui-customer-select.component.html',
styleUrls: ['./vitamui-customer-select.component.scss']
})
-export class VitamUICustomerSelectComponent {
+export class VitamUICustomerSelectComponent implements OnInit, OnDestroy {
- appId: ApplicationId;
- hideTenantMenu = true;
- hideCustomerMenu = false;
- customers: MenuOption[];
+ public customers: MenuOption[];
- constructor(private router: Router, private route: ActivatedRoute) {
- this.route.data.subscribe((data) => {
- this.customers = data.customers;
- this.appId = data.appId;
+ private destroyer$ = new Subject();
+
+ constructor(
+ private router: Router,
+ private route: ActivatedRoute,
+ private globalEventService: GlobalEventService) { }
+
+ ngOnInit() {
+ this.route.data.pipe(takeUntil(this.destroyer$))
+ .subscribe((data) => {
+ this.customers = data.customers;
});
+
+ this.globalEventService.customerEvent.pipe(takeUntil(this.destroyer$))
+ .subscribe((customerId: string) => this.selectCustomer(customerId));
+ }
+
+ ngOnDestroy() {
+ this.destroyer$.next();
+ this.destroyer$.complete();
}
- selectCustomerInNavbar(customerId: Event) {
+ selectCustomer(customerId: string): void {
this.router.navigate(['./' + customerId], { relativeTo: this.route });
}
diff --git a/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts b/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
index aabcf89be..8011c6c44 100644
--- a/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
+++ b/ui/ui-frontend-common/src/app/modules/vitamui-common.module.ts
@@ -40,7 +40,6 @@ import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { CommonTooltipModule } from './components/common-tooltip/common-tooltip.module';
-import { SelectTenantModule } from './components/header/select-tenant/select-tenant.module';
import { VitamuiBodyModule } from './components/vitamui-body/vitamui-body.module';
import { VitamUIDisplayNodeModule } from './components/vitamui-display-node/vitamui-display-node.module';
import { LoggerModule } from './logger/logger.module';
@@ -140,7 +139,6 @@ export function startupServiceFactory(startupService: StartupService) {
LoggerModule,
NavbarModule,
HeaderModule,
- SelectTenantModule,
SelectTenantDialogModule,
OrderByButtonModule,
OrderDropdownModule,
@@ -191,7 +189,6 @@ export function startupServiceFactory(startupService: StartupService) {
LoggerModule,
NavbarModule,
HeaderModule,
- SelectTenantModule,
SelectTenantDialogModule,
OrderByButtonModule,
OrderDropdownModule,
--
GitLab