diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts index f25839b1f1..4837affbc6 100644 --- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts +++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts @@ -20,7 +20,7 @@ interface CustomFieldTemplate { context?: {[fields: string]: any}; } -interface CustomFieldContext { +export interface CustomFieldContext { // Current create/edit/view record record: IdlObject; diff --git a/Open-ILS/src/eg2/src/app/share/print/print.component.ts b/Open-ILS/src/eg2/src/app/share/print/print.component.ts index e7754abbd3..f9238aa628 100644 --- a/Open-ILS/src/eg2/src/app/share/print/print.component.ts +++ b/Open-ILS/src/eg2/src/app/share/print/print.component.ts @@ -53,35 +53,64 @@ export class PrintComponent implements OnInit { this.isPrinting = true; - this.applyTemplate(printReq); - - // Give templates a chance to render before printing - setTimeout(() => { - this.dispatchPrint(printReq); - this.reset(); + this.applyTemplate(printReq).then(() => { + // Give templates a chance to render before printing + setTimeout(() => { + this.dispatchPrint(printReq); + this.reset(); + }); }); } - applyTemplate(printReq: PrintRequest) { + applyTemplate(printReq: PrintRequest): Promise { if (printReq.template) { - // Inline template. Let Angular do the interpolationwork. + // Local Angular template. this.template = printReq.template; this.context = {$implicit: printReq.contextData}; - return; + return Promise.resolve(); + } + + let promise; + + // Precompiled text + if (printReq.text) { + promise = Promise.resolve(); + + } else if (printReq.templateName || printReq.templateId) { + // Server-compiled template + + promise = this.printer.compileRemoteTemplate(printReq).then( + response => { + printReq.text = response.content; + printReq.contentType = response.contentType; + }, + err => { + console.error("Error compiling template", printReq); + return Promise.reject(new Error( + 'Error compiling server-hosted print template')); + } + ); + + } else { + console.error("Cannot find template", printReq); + return Promise.reject(new Error("Cannot find print template")); } - if (printReq.text && !this.useHatch()) { - // Insert HTML into the browser DOM for in-browser printing only. + return promise.then(() => { - if (printReq.contentType === 'text/plain') { + // Insert HTML into the browser DOM for in-browser printing. + if (printReq.text && !this.useHatch()) { + + if (printReq.contentType === 'text/plain') { // Wrap text/plain content in pre's to prevent // unintended html formatting. - printReq.text = `

${printReq.text}

`; - } + printReq.text = `

${printReq.text}

`; + } - this.htmlContainer.innerHTML = printReq.text; - } + this.htmlContainer.innerHTML = printReq.text; + } + }); } // Clear the print data @@ -129,7 +158,10 @@ export class PrintComponent implements OnInit { printViaHatch(printReq: PrintRequest) { // Send a full HTML document to Hatch - const html = `${printReq.text}`; + let html = printReq.text; + if (printReq.contentType === 'text/html') { + html = `${printReq.text}`; + } this.serverStore.getItem(`eg.print.config.${printReq.printContext}`) .then(config => { diff --git a/Open-ILS/src/eg2/src/app/share/print/print.service.ts b/Open-ILS/src/eg2/src/app/share/print/print.service.ts index 5ae6844dfd..d4d0263d1c 100644 --- a/Open-ILS/src/eg2/src/app/share/print/print.service.ts +++ b/Open-ILS/src/eg2/src/app/share/print/print.service.ts @@ -1,8 +1,18 @@ import {Injectable, EventEmitter, TemplateRef} from '@angular/core'; +import {tap} from 'rxjs/operators'; import {StoreService} from '@eg/core/store.service'; +import {LocaleService} from '@eg/core/locale.service'; +import {AuthService} from '@eg/core/auth.service'; + +declare var js2JSON: (jsThing: any) => string; + +const PRINT_TEMPLATE_PATH = '/print_template'; export interface PrintRequest { template?: TemplateRef; + templateName?: string; + templateOwner?: number; // org unit ID, follows ancestors + templateId?: number; // useful for testing templates contextData?: any; text?: string; printContext: string; @@ -10,12 +20,21 @@ export interface PrintRequest { showDialog?: boolean; } +export interface PrintTemplateResponse { + contentType: string; + content: string; +} + @Injectable() export class PrintService { onPrintRequest$: EventEmitter; - constructor(private store: StoreService) { + constructor( + private locale: LocaleService, + private auth: AuthService, + private store: StoreService + ) { this.onPrintRequest$ = new EventEmitter(); } @@ -37,5 +56,42 @@ export class PrintService { this.print(req); } } + + compileRemoteTemplate(printReq: PrintRequest): Promise { + + const formData: FormData = new FormData(); + + formData.append('ses', this.auth.token()); + if (printReq.templateName) { + formData.append('template_name', printReq.templateName); + } + if (printReq.templateId) { + formData.append('template_id', '' + printReq.templateId); + } + if (printReq.templateOwner) { + formData.append('owner', '' + printReq.templateOwner); + } + formData.append('template_data', js2JSON(printReq.contextData)); + formData.append('locale', this.locale.currentLocaleCode()); + + return new Promise((resolve, reject) => { + const xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState === 4) { + if (this.status === 200) { + resolve({ + content: xhttp.responseText, + contentType: this.getResponseHeader('content-type') + }); + } else { + reject('Error compiling print template'); + } + } + }; + xhttp.open('POST', PRINT_TEMPLATE_PATH, true); + xhttp.send(formData); + }); + + } } diff --git a/Open-ILS/src/eg2/src/app/share/util/sample-data.service.ts b/Open-ILS/src/eg2/src/app/share/util/sample-data.service.ts new file mode 100644 index 0000000000..71bcd56117 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/util/sample-data.service.ts @@ -0,0 +1,65 @@ +import {Injectable} from '@angular/core'; +import {IdlService, IdlObject} from '@eg/core/idl.service'; + +/** Service for generating sample data for testing, demo, etc. */ + +// TODO: I could also imagine this coming from a web service or +// even a flat file of web-served JSON. + +// Copied from sample of Concerto data set +const DATA = { + au: [ + {first_given_name: 'Vincent', second_given_name: 'Kenneth', family_name: 'Moran'}, + {first_given_name: 'Gregory', second_given_name: 'Adam', family_name: 'Jones'}, + {first_given_name: 'Brittany', second_given_name: 'Geraldine', family_name: 'Walker'}, + {first_given_name: 'Ernesto', second_given_name: 'Robert', family_name: 'Miller'}, + {first_given_name: 'Robert', second_given_name: 'Louis', family_name: 'Hill'}, + {first_given_name: 'Edward', second_given_name: 'Robert', family_name: 'Lopez'}, + {first_given_name: 'Andrew', second_given_name: 'Alberto', family_name: 'Bell'}, + {first_given_name: 'Jennifer', second_given_name: 'Dorothy', family_name: 'Mitchell'}, + {first_given_name: 'Jo', second_given_name: 'Mai', family_name: 'Madden'}, + {first_given_name: 'Maomi', second_given_name: 'Julie', family_name: 'Harding'} + ], + aua: [ + {street1: '1809 Target Way', city: 'Vero beach', state: 'FL', post_code: 32961}, + {street1: '3481 Facility Island', city: 'Campton', state: 'KY', post_code: 41301}, + {street1: '5150 Dinner Expressway', city: 'Dodge center', state: 'MN', post_code: 55927}, + {street1: '8496 Random Trust Points', city: 'Berryville', state: 'VA', post_code: 22611}, + {street1: '7626 Secret Institute Courts', city: 'Anchorage', state: 'AK', post_code: 99502}, + {street1: '7044 Regular Index Path', city: 'Livingston', state: 'KY', post_code: 40445}, + {street1: '3403 Thundering Heat Meadows', city: 'Miami', state: 'FL', post_code: 33157}, + {street1: '759 Doubtful Government Extension', city: 'Sellersville', state: 'PA', post_code: 18960}, + {street1: '5431 Japanese Work Rapid', city: 'Society hill', state: 'SC', post_code: 29593}, + {street1: '5253 Agricultural Exhibition Stravenue', city: 'La place', state: 'IL', post_code: 61936} + ] +}; + + +@Injectable() +export class SampleDataService { + + constructor(private idl: IdlService) {} + + randomValue(list: any[], field: string): string { + return list[Math.floor(Math.random() * list.length)][field]; + } + + listOfThings(idlClass: string, count: number = 1): IdlObject[] { + if (!(idlClass in DATA)) { + throw new Error(`No sample data for class ${idlClass}"`); + } + + const things: IdlObject[] = []; + for (let i = 0; i < count; i++) { + const thing = this.idl.create(idlClass); + Object.keys(DATA[idlClass][0]).forEach(field => + thing[field](this.randomValue(DATA[idlClass], field)) + ); + things.push(thing); + } + + return things; + } +} + + diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server-splash.component.html b/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server-splash.component.html index 211283e341..a45a0a0746 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server-splash.component.html +++ b/Open-ILS/src/eg2/src/app/staff/admin/server/admin-server-splash.component.html @@ -81,6 +81,9 @@ url="/eg/staff/admin/server/legacy/permission/grp_tree"> + +

+ + + + + + + +

+ Owner +

+ + +

+ Template +

+ + +

+ Locale +

+ + +

+ + + + +

+ + +

+ Template for "{{template.label()}}" + + (Inactive) + +

+ +

Preview

Compiled Content

{{compiledContent}}

+ + + + + + + + + diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts new file mode 100644 index 0000000000..19c9bf0c4e --- /dev/null +++ b/Open-ILS/src/eg2/src/app/staff/admin/server/print-template.component.ts @@ -0,0 +1,182 @@ +import {Component, OnInit, ViewChild, TemplateRef} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {IdlService, IdlObject} from '@eg/core/idl.service'; +import {PcrudService} from '@eg/core/pcrud.service'; +import {AuthService} from '@eg/core/auth.service'; +import {OrgService} from '@eg/core/org.service'; +import {ComboboxComponent, ComboboxEntry + } from '@eg/share/combobox/combobox.component'; +import {PrintService} from '@eg/share/print/print.service'; +import {LocaleService} from '@eg/core/locale.service'; +import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap'; +import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component'; +import {SampleDataService} from '@eg/share/util/sample-data.service'; + +/** + * Print Template Admin Page + */ + +@Component({ + templateUrl: 'print-template.component.html' +}) + +export class PrintTemplateComponent implements OnInit { + + contextOrg: IdlObject; + entries: ComboboxEntry[]; + template: IdlObject; + sampleJson: string; + localeCode: string; + localeEntries: ComboboxEntry[]; + compiledContent: string; + + @ViewChild('templateSelector') templateSelector: ComboboxComponent; + @ViewChild('tabs') tabs: NgbTabset; + @ViewChild('editDialog') editDialog: FmRecordEditorComponent; + + // Define some sample data that can be used for various templates + // Data will be filled out via the sample data service. + sampleData: any = { + patron_address: { + patron: null, + address: null + } + } + + constructor( + private route: ActivatedRoute, + private idl: IdlService, + private org: OrgService, + private pcrud: PcrudService, + private auth: AuthService, + private locale: LocaleService, + private printer: PrintService, + private samples: SampleDataService + ) { + this.entries = []; + this.localeEntries = []; + } + + ngOnInit() { + this.contextOrg = this.org.get(this.auth.user().ws_ou()); + this.localeCode = this.locale.currentLocaleCode(); + this.locale.supportedLocales().subscribe( + l => this.localeEntries.push({id: l.code(), label: l.name()})); + this.setTemplateInfo(); + this.fleshSampleData(); + } + + fleshSampleData() { + + // NOTE: server templates work fine with IDL objects, but + // vanilla hashes are easier to work with in the admin UI. + const patrons = this.idl.toHash(this.samples.listOfThings('au', 10)); + const addresses = this.idl.toHash(this.samples.listOfThings('aua', 10)); + + this.sampleData.patron_address = { + patron: patrons[0], + address: addresses[0] + }; + } + + onTabChange(evt: NgbTabChangeEvent) { + if (evt.nextId === 'template') { + this.refreshPreview(); + } + } + + container(): any { + // Only present when its tab is visible + return document.getElementById('template-preview-pane'); + } + + orgOnChange(org: IdlObject) { + this.contextOrg = org; + this.setTemplateInfo(); + } + + localeOnChange(code: string) { + if (code) { + this.localeCode = code; + this.setTemplateInfo(); + } + } + + // Fetch name/id for all templates in range. + // Avoid fetching the template content until needed. + setTemplateInfo() { + this.entries = []; + this.template = null; + this.templateSelector.applyEntryId(null); + this.compiledContent = ''; + + this.pcrud.search('cpt', + { + owner: this.contextOrg.id(), + locale: this.localeCode + }, + { + select: {cpt: ['id', 'label']}, + order_by: {cpt: 'label'} + } + ).subscribe(tmpl => + this.entries.push({id: tmpl.id(), label: tmpl.label()}) + ); + } + + selectTemplate(id: number) { + this.pcrud.retrieve('cpt', id).subscribe(t => { + this.template = t; + const data = this.sampleData[t.name()]; + if (data) { + this.sampleJson = JSON.stringify(data, null, 2); + this.refreshPreview(); + } + }); + } + + refreshPreview() { + if (!this.sampleJson) return; + this.compiledContent = ''; + + let data; + try { + data = JSON.parse(this.sampleJson); + } catch (E) { + // TODO: i18n/AlertDialog + alert('Invalid Sample Data JSON'); + } + + this.printer.compileRemoteTemplate({ + templateId: this.template.id(), + contextData: data, + printContext: 'default' // required, has no impact here + + }).then(response => { + + this.compiledContent = response.content; + if (response.contentType === 'text/html') { + this.container().innerHTML = response.content; + } else { + // Assumes text/plain or similar + this.container().innerHTML = '

' + response.content + '

'; + } + }); + } + + applyChanges() { + this.container().innerHTML = ''; + this.pcrud.update(this.template).toPromise() + .then(() =>this.refreshPreview()); + } + + openEditDialog() { + // TODO: PENDING EXTERNAL FIXES + //this.editDialog.record = this.template; + this.editDialog.recordId = this.template.id(); + this.editDialog.mode = 'update'; + this.editDialog.open({size: 'lg'}); + } +} + + diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/routing.module.ts b/Open-ILS/src/eg2/src/app/staff/admin/server/routing.module.ts index c971ed74a7..4f9b9ff366 100644 --- a/Open-ILS/src/eg2/src/app/staff/admin/server/routing.module.ts +++ b/Open-ILS/src/eg2/src/app/staff/admin/server/routing.module.ts @@ -3,6 +3,7 @@ import {RouterModule, Routes} from '@angular/router'; import {AdminServerSplashComponent} from './admin-server-splash.component'; import {BasicAdminPageComponent} from '@eg/staff/admin/basic-admin-page.component'; import {OrgUnitTypeComponent} from './org-unit-type.component'; +import {PrintTemplateComponent} from './print-template.component'; const routes: Routes = [{ path: 'splash', @@ -11,6 +12,9 @@ const routes: Routes = [{ path: 'actor/org_unit_type', component: OrgUnitTypeComponent }, { + path: 'config/print_template', + component: PrintTemplateComponent +}, { path: ':schema/:table', component: BasicAdminPageComponent }]; diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html index 38908aeed6..d77bbcd170 100644 --- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html +++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html @@ -173,6 +173,9 @@ datatype="timestamp" [datePlusTime]="true"> +

Test Server Print Template

+ +

PCRUD auto flesh and FormatService detection

@@ -210,3 +213,5 @@