From 4162057c4e291163a9cda692f63f0777b21fc3d1 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Wed, 11 Dec 2019 12:31:15 -0500 Subject: [PATCH] LP1852782 Context menu nagivation and FF repairs Allow keyboard navigation of context menus by changing the action links to buttons. Teach the menu to close itself once an action has been selected to cover cases where the popover does not close itself, specifically on keyboard Enter to select. Teach the editor to reload the tagtable data when the record type has changed and refresh all of its child component, since a Type change impacts all of the tagtable options. Signed-off-by: Bill Erickson Signed-off-by: Jane Sandberg --- .../context-menu-container.component.html | 6 ++++-- .../share/context-menu/context-menu.directive.ts | 25 ++++++++++++++++++---- .../share/marc-edit/editable-content.component.ts | 6 +++--- .../staff/share/marc-edit/rich-editor.component.ts | 14 +++++++++++- .../app/staff/share/marc-edit/tagtable.service.ts | 3 ++- 5 files changed, 43 insertions(+), 11 deletions(-) diff --git a/Open-ILS/src/eg2/src/app/share/context-menu/context-menu-container.component.html b/Open-ILS/src/eg2/src/app/share/context-menu/context-menu-container.component.html index 0d6c0a0ede..9a302883f7 100644 --- a/Open-ILS/src/eg2/src/app/share/context-menu/context-menu-container.component.html +++ b/Open-ILS/src/eg2/src/app/share/context-menu/context-menu-container.component.html @@ -2,7 +2,9 @@
- {{entry.label}} + class="menu-entry {{entryClasses}}"> +
diff --git a/Open-ILS/src/eg2/src/app/share/context-menu/context-menu.directive.ts b/Open-ILS/src/eg2/src/app/share/context-menu/context-menu.directive.ts index 14de769c52..2b22c4cfb2 100644 --- a/Open-ILS/src/eg2/src/app/share/context-menu/context-menu.directive.ts +++ b/Open-ILS/src/eg2/src/app/share/context-menu/context-menu.directive.ts @@ -52,21 +52,38 @@ export class ContextMenuDirective extends NgbPopover { // Only broadcast entry selection to my listeners if I'm // hosting the menu where the selection occurred. - if (this.menu && this.menu.id === this.menuService.activeMenu.id) { + if (this.activeMenuIsMe()) { this.menuItemSelected.emit(entry); + + // Item selection via keyboard fails to close the menu. + // Force it closed. + this.cleanup(); } }); } - open() { + activeMenuIsMe(): boolean { + return ( + this.menu && + this.menuService.activeMenu && + this.menu.id === this.menuService.activeMenu.id + ); + } - // In certain scenarios (e.g. right-clicking on another context - // menu) an open popover will stay open. Force it closed here. + // Close the active menu + cleanup() { if (ContextMenuDirective.activeDirective) { ContextMenuDirective.activeDirective.close(); ContextMenuDirective.activeDirective = null; this.menuService.activeMenu = null; } + } + + open() { + + // In certain scenarios (e.g. right-clicking on another context + // menu) an open popover will stay open. Force it closed here. + this.cleanup(); if (!this.menuEntries || this.menuEntries.length === 0) { diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts index c6c1ebc498..f1afe30922 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts @@ -188,9 +188,6 @@ export class EditableContentComponent this.maxLength = fieldMeta.length || 1; } }); - - // Fixed field options change when the record type changes. - this.context.recordChange.subscribe(_ => this.applyFFOptions()); } // These are served dynamically to handle cases where a tag or @@ -537,6 +534,9 @@ export class EditableContentComponent contextMenuChange(value: string) { this.setContent(value, true); + + // Context menus can steal focus. + this.context.requestFieldFocus(this.context.lastFocused); } } 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 1c50c57c4f..337756a79f 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 @@ -1,5 +1,6 @@ import {Component, Input, Output, OnInit, AfterViewInit, EventEmitter, OnDestroy} from '@angular/core'; +import {filter} from 'rxjs/operators'; import {IdlService} from '@eg/core/idl.service'; import {OrgService} from '@eg/core/org.service'; import {TagTableService} from './tagtable.service'; @@ -36,6 +37,10 @@ export class MarcRichEditorComponent implements OnInit { ngOnInit() { this.init().then(_ => this.context.recordChange.subscribe(__ => this.init())); + + // Changing the Type fixed field means loading new meta-metadata. + this.record.fixedFieldChange.pipe(filter(code => code === 'Type')) + .subscribe(_ => this.init()); } init(): Promise { @@ -47,7 +52,14 @@ export class MarcRichEditorComponent implements OnInit { this.tagTable.loadTagTable({marcRecordType: this.context.recordType}), this.tagTable.getFfPosTable(this.record.recordType()), this.tagTable.getFfValueTable(this.record.recordType()) - ]).then(_ => this.dataLoaded = true); + ]).then(_ => + // setTimeout forces all of our sub-components to rerender + // themselves each time init() is called. Without this, + // changing the record Type would only re-render the fixed + // fields editor when data had to be fetched from the + // network. (Sometimes the data is cached). + setTimeout(() => this.dataLoaded = true) + ); } undoCount(): number { 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 13cbd2c0e8..e3571b1322 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 @@ -135,7 +135,8 @@ export class TagTableService { selector = defaultTagTableSelector; } - const cacheKey = 'FFValueTable_' + selector.marcRecordType; + const cacheKey = + `current_tag_table_${selector.marcFormat}_${selector.marcRecordType}`; this.tagMap = this.store.getLocalItem(cacheKey); -- 2.11.0