FEAT #8956 add statuses filter

src/frontend/app/list/basket-list.component.html

@@ -56,6 +56,7 @@
                         </mat-button-toggle-group>
                         <div class="filterBadges">
                             <span class="label label-info" title="{{lang.currentFilters}}" *ngFor="let category of this.listProperties.categories" (click)="openFilter()">{{category.label}}</span>
+                            <span class="label label-info" title="{{lang.currentFilters}}" *ngFor="let status of this.listProperties.statuses" (click)="openFilter()">{{status.label}}</span>
                             <span class="label label-info" title="{{lang.currentFilters}}" (click)="openFilter()">{{this.listProperties.reference}}</span>
                             <span class="label label-info" title="{{lang.currentFilters}}" (click)="openFilter()">{{this.listProperties.subject}}</span>
                             <span class="label label-info" title="{{lang.currentFilters}}" *ngFor="let priority of this.listProperties.priorities" (click)="openFilter()">{{priority.label}}</span>

src/frontend/app/list/filters/filters-list.component.html

-<mat-nav-list disableRipple="true">
+<mat-nav-list disableRipple="true" class="filterList">
     <h3 mat-subheader>{{lang.filterBy}}</h3>
     <mat-expansion-panel #referencePan (opened)="setFocus(reference)">
         <mat-expansion-panel-header>
@@ -9,8 +9,7 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
         <mat-form-field appearance="outline">
-
-            <input #reference matInput [(ngModel)]="this.listProperties.reference" (keyup.enter)="this.triggerEvent.emit();" (blur)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}">
+            <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>
@@ -26,7 +25,7 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
         <mat-form-field appearance="outline">
-            <input #subject matInput [(ngModel)]="this.listProperties.subject" (keyup.enter)="this.triggerEvent.emit();" (blur)="this.triggerEvent.emit();" placeholder="3 {{lang.passwordminLength}}">
+            <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>
@@ -62,6 +61,24 @@
             </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>

src/frontend/app/list/filters/filters-list.component.scss

-.mat-form-field-suffix {
+.filterList>.mat-form-field-suffix {
     top : 10px !important;
-}
+} 
 
 .mat-expansion-panel-header-title {
     color: #F99830;

src/frontend/app/list/filters/filters-list.component.ts

@@ -23,6 +23,7 @@ export class FiltersListComponent implements OnInit {
     prioritiesList: any[] = [];
     categoriesList: any[] = [];
     entitiesList: any[] = [];
+    statusesList: any[] = [];
 
     @Input('listProperties') listProperties: any;
 
@@ -31,6 +32,7 @@ export class FiltersListComponent implements OnInit {
     @ViewChild('entitiesPan') entitiesPan: MatExpansionPanel;
     @ViewChild('subjectPan') subjectPan: MatExpansionPanel;
     @ViewChild('referencePan') referencePan: MatExpansionPanel;
+    @ViewChild('statusesPan') statusesPan: MatExpansionPanel;
 
     @Output() triggerEvent = new EventEmitter<string>();
 
@@ -71,12 +73,27 @@ export class FiltersListComponent implements OnInit {
                     });
                 });
             });
+
+        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();
+                        }
+                    });
+                });
+            });
     }
     updateFilters(e: MatSelectionList, id: string) {
         this.listProperties[id] = [];
         e.selectedOptions.selected.forEach(element => {
             this.listProperties[id].push({
-                'id' : element.value,
+                'id': element.value,
                 'label': element._text.nativeElement.innerText
             });
         });
@@ -86,6 +103,6 @@ export class FiltersListComponent implements OnInit {
     setFocus(elem: MatInput) {
         setTimeout(() => {
             elem.focus();
-        }, 200);  
+        }, 200);
     }
 }
\ No newline at end of file

src/frontend/plugins/filterList.pipe.ts

@@ -7,10 +7,15 @@ import { Pipe, PipeTransform } from "@angular/core";
 })
 export class FilterListPipe implements PipeTransform {
 
-	transform(value: any, args: string): any {
-
-		let filter = args.toLocaleLowerCase();
-		return filter ? value.filter((basket:any) => basket.basket_name.toLocaleLowerCase().indexOf(filter) != -1) : value;
+	transform(value: any, args: string, id: string): any {
+		if (id !== undefined) {
+			let filter = args.toLocaleLowerCase();
+			return filter ? value.filter((elem:any) => elem[id].toLocaleLowerCase().indexOf(filter) != -1) : value;
+		} else {
+			console.log('Init filter failed for values : ');
+			console.log(value);
+		}
+		
 	}
 }
 

src/frontend/service/filtersList.service.ts

@@ -12,7 +12,8 @@ interface listProperties {
     'delayed': boolean,
     'categories' : string[],
     'priorities' : string[],
-    'entities' : string[]
+    'entities' : string[],
+    'statuses' : string[]
 }
 
 @Injectable()
@@ -55,6 +56,7 @@ export class FiltersListService {
                 'categories' : [],
                 'priorities' : [],
                 'entities' : [],
+                'statuses' : [],
             };
             this.listsProperties.push(listProperties);
             this.saveListsProperties();
@@ -106,6 +108,14 @@ export class FiltersListService {
 
             filters += '&priorities='+prio.join(','); 
         }
+        if (this.listsProperties[this.listsPropertiesIndex].statuses.length > 0) {
+            let status: any[] = [];
+            this.listsProperties[this.listsPropertiesIndex].statuses.forEach((element: any) => {
+                status.push(element.id);
+            });
+
+            filters += '&statuses='+status.join(','); 
+        }
         
         return filters;
     }