develop #5
|
@ -9,6 +9,9 @@ import {EditComponent} from './pages/edit/edit.component';
|
|||
import {RecipesModule} from '../recipes/recipes.module'
|
||||
import {MatSortModule} from '@angular/material/sort'
|
||||
import {FormsModule} from '@angular/forms'
|
||||
import {CreTablesModule} from '../shared/components/tables/tables.module'
|
||||
import {CreInputsModule} from '../shared/components/inputs/inputs.module'
|
||||
import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
@ -19,7 +22,10 @@ import {FormsModule} from '@angular/forms'
|
|||
SharedModule,
|
||||
RecipesModule,
|
||||
MatSortModule,
|
||||
FormsModule
|
||||
FormsModule,
|
||||
CreTablesModule,
|
||||
CreInputsModule,
|
||||
CreButtonsModule
|
||||
]
|
||||
})
|
||||
export class MaterialModule {
|
||||
|
|
|
@ -1,47 +1,34 @@
|
|||
<div class="action-bar backward">
|
||||
<!-- Left -->
|
||||
<div class="d-flex flex-row">
|
||||
<mat-form-field class="mr-4">
|
||||
<mat-label>Recherche par code...</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
[(ngModel)]="materialNameFilter"
|
||||
(keyup)="filterDataSource()"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="materialTypes$ | async as materialTypes">
|
||||
<mat-label>Recherche par type de produit</mat-label>
|
||||
<mat-select
|
||||
[(value)]="materialTypeFilter"
|
||||
(valueChange)="filterDataSource()">
|
||||
<mat-option
|
||||
*ngFor="let materialType of materialTypes"
|
||||
[value]="materialType.id">
|
||||
{{materialType.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<cre-input
|
||||
class="mr-4"
|
||||
label="Recherche par code..."
|
||||
[control]="materialNameFilterControl">
|
||||
</cre-input>
|
||||
<cre-select
|
||||
label="Recherche par type de produit"
|
||||
[control]="materialTypeFilterControl"
|
||||
[entries]="materialTypesEntries$">
|
||||
</cre-select>
|
||||
</div>
|
||||
|
||||
<!-- Right -->
|
||||
<div class="ml-auto">
|
||||
<mat-form-field class="mr-4">
|
||||
<mat-label>Quantité faible</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="number"
|
||||
step="0.01"
|
||||
[(ngModel)]="lowQuantityThreshold"/>
|
||||
</mat-form-field>
|
||||
<cre-input
|
||||
class="mr-4"
|
||||
label="Quantité faible"
|
||||
type="number"
|
||||
step="0.01"
|
||||
[(value)]="lowQuantityThreshold">
|
||||
</cre-input>
|
||||
<cre-unit-selector [(unit)]="units"></cre-unit-selector>
|
||||
<button
|
||||
<cre-accent-button
|
||||
*ngIf="canEditMaterial"
|
||||
class="ml-3"
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
routerLink="/catalog/material/add">
|
||||
Ajouter
|
||||
</button>
|
||||
</cre-accent-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -51,19 +38,18 @@
|
|||
</p>
|
||||
</cre-warning-alert>
|
||||
|
||||
<table
|
||||
<cre-table
|
||||
*ngIf="materials.length > 0"
|
||||
mat-table
|
||||
matSort
|
||||
class="mx-auto"
|
||||
[dataSource]="dataSource">
|
||||
[data]="dataSource"
|
||||
[columns]="columns">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Code</th>
|
||||
<th mat-header-cell *matHeaderCellDef>Code</th> <!-- mat-sort-header -->
|
||||
<td mat-cell *matCellDef="let material">{{material.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="materialType">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type de produit</th>
|
||||
<th mat-header-cell *matHeaderCellDef>Type de produit</th> <!-- mat-sort-header -->
|
||||
<td mat-cell *matCellDef="let material">{{material.materialType.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
|
@ -75,9 +61,7 @@
|
|||
<ng-container matColumnDef="addQuantity">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell [class.disabled]="!canAddToInventory" *matCellDef="let material; let i = index">
|
||||
<div
|
||||
[hidden]="!((!hoveredMaterial && i === 0) || (hoveredMaterial === material) || (selectedMaterial && selectedMaterial === material))"
|
||||
class="input-group">
|
||||
<div [creInteractiveCell]="i" class="input-group">
|
||||
<input
|
||||
#addQuantityInput
|
||||
class="form-control w-50"
|
||||
|
@ -98,7 +82,7 @@
|
|||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="lowQuantityIcon">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
|
||||
<th mat-header-cell *matHeaderCellDef></th> <!-- mat-sort-header -->
|
||||
<td mat-cell *matCellDef="let material" [class.disabled]="!isLowQuantity(material)">
|
||||
<mat-icon
|
||||
svgIcon="format-color-fill"
|
||||
|
@ -122,37 +106,23 @@
|
|||
<ng-container matColumnDef="editButton">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let material; let i = index" [class.disabled]="!canEditMaterial">
|
||||
<ng-container *ngIf="(!hoveredMaterial && i === 0) || hoveredMaterial === material">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
routerLink="/catalog/material/edit/{{material.id}}">
|
||||
Modifier
|
||||
</button>
|
||||
</ng-container>
|
||||
<cre-accent-button
|
||||
[creInteractiveCell]="i"
|
||||
routerLink="/catalog/material/edit/{{material.id}}">
|
||||
Modifier
|
||||
</cre-accent-button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="openSimdutButton">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let material; let i = index" [class.disabled]="canEditMaterial">
|
||||
<ng-container *ngIf="(!hoveredMaterial && i === 0) || hoveredMaterial === material">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
[disabled]="!materialHasSimdut(material)"
|
||||
(click)="openSimdut(material)">
|
||||
Fiche signalitique
|
||||
</button>
|
||||
</ng-container>
|
||||
<cre-accent-button
|
||||
[creInteractiveCell]="i"
|
||||
[disabled]="!materialHasSimdut(material)"
|
||||
(click)="openSimdut(material)">
|
||||
Fiche signalitique
|
||||
</cre-accent-button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
class="entity-row"
|
||||
*matRowDef="let material; columns: columns"
|
||||
(mouseover)="hoveredMaterial = material">
|
||||
</tr>
|
||||
</table>
|
||||
</cre-table>
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
.input-group-append button
|
||||
border-radius: 0 4px 4px 0
|
||||
|
||||
mat-select
|
||||
margin-top: 4px
|
||||
|
||||
.form-control
|
||||
width: 6rem
|
||||
.input-group
|
||||
cre-input
|
||||
width: 6rem
|
||||
|
||||
.input-group-append button
|
||||
border-radius: 0 4px 4px 0
|
||||
|
|
|
@ -12,6 +12,9 @@ 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'
|
||||
import {FormControl} from '@angular/forms'
|
||||
import {map} from 'rxjs/operators'
|
||||
import {CreInputEntry} from '../../../shared/components/inputs/inputs'
|
||||
|
||||
@Component({
|
||||
selector: 'cre-list',
|
||||
|
@ -22,7 +25,9 @@ export class InventoryComponent extends ErrorHandlingComponent {
|
|||
@ViewChild(MatSort) sort: MatSort
|
||||
|
||||
materials: Material[] | null = []
|
||||
materialTypes$ = this.materialTypeService.all
|
||||
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']
|
||||
|
@ -31,8 +36,12 @@ export class InventoryComponent extends ErrorHandlingComponent {
|
|||
|
||||
units = UNIT_MILLILITER
|
||||
lowQuantityThreshold = 100 // TEMPORARY will be in the application settings
|
||||
materialTypeFilter = 1
|
||||
materialNameFilter = ''
|
||||
|
||||
materialTypeFilterControl = new FormControl()
|
||||
materialNameFilterControl = new FormControl()
|
||||
|
||||
private materialTypeFilter = 1
|
||||
private materialNameFilter = ''
|
||||
|
||||
constructor(
|
||||
private materialService: MaterialService,
|
||||
|
@ -60,6 +69,16 @@ export class InventoryComponent extends ErrorHandlingComponent {
|
|||
true,
|
||||
1
|
||||
)
|
||||
|
||||
this.subscribe(
|
||||
this.materialTypeFilterControl.valueChanges,
|
||||
filter => this.materialTypeFilter = filter
|
||||
)
|
||||
|
||||
this.subscribe(
|
||||
this.materialNameFilterControl.valueChanges,
|
||||
filter => this.materialNameFilter = filter
|
||||
)
|
||||
}
|
||||
|
||||
setupDataSource(): MatTableDataSource<Material> {
|
||||
|
@ -83,10 +102,6 @@ export class InventoryComponent extends ErrorHandlingComponent {
|
|||
return this.dataSource
|
||||
}
|
||||
|
||||
filterDataSource() {
|
||||
this.dataSource.filter = 'filter'
|
||||
}
|
||||
|
||||
isLowQuantity(material: Material) {
|
||||
return this.getQuantity(material) < this.lowQuantityThreshold
|
||||
}
|
||||
|
@ -118,6 +133,11 @@ 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}`
|
||||
}
|
||||
|
||||
get canEditMaterial(): boolean {
|
||||
return this.accountService.hasPermission(Permission.EDIT_MATERIALS)
|
||||
}
|
||||
|
|
|
@ -13,6 +13,8 @@ import {
|
|||
} from '@angular/core'
|
||||
import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource} from '@angular/material/table'
|
||||
|
||||
type CreTableData<T> = T[] | MatTableDataSource<T>
|
||||
|
||||
@Directive({
|
||||
selector: '[creInteractiveCell]'
|
||||
})
|
||||
|
@ -66,7 +68,7 @@ export class CreTable<T> implements AfterContentInit {
|
|||
this.dataSource.filter = filter
|
||||
}
|
||||
|
||||
@Input() set data(data: T[]) {
|
||||
@Input() set data(data: CreTableData<T>) {
|
||||
this.setupDataSource(data)
|
||||
}
|
||||
|
||||
|
@ -80,9 +82,16 @@ export class CreTable<T> implements AfterContentInit {
|
|||
this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef))
|
||||
}
|
||||
|
||||
private setupDataSource(data: T[]) {
|
||||
this.dataSource = new MatTableDataSource<T>(data)
|
||||
this.dataSource.filterPredicate = (t, filter) => this.filterFn(t, filter)
|
||||
private setupDataSource(data: CreTableData<T>) {
|
||||
if (data instanceof MatTableDataSource) {
|
||||
this.dataSource = data
|
||||
} else {
|
||||
this.dataSource = new MatTableDataSource<T>(data)
|
||||
}
|
||||
|
||||
if (this.filterFn) {
|
||||
this.dataSource.filterPredicate = (t, filter) => this.filterFn(t, filter)
|
||||
}
|
||||
}
|
||||
|
||||
onRowHover(index: number) {
|
||||
|
|
Loading…
Reference in New Issue