[US TRTL-519] Tenant & customer header selection refactoring

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>

ui/ui-frontend-common/src/app/modules/components/header/header.component.scss

-@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 {

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 {

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

ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.html

+<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

ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.scss

+: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

ui/ui-frontend-common/src/app/modules/components/header/item-select/item-select.component.ts

+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);
+  }
+}

ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.module.ts → 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 { }

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>

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);
     }
   }
 }

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

ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.html

-<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

ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.scss

-@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;
-  }
-}

ui/ui-frontend-common/src/app/modules/components/header/select-customer/select-customer.component.ts

-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);
-  }
-
-}

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>

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);
     }
   }
 

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

ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.html

-<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

ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.scss

-: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

ui/ui-frontend-common/src/app/modules/components/header/select-tenant/select-tenant.component.ts

-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);
-  }
-
-}