126 improve the behavior of the domain switcher

src/app/shared/common/domainfilter/domainfilter.component.css

@@ -1,36 +1,11 @@
-@media (max-width: 1199px) {
-        .dropdown-domains{
-                position: relative;
-                display: block;
-                padding: 10px 15px;
-        }
-        .dropdown-menu {
-        position: static !important;
-        float: none !important;
-        width: auto !important;
-        margin-top: 0;
-        background-color: transparent;
-        border: 0;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-         }
-        .search{
-                margin-bottom:10px;
-        }
+:host ::ng-deep .p-dropdown {
+        border: none;
 }
 
-@media (min-width: 1199px) {
-        .dropdown-domains {
-                padding-top: 10px !important;
-                padding-bottom: 10px !important;
-                line-height: 20px !important;
-        }
+:host ::ng-deep .p-dropdown-filter-container {
+        padding: 7px 2px;
+}
 
-        .dropdown-menu {
-                max-height: 500px;
-                overflow-y: auto;
-        }
-        .search{
-                margin:5px 5px 10px 5px;
-        }
+.long-list ::ng-deep .p-dropdown-items-wrapper {
+        min-height: 300px;
 }

src/app/shared/common/domainfilter/domainfilter.component.html

@@ -1,13 +1,11 @@
-<span [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" class="dropdown dropdown-domains">
-		<a class="dropdown-toggle" data-close-others="true" data-toggle="dropdown" href="#">
-			<span style="color: gray;">{{ "FILTER.DOMAIN" | translate }}: {{ getCurrent() }}<span class="caret"></span></span>
-		</a>
-		<ul class="dropdown-menu">
-			<input class="search" type="text" [(ngModel)]="searchTerm" placeholder="Search by name" (input)="updateFilter()">
-			<li *ngFor="let domain of filteredDomains | async; let last = isLast" [ngClass]="{'active': getCurrent() == domain?.name}">
-				<a (click)="changeDomain(domain?.id, domain?.name)">
-					<span>{{domain?.name}}</span>
-				</a>
-			</li>
-		</ul>
-</span>
+<div class="mt-3 mr-3">
+    <p-dropdown *ngIf="domains" [options]="domains" [filter]="domains.length > 10" filterBy="name" [placeholder]="getCurrent()"
+                 [style]="{'width': '100% '}" [ngClass]="{'long-list': isItemListLong()}" (onChange)="changeDomain($event)">
+        <ng-template let-selected pTemplate="selectedItem">
+            {{ 'FILTER.DOMAIN' | translate }} : {{ selected.name }}
+        </ng-template>
+        <ng-template let-option pTemplate="option">
+            {{ option.name }}
+        </ng-template>
+    </p-dropdown>
+</div>

src/app/shared/common/domainfilter/domainfilter.component.ts

@@ -8,6 +8,7 @@ import {BehaviorSubject, interval, Observable, of, Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {ProfileService} from '../../../service/profile.service';
 import {User} from '../../../model';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
     selector: 'nmaas-domain-filter',
@@ -20,7 +21,9 @@ export class DomainFilterComponent implements OnInit {
 
     public domainName: string;
 
-    public domains: Observable<Domain[]>;
+    public domainsObs: Observable<Domain[]>;
+
+    public domains: Domain[];
 
     public refresh: Subscription;
 
@@ -30,12 +33,12 @@ export class DomainFilterComponent implements OnInit {
 
     private filteredDomainsSub = new BehaviorSubject<any[]>([]);
 
-    public filteredDomains = this.filteredDomainsSub.asObservable();
 
     constructor(private authService: AuthService,
                 private domainService: DomainService,
                 private userData: UserDataService,
-                private profileService: ProfileService) {
+                private profileService: ProfileService,
+                private translateService: TranslateService) {
     }
 
     ngOnInit() {
@@ -52,10 +55,11 @@ export class DomainFilterComponent implements OnInit {
                 this.profile = profile;
 
                 this.updateDomains();
-                this.domains.subscribe(domain => {
+                this.domainsObs.subscribe(domain => {
                     this.domainName = domain[0].name;
                     this.userData.selectDomainId(domain[0].id)
                     this.filteredDomainsSub.next(domain);
+                    this.domains = domain
                 });
             }
         );
@@ -64,20 +68,20 @@ export class DomainFilterComponent implements OnInit {
     }
 
     public updateFilter() {
-        this.domains.subscribe(data => {
+        this.domainsObs.subscribe(data => {
             const filtered = data.filter(obj => obj.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
             this.filteredDomainsSub.next(filtered);
         });
     }
 
     public updateDomains(): void {
         if (this.authService.hasRole('ROLE_SYSTEM_ADMIN')) {
-            this.domains = this.domainService.getAll();
+            this.domainsObs = this.domainService.getAll();
         } else {
-            this.domains = this.domainService.getMyDomains();
+            this.domainsObs = this.domainService.getMyDomains();
             const globalDomainId = this.domainService.getGlobalDomainId();
-            if (this.domains === undefined) {
-                this.domains = of([]);
+            if (this.domainsObs === undefined) {
+                this.domainsObs = of([]);
             }
             if (!this.authService.hasDomainRole(globalDomainId, 'ROLE_TOOL_MANAGER')
                 && !this.authService.hasDomainRole(globalDomainId, 'ROLE_OPERATOR')) {
@@ -89,7 +93,7 @@ export class DomainFilterComponent implements OnInit {
     }
 
     private filterOutNotActiveDomains(): void {
-        this.domains = this.domains.pipe(
+        this.domainsObs = this.domainsObs.pipe(
             map(
                 (domains) => domains.filter(domain => domain.active)
             )
@@ -98,7 +102,7 @@ export class DomainFilterComponent implements OnInit {
 
     private filterOutGlobalDomain(): void {
         const globalDomainId = this.domainService.getGlobalDomainId();
-        this.domains = this.domains.pipe(
+        this.domainsObs = this.domainsObs.pipe(
             map(
                 (domains) => domains.filter(domain => domain.id !== globalDomainId)
             )
@@ -107,7 +111,7 @@ export class DomainFilterComponent implements OnInit {
 
     private sortDomains(): void {
         const globalDomainId = this.domainService.getGlobalDomainId();
-        this.domains = this.domains.pipe(
+        this.domainsObs = this.domainsObs.pipe(
             map(
                 domains => {
                     const global = domains.find(domain => domain.id === globalDomainId);
@@ -129,15 +133,18 @@ export class DomainFilterComponent implements OnInit {
         )
     }
 
-    public changeDomain(domainId: number, domainName: string) {
-        console.log(`domainChange(${domainId})`);
-        this.domainId = domainId;
-        this.domainName = domainName;
-        this.userData.selectDomainId(Number(domainId));
+    public changeDomain(event: any) {
+        console.log(`domainChange(${event.value.id})`);
+        this.domainId = event.value.id;
+        this.domainName = event.value.name;
+        this.userData.selectDomainId(Number(event.value.id));
     }
 
     public getCurrent() {
-        return this.domainName;
+        return `${this.translateService.instant('FILTER.DOMAIN')} : ${this.domainName}`;
     }
 
+    isItemListLong() {
+        return this.domains.length > 10;
+    }
 }

src/app/shared/navbar/navbar.component.css

@@ -1,6 +1,5 @@
 @media (min-width: 1199px) {
   .drop-domain{
-    padding: 15px;
     line-height: 20px !important;
   }