From: Bill Erickson Date: Fri, 15 Nov 2019 17:01:50 +0000 (-0500) Subject: LPXXX MARC enriched editor FF popovers X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=c1c83b1f0d9f46de353bdcb1a1e300e428bfb809;p=working%2FEvergreen.git LPXXX MARC enriched editor FF popovers Signed-off-by: Bill Erickson --- diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts index ea49034a57..db6ba1c022 100644 --- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts +++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts @@ -52,6 +52,8 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit { @Input() allowFreeText = false; + @Input() inputSize: number = null; + // Add a 'required' attribute to the input isRequired: boolean; @Input() set required(r: boolean) { diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts index 88447fd3e2..8eccfba947 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor-context.ts @@ -1,10 +1,13 @@ import {EventEmitter} from '@angular/core'; import {MarcRecord} from './marcrecord'; +import {NgbPopover} from '@ng-bootstrap/ng-bootstrap'; export class MarcEditContext { recordChange: EventEmitter; + popOvers: NgbPopover[] = []; + private _record: MarcRecord; set record(r: MarcRecord) { if (r !== this._record) { @@ -14,12 +17,18 @@ export class MarcEditContext { } get record(): MarcRecord { - return this._record; + return this._record; } constructor() { this.recordChange = new EventEmitter(); } + // NgbPopovers don't always close when we want them to, + // specifcially when context-clicking. + closePopovers() { + this.popOvers.forEach(p => p.close()); + } + } diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.ts index a4d466e1a8..3294f1e708 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.ts @@ -40,8 +40,8 @@ export class MarcEditorComponent implements OnInit { } @Input() set recordXml(xml: string) { - if (xml) { - this.fromXml(xml); + if (xml) { + this.fromXml(xml); } } @@ -89,7 +89,7 @@ export class MarcEditorComponent implements OnInit { ngOnInit() { // Default to flat for now since it's all that's supported. - //this.editorTab = 'flat'; + // this.editorTab = 'flat'; this.pcrud.retrieveAll('cbs').subscribe( src => this.sources.push({id: +src.id(), label: src.source()}), diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.css new file mode 100644 index 0000000000..59a5e7e4d9 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.css @@ -0,0 +1,21 @@ + +:host >>> .popover { + font-family: monospace; + font-size: 120%; + max-width: 550px; +} + +:host >>> .popover-body { + max-height: 400px; + overflow-y: auto; + overflow-x: auto; +} + +:host >>> .popover-body .menu-entry { + white-space: nowrap; +} + +:host >>> .popover-body .menu-entry:hover { + background-color: lightgrey; +} + diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html index 6fd6d509af..404d78f13c 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.html @@ -1,11 +1,27 @@ + + +
+ + {{value.label}} + +
+ +
- + + + [attr.maxlength]="fieldSize" [attr.size]="fieldSize" + [ngbPopover]="menuContent" + #p="ngbPopover" triggers="manual" + (contextmenu)="contextMenu($event, p)" + />
diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.ts index a7c1fdb6d8..ce2779140d 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-field.component.ts @@ -1,16 +1,22 @@ -import {Component, Input, Output, OnInit, AfterViewInit, EventEmitter, - OnDestroy} from '@angular/core'; +import {Component, Input, Output, OnInit, EventEmitter} from '@angular/core'; import {MarcRecord} from './marcrecord'; import {MarcEditContext} from './editor-context'; import {TagTableService} from './tagtable.service'; +import {NgbPopover} from '@ng-bootstrap/ng-bootstrap'; /** * MARC Fixed Field Editing Component */ +interface FixedFieldValue { + value: string; + label: string; +} + @Component({ selector: 'eg-fixed-field', - templateUrl: './fixed-field.component.html' + templateUrl: './fixed-field.component.html', + styleUrls: ['fixed-field.component.css'] }) export class FixedFieldComponent implements OnInit { @@ -23,30 +29,33 @@ export class FixedFieldComponent implements OnInit { fieldValue: string; fieldMeta: any; - fieldSize = 4; + fieldSize: number = null; + fieldValues: FixedFieldValue[] = null; + popOver: NgbPopover; constructor( private tagTable: TagTableService ) {} ngOnInit() { - this.init().then(_ => - this.context.recordChange.subscribe(_ => this.init())); + this.init().then(_ => + this.context.recordChange.subscribe(__ => this.init())); } init(): Promise { if (!this.record) { return Promise.resolve(); } + this.fieldValues = null; return this.tagTable.getFFPosTable(this.record.recordType()) .then(table => { // Note the AngJS MARC editor stores the full POS table - // for all record types in every copy of the table, hence + // for all record types in every copy of the table, hence // the seemingly extraneous check in recordType. - this.fieldMeta = table.filter( - field => field.fixed_field === this.fieldCode - && field.rec_type === this.record.recordType())[0]; + this.fieldMeta = table.filter(field => + field.fixed_field === this.fieldCode + && field.rec_type === this.record.recordType())[0]; if (!this.fieldMeta) { // Not all record types have all field types. @@ -54,20 +63,46 @@ export class FixedFieldComponent implements OnInit { } this.fieldSize = this.fieldMeta.length || 1; - this.fieldValue = + this.fieldValue = this.context.record.extractFixedField(this.fieldCode); - // Shuffling may occur wht our fixed field value based on + // Shuffling may occur with our fixed field as a result of // external changes. - this.record.fixedFieldChange.subscribe(_ => - this.fieldValue = + this.record.fixedFieldChange.subscribe(_ => + this.fieldValue = this.context.record.extractFixedField(this.fieldCode) ); + + return this.tagTable.getFFValueTable(this.record.recordType()); + + }).then(values => { + if (!values || !values[this.fieldCode]) { return; } + + // extract the canned set of possible values for our + // fixed field. Ignore those whose value exceeds the + // specified field length. + this.fieldValues = values[this.fieldCode] + .filter(val => val[0].length <= val[2]) + .map(val => ({value: val[0], label: `${val[0]}: ${val[1]}`})) + .sort((a, b) => a.label < b.label ? -1 : 1); }); } valueChange(newVal) { this.context.record.setFixedField(this.fieldCode, this.fieldValue); } + + contextMenu($event, popOver: NgbPopover) { + $event.preventDefault(); + this.context.closePopovers(); + + if (this.fieldValues) { + if (!this.popOver) { + this.popOver = popOver; + this.context.popOvers.push(popOver); + } + this.popOver.open(); + } + } } diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html index 5ae2331aaf..588be29376 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html @@ -1,9 +1,16 @@ -
-
-
- + + + + + +
+
+
+ +
-
+ diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts index 9e5528a94e..9b333ee17e 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts @@ -22,6 +22,8 @@ export class MarcRichEditorComponent implements OnInit { @Input() context: MarcEditContext; get record(): MarcRecord { return this.context.record; } + dataLoaded: boolean; + constructor( private idl: IdlService, private org: OrgService, @@ -29,17 +31,19 @@ export class MarcRichEditorComponent implements OnInit { ) {} ngOnInit() { - this.init().then(_ => - this.context.recordChange.subscribe(_ => this.init())); + this.init().then(_ => + this.context.recordChange.subscribe(__ => this.init())); } init(): Promise { + this.dataLoaded = false; + if (!this.record) { return Promise.resolve(); } return Promise.all([ this.tagTable.getFFPosTable(this.record.recordType()), this.tagTable.getFFValueTable(this.record.recordType()) - ]); + ]).then(_ => this.dataLoaded = true); } } diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/tagtable.service.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/tagtable.service.ts index 956255d237..d7b470111c 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/tagtable.service.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/tagtable.service.ts @@ -12,7 +12,6 @@ export class TagTableService { ffPosMap: {[rtype: string]: any[]} = {}; ffValueMap: {[rtype: string]: any} = {}; - promiseCache: {[ptype: string]: Promise} = {}; constructor( private store: StoreService, @@ -35,21 +34,14 @@ export class TagTableService { return Promise.resolve(this.ffPosMap[rtype]); } - if (this.promiseCache[storeKey]) { - return this.promiseCache[storeKey]; - } - - this.promiseCache[storeKey] = this.net.request( + return this.net.request( 'open-ils.fielder', 'open-ils.fielder.cmfpm.atomic', {query: {tag: {'!=' : '006'}, rec_type: rtype}} - ).toPromise().then(table => { + ).toPromise().then(table => { this.store.setLocalItem(storeKey, table); - delete this.promiseCache[storeKey]; return this.ffPosMap[rtype] = table; }); - - return this.promiseCache[storeKey]; } getFFValueTable(rtype: string): Promise { @@ -66,20 +58,14 @@ export class TagTableService { return Promise.resolve(this.ffValueMap[rtype]); } - if (this.promiseCache[storeKey]) { - return this.promiseCache[storeKey]; - } - - this.promiseCache[storeKey] = this.net.request( + return this.net.request( 'open-ils.cat', 'open-ils.cat.biblio.fixed_field_values.by_rec_type', rtype + ).toPromise().then(table => { - delete this.promiseCache[storeKey]; this.store.setLocalItem(storeKey, table); return this.ffValueMap[rtype] = table; }); - - return this.promiseCache[storeKey]; } }