Ajout de l'impression des mélanges dans le frontend Angular. (Impossible à tester sans l'imprimante)

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

@@ -12,7 +12,7 @@
         </mat-form-field>
       </div>
       <div>
-        <button mat-raised-button color="accent">Imprimer</button>
+        <button mat-raised-button color="accent" (click)="printingConfirmBox.show()">Imprimer</button>
       </div>
       <div>
         <button mat-raised-button color="accent" (click)="deduct.emit()">Déduire</button>
@@ -98,3 +98,9 @@
     </ng-container>
   </table>
 </ng-template>
+
+<cre-confirm-box
+  #printingConfirmBox
+  message="Voulez-vous vraiment imprimer ce mélange?"
+  (confirm)="print()">
+</cre-confirm-box>

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

@@ -1,10 +1,11 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {Mix, MixMaterial, Recipe} from "../../../shared/model/recipe.model";
 import {Subject} from "rxjs";
 import {SubscribingComponent} from "../../../shared/components/subscribing.component";
-import {convertMixMaterialQuantity, UNIT_MILLILITER, UNIT_RATIOS} from "../../../shared/units";
-import {FormBuilder} from "@angular/forms";
+import {convertMixMaterialQuantity, UNIT_MILLILITER} from "../../../shared/units";
 import {ActivatedRoute, Router} from "@angular/router";
+import {PtouchPrinter} from "../../ptouchPrint"
+import {ConfirmBoxComponent} from "../../../shared/components/confirm-box/confirm-box.component";
 
 @Component({
   selector: 'cre-mix-table',
@@ -15,19 +16,26 @@ export class MixTableComponent extends SubscribingComponent {
   private readonly COLUMNS = ['material', 'materialType', 'quantity', 'quantityCalculated', 'quantityUnits']
   private readonly COLUMNS_STATIC = ['material', 'materialType', 'quantityStatic', 'quantityUnits']
 
+  @ViewChild('printingConfirmBox') printingConfirmBox: ConfirmBoxComponent
+
   @Input() mix: Mix
   @Input() recipe: Recipe
   @Input() units$: Subject<string>
   @Input() deductErrorBody
   @Input() editing: boolean
+  @Input() printingError = 2
   @Output() locationChange = new EventEmitter<{ id: number, location: string }>()
   @Output() quantityChange = new EventEmitter<{ id: number, materialId: number, quantity: number }>()
   @Output() deduct = new EventEmitter<void>()
+  @Output() printingErrorChange = new EventEmitter<number>()
 
   mixColumns = this.COLUMNS
   units = UNIT_MILLILITER
   computedQuantities: { id: number, percents: boolean, quantity: number }[] = []
 
+  // BPac printer
+  printer: PtouchPrinter | null
+
   constructor(
     router: Router,
     activatedRoute: ActivatedRoute
@@ -104,6 +112,27 @@ export class MixTableComponent extends SubscribingComponent {
     return Math.round(quantity * 1000) / 1000
   }
 
+  async print() {
+    const base = this.mix.mixMaterials
+      .map(ma => ma.material)
+      .filter(m => m.materialType.name === 'Base')[0]
+    if (!base) {
+      this.printingErrorChange.emit(98)
+      return
+    }
+    this.printer = new PtouchPrinter({
+      template: "Couleur",
+      lines: [
+        {name: "color", value: this.recipe.name},
+        {name: "banner", value: this.recipe.company.name},
+        {name: "base", value: base.name},
+        {name: "description", value: this.recipe.description}
+      ]
+    })
+    const errorCode = await this.printer.print()
+    this.printingErrorChange.emit(errorCode)
+  }
+
   private emitQuantityChangeEvent(index: number) {
     this.quantityChange.emit({
       id: this.mix.id,

src/main/frontend/src/app/modules/colors/components/recipe-info/recipe-info.component.html

@@ -20,10 +20,23 @@
 
     <mat-icon
       *ngIf="hasModifications"
-      class="color-warning has-modification-icon"
+      class="color-warning has-modification-icon mr-4"
       svgIcon="pencil"
       title="Les modifications apportées n'ont pas été enregistrées"
       [inline]="true">
     </mat-icon>
+    <mat-icon
+      *ngIf="!isBPacExtensionInstalled"
+      color="warn"
+      svgIcon="printer-alert"
+      title="L'extension b-Pac n'est pas installée"
+      [inline]="true">
+    </mat-icon>
+    <mat-icon
+      *ngIf="isBPacExtensionInstalled"
+      color="accent"
+      svgIcon="printer"
+      [inline]="true">
+    </mat-icon>
   </div>
 </div>

src/main/frontend/src/app/modules/colors/components/recipe-info/recipe-info.component.sass

@@ -41,6 +41,6 @@
         background-color: white
         color: black
 
-.has-modification-icon
+mat-icon
   width: 2em !important
 

src/main/frontend/src/app/modules/colors/components/recipe-info/recipe-info.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {AfterViewInit, Component, Input} from '@angular/core';
 import {Recipe} from "../../../shared/model/recipe.model";
 
 @Component({
@@ -6,9 +6,13 @@ import {Recipe} from "../../../shared/model/recipe.model";
   templateUrl: './recipe-info.component.html',
   styleUrls: ['./recipe-info.component.sass']
 })
-export class RecipeInfoComponent {
+export class RecipeInfoComponent implements AfterViewInit {
   @Input() recipe: Recipe
   @Input() hasModifications: boolean
 
-  constructor() { }
+  isBPacExtensionInstalled = false
+
+  ngAfterViewInit(): void {
+    this.isBPacExtensionInstalled = document.querySelectorAll(".bpac-extension-installed").length > 0
+  }
 }

src/main/frontend/src/app/modules/colors/pages/explore/explore.component.html

@@ -5,11 +5,22 @@
     <p *ngIf="error === ERROR_UNKNOWN">Une erreur est survenue</p>
     <p *ngIf="error === ERROR_DEDUCT">Certains produit ne sont pas en quantité suffisante dans l'inventaire</p>
   </div>
+
+  <div *ngIf="printingError != 2 && printingError != 1" class="alert alert-danger m-3">
+    <p *ngIf="printingError === -1">L'extension b-Pac n'est pas installée</p>
+    <p *ngIf="printingError === 98">Il n'y a pas de base dans ce mélange</p>
+    <p *ngIf="printingError === 99">Une erreur est survenue pendant l'impression</p>
+  </div>
+
   <div *ngIf="success" class="alert alert-success m-3">
     <p *ngIf="success === SUCCESS_SAVE">Les modifications ont été enregistrées</p>
     <p *ngIf="success === SUCCESS_DEDUCT">Les quantités des produits utilisés ont été déduites de l'inventaire</p>
   </div>
 
+  <div *ngIf="printingError === 1" class="alert alert-success m-3">
+    <p>Impression en cours. Cette opération peut prendre quelques secondes.</p>
+  </div>
+
   <div class="action-bar backward d-flex flex-row">
     <div class="d-flex flex-column">
       <div class="mt-1 pb-2">
@@ -37,11 +48,13 @@
       <ng-container *ngFor="let mix of recipe.mixes">
         <cre-mix-table
           [mix]="mix"
+          [recipe]="recipe"
           [deductErrorBody]="deductErrorBody"
           [units$]="units$"
           (quantityChange)="changeQuantity($event)"
           (locationChange)="changeMixLocation($event)"
-          (deduct)="deductMixQuantities(mix.id)">
+          (deduct)="deductMixQuantities(mix.id)"
+          [(printingError)]="printingError">
         </cre-mix-table>
       </ng-container>
     </div>

src/main/frontend/src/app/modules/colors/pages/explore/explore.component.ts

@@ -5,7 +5,6 @@ import {SubscribingComponent} from "../../../shared/components/subscribing.compo
 import {Recipe} from "../../../shared/model/recipe.model";
 import {Observable, Subject} from "rxjs";
 import {UNIT_GALLON, UNIT_LITER, UNIT_MILLILITER} from "../../../shared/units";
-import {FormBuilder} from "@angular/forms";
 
 @Component({
   selector: 'cre-explore',
@@ -25,6 +24,7 @@ export class ExploreComponent extends SubscribingComponent {
   note: string | null
   quantitiesChanges = new Map<number, Map<number, number>>()
   mixesLocationChanges = new Map<number, string>()
+  printingError = 2
 
   // Errors
   readonly ERROR_UNKNOWN = 'unknown'
@@ -52,13 +52,7 @@ export class ExploreComponent extends SubscribingComponent {
           this.recipe = r
           this.note = r.note
         },
-        error: err => {
-          if (err.status == 404) {
-            this.router.navigate(['/colors/list'])
-          } else {
-            this.error = this.ERROR_UNKNOWN
-          }
-        }
+        error: err => this.handleNotFoundError(err, '/colors/list')
       },
       1
     )

src/main/frontend/src/app/modules/colors/ptouchPrint.js

@@ -0,0 +1,51 @@
+import * as bpac from "./bpac.js";
+
+export class PtouchPrinter {
+  constructor(object) {
+    this.object = object;
+    this.pdocument = bpac.IDocument;
+  }
+
+  async print() {
+    if (!this.isBPacExtensionInstalled()) {
+      console.error("L'extension b-Pac n'est pas installée");
+      return -1;
+    }
+
+    try {
+      await this.openDoc();
+      await this.fillDoc();
+      this.printDoc();
+      this.pdocument.Close();
+
+      return 1;
+    } catch (e) {
+      console.log(e);
+      return 99;
+    }
+  };
+
+  async openDoc() {
+    const docUrl = `${baseUrl}/lbx/${this.object.template}.lbx`;
+    console.log("Ouverture du modèle: " + docUrl);
+    await this.pdocument.Open(docUrl);
+  }
+
+  async fillDoc() {
+    for (let i = 0; i < this.object.lines.length; i++) {
+      const line = this.object.lines[i];
+      const label = await this.pdocument.GetObject(line.name);
+      label.Text = line.value;
+    }
+  }
+
+  printDoc() {
+    this.pdocument.StartPrint("", 0);
+    this.pdocument.PrintOut(1, 0);
+    this.pdocument.EndPrint();
+  }
+
+  isBPacExtensionInstalled() {
+    return bpac.IsExtensionInstalled();
+  }
+}

src/main/frontend/src/styles.sass

@@ -178,3 +178,6 @@ div.empty
 
 .color-warning
   color: #fdd835
+
+.color-green
+  color: green