From 2adec896c99a64b48aebd82dd42ebe92606e8d0c Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Fri, 21 Dec 2018 11:17:19 +0100
Subject: [PATCH] FEAT #8956 add filter loader
---
.../list/filters/filters-list.component.html | 198 +++++++++---------
.../list/filters/filters-list.component.ts | 59 +++---
2 files changed, 133 insertions(+), 124 deletions(-)
diff --git a/src/frontend/app/list/filters/filters-list.component.html b/src/frontend/app/list/filters/filters-list.component.html
index 401e2570f99..738bf6d2a26 100644
--- a/src/frontend/app/list/filters/filters-list.component.html
+++ b/src/frontend/app/list/filters/filters-list.component.html
@@ -1,98 +1,106 @@
<mat-nav-list disableRipple="true" class="filterList">
<h3 mat-subheader>{{lang.filterBy}}</h3>
- <mat-expansion-panel #referencePan (opened)="setFocus(reference)">
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{lang.chronoNumber}}
- </mat-panel-title>
- <mat-panel-description>
- </mat-panel-description>
- </mat-expansion-panel-header>
- <mat-form-field appearance="outline">
- <input #reference matInput [(ngModel)]="this.listProperties.reference" (keyup.enter)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}">
- <button mat-button *ngIf="this.listProperties.reference" matSuffix mat-icon-button aria-label="Clear"
- (click)="this.listProperties.reference='';this.triggerEvent.emit();">
- <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
- </button>
- </mat-form-field>
- </mat-expansion-panel>
- <mat-expansion-panel #subjectPan (opened)="setFocus(subject)">
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{lang.subject}}
- </mat-panel-title>
- <mat-panel-description>
- </mat-panel-description>
- </mat-expansion-panel-header>
- <mat-form-field appearance="outline">
- <input #subject matInput [(ngModel)]="this.listProperties.subject" (keyup.enter)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}">
- <button mat-button *ngIf="this.listProperties.subject" matSuffix mat-icon-button aria-label="Clear" (click)="this.listProperties.subject='';this.triggerEvent.emit();">
- <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
- </button>
- </mat-form-field>
- </mat-expansion-panel>
- <mat-expansion-panel #categoriesPan>
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{lang.categories}}
- </mat-panel-title>
- <mat-panel-description>
- </mat-panel-description>
- </mat-expansion-panel-header>
- <mat-selection-list #categories (selectionChange)="updateFilters(categories, 'categories')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="category.id" *ngFor="let category of categoriesList"
- [selected]="category.selected">
- {{category.label}}
- </mat-list-option>
- </mat-selection-list>
- </mat-expansion-panel>
- <mat-expansion-panel #prioritiesPan>
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{lang.prioritiesAlt}}
- </mat-panel-title>
- <mat-panel-description>
- </mat-panel-description>
- </mat-expansion-panel-header>
- <mat-selection-list #priorities (selectionChange)="updateFilters(priorities, 'priorities')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="priority.id" *ngFor="let priority of prioritiesList"
- [selected]="priority.selected">
- {{priority.label}}
- </mat-list-option>
- </mat-selection-list>
- </mat-expansion-panel>
- <mat-expansion-panel #statusesPan>
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{lang.statuses}}
- </mat-panel-title>
- <mat-panel-description>
- </mat-panel-description>
- </mat-expansion-panel-header>
- <mat-form-field floatLabel="never">
- <input matInput placeholder="Filtrer" #listFilter>
- </mat-form-field>
- <mat-selection-list #statuses (selectionChange)="updateFilters(statuses, 'statuses')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="status.id" *ngFor="let status of statusesList | filterList:listFilter.value:'label_status'"
- [selected]="status.selected">
- {{status.label_status}}
- </mat-list-option>
- </mat-selection-list>
- </mat-expansion-panel>
- <mat-expansion-panel #entitiesPan>
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{lang.entities}}
- </mat-panel-title>
- <mat-panel-description>
- </mat-panel-description>
- </mat-expansion-panel-header>
- Coming soon...
- <mat-selection-list #entities (selectionChange)="updateFilters(entities, 'entities')">
- <mat-list-option checkboxPosition="before" color="primary" [value]="entity.id" *ngFor="let entity of entitiesList"
- [selected]="entity.selected">
- {{entity.label}}
- </mat-list-option>
- </mat-selection-list>
- </mat-expansion-panel>
+ <div *ngIf="loading" style="display:flex;height:100%;">
+ <mat-spinner style="margin:auto;"></mat-spinner>
+ </div>
+ <ng-container *ngIf="!loading">
+ <mat-expansion-panel #referencePan (opened)="setFocus(reference)">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.chronoNumber}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-form-field appearance="outline">
+ <input #reference matInput [(ngModel)]="this.listProperties.reference" (keyup.enter)="this.triggerEvent.emit();"
+ placeholder="3 {{lang.passwordminLength}}">
+ <button mat-button *ngIf="this.listProperties.reference" matSuffix mat-icon-button aria-label="Clear"
+ (click)="this.listProperties.reference='';this.triggerEvent.emit();">
+ <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
+ </button>
+ </mat-form-field>
+ </mat-expansion-panel>
+ <mat-expansion-panel #subjectPan (opened)="setFocus(subject)">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.subject}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-form-field appearance="outline">
+ <input #subject matInput [(ngModel)]="this.listProperties.subject" (keyup.enter)="this.triggerEvent.emit();"
+ placeholder="3 {{lang.passwordminLength}}">
+ <button mat-button *ngIf="this.listProperties.subject" matSuffix mat-icon-button aria-label="Clear"
+ (click)="this.listProperties.subject='';this.triggerEvent.emit();">
+ <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
+ </button>
+ </mat-form-field>
+ </mat-expansion-panel>
+ <mat-expansion-panel #categoriesPan>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.categories}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-selection-list #categories (selectionChange)="updateFilters(categories, 'categories')">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="category.id" *ngFor="let category of categoriesList"
+ [selected]="category.selected">
+ {{category.label}}
+ </mat-list-option>
+ </mat-selection-list>
+ </mat-expansion-panel>
+ <mat-expansion-panel #prioritiesPan>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.prioritiesAlt}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-selection-list #priorities (selectionChange)="updateFilters(priorities, 'priorities')">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="priority.id" *ngFor="let priority of prioritiesList"
+ [selected]="priority.selected">
+ {{priority.label}}
+ </mat-list-option>
+ </mat-selection-list>
+ </mat-expansion-panel>
+ <mat-expansion-panel #statusesPan (opened)="setFocus(listFilter)">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.statuses}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-form-field floatLabel="never">
+ <input matInput placeholder="Filtrer" #listFilter>
+ </mat-form-field>
+ <mat-selection-list #statuses (selectionChange)="updateFilters(statuses, 'statuses')">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="status.id" *ngFor="let status of statusesList | filterList:listFilter.value:'label_status'"
+ [selected]="status.selected">
+ {{status.label_status}}
+ </mat-list-option>
+ </mat-selection-list>
+ </mat-expansion-panel>
+ <mat-expansion-panel #entitiesPan>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{lang.entities}}
+ </mat-panel-title>
+ <mat-panel-description>
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ Coming soon...
+ <mat-selection-list #entities (selectionChange)="updateFilters(entities, 'entities')">
+ <mat-list-option checkboxPosition="before" color="primary" [value]="entity.id" *ngFor="let entity of entitiesList"
+ [selected]="entity.selected">
+ {{entity.label}}
+ </mat-list-option>
+ </mat-selection-list>
+ </mat-expansion-panel>
+ </ng-container>
</mat-nav-list>
\ No newline at end of file
diff --git a/src/frontend/app/list/filters/filters-list.component.ts b/src/frontend/app/list/filters/filters-list.component.ts
index 2b9ded5eb45..56468984a2a 100644
--- a/src/frontend/app/list/filters/filters-list.component.ts
+++ b/src/frontend/app/list/filters/filters-list.component.ts
@@ -7,8 +7,6 @@ import { MatSelectionList, MatExpansionPanel, MatInput } from '@angular/material
declare function $j(selector: any): any;
-declare var angularGlobals: any;
-
@Component({
selector: 'app-filters-list',
templateUrl: 'filters-list.component.html',
@@ -18,13 +16,14 @@ declare var angularGlobals: any;
})
export class FiltersListComponent implements OnInit {
- coreUrl: string;
lang: any = LANG;
prioritiesList: any[] = [];
categoriesList: any[] = [];
entitiesList: any[] = [];
statusesList: any[] = [];
+ loading: boolean = true;
+
@Input('listProperties') listProperties: any;
@ViewChild('categoriesPan') categoriesPan: MatExpansionPanel;
@@ -58,37 +57,39 @@ export class FiltersListComponent implements OnInit {
}
});
});
- });
- this.http.get("../../rest/categories")
- .subscribe((data: any) => {
- this.categoriesList = data.categories;
- this.categoriesList.forEach(element => {
- element.selected = false;
- this.listProperties.categories.forEach((listPropertyCat: any) => {
- if (element.id === listPropertyCat.id) {
- element.selected = true;
- this.categoriesPan.open();
- }
- });
- });
- });
+ this.http.get("../../rest/categories")
+ .subscribe((data: any) => {
+ this.categoriesList = data.categories;
+ this.categoriesList.forEach(element => {
+ element.selected = false;
+ this.listProperties.categories.forEach((listPropertyCat: any) => {
+ if (element.id === listPropertyCat.id) {
+ element.selected = true;
+ this.categoriesPan.open();
+ }
+ });
+ });
- this.http.get("../../rest/statuses")
- .subscribe((data: any) => {
- console.log(data);
- this.statusesList = data.statuses;
- this.statusesList.forEach(element => {
- element.selected = false;
- this.listProperties.statuses.forEach((listPropertyStatus: any) => {
- if (element.id === listPropertyStatus.id) {
- element.selected = true;
- this.statusesPan.open();
- }
+ this.http.get("../../rest/statuses")
+ .subscribe((data: any) => {
+ console.log(data);
+ this.statusesList = data.statuses;
+ this.statusesList.forEach(element => {
+ element.selected = false;
+ this.listProperties.statuses.forEach((listPropertyStatus: any) => {
+ if (element.id === listPropertyStatus.id) {
+ element.selected = true;
+ this.statusesPan.open();
+ }
+ });
+ });
+ this.loading = false;
+ });
});
- });
});
}
+
updateFilters(e: MatSelectionList, id: string) {
this.listProperties[id] = [];
e.selectedOptions.selected.forEach(element => {
--
GitLab