develop #5
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue