Several updates #3

Merged
william merged 28 commits from 14-no-entity-message into develop 2021-12-02 15:00:53 -05:00
5 changed files with 91 additions and 85 deletions
Showing only changes of commit a8d13cc1fb - Show all commits

View File

@ -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 {

View File

@ -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>

View File

@ -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

View File

@ -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)
}

View File

@ -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) {