From 3a5f90b8c53b48ba982cd2c74b1cfdc7ee35f3c2 Mon Sep 17 00:00:00 2001 From: William Date: Wed, 1 Dec 2021 22:23:02 -0500 Subject: [PATCH] Low quantity filter --- .../pages/inventory/inventory.component.html | 14 +++-- .../pages/inventory/inventory.component.ts | 57 +++++++++---------- src/app/modules/recipes/list.html | 2 +- .../shared/components/tables/tables.ts | 7 ++- 4 files changed, 43 insertions(+), 37 deletions(-) diff --git a/src/app/modules/material/pages/inventory/inventory.component.html b/src/app/modules/material/pages/inventory/inventory.component.html index aef4f3a..8527e81 100644 --- a/src/app/modules/material/pages/inventory/inventory.component.html +++ b/src/app/modules/material/pages/inventory/inventory.component.html @@ -11,6 +11,10 @@ [control]="materialTypeFilterControl" [entries]="materialTypesEntries$"> + + @@ -41,15 +45,17 @@ - Code + Code {{material.name}} - Type de produit + Type de produit {{material.materialType.name}} @@ -82,7 +88,7 @@ - + { return materialTypes.map(materialType => new CreInputEntry(materialType.id, materialType.name)) })) - dataSource: MatTableDataSource 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 { - this.dataSource = new MatTableDataSource(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 { diff --git a/src/app/modules/recipes/list.html b/src/app/modules/recipes/list.html index 81d7de1..37ed007 100644 --- a/src/app/modules/recipes/list.html +++ b/src/app/modules/recipes/list.html @@ -41,7 +41,7 @@ [columns]="columns" [data]="recipes" [filter]="searchQuery" - [filterFn]="recipeFilterPredicate"> + [filterPredicate]="recipeFilterPredicate"> Nom diff --git a/src/app/modules/shared/components/tables/tables.ts b/src/app/modules/shared/components/tables/tables.ts index 6d4d7ca..a326556 100644 --- a/src/app/modules/shared/components/tables/tables.ts +++ b/src/app/modules/shared/components/tables/tables.ts @@ -62,7 +62,8 @@ export class CreTable 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 implements AfterContentInit { this.dataSource = new MatTableDataSource(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) } }