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() }}
-
-
-
+
+
10" filterBy="name" [placeholder]="getCurrent()"
+ [style]="{'width': '100% '}" [ngClass]="{'long-list': isItemListLong()}" (onChange)="changeDomain($event)">
+
+ {{ '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;
}