src/app/modules/material/material.module.ts

@@ -12,6 +12,7 @@ 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'
+import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module'
 
 
 @NgModule({
@@ -25,7 +26,8 @@ import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
     FormsModule,
     CreTablesModule,
     CreInputsModule,
-    CreButtonsModule
+    CreButtonsModule,
+    CreActionBarModule
   ]
 })
 export class MaterialModule {

src/app/modules/material/pages/inventory/inventory.component.html

@@ -1,12 +1,12 @@
-<div class="action-bar backward">
-  <!-- Left -->
-  <div class="d-flex flex-row">
+<cre-action-bar>
+  <cre-action-group>
     <cre-input
       class="mr-4"
       label="Recherche par code..."
       [control]="materialNameFilterControl">
     </cre-input>
     <cre-select
+      class="mr-4"
       label="Recherche par type de produit"
       [control]="materialTypeFilterControl"
       [entries]="materialTypesEntries$">
@@ -15,10 +15,8 @@
       label="Basse quantité"
       [control]="hideLowQuantityControl">
     </cre-checkbox-input>
-  </div>
-
-  <!-- Right -->
-  <div class="ml-auto">
+  </cre-action-group>
+  <cre-action-group>
     <cre-input
       class="mr-4"
       label="Quantité faible"
@@ -33,8 +31,8 @@
       routerLink="/catalog/material/add">
       Ajouter
     </cre-accent-button>
-  </div>
-</div>
+  </cre-action-group>
+</cre-action-bar>
 
 <cre-warning-alert *ngIf="!loading && materials.length === 0">
   <p>Il n'y a actuellement aucun produit enregistré dans le système.</p>

src/app/modules/material/pages/inventory/inventory.component.ts

@@ -4,7 +4,7 @@ import {MaterialService} from '../../service/material.service'
 import {Permission} from '../../../shared/model/user'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
-import {Material, openSimdut} from '../../../shared/model/material.model'
+import {Material, materialFilterFieldSeparator, materialMatchesFilter, 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'
@@ -14,6 +14,7 @@ import {AppState} from '../../../shared/app-state'
 import {FormControl} from '@angular/forms'
 import {map} from 'rxjs/operators'
 import {CreInputEntry} from '../../../shared/components/inputs/inputs'
+import {round} from '../../../shared/utils/utils'
 
 @Component({
   selector: 'cre-list',
@@ -35,23 +36,7 @@ export class InventoryComponent extends ErrorHandlingComponent {
   units = UNIT_MILLILITER
   lowQuantityThreshold = 100  // TEMPORARY will be in the application settings
 
-  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
-    }
-  }
+  materialFilterPredicate = materialMatchesFilter
 
   private materialTypeFilter = 1
   private materialNameFilter = ''
@@ -106,7 +91,7 @@ export class InventoryComponent extends ErrorHandlingComponent {
   }
 
   getQuantity(material: Material): number {
-    return Math.round(convertQuantity(material.inventoryQuantity, UNIT_MILLILITER, this.units) * 100) / 100
+    return round(convertQuantity(material.inventoryQuantity, UNIT_MILLILITER, this.units), 2)
   }
 
   materialHasSimdut(material: Material): boolean {
@@ -133,8 +118,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}􀃿${this.hideLowQuantity}􀃿${this.lowQuantityThreshold}`
+    return [this.materialTypeFilter, this.materialNameFilter, this.hideLowQuantity, this.lowQuantityThreshold].join(materialFilterFieldSeparator)
   }
 
   get canEditMaterial(): boolean {

src/app/modules/shared/components/tables/tables.ts

@@ -13,8 +13,6 @@ import {
 } from '@angular/core'
 import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource} from '@angular/material/table'
 
-type CreTableData<T> = T[] | MatTableDataSource<T>
-
 @Directive({
   selector: '[creInteractiveCell]'
 })
@@ -66,10 +64,12 @@ export class CreTable<T> implements AfterContentInit {
   @Input() sortingDataAccessor: (t: T, header: string) => string | number
 
   @Input() set filter(filter: string) {
-    this.dataSource.filter = filter
+    if (this.dataSource) {
+      this.dataSource.filter = filter
+    }
   }
 
-  @Input() set data(data: CreTableData<T>) {
+  @Input() set data(data: T[]) {
     this.setupDataSource(data)
   }
 
@@ -83,12 +83,8 @@ export class CreTable<T> implements AfterContentInit {
     this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef))
   }
 
-  private setupDataSource(data: CreTableData<T>) {
-    if (data instanceof MatTableDataSource) {
-      this.dataSource = data
-    } else {
-      this.dataSource = new MatTableDataSource<T>(data)
-    }
+  private setupDataSource(data: T[]) {
+    this.dataSource = new MatTableDataSource<T>(data)
 
     if (this.filterPredicate) {
       this.dataSource.filterPredicate = (t, filter) => this.filterPredicate(t, filter)

src/app/modules/shared/model/material.model.ts

@@ -1,4 +1,4 @@
-import {MaterialType} from './materialtype.model';
+import {MaterialType} from './materialtype.model'
 import {openPdf} from '../utils/utils'
 
 export class Material {
@@ -37,3 +37,16 @@ export const materialComparator = (a: Material, b: Material): number => {
     }
   }
 }
+
+// Uses private use UTF-8 char to separate the two fields, change if a better method is found
+export const materialFilterFieldSeparator = '􀃿'
+
+export function materialMatchesFilter(material: Material, filter: string): boolean {
+  const [materialTypeFilter, materialNameFilter, hideLowQuantity, lowQuantityThreshold] = filter.split(materialFilterFieldSeparator)
+  const materialTypeId = parseInt(materialTypeFilter)
+  const matchesMaterialType = materialTypeId === 1 || materialTypeId == material.materialType.id
+  const matchesMaterialName = !materialNameFilter || material.name.toLowerCase().includes(materialNameFilter.toLowerCase())
+  const matchesLowQuantity = material.inventoryQuantity < parseInt(lowQuantityThreshold)
+
+  return matchesMaterialType && matchesMaterialName && (hideLowQuantity === 'false' || matchesLowQuantity)
+}

src/app/modules/shared/utils/utils.ts

@@ -64,3 +64,8 @@ export function getFileUrl(path: string) {
 export function getConfiguredImageUrl(path: string) {
   return `${environment.apiUrl}/config/${path}`
 }
+
+export function round(n: number, digits: number): number {
+  const power = Math.pow(10, digits)
+  return Math.round(n * power) / power
+}