Merge pull request #135 from ExLibrisGroup/preview

Preview/Edit Labels

cloudapp/src/app/app-routing.module.ts

@@ -4,12 +4,14 @@ import { ConfigurationComponent, CanDeactivateConfiguration, CanActivateConfigur
 import { LabelsComponent } from './labels/labels.component';
 import { MainComponent } from './main/main.component';
 import { PrintComponent } from './print/print.component';
+import { PreviewComponent } from './preview/preview.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
   { path: 'configuration', component: ConfigurationComponent, canDeactivate: [CanDeactivateConfiguration], canActivate: [CanActivateConfiguration]},
   { path: 'labels', component: LabelsComponent },
   { path: 'print', component: PrintComponent },
+  { path: 'preview', component: PreviewComponent}
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -24,6 +24,7 @@ import { PrintComponent } from './print/print.component';
 import { ConfigurationBaseComponent } from './configuration/configuration-base.component';
 import { PrefixComponent } from './configuration/template/prefix/prefix.component';
 import { ScanComponent } from './main/scan/scan.component';
+import { PreviewComponent } from './preview/preview.component';
 
 @NgModule({
   declarations: [					
@@ -38,6 +39,7 @@ import { ScanComponent } from './main/scan/scan.component';
     PrintComponent,
     PrefixComponent,
     ScanComponent,
+    PreviewComponent,
    ],
   imports: [
     MaterialModule,

cloudapp/src/app/labels/labels.component.html

@@ -10,6 +10,7 @@
     <mat-icon>arrow_back_ios</mat-icon> {{ 'Back' | translate}}
   </button>
   <button mat-flat-button type="button" color="primary" [disabled]="!valid" (click)="print()">{{ 'Labels.Print' | translate:{length: printService.items.size} }}</button>
+  <button mat-flat-button type="button" color="secondary" [disabled]="!valid" (click)="generatePreview()">{{ 'Labels.Preview' | translate}}</button>
 </div>
 <div class="config" *ngIf="config">
   <mat-form-field>

cloudapp/src/app/labels/labels.component.ts

@@ -137,6 +137,27 @@ export class LabelsComponent implements OnInit {
     });
   }
 
+  generatePreview() {
+    const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
+    // CIL change: margin of 0px on html body to prevent default 8px margins
+    const CIL_style = "<style>@media print {html, body {margin: 0px;} }</style>";
+    doc.body.innerHTML = this.printService.CIL ? CIL_style : "";
+    doc.body.appendChild(this.printComponent.location.nativeElement);
+    this.loading = true;
+    this.printComponent.instance.load()
+    .pipe(finalize(() => this.loading = false))
+    .subscribe({
+      next: () => setTimeout(this.previewIt),
+      error: e => this.alert.error('An error occurred: ' + e.message),
+    });
+  }
+
+  previewIt = () => {
+    this.printService.rawLabels = this.iframe.nativeElement.contentDocument.querySelector("app-print").shadowRoot.innerHTML;
+    //console.log ('iframe content in preview = ' + this.printService.rawLabels); 
+    this.router.navigate(['/preview']);
+  }
+
   onSelected(event: MatAutocompleteSelectedEvent, type: string) {
     const name = event.option.value;
     this.printService[type] = this.config[type + 's'][name];

cloudapp/src/app/models/item.ts

@@ -45,5 +45,16 @@ export const LABEL_FIELDS = [
   'item_data.call_no_7',
   'item_data.call_no_8',
   'item_data.call_no_9',
-  'item_data.call_no_10'
+  'item_data.call_no_10',
+  'item_data.alt_call_no_1',
+  'item_data.alt_call_no_2',
+  'item_data.alt_call_no_3',
+  'item_data.alt_call_no_4',
+  'item_data.alt_call_no_5',
+  'item_data.alt_call_no_6',
+  'item_data.alt_call_no_7',
+  'item_data.alt_call_no_8',
+  'item_data.alt_call_no_9',
+  'item_data.alt_call_no_10'
+
 ]

cloudapp/src/app/preview/preview.component.html

@@ -0,0 +1,32 @@
+<div class="cloudapp-actions">
+  <button mat-flat-button color="secondary" [routerLink]="['/labels']">
+    <mat-icon>arrow_back_ios</mat-icon> {{ 'Back' | translate}}
+  </button>
+  <button mat-flat-button type="button" color="primary" (click)="reset()">{{ 'Labels.Reset' | translate}}</button>
+  <button mat-flat-button type="button" color="secondary" (click)="loadLabels()">{{ 'Labels.Reload' | translate}}</button>
+</div>
+  <div>
+    <h1 translate>Labels.Preview</h1>
+    <p translate>Labels.EditInstructions</p>
+    <p>&nbsp;</p>
+    <editor #editor [init]="{
+      base_url: 'assets/tinymce',
+      suffix: '.min',
+      height: 600,
+      menubar: false,
+      setup: initmce,
+      fontsize_formats: '8pt 10pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 24pt 36pt',
+      font_formats: 'ALA BT Courier=ala bt courier,courier; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Arial Narrow=arial narrow,sans-serif; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Microsoft YaHei=microsoft yahei,gothic,sans-serif; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; TH SarabunPSK=th sarabunpsk,sans-serif; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
+      content_style: 'body, p {font-size: 14px;font-weight: 300;color: #5e5e5e;}',
+      plugins: 'table code print image lists searchreplace',
+      toolbar:
+       'print code | bold italic underline subscript superscript| \ 
+        alignleft aligncenter alignright | numlist bullist | fontselect fontsizeselect forecolor | \
+        table tabledelete | tableprops tablerowprops tablecellprops | \
+        tableinsertrowbefore tableinsertrowafter tabledeleterow | \
+        tableinsertcolbefore tableinsertcolafter tabledeletecol | \
+        image | \
+        undo redo | removeformat searchreplace'
+      }" 
+    ></editor>
+  </div>

cloudapp/src/app/preview/preview.component.scss

@@ -0,0 +1,7 @@
+.config { 
+    .mat-form-field {
+      width: 100%;
+      max-width: 400px;
+      display: block;
+    }
+  }

cloudapp/src/app/preview/preview.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { PrintService } from '../services/print.service';
+import { Router } from '@angular/router';
+import { Editor } from '../../assets/tinymce/tinymce';
+import { EditorComponent } from '@tinymce/tinymce-angular'
+import { TinyMCE } from '../../assets/tinymce/tinymce';
+import { LABEL_FIELDS } from '../models/item';
+import { TranslateService } from '@ngx-translate/core';
+import { itemExample } from '../models/item-example';
+import * as dot from 'dot-object'
+
+@Component({
+  selector: 'app-preview',
+  templateUrl: './preview.component.html',
+  styleUrls: ['./preview.component.scss']
+})
+export class PreviewComponent implements OnInit {
+  @ViewChild('editor', { static: true }) editor: EditorComponent;
+  constructor(
+    private translate: TranslateService,
+    public printService: PrintService,
+    private router: Router,
+  ) { }
+
+  initmce = (editor: Editor) => {
+    editor.on('init', () => {
+      this.loadLabels()  // set editor content
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+  loadLabels() {
+    if (this.editor && this.editor.editor) {
+      this.editor.editor.setContent(this.printService.rawLabels);
+    }  
+  }
+
+  reset() {
+    this.printService.clear()
+    .then(() => this.router.navigate(['/']));
+  }
+}

cloudapp/src/app/print/print.component.ts

@@ -153,6 +153,31 @@ export class PrintComponent implements OnInit {
               //else 
                 return '';   
             }
+          case 'item_data.alt_call_no_1':
+          case 'item_data.alt_call_no_2':
+          case 'item_data.alt_call_no_3':
+          case 'item_data.alt_call_no_4':
+          case 'item_data.alt_call_no_5':
+          case 'item_data.alt_call_no_6':
+          case 'item_data.alt_call_no_7':
+          case 'item_data.alt_call_no_8':
+          case 'item_data.alt_call_no_9':
+          case 'item_data.alt_call_no_10':  
+            const altCallNoVal = dot.pick('item_data.alt_call_no', item);
+            if (!altCallNoVal || !Array.isArray(altCallNoVal)) {
+              if (this.template.blankFields) 
+                return " <BR>";
+              else 
+                return '';
+            } 
+            if (detail.substring(22) - 1 < altCallNoVal.length)
+              return this.getCallNoPart(altCallNoVal, detail.substring (22) - 1);  
+            else {
+              if (this.template.blankFields) 
+                return " <BR>";
+              else 
+                return '';   
+            }
           case 'holdings_data.due_back_date:':
           case 'item_data.arrival_date':
           case 'item_data.expected_arrival_date':
@@ -226,14 +251,13 @@ export class PrintComponent implements OnInit {
 
   getCallNoPart(val: Array<string>, part_number) {
     if (val[part_number] != undefined) {
-      if (this.template.blankFields && val[part_number] == '') {
-        return " <BR>";
-      }
+      if (this.template.blankFields && val[part_number] == '') 
+        return "<BR>";
       return val[part_number];
     }
     else {
       if (this.template.blankFields) {
-        return " <BR>";
+        return "<BR>";
       }
       else 
         return '';

cloudapp/src/app/services/print.service.ts

@@ -16,6 +16,7 @@ export class PrintService {
   layout: Layout;
   template: Template;
   offset: number = 0;
+  rawLabels: string;
   gridlines = false;  
   //CIL addition - flag whether to use the old (default) setting or the CIL settings
   CIL: boolean = false;

cloudapp/src/i18n/en.json

@@ -28,12 +28,16 @@
   },
   "Labels": {
     "Print": "Print {length} labels",
+    "Preview": "Preview/edit labels",
+    "Reset": "Clear and start over",
+    "Reload": "Reload labels",
     "SelectLayout": "Select a layout",
     "SelectTemplate": "Select a template",
     "Offset": "Offset",
     "OffsetHint": "Skip this number of slots on first page of labels",
     "Gridlines": "Print gridlines",
     "CIL": "Enable marginless templates and layouts",
+    "EditInstructions": "Click the <> button in the toolbar to edit the label HTML source. Use the printer icon in the toolbar when ready to print.",
     "Dialog": {
       "title": "Print completed",
       "text": "Were the labels printed successfully?",
@@ -141,6 +145,16 @@
         "item_data.call_no_8":"Parsed call number part eight",
         "item_data.call_no_9":"Parsed call number part nine",
         "item_data.call_no_10":"Parsed call number part ten",                        
+        "item_data.alt_call_no_1":"Parsed alt call number part one",
+        "item_data.alt_call_no_2":"Parsed alt call number part two",
+        "item_data.alt_call_no_3":"Parsed alt call number part three",
+        "item_data.alt_call_no_4":"Parsed alt call number part four",
+        "item_data.alt_call_no_5":"Parsed alt call number part five",
+        "item_data.alt_call_no_6":"Parsed alt call number part six",
+        "item_data.alt_call_no_7":"Parsed alt call number part seven",
+        "item_data.alt_call_no_8":"Parsed alt call number part eight",
+        "item_data.alt_call_no_9":"Parsed alt call number part nine",
+        "item_data.alt_call_no_10":"Parsed alt call number part ten",
         "dateFormat":"Date format",
         "dateSeparator":"Date separator character",
         "pattern": "Call number pattern (Reg Exp)",

cloudapp/src/i18n/zh.json

@@ -28,12 +28,16 @@
   },
   "Labels": {
     "Print": "打印 {length} 个书标",
+    "Preview": "预览/编辑标签",
+    "Reset": "清除并重新开始",
+    "Reload": "重新加载标签",
     "SelectLayout": "选择一个样式",
     "SelectTemplate": "选择一个模板",
     "Offset": "偏移量",
     "OffsetHint": "跳过标签第一页的位数",
     "Gridlines": "打印网格线",
     "CIL": "启用无页边距的模板和布局",
+    "EditInstructions": "点击工具栏上的<>按钮来编辑HTML源码。点击工具栏上打印机按钮来准备打印",
     "Dialog": {
       "title": "打印完成",
       "text": "所有书标都打印完成了吗?",
@@ -141,6 +145,16 @@
         "item_data.call_no_8":"解析过的索书号第八部分",
         "item_data.call_no_9":"解析过的索书号第九部分",
         "item_data.call_no_10":"解析过的索书号第十部分",
+        "item_data.alt_call_no_1":"解析过的备用索书号第一部分",   
+        "item_data.alt_call_no_2":"解析过的备用索书号第二部分",
+        "item_data.alt_call_no_3":"解析过的备用索书号第三部分",
+        "item_data.alt_call_no_4":"解析过的备用索书号第四部分",
+        "item_data.alt_call_no_5":"解析过的备用索书号第五部分",
+        "item_data.alt_call_no_6":"解析过的备用索书号第六部分",
+        "item_data.alt_call_no_7":"解析过的备用索书号第七部分",
+        "item_data.alt_call_no_8":"解析过的备用索书号第八部分",
+        "item_data.alt_call_no_9":"解析过的备用索书号第九部分",
+        "item_data.alt_call_no_10":"解析过的备用索书号第十部分",  
         "dateFormat":"日期格式",
         "dateSeparator":"日期分隔符",
         "pattern": "索书号匹配项(正则表达式)",