2021-12-02 15:00:53 -05:00
5 changed files with 91 additions and 85 deletions
--- a/src/app/modules/material/material.module.ts
+++ b/src/app/modules/material/material.module.ts
@ -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 {
--- a/src/app/modules/material/pages/inventory/inventory.component.html
+++ b/src/app/modules/material/pages/inventory/inventory.component.html
@ -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>
--- a/src/app/modules/material/pages/inventory/inventory.component.sass
+++ b/src/app/modules/material/pages/inventory/inventory.component.sass
@ -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
--- a/src/app/modules/material/pages/inventory/inventory.component.ts
+++ b/src/app/modules/material/pages/inventory/inventory.component.ts
@ -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)
  }
--- a/src/app/modules/shared/components/tables/tables.ts
+++ b/src/app/modules/shared/components/tables/tables.ts
@ -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) {