From 54f7f824edeb42be0d7d39dbd24ea35304dcb38a Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Thu, 15 Oct 2020 11:52:50 +0200
Subject: [PATCH] FEAT #13271 TIME 1:30 add show more / less
---
.../app/search/filter-tool/filter-tool.component.html | 9 ++++++---
.../app/search/filter-tool/filter-tool.component.ts | 6 ++++++
2 files changed, 12 insertions(+), 3 deletions(-)
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 969ca75521e..99f706cd557 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 cb5ff7f3d4b..0f3f02dc4f8 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];
+ }
}
--
GitLab