From 56152f62d42edac92081eb49b7801ee1b59328e2 Mon Sep 17 00:00:00 2001 From: mgobat <45852490+mgobat@users.noreply.github.com> Date: Fri, 12 Jul 2024 07:24:24 -0500 Subject: [PATCH 1/3] Preview/edit enhancement Support previewing/editing of label HTML. --- cloudapp/src/app/app-routing.module.ts | 2 + cloudapp/src/app/app.module.ts | 2 + cloudapp/src/app/labels/labels.component.html | 1 + cloudapp/src/app/labels/labels.component.ts | 21 +++++++++ .../src/app/preview/preview.component.html | 32 ++++++++++++++ .../src/app/preview/preview.component.scss | 7 +++ cloudapp/src/app/preview/preview.component.ts | 44 +++++++++++++++++++ cloudapp/src/app/services/print.service.ts | 1 + cloudapp/src/i18n/en.json | 4 ++ cloudapp/src/i18n/zh.json | 4 ++ 10 files changed, 118 insertions(+) create mode 100644 cloudapp/src/app/preview/preview.component.html create mode 100644 cloudapp/src/app/preview/preview.component.scss create mode 100644 cloudapp/src/app/preview/preview.component.ts diff --git a/cloudapp/src/app/app-routing.module.ts b/cloudapp/src/app/app-routing.module.ts index cf862c7..3fa267e 100644 --- a/cloudapp/src/app/app-routing.module.ts +++ b/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({ diff --git a/cloudapp/src/app/app.module.ts b/cloudapp/src/app/app.module.ts index ec9c913..853868b 100644 --- a/cloudapp/src/app/app.module.ts +++ b/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, diff --git a/cloudapp/src/app/labels/labels.component.html b/cloudapp/src/app/labels/labels.component.html index 43991a0..966b003 100644 --- a/cloudapp/src/app/labels/labels.component.html +++ b/cloudapp/src/app/labels/labels.component.html @@ -10,6 +10,7 @@ arrow_back_ios {{ 'Back' | translate}} +
diff --git a/cloudapp/src/app/labels/labels.component.ts b/cloudapp/src/app/labels/labels.component.ts index e0260a8..766b97d 100644 --- a/cloudapp/src/app/labels/labels.component.ts +++ b/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 = ""; + 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]; diff --git a/cloudapp/src/app/preview/preview.component.html b/cloudapp/src/app/preview/preview.component.html new file mode 100644 index 0000000..db24c6e --- /dev/null +++ b/cloudapp/src/app/preview/preview.component.html @@ -0,0 +1,32 @@ +
+ + + +
+
+

Labels.Preview

+

Labels.EditInstructions

+

 

+ +
diff --git a/cloudapp/src/app/preview/preview.component.scss b/cloudapp/src/app/preview/preview.component.scss new file mode 100644 index 0000000..6d9514b --- /dev/null +++ b/cloudapp/src/app/preview/preview.component.scss @@ -0,0 +1,7 @@ +.config { + .mat-form-field { + width: 100%; + max-width: 400px; + display: block; + } + } \ No newline at end of file diff --git a/cloudapp/src/app/preview/preview.component.ts b/cloudapp/src/app/preview/preview.component.ts new file mode 100644 index 0000000..14831d5 --- /dev/null +++ b/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(['/'])); + } +} diff --git a/cloudapp/src/app/services/print.service.ts b/cloudapp/src/app/services/print.service.ts index 89dc7d7..efef9b3 100644 --- a/cloudapp/src/app/services/print.service.ts +++ b/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; diff --git a/cloudapp/src/i18n/en.json b/cloudapp/src/i18n/en.json index c2384e6..0064309 100644 --- a/cloudapp/src/i18n/en.json +++ b/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?", diff --git a/cloudapp/src/i18n/zh.json b/cloudapp/src/i18n/zh.json index c54464e..50c207e 100644 --- a/cloudapp/src/i18n/zh.json +++ b/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": "所有书标都打印完成了吗?", From 5db0f0fedc3dd5dad169cc7744f739a6a2fb8b8a Mon Sep 17 00:00:00 2001 From: mgobat <45852490+mgobat@users.noreply.github.com> Date: Fri, 20 Sep 2024 07:27:25 -0500 Subject: [PATCH 2/3] Support alternative call number parts Expose the individual parsed alternative call number parts for inclusion in a label template. GitHub issue #132. --- cloudapp/src/app/models/item.ts | 13 ++++++++- cloudapp/src/app/print/print.component.ts | 32 ++++++++++++++++++++--- cloudapp/src/i18n/en.json | 10 +++++++ cloudapp/src/i18n/zh.json | 10 +++++++ 4 files changed, 60 insertions(+), 5 deletions(-) diff --git a/cloudapp/src/app/models/item.ts b/cloudapp/src/app/models/item.ts index 9faf042..ee58770 100644 --- a/cloudapp/src/app/models/item.ts +++ b/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' + ] \ No newline at end of file diff --git a/cloudapp/src/app/print/print.component.ts b/cloudapp/src/app/print/print.component.ts index 9dd5bb5..1c0f670 100644 --- a/cloudapp/src/app/print/print.component.ts +++ b/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 "
"; + else + return ''; + } + if (detail.substring(22) - 1 < altCallNoVal.length) + return this.getCallNoPart(altCallNoVal, detail.substring (22) - 1); + else { + if (this.template.blankFields) + return "
"; + 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, part_number) { if (val[part_number] != undefined) { - if (this.template.blankFields && val[part_number] == '') { - return "
"; - } + if (this.template.blankFields && val[part_number] == '') + return "
"; return val[part_number]; } else { if (this.template.blankFields) { - return "
"; + return "
"; } else return ''; diff --git a/cloudapp/src/i18n/en.json b/cloudapp/src/i18n/en.json index 0064309..2a51a9f 100644 --- a/cloudapp/src/i18n/en.json +++ b/cloudapp/src/i18n/en.json @@ -145,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)", diff --git a/cloudapp/src/i18n/zh.json b/cloudapp/src/i18n/zh.json index 50c207e..c975224 100644 --- a/cloudapp/src/i18n/zh.json +++ b/cloudapp/src/i18n/zh.json @@ -145,6 +145,16 @@ "item_data.call_no_8":"解析过的索书号第八部分", "item_data.call_no_9":"解析过的索书号第九部分", "item_data.call_no_10":"解析过的索书号第十部分", + "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":"日期格式", "dateSeparator":"日期分隔符", "pattern": "索书号匹配项(正则表达式)", From 1c968cc089381d48e8034a4dd3c2798aa45697a4 Mon Sep 17 00:00:00 2001 From: mgobat <45852490+mgobat@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:13:31 -0600 Subject: [PATCH 3/3] Update zh.json Add translations for parsed alternate call number parts. --- cloudapp/src/i18n/zh.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/cloudapp/src/i18n/zh.json b/cloudapp/src/i18n/zh.json index c975224..fe16cb2 100644 --- a/cloudapp/src/i18n/zh.json +++ b/cloudapp/src/i18n/zh.json @@ -145,16 +145,16 @@ "item_data.call_no_8":"解析过的索书号第八部分", "item_data.call_no_9":"解析过的索书号第九部分", "item_data.call_no_10":"解析过的索书号第十部分", - "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", + "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": "索书号匹配项(正则表达式)",