Low quantity filter

src/app/modules/material/pages/inventory/inventory.component.html

@@ -11,6 +11,10 @@
       [control]="materialTypeFilterControl"
       [entries]="materialTypesEntries$">
     </cre-select>
+    <cre-checkbox-input
+      label="Basse quantité"
+      [control]="hideLowQuantityControl">
+    </cre-checkbox-input>
   </div>
 
   <!-- Right -->
@@ -41,15 +45,17 @@
 <cre-table
   *ngIf="materials.length > 0"
   class="mx-auto"
-  [data]="dataSource"
+  [filterPredicate]="materialFilterPredicate"
+  [filter]="filter"
+  [data]="materials"
   [columns]="columns">
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef>Code</th> <!-- mat-sort-header -->
+    <th mat-header-cell *matHeaderCellDef>Code</th>
     <td mat-cell *matCellDef="let material">{{material.name}}</td>
   </ng-container>
 
   <ng-container matColumnDef="materialType">
-    <th mat-header-cell *matHeaderCellDef>Type de produit</th> <!-- mat-sort-header -->
+    <th mat-header-cell *matHeaderCellDef>Type de produit</th>
     <td mat-cell *matCellDef="let material">{{material.materialType.name}}</td>
   </ng-container>
 
@@ -82,7 +88,7 @@
   </ng-container>
 
   <ng-container matColumnDef="lowQuantityIcon">
-    <th mat-header-cell *matHeaderCellDef></th> <!-- mat-sort-header -->
+    <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let material" [class.disabled]="!isLowQuantity(material)">
       <mat-icon
         svgIcon="format-color-fill"

src/app/modules/material/pages/inventory/inventory.component.ts

@@ -8,7 +8,6 @@ import {Material, openSimdut} from '../../../shared/model/material.model'
 import {AccountService} from '../../../accounts/services/account.service'
 import {convertQuantity, UNIT_MILLILITER} from '../../../shared/units'
 import {MatSort} from '@angular/material/sort'
-import {MatTableDataSource} from '@angular/material/table'
 import {MaterialTypeService} from '../../../material-type/service/material-type.service'
 import {InventoryService} from '../../service/inventory.service'
 import {AppState} from '../../../shared/app-state'
@@ -28,7 +27,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
   materialTypesEntries$ = this.materialTypeService.all.pipe(map(materialTypes => {
     return materialTypes.map(materialType => new CreInputEntry(materialType.id, materialType.name))
   }))
-  dataSource: MatTableDataSource<Material>
 
   columns = ['name', 'materialType', 'quantity', 'addQuantity', 'lowQuantityIcon', 'simdutIcon', 'editButton', 'openSimdutButton']
   hoveredMaterial: Material | null
@@ -37,11 +35,31 @@ export class InventoryComponent extends ErrorHandlingComponent {
   units = UNIT_MILLILITER
   lowQuantityThreshold = 100  // TEMPORARY will be in the application settings
 
-  materialTypeFilterControl = new FormControl()
-  materialNameFilterControl = new FormControl()
+  materialFilterPredicate = (material: Material, filter: string): boolean => {
+    const [materialTypeFilter, materialNameFilter, hideLowQuantity, lowQuantityThreshold] = filter.split('􀃿')
+    const materialTypeId = parseInt(materialTypeFilter)
+    const lowQuantityThresholdInt = parseInt(lowQuantityThreshold)
+    const matchesMaterialType = materialTypeId === 1 || materialTypeId == material.materialType.id
+    const matchesMaterialName = !materialNameFilter || material.name.toLowerCase().includes(materialNameFilter.toLowerCase())
+    const matchesLowQuantity = material.inventoryQuantity > lowQuantityThresholdInt
+    const matchesFilter = matchesMaterialType && matchesMaterialName
+
+    if (!hideLowQuantity) {
+      // return matchesFilter || false
+      return false
+    } else {
+      // return material.inventoryQuantity > lowQuantityThresholdInt
+      return true
+    }
+  }
 
   private materialTypeFilter = 1
   private materialNameFilter = ''
+  private hideLowQuantity = false
+
+  materialTypeFilterControl = new FormControl(this.materialTypeFilter)
+  materialNameFilterControl = new FormControl(this.materialNameFilter)
+  hideLowQuantityControl = new FormControl(this.hideLowQuantity)
 
   constructor(
     private materialService: MaterialService,
@@ -62,10 +80,7 @@ export class InventoryComponent extends ErrorHandlingComponent {
 
     this.subscribe(
       this.materialService.allNotMixType,
-      materials => {
-        this.materials = materials
-        this.dataSource = this.setupDataSource()
-      },
+      materials => this.materials = materials,
       true,
       1
     )
@@ -79,27 +94,11 @@ export class InventoryComponent extends ErrorHandlingComponent {
       this.materialNameFilterControl.valueChanges,
       filter => this.materialNameFilter = filter
     )
-  }
 
-  setupDataSource(): MatTableDataSource<Material> {
-    this.dataSource = new MatTableDataSource<Material>(this.materials)
-    this.dataSource.sortingDataAccessor = (material, header) => {
-      switch (header) {
-        case 'materialType':
-          return material[header].name
-        case 'lowQuantityIcon':
-          return this.isLowQuantity(material)
-        default:
-          return material[header]
-      }
-    }
-    this.dataSource.filterPredicate = (material, filter) => {
-      return (!this.materialTypeFilter || this.materialTypeFilter === 1 || material.materialType.id === this.materialTypeFilter) &&
-        (!this.materialNameFilter || material.name.toLowerCase().includes(this.materialNameFilter.toLowerCase()))
-    }
-
-    this.dataSource.sort = this.sort
-    return this.dataSource
+    this.subscribe(
+      this.hideLowQuantityControl.valueChanges,
+      filter => this.hideLowQuantity = filter
+    )
   }
 
   isLowQuantity(material: Material) {
@@ -135,7 +134,7 @@ export class InventoryComponent extends ErrorHandlingComponent {
 
   get filter(): string {
     // Uses private UTF-8 char to separate the two fields, change if a better method is found
-    return `${this.materialTypeFilter}􀃿${this.materialNameFilter}`
+    return `${this.materialTypeFilter}􀃿${this.materialNameFilter}􀃿${this.hideLowQuantity}􀃿${this.lowQuantityThreshold}`
   }
 
   get canEditMaterial(): boolean {

src/app/modules/recipes/list.html

@@ -41,7 +41,7 @@
     [columns]="columns"
     [data]="recipes"
     [filter]="searchQuery"
-    [filterFn]="recipeFilterPredicate">
+    [filterPredicate]="recipeFilterPredicate">
     <!-- Recipe's info -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef>Nom</th>

src/app/modules/shared/components/tables/tables.ts

@@ -62,7 +62,8 @@ export class CreTable<T> implements AfterContentInit {
 
   @Input() columns: string[]
   @Input() interactive = true
-  @Input() filterFn: (t: T, string: string) => boolean = () => true
+  @Input() filterPredicate: (t: T, filter: string) => boolean = () => true
+  @Input() sortingDataAccessor: (t: T, header: string) => string | number
 
   @Input() set filter(filter: string) {
     this.dataSource.filter = filter
@@ -89,8 +90,8 @@ export class CreTable<T> implements AfterContentInit {
       this.dataSource = new MatTableDataSource<T>(data)
     }
 
-    if (this.filterFn) {
-      this.dataSource.filterPredicate = (t, filter) => this.filterFn(t, filter)
+    if (this.filterPredicate) {
+      this.dataSource.filterPredicate = (t, filter) => this.filterPredicate(t, filter)
     }
   }