diff --git a/src/frontend/app/search/filter-tool/filter-tool.component.html b/src/frontend/app/search/filter-tool/filter-tool.component.html index 969ca75521e45c24df62891bad73a2ac0c3641b2..99f706cd557680ede9ca38ea5accb76daf477359 100644 --- a/src/frontend/app/search/filter-tool/filter-tool.component.html +++ b/src/frontend/app/search/filter-tool/filter-tool.component.html @@ -7,8 +7,11 @@ <mat-selection-list #filterList *ngFor="let filterKey of filters | keyvalue" class="filter-list"> <div class="catGroupTitle">{{'lang.'+filterKey.key | translate}} ({{filters[filterKey.key].length}})</div> <mat-divider style="width: 80%;"></mat-divider> - <mat-list-option color="primary" class="catContent" *ngFor="let cat of filters[filterKey.key];let i=index" (click)="toggleFilter(filterKey.key,i)" [selected]="cat.selected" checkboxPosition="before" [disabled]="isLoadingResults"> - <span class="catLabel" [title]="cat.label">{{cat.id !== null ? cat.label : 'lang.undefined' | translate}}</span><span class="catBadge">{{cat.count}}</span> - </mat-list-option> + <ng-container *ngFor="let cat of filters[filterKey.key];let i=index"> + <mat-list-option color="primary" class="catContent" *ngIf="i <= 5 || showMore[filterKey.key]" (click)="toggleFilter(filterKey.key,i)" [selected]="cat.selected" checkboxPosition="before" [disabled]="isLoadingResults"> + <span class="catLabel" [title]="cat.label">{{cat.id !== null ? cat.label : 'lang.undefined' | translate}}</span><span class="catBadge">{{cat.count}}</span> + </mat-list-option> + </ng-container> + <button mat-button *ngIf="filters[filterKey.key].length > 5" style="width:100%;" color="primary" (click)="toggleDisplay(filterKey.key)">{{showMore[filterKey.key] ? ('lang.less' | translate) : ('lang.more' | translate) }}<mat-icon style="height:auto;" class="fas" [class.fa-chevron-down]="!showMore[filterKey.key]" [class.fa-chevron-up]="showMore[filterKey.key]"></mat-icon></button> </mat-selection-list> </mat-expansion-panel> diff --git a/src/frontend/app/search/filter-tool/filter-tool.component.ts b/src/frontend/app/search/filter-tool/filter-tool.component.ts index cb5ff7f3d4ba3213a979259b735941b728630958..0f3f02dc4f88b242458705c39f5664856b6d902f 100644 --- a/src/frontend/app/search/filter-tool/filter-tool.component.ts +++ b/src/frontend/app/search/filter-tool/filter-tool.component.ts @@ -14,6 +14,8 @@ export class FilterToolComponent implements OnInit { @Input() filters: any = {}; @Input() isLoadingResults: boolean = false; + showMore = {}; + @Output() filterChanged = new EventEmitter<any>(); constructor( @@ -33,4 +35,8 @@ export class FilterToolComponent implements OnInit { this.filters[key][index].selected = !this.filters[key][index].selected; this.filterChanged.emit(); } + + toggleDisplay(key: string) { + this.showMore[key] = !this.showMore[key]; + } }