diff --git a/src/app/shared/common/domainfilter/domainfilter.component.css b/src/app/shared/common/domainfilter/domainfilter.component.css index 510186e..d683164 100644 --- a/src/app/shared/common/domainfilter/domainfilter.component.css +++ b/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; } diff --git a/src/app/shared/common/domainfilter/domainfilter.component.html b/src/app/shared/common/domainfilter/domainfilter.component.html index c4c673f..a1885f5 100644 --- a/src/app/shared/common/domainfilter/domainfilter.component.html +++ b/src/app/shared/common/domainfilter/domainfilter.component.html @@ -1,13 +1,11 @@ - - - {{ "FILTER.DOMAIN" | translate }}: {{ getCurrent() }} - - - +
+ + + {{ 'FILTER.DOMAIN' | translate }} : {{ selected.name }} + + + {{ option.name }} + + +
diff --git a/src/app/shared/common/domainfilter/domainfilter.component.ts b/src/app/shared/common/domainfilter/domainfilter.component.ts index f71a06a..d4c215e 100644 --- a/src/app/shared/common/domainfilter/domainfilter.component.ts +++ b/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; + public domainsObs: Observable; + + public domains: Domain[]; public refresh: Subscription; @@ -30,12 +33,12 @@ export class DomainFilterComponent implements OnInit { private filteredDomainsSub = new BehaviorSubject([]); - 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,7 +68,7 @@ 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); }); @@ -72,12 +76,12 @@ export class DomainFilterComponent implements OnInit { 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; + } } diff --git a/src/app/shared/navbar/navbar.component.css b/src/app/shared/navbar/navbar.component.css index d131fe5..416ef89 100644 --- a/src/app/shared/navbar/navbar.component.css +++ b/src/app/shared/navbar/navbar.component.css @@ -1,6 +1,5 @@ @media (min-width: 1199px) { .drop-domain{ - padding: 15px; line-height: 20px !important; }