Skip to content
Snippets Groups Projects
Commit 2adec896 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #8956 add filter loader

parent 6ebcda41
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/frontend/app/list/filters/filters-list.component.html
+ 103
− 95
View file @ 2adec896
<mat-nav-list disableRipple="true" class="filterList"> <mat-nav-list disableRipple="true" class="filterList">
<h3 mat-subheader>{{lang.filterBy}}</h3> <h3 mat-subheader>{{lang.filterBy}}</h3>
<mat-expansion-panel #referencePan (opened)="setFocus(reference)"> <div *ngIf="loading" style="display:flex;height:100%;">
<mat-expansion-panel-header> <mat-spinner style="margin:auto;"></mat-spinner>
<mat-panel-title> </div>
{{lang.chronoNumber}} <ng-container *ngIf="!loading">
</mat-panel-title> <mat-expansion-panel #referencePan (opened)="setFocus(reference)">
<mat-panel-description> <mat-expansion-panel-header>
</mat-panel-description> <mat-panel-title>
</mat-expansion-panel-header> {{lang.chronoNumber}}
<mat-form-field appearance="outline"> </mat-panel-title>
<input #reference matInput [(ngModel)]="this.listProperties.reference" (keyup.enter)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}"> <mat-panel-description>
<button mat-button *ngIf="this.listProperties.reference" matSuffix mat-icon-button aria-label="Clear" </mat-panel-description>
(click)="this.listProperties.reference='';this.triggerEvent.emit();"> </mat-expansion-panel-header>
<mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon> <mat-form-field appearance="outline">
</button> <input #reference matInput [(ngModel)]="this.listProperties.reference" (keyup.enter)="this.triggerEvent.emit();"
</mat-form-field> placeholder="3 {{lang.passwordminLength}}">
</mat-expansion-panel> <button mat-button *ngIf="this.listProperties.reference" matSuffix mat-icon-button aria-label="Clear"
<mat-expansion-panel #subjectPan (opened)="setFocus(subject)"> (click)="this.listProperties.reference='';this.triggerEvent.emit();">
<mat-expansion-panel-header> <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
<mat-panel-title> </button>
{{lang.subject}} </mat-form-field>
</mat-panel-title> </mat-expansion-panel>
<mat-panel-description> <mat-expansion-panel #subjectPan (opened)="setFocus(subject)">
</mat-panel-description> <mat-expansion-panel-header>
</mat-expansion-panel-header> <mat-panel-title>
<mat-form-field appearance="outline"> {{lang.subject}}
<input #subject matInput [(ngModel)]="this.listProperties.subject" (keyup.enter)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}"> </mat-panel-title>
<button mat-button *ngIf="this.listProperties.subject" matSuffix mat-icon-button aria-label="Clear" (click)="this.listProperties.subject='';this.triggerEvent.emit();"> <mat-panel-description>
<mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon> </mat-panel-description>
</button> </mat-expansion-panel-header>
</mat-form-field> <mat-form-field appearance="outline">
</mat-expansion-panel> <input #subject matInput [(ngModel)]="this.listProperties.subject" (keyup.enter)="this.triggerEvent.emit();"
<mat-expansion-panel #categoriesPan> placeholder="3 {{lang.passwordminLength}}">
<mat-expansion-panel-header> <button mat-button *ngIf="this.listProperties.subject" matSuffix mat-icon-button aria-label="Clear"
<mat-panel-title> (click)="this.listProperties.subject='';this.triggerEvent.emit();">
{{lang.categories}} <mat-icon color="primary" fontSet="fas" fontIcon="fa-times"></mat-icon>
</mat-panel-title> </button>
<mat-panel-description> </mat-form-field>
</mat-panel-description> </mat-expansion-panel>
</mat-expansion-panel-header> <mat-expansion-panel #categoriesPan>
<mat-selection-list #categories (selectionChange)="updateFilters(categories, 'categories')"> <mat-expansion-panel-header>
<mat-list-option checkboxPosition="before" color="primary" [value]="category.id" *ngFor="let category of categoriesList" <mat-panel-title>
[selected]="category.selected"> {{lang.categories}}
{{category.label}} </mat-panel-title>
</mat-list-option> <mat-panel-description>
</mat-selection-list> </mat-panel-description>
</mat-expansion-panel> </mat-expansion-panel-header>
<mat-expansion-panel #prioritiesPan> <mat-selection-list #categories (selectionChange)="updateFilters(categories, 'categories')">
<mat-expansion-panel-header> <mat-list-option checkboxPosition="before" color="primary" [value]="category.id" *ngFor="let category of categoriesList"
<mat-panel-title> [selected]="category.selected">
{{lang.prioritiesAlt}} {{category.label}}
</mat-panel-title> </mat-list-option>
<mat-panel-description> </mat-selection-list>
</mat-panel-description> </mat-expansion-panel>
</mat-expansion-panel-header> <mat-expansion-panel #prioritiesPan>
<mat-selection-list #priorities (selectionChange)="updateFilters(priorities, 'priorities')"> <mat-expansion-panel-header>
<mat-list-option checkboxPosition="before" color="primary" [value]="priority.id" *ngFor="let priority of prioritiesList" <mat-panel-title>
[selected]="priority.selected"> {{lang.prioritiesAlt}}
{{priority.label}} </mat-panel-title>
</mat-list-option> <mat-panel-description>
</mat-selection-list> </mat-panel-description>
</mat-expansion-panel> </mat-expansion-panel-header>
<mat-expansion-panel #statusesPan> <mat-selection-list #priorities (selectionChange)="updateFilters(priorities, 'priorities')">
<mat-expansion-panel-header> <mat-list-option checkboxPosition="before" color="primary" [value]="priority.id" *ngFor="let priority of prioritiesList"
<mat-panel-title> [selected]="priority.selected">
{{lang.statuses}} {{priority.label}}
</mat-panel-title> </mat-list-option>
<mat-panel-description> </mat-selection-list>
</mat-panel-description> </mat-expansion-panel>
</mat-expansion-panel-header> <mat-expansion-panel #statusesPan (opened)="setFocus(listFilter)">
<mat-form-field floatLabel="never"> <mat-expansion-panel-header>
<input matInput placeholder="Filtrer" #listFilter> <mat-panel-title>
</mat-form-field> {{lang.statuses}}
<mat-selection-list #statuses (selectionChange)="updateFilters(statuses, 'statuses')"> </mat-panel-title>
<mat-list-option checkboxPosition="before" color="primary" [value]="status.id" *ngFor="let status of statusesList | filterList:listFilter.value:'label_status'" <mat-panel-description>
[selected]="status.selected"> </mat-panel-description>
{{status.label_status}} </mat-expansion-panel-header>
</mat-list-option> <mat-form-field floatLabel="never">
</mat-selection-list> <input matInput placeholder="Filtrer" #listFilter>
</mat-expansion-panel> </mat-form-field>
<mat-expansion-panel #entitiesPan> <mat-selection-list #statuses (selectionChange)="updateFilters(statuses, 'statuses')">
<mat-expansion-panel-header> <mat-list-option checkboxPosition="before" color="primary" [value]="status.id" *ngFor="let status of statusesList | filterList:listFilter.value:'label_status'"
<mat-panel-title> [selected]="status.selected">
{{lang.entities}} {{status.label_status}}
</mat-panel-title> </mat-list-option>
<mat-panel-description> </mat-selection-list>
</mat-panel-description> </mat-expansion-panel>
</mat-expansion-panel-header> <mat-expansion-panel #entitiesPan>
Coming soon... <mat-expansion-panel-header>
<mat-selection-list #entities (selectionChange)="updateFilters(entities, 'entities')"> <mat-panel-title>
<mat-list-option checkboxPosition="before" color="primary" [value]="entity.id" *ngFor="let entity of entitiesList" {{lang.entities}}
[selected]="entity.selected"> </mat-panel-title>
{{entity.label}} <mat-panel-description>
</mat-list-option> </mat-panel-description>
</mat-selection-list> </mat-expansion-panel-header>
</mat-expansion-panel> 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> </mat-nav-list>
\ No newline at end of file
src/frontend/app/list/filters/filters-list.component.ts
+ 30
− 29
View file @ 2adec896
...@@ -7,8 +7,6 @@ import { MatSelectionList, MatExpansionPanel, MatInput } from '@angular/material ...@@ -7,8 +7,6 @@ import { MatSelectionList, MatExpansionPanel, MatInput } from '@angular/material
declare function $j(selector: any): any; declare function $j(selector: any): any;
declare var angularGlobals: any;
@Component({ @Component({
selector: 'app-filters-list', selector: 'app-filters-list',
templateUrl: 'filters-list.component.html', templateUrl: 'filters-list.component.html',
...@@ -18,13 +16,14 @@ declare var angularGlobals: any; ...@@ -18,13 +16,14 @@ declare var angularGlobals: any;
}) })
export class FiltersListComponent implements OnInit { export class FiltersListComponent implements OnInit {
coreUrl: string;
lang: any = LANG; lang: any = LANG;
prioritiesList: any[] = []; prioritiesList: any[] = [];
categoriesList: any[] = []; categoriesList: any[] = [];
entitiesList: any[] = []; entitiesList: any[] = [];
statusesList: any[] = []; statusesList: any[] = [];
loading: boolean = true;
@Input('listProperties') listProperties: any; @Input('listProperties') listProperties: any;
@ViewChild('categoriesPan') categoriesPan: MatExpansionPanel; @ViewChild('categoriesPan') categoriesPan: MatExpansionPanel;
...@@ -58,37 +57,39 @@ export class FiltersListComponent implements OnInit { ...@@ -58,37 +57,39 @@ export class FiltersListComponent implements OnInit {
} }
}); });
}); });
});
this.http.get("../../rest/categories") this.http.get("../../rest/categories")
.subscribe((data: any) => { .subscribe((data: any) => {
this.categoriesList = data.categories; this.categoriesList = data.categories;
this.categoriesList.forEach(element => { this.categoriesList.forEach(element => {
element.selected = false; element.selected = false;
this.listProperties.categories.forEach((listPropertyCat: any) => { this.listProperties.categories.forEach((listPropertyCat: any) => {
if (element.id === listPropertyCat.id) { if (element.id === listPropertyCat.id) {
element.selected = true; element.selected = true;
this.categoriesPan.open(); this.categoriesPan.open();
} }
}); });
}); });
});
this.http.get("../../rest/statuses") this.http.get("../../rest/statuses")
.subscribe((data: any) => { .subscribe((data: any) => {
console.log(data); console.log(data);
this.statusesList = data.statuses; this.statusesList = data.statuses;
this.statusesList.forEach(element => { this.statusesList.forEach(element => {
element.selected = false; element.selected = false;
this.listProperties.statuses.forEach((listPropertyStatus: any) => { this.listProperties.statuses.forEach((listPropertyStatus: any) => {
if (element.id === listPropertyStatus.id) { if (element.id === listPropertyStatus.id) {
element.selected = true; element.selected = true;
this.statusesPan.open(); this.statusesPan.open();
} }
});
});
this.loading = false;
});
}); });
});
}); });
} }
updateFilters(e: MatSelectionList, id: string) { updateFilters(e: MatSelectionList, id: string) {
this.listProperties[id] = []; this.listProperties[id] = [];
e.selectedOptions.selected.forEach(element => { e.selectedOptions.selected.forEach(element => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment