From 072e1a57a861a9c5da8bfb354d8cfc82c9415a41 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Fri, 19 Jul 2019 17:58:19 -0400 Subject: [PATCH] LP1837260 FM Record editor 'inline' display mode Adds support for a new @Input() attribute called "displayMode", which defaults to "dialog". When the value is set to "inline", the editor pane will be rendered inline within the page where the element resides. Adds support for success/fail toasts. Implements the handlers for the previously defined onSave$, onError$, and onCancel$ EventEmitters, primarly so callers can interact with the editor in "inline" mode where no "close()" operation occurs. Sandbox example included. Signed-off-by: Bill Erickson Signed-off-by: Kyle Huckins Signed-off-by: Galen Charlton --- .../share/fm-editor/fm-editor.component.html | 30 +++++++++---- .../share/fm-editor/fm-editor.component.ts | 42 ++++++++++++++----- .../app/staff/sandbox/sandbox.component.html | 10 +++++ 3 files changed, 64 insertions(+), 18 deletions(-) diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html index ad0c0b77a3..fc11eee6c2 100644 --- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html +++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html @@ -1,13 +1,18 @@ + + +

Record Editor: {{recordLabel}}

- + + +
@@ -155,12 +160,21 @@
- + + + + -
+ + + + + + + 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..a574e5491d 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 @@ -6,6 +6,8 @@ import {map} from 'rxjs/operators'; import {AuthService} from '@eg/core/auth.service'; import {PcrudService} from '@eg/core/pcrud.service'; import {DialogComponent} from '@eg/share/dialog/dialog.component'; +import {ToastService} from '@eg/share/toast/toast.service'; +import {StringComponent} from '@eg/share/string/string.component'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {ComboboxEntry} from '@eg/share/combobox/combobox.component'; import {TranslateComponent} from '@eg/staff/share/translate/translate.component'; @@ -80,10 +82,6 @@ export class FmRecordEditorComponent // IDL class hint (e.g. "aou") @Input() idlClass: string; - // mode: 'create' for creating a new record, - // 'update' for editing an existing record - // 'view' for viewing an existing record without editing - mode: 'create' | 'update' | 'view' = 'create'; recId: any; // IDL record we are editing @@ -122,6 +120,9 @@ export class FmRecordEditorComponent // for all combobox fields. See also FmFieldOptions. @Input() preloadLinkedValues: boolean; + // Display within a modal dialog window or inline in the page. + @Input() displayMode: 'dialog' | 'inline' = 'dialog'; + // Emit the modified object when the save action completes. @Output() onSave$ = new EventEmitter(); @@ -132,6 +133,8 @@ export class FmRecordEditorComponent @Output() onError$ = new EventEmitter(); @ViewChild('translator') private translator: TranslateComponent; + @ViewChild('successStr') successStr: StringComponent; + @ViewChild('failStr') failStr: StringComponent; // IDL info for the the selected IDL class idlDef: any; @@ -146,9 +149,10 @@ export class FmRecordEditorComponent // DOM id prefix to prevent id collisions. idPrefix: string; - @Input() editMode(mode: 'create' | 'update' | 'view') { - this.mode = mode; - } + // mode: 'create' for creating a new record, + // 'update' for editing an existing record + // 'view' for viewing an existing record without editing + @Input() mode: 'create' | 'update' | 'view' = 'create'; // Record ID to view/update. Value is dynamic. Records are not // fetched until .open() is called. @@ -160,6 +164,7 @@ export class FmRecordEditorComponent private modal: NgbModal, // required for passing to parent private idl: IdlService, private auth: AuthService, + private toast: ToastService, private pcrud: PcrudService) { super(modal); } @@ -174,7 +179,15 @@ export class FmRecordEditorComponent // Add some randomness to the generated DOM IDs to ensure against clobbering this.idPrefix = 'fm-editor-' + Math.floor(Math.random() * 100000); - this.onOpen$.subscribe(() => this.initRecord()); + if (this.isDialog()) { + this.onOpen$.subscribe(() => this.initRecord()); + } else { + this.initRecord(); + } + } + + isDialog(): boolean { + return this.displayMode === 'dialog'; } // Set the record value and clear the recId value to @@ -460,12 +473,21 @@ export class FmRecordEditorComponent const recToSave = this.idl.clone(this.record); this.convertDatatypesToIdl(recToSave); this.pcrud[this.mode]([recToSave]).toPromise().then( - result => this.close(result), - error => this.error(error) + result => { + this.onSave$.emit(result); + this.successStr.current().then(msg => this.toast.success(msg)); + if (this.isDialog()) { this.close(result); } + }, + error => { + this.onError$.emit(error); + this.failStr.current().then(msg => this.toast.warning(msg)); + if (this.isDialog()) { this.error(error); } + } ); } cancel() { + this.onCancel$.emit(this.record); this.close(); } 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 4ac22a9e13..2febd8eb3b 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 @@ -353,3 +353,13 @@ +
+

Inline FM Editor

+
+
+ + +
+
+
-- 2.43.2