From 2fa2fab1eefe4e90edf021c3109c738ea2235e6d Mon Sep 17 00:00:00 2001
From: Aaron Louie <ajlouie@gmail.com>
Date: Wed, 23 Sep 2020 23:39:19 -0400
Subject: [PATCH] Fixes print layout bugs

---
 src/app/app-routing.module.spec.ts            |  1 -
 src/app/config/defaults.ts                    |  2 +-
 src/app/models/appDefaults.interface.ts       |  2 ++
 src/app/models/labelLayout.interface.ts       |  7 +---
 .../print-layout/print-layout.component.html  |  6 ++--
 .../print-layout/print-layout.component.scss  | 15 +--------
 .../print-layout/print-layout.component.ts    | 32 ++++++++++++-------
 src/app/print/print.component.scss            |  9 +++---
 src/app/print/print.component.ts              | 23 +++++++++++++
 src/app/services/settings.service.ts          |  2 --
 src/app/settings/settings.component.html      |  2 --
 11 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/app/app-routing.module.spec.ts b/src/app/app-routing.module.spec.ts
index 4eda89a..e03028d 100644
--- a/src/app/app-routing.module.spec.ts
+++ b/src/app/app-routing.module.spec.ts
@@ -72,7 +72,6 @@ describe('Router: App', () => {
   });
 
   it('navigate to "" redirects you to /', async () => {
-    console.log('mockEnvironment', mockEnvironment);
     const success = await fixture.ngZone.run(() => router.navigate(['']));
     expect(success).toBeTruthy();
     expect(location.path()).toBe('/');
diff --git a/src/app/config/defaults.ts b/src/app/config/defaults.ts
index 6808737..1c89e70 100644
--- a/src/app/config/defaults.ts
+++ b/src/app/config/defaults.ts
@@ -12,7 +12,7 @@ export const labelLayouts = {
     name: '32mm Round Label - 2up',
     type: 'round_32mm_2up',
     numCols: 2,
-    columnGap: 1.3,
+    columnGap: 3.4,
   }),
 };
 
diff --git a/src/app/models/appDefaults.interface.ts b/src/app/models/appDefaults.interface.ts
index 2e0da58..17838a4 100644
--- a/src/app/models/appDefaults.interface.ts
+++ b/src/app/models/appDefaults.interface.ts
@@ -45,6 +45,8 @@ export class AppDefaults {
         } else {
           this[k] = defaultOptions[k];
         }
+      } else if (k === 'labelLayout') {
+        this[k] = new LabelLayout(options[k]);
       } else {
         this[k] = options[k] || defaultOptions[k];
       }
diff --git a/src/app/models/labelLayout.interface.ts b/src/app/models/labelLayout.interface.ts
index 4bfa4fc..72fb750 100644
--- a/src/app/models/labelLayout.interface.ts
+++ b/src/app/models/labelLayout.interface.ts
@@ -44,7 +44,6 @@ export class LabelLayout {
     return {
       bottomTextMargin: this._toUnits(this.bottomTextMargin),
       columnGap: this._toUnits(this.columnGap),
-      columnGapWidth: this._toUnits(this.columnGapWidth),
       fontSize: this._toUnits(this.fontSize),
       labelSize: this._toUnits(this.labelSize),
       labelSizeWithMargins: this._toUnits(this.labelSizeWithMargins),
@@ -58,16 +57,12 @@ export class LabelLayout {
     };
   }
 
-  get columnGapWidth(): number {
-    return this.columnGap;
-  }
-
   get labelSizeWithMargins(): number {
     return (this.labelSize + (this.marginSize * 2));
   }
 
   get pageWidth(): number {
-    return (this.labelSizeWithMargins * this.numCols) + (this.columnGap * this.numCols - 1);
+    return (this.labelSizeWithMargins * this.numCols);
   }
 
   get pageHeight(): number {
diff --git a/src/app/print-layout/print-layout.component.html b/src/app/print-layout/print-layout.component.html
index 24067c5..bfacf75 100644
--- a/src/app/print-layout/print-layout.component.html
+++ b/src/app/print-layout/print-layout.component.html
@@ -1,8 +1,8 @@
 <div
-  id="print"
+  class="print-layout"
   [style]="{width: pageWidth, height: pageHeight}"
   [gdRows]="pagesToGridFractions"
-  gdGap="1.5mm"
+  [gdGap]="marginWidth"
   gdAlignColumns="center"
   gdAlignRows="center"
 >
@@ -11,7 +11,7 @@
     [gdColumns]="colsToGridFractions"
     gdAlignColumns="center"
     gdAlignRows="center"
-    gdGap="3mm"
+    [gdGap]="columnGap"
   >
     <app-label-layout
       *ngFor="let col of columns"
diff --git a/src/app/print-layout/print-layout.component.scss b/src/app/print-layout/print-layout.component.scss
index ed1e160..8484723 100644
--- a/src/app/print-layout/print-layout.component.scss
+++ b/src/app/print-layout/print-layout.component.scss
@@ -1,17 +1,4 @@
-#print {
+.print-layout {
   display: grid !important;
   background-color: transparent;
-  width: 64mm;
-  height: 32mm;
-  padding-top: 2mm;
-  padding-bottom: 2mm;
-
-  .page {
-    padding-top: 2mm;
-    padding-bottom: 2mm;
-  }
-
-  .column {
-    padding: 1mm;
-  }
 }
diff --git a/src/app/print-layout/print-layout.component.ts b/src/app/print-layout/print-layout.component.ts
index a56f2d8..8da41dd 100644
--- a/src/app/print-layout/print-layout.component.ts
+++ b/src/app/print-layout/print-layout.component.ts
@@ -1,5 +1,6 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Input} from '@angular/core';
 import {AppDefaults} from '../models/appDefaults.interface';
+import {LabelLayout} from '../models/labelLayout.interface';
 import {SettingsService} from '../services/settings.service';
 
 @Component({
@@ -7,19 +8,17 @@ import {SettingsService} from '../services/settings.service';
   templateUrl: './print-layout.component.html',
   styleUrls: ['./print-layout.component.scss']
 })
-export class PrintLayoutComponent implements OnInit {
+export class PrintLayoutComponent implements AfterViewInit {
   @Input() dateCreated: Date;
   @Input() barCode: string;
   @Input() initials: string;
   settings: AppDefaults;
-  dimensions: {[key: string]: string};
+  layout: LabelLayout;
 
   constructor(private settingsService: SettingsService) {
     this.settings = this.settingsService.getSettings();
-    this.dimensions = this.settings.labelLayout.dimensions;
-  }
-
-  ngOnInit(): void {
+    this.layout = new LabelLayout(this.settings.labelLayout);
+    this.layout.numCopies = this.settings.numCopies;
   }
 
   get pagesToGridFractions(): string {
@@ -31,19 +30,30 @@ export class PrintLayoutComponent implements OnInit {
   }
 
   get pageHeight(): string {
-    return this.dimensions && this.dimensions.pageHeight;
+    return this.layout.dimensions.pageHeight;
   }
 
   get pageWidth(): string {
-    return this.dimensions && this.dimensions.pageWidth;
+    return this.layout.dimensions.pageWidth;
+  }
+
+  get marginWidth(): string {
+    return this.layout.dimensions.marginWidth;
+  }
+
+  get columnGap(): string {
+    return this.layout.dimensions.columnGap;
   }
 
   get pages() {
-    return Array(this.settings.numCopies).fill('');
+    return Array(this.layout.numCopies).fill('');
   }
 
   get columns() {
-    return Array(this.settings.labelLayout.numCols).fill('');
+    return Array(this.layout.numCols).fill('');
+  }
+
+  ngAfterViewInit(): void {
   }
 
 }
diff --git a/src/app/print/print.component.scss b/src/app/print/print.component.scss
index 94bacf4..edf59ab 100644
--- a/src/app/print/print.component.scss
+++ b/src/app/print/print.component.scss
@@ -7,18 +7,16 @@
 
 @media print {
   @page {
-    size: 64mm 32mm;
     margin: 0 !important;
     padding: 0 !important;
   }
 
   ::ng-deep html,
   ::ng-deep body {
-    width: 64mm;
-    height: 32mm;
     margin: 0 !important;
     padding: 0 !important;
-    background-color: transparent;
+    background-color: red;
+    overflow: hidden;
   }
 
   ::ng-deep .no-print,
@@ -27,7 +25,8 @@
   ::ng-deep app-footer {
     display: none;
   }
-  #media-print { display: flex !important; }
+
+  #media-print { display: block !important; }
   #media-screen { display: none !important; }
 }
 
diff --git a/src/app/print/print.component.ts b/src/app/print/print.component.ts
index 839e183..4459681 100644
--- a/src/app/print/print.component.ts
+++ b/src/app/print/print.component.ts
@@ -3,6 +3,7 @@ import {MatButton} from '@angular/material/button';
 import {ActivatedRoute} from '@angular/router';
 import {createQrCodeValue} from '../_util/qrCode';
 import {AppDefaults} from '../models/appDefaults.interface';
+import {LabelLayout} from '../models/labelLayout.interface';
 import {Sample} from '../models/sample.interface';
 import {ApiService} from '../services/api.service';
 import {SettingsService} from '../services/settings.service';
@@ -36,6 +37,28 @@ export class PrintComponent implements AfterViewInit {
   ngAfterViewInit() {
     this.saveAndPrintButton.focus();
     this.changeDetector.detectChanges();
+    const layout = new LabelLayout(this.settings.labelLayout);
+    layout.numCopies = this.settings.numCopies;
+
+    // Inject the print CSS, with dynamic layout settings, into the DOM.
+    const printCss = `
+      @media print {
+        @page {
+          size: ${layout.dimensions.pageWidth} ${layout.dimensions.pageHeight};
+        }
+
+        html,
+        body {
+          width: ${layout.dimensions.pageWidth} !important;
+          height: ${layout.dimensions.pageHeight} !important;
+        }
+      }
+    `;
+    const headEl = document.getElementsByTagName('head')[0];
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute('type', 'text/css');
+    styleEl.appendChild(document.createTextNode(printCss));
+    headEl.appendChild(styleEl);
   }
 
   saveAndPrint() {
diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts
index 871443c..e73e04c 100644
--- a/src/app/services/settings.service.ts
+++ b/src/app/services/settings.service.ts
@@ -4,7 +4,6 @@ import serializeJs from 'serialize-javascript';
 import {defaultOptions} from '../config/defaults';
 import {AppDefaults, AppDefaultsOptions} from '../models/appDefaults.interface';
 
-
 @Injectable({
   providedIn: 'root'
 })
@@ -37,7 +36,6 @@ export class SettingsService {
     const settings: AppDefaults = createClone({circles: true})(this.defaults);
 
     Object.keys(newSettings).forEach(k => {
-      console.log(`${k}:`, newSettings[k]);
       settings[k] = newSettings[k];
     });
 
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index d505d8f..8ea6279 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -26,7 +26,6 @@
         <mat-select
           #labelLayoutSelect="matSelect"
           [formControl]="labelLayoutFormControl"
-          [value]="settings.labelLayout.type"
         >
           <mat-option *ngFor="let layout of labelLayouts" [value]="layout.type">{{layout.name}}</mat-option>
         </mat-select>
@@ -39,7 +38,6 @@
           matInput
           type="number"
           [formControl]="numCopiesFormControl"
-          [value]="settings.numCopies.toString()"
         >
         <mat-error *ngIf="numCopiesFormControl.hasError('required')">This field is required.</mat-error>
         <mat-error *ngIf="numCopiesFormControl.hasError('pattern')">Please enter only 2-5 letters.</mat-error>