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">
<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
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
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 => {
......
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