Ajout d'un bouton pour afficher à la fiche signalitique d'un produit depuis l'explorateur de couleur

src/app/modules/colors/components/mix-table/mix-table.component.html

@@ -6,7 +6,7 @@
   <div class="mix-actions d-flex flex-row justify-content-between">
     <ng-container *ngIf="!editionMode">
       <div class="flex-grow-1">
-        <mat-form-field class="dark">
+        <mat-form-field class="dark location-input">
           <mat-label>Casier</mat-label>
           <input matInput type="text" [(ngModel)]="mix.location" (change)="changeLocation($event)"/>
         </mat-form-field>
@@ -20,7 +20,12 @@
     </ng-container>
     <ng-container *ngIf="editionMode">
       <div class="flex-grow-1"></div>
-      <button mat-raised-button color="accent" routerLink="/color/edit/mix/{{recipe.id}}/{{mix.id}}">Modifier</button>
+      <button
+        mat-raised-button
+        color="accent"
+        routerLink="/color/edit/mix/{{recipe.id}}/{{mix.id}}">
+        Modifier
+      </button>
     </ng-container>
   </div>
 
@@ -90,9 +95,29 @@
       <td mat-footer-cell *matFooterCellDef>{{units}}</td>
     </ng-container>
 
+    <ng-container matColumnDef="simdut">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let mixMaterial; let i = index">
+        <ng-container
+          *ngIf="(!hoveredMixMaterial && i === 0) || (hoveredMixMaterial && hoveredMixMaterial === mixMaterial)">
+          <button
+            mat-raised-button
+            color="accent"
+            [disabled]="!hasSimdutMap[mixMaterial.material.id]"
+            (click)="openSimdutFile(mixMaterial)">
+            Fiche signalitique
+          </button>
+        </ng-container>
+      </td>
+      <td mat-footer-cell *matFooterCellDef></td>
+    </ng-container>
+
     <tr mat-header-row *matHeaderRowDef="mixColumns"></tr>
-    <tr mat-row *matRowDef="let mixMaterial; columns: mixColumns"
-        [class.low-quantity]="!editionMode && isInLowQuantity(mixMaterial.id)"></tr>
+    <tr mat-row
+        *matRowDef="let mixMaterial; columns: mixColumns"
+        [class.low-quantity]="!editionMode && isInLowQuantity(mixMaterial.id)"
+        (mouseover)="hoveredMixMaterial = mixMaterial">
+    </tr>
     <ng-container *ngIf="!editionMode">
       <tr mat-footer-row *matFooterRowDef="mixColumns"></tr>
     </ng-container>

src/app/modules/colors/components/mix-table/mix-table.component.sass

@@ -1,7 +1,7 @@
 @import '../../../../../custom-theme'
 
 mat-expansion-panel
-  width: 40rem
+  width: 48rem
   margin: 2rem 0
 
 .mix-actions
@@ -14,6 +14,9 @@ mat-expansion-panel
 .low-quantity
   background-color: #ffb3b3
 
+.location-input
+  width: 10rem
+
 ::ng-deep span.mix-calculated-quantity
   &:first-child
     color: green

src/app/modules/colors/components/mix-table/mix-table.component.ts

@@ -8,6 +8,8 @@ import {PtouchPrinter} from '../../ptouchPrint'
 import {ConfirmBoxComponent} from '../../../shared/components/confirm-box/confirm-box.component'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AlertService} from '../../../shared/service/alert.service'
+import {environment} from '../../../../../environments/environment'
+import {MaterialService} from '../../../material/service/material.service'
 
 @Component({
   selector: 'cre-mix-table',
@@ -15,7 +17,7 @@ import {AlertService} from '../../../shared/service/alert.service'
   styleUrls: ['./mix-table.component.sass']
 })
 export class MixTableComponent extends SubscribingComponent {
-  private readonly COLUMNS = ['material', 'materialType', 'quantity', 'quantityCalculated', 'quantityUnits']
+  private readonly COLUMNS = ['material', 'materialType', 'quantity', 'quantityCalculated', 'quantityUnits', 'simdut']
   private readonly COLUMNS_STATIC = ['material', 'materialType', 'quantityStatic', 'quantityUnits']
 
   @ViewChild('printingConfirmBox') printingConfirmBox: ConfirmBoxComponent
@@ -33,11 +35,14 @@ export class MixTableComponent extends SubscribingComponent {
   mixColumns = this.COLUMNS
   units = UNIT_MILLILITER
   computedQuantities: { id: number, percents: boolean, quantity: number }[] = []
+  hoveredMixMaterial: MixMaterial | null
+  hasSimdutMap: any = {}
 
   // BPac printer
   printer: PtouchPrinter | null
 
   constructor(
+    private materialService: MaterialService,
     private alertService: AlertService,
     errorService: ErrorService,
     router: Router,
@@ -63,6 +68,12 @@ export class MixTableComponent extends SubscribingComponent {
       this.units$,
       u => this.convertQuantities(u)
     )
+
+    this.mix.mixMaterials.map(mm => mm.material).forEach(material => this.subscribe(
+      this.materialService.hasSimdut(material.id),
+      b => this.hasSimdutMap[material.id] = b
+      )
+    )
   }
 
   changeLocation(event: any) {
@@ -115,6 +126,10 @@ export class MixTableComponent extends SubscribingComponent {
     return Math.round(quantity * 1000) / 1000
   }
 
+  openSimdutFile(mixMaterial: MixMaterial) {
+    window.open(`${environment.apiUrl}/material/${mixMaterial.material.id}/simdut`, '_blank')
+  }
+
   async print() {
     const base = this.mix.mixMaterials
       .map(ma => ma.material)