LPXXX editor continued

Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 d32159a..0d6c0a0 100644 (file)
--- 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
@@ -1,9 +1,8 @@
 
 <ng-template #menuTemplate>
+  <!-- apply (click) to div so user can click anywhere in the row -->
   <div *ngFor="let entry of menuEntries; first as isFirst" 
-    class="menu-entry {{entryClasses}}">
-    <a 
-      [attr.id]="isFirst ? randId : ''" 
-      (click)="entryClicked(entry)">{{entry.label}}</a>
+   (click)="entryClicked(entry)" class="menu-entry {{entryClasses}}">
+    <a>{{entry.label}}</a>
   </div>
 </ng-template>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.css
index 7a1c050..e21bb84 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.css
@@ -12,7 +12,7 @@ div[contenteditable] {
   /* match angjs color */
   color: rgb(0, 0, 255)!important; 
   /* snuggle up to my subfield code */
-  margin-right: -1rem; 
+  margin-right: -0.5rem; 
 }
 
 .sf-code { 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html
index f44f711..e5da09b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html
@@ -3,7 +3,7 @@
   <div contenteditable
     id='{{randId}}' 
     spellcheck="false"
-    class="d-inline-block p-1 pt-2 text-dark text-break {{moreClasses}}"
+    class="d-inline-block text-dark text-break {{moreClasses}}"
     [attr.tabindex]="fieldText ? -1 : ''"
     [egContextMenu]="contextMenuEntries()"
     (menuItemSelected)="contextMenuChange($event.value)"
@@ -17,7 +17,7 @@
   <input 
     id='{{randId}}' 
     spellcheck="false"
-    class="p-0 pl-1 text-dark rounded-0 form-control {{moreClasses}}"
+    class="text-dark rounded-0 form-control {{moreClasses}}"
     [size]="inputSize()" 
     [maxlength]="maxLength || ''"
     [disabled]="fieldText" 

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 6d1b055..d1f7082 100644 (file)
--- 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
@@ -7,7 +7,7 @@ import {ContextMenuEntry} from '@eg/share/context-menu/context-menu.service';
 import {TagTableService} from './tagtable.service';
 
 /**
- * MARC Tag Editor Component
+ * MARC Editable Content Component
  */
 
 @Component({
@@ -20,10 +20,7 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
 
     @Input() context: MarcEditContext;
     @Input() field: MarcField;
-    @Input() fieldType: 'ldr' | 'tag' | 'cfld' | 'ind' | 'sfc' | 'sfv' = null;
-
-    // used when the fieldType is ambiguous. E.g. 'ind1'
-    @Input() fieldName: string = null;
+    @Input() fieldType: 'ldr' | 'tag' | 'cfld' | 'ind1' | 'ind2' | 'sfc' | 'sfv' = null;
 
     // read-only field text.  E.g. 'LDR'
     @Input() fieldText: string = null;
@@ -63,7 +60,7 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
 
             if (req.sfOffset !== undefined && 
                 req.sfOffset !== this.subfield[2]) {
-                // subfield focus request, but we are not this subfield
+                // this is not the subfield you are looking for.
                 return;
             }
 
@@ -88,7 +85,8 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
                 this.watchForFocusRequests();
                 break;
 
-            case 'ind':
+            case 'ind1':
+            case 'ind2':
                 this.maxLength = 1;
                 break;
 
@@ -110,7 +108,8 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
         if (!this.field) { return; } // LDR tag
 
         switch(this.fieldType) {
-            case 'tag': return [];
+            case 'tag': 
+                return this.tagTable.getFieldTags();
 
             case 'sfc': 
                 return this.tagTable.getSubfieldCodes(this.field.tag);
@@ -118,6 +117,11 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
             case 'sfv': 
                 return this.tagTable.getSubfieldValues(
                     this.field.tag, this.subfield[0]);
+
+            case 'ind1':
+            case 'ind2':
+                return this.tagTable.getIndicatorValues(
+                    this.field.tag, this.fieldType);
         }
 
         return null;
@@ -130,9 +134,10 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
             case 'ldr': return this.record.leader; 
             case 'cfld': return this.field.data;
             case 'tag': return this.field.tag;
-            case 'ind': return this.field[this.fieldName];
             case 'sfc': return this.subfield[0];
             case 'sfv': return this.subfield[1];
+            case 'ind1': // thunk
+            case 'ind2': return this.field[this.fieldType];
         }
     }
 
@@ -144,9 +149,10 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
             case 'ldr': this.record.leader = value; break;
             case 'cfld': this.field.data = value; break;
             case 'tag': this.field.tag = value; break;
-            case 'ind': this.field[this.fieldName] = value; break;
             case 'sfc': this.subfield[0] = value; break;
             case 'sfv': this.subfield[1] = value; break;
+            case 'ind1': // thunk
+            case 'ind2': this.field[this.fieldType] = value; break;
         }
     }
 
@@ -340,6 +346,10 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
 
     contextMenuChange(value: string) {
         this.setContent(value);
+        if (this.bigText) {
+            // propagate to div
+            this.editInput.innerText = value;
+        }
     }
 }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.html
index 557b04e..bd7c559 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editor.component.html
@@ -43,12 +43,16 @@
     <ngb-tabset [activeId]="editorTab" (tabChange)="tabChange($event)">
       <ngb-tab title="Enhanced MARC Editor" i18n-title id="rich">
         <ng-template ngbTabContent>
-          <eg-marc-rich-editor [context]="context"></eg-marc-rich-editor>
+          <ng-container *ngIf="context && context.record">
+            <eg-marc-rich-editor [context]="context"></eg-marc-rich-editor>
+          </ng-container>
         </ng-template>
       </ngb-tab>
       <ngb-tab title="Flat Text Editor" i18n-title id="flat">
         <ng-template ngbTabContent>
-          <eg-marc-flat-editor [context]="context"></eg-marc-flat-editor>
+          <ng-container *ngIf="context && context.record">
+            <eg-marc-flat-editor [context]="context"></eg-marc-flat-editor>
+          </ng-container>
         </ng-template>
       </ngb-tab>
     </ngb-tabset>

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 df18818..ca090f3 100644 (file)
--- 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
@@ -19,20 +19,24 @@
     <!-- LEADER -->
     <div class="row pt-0 pb-0 pl-3 form-horizontal">
       <eg-marc-editable-content [context]="context" fieldType="tag" 
-        fieldText="LDR" i18n-fieldText>
+        fieldText="LDR" i18n-fieldText moreClasses="p-1">
       </eg-marc-editable-content>
 
-      <eg-marc-editable-content [context]="context" fieldType="ldr">
+      <eg-marc-editable-content [context]="context" fieldType="ldr"
+         moreClasses="p-1">
       </eg-marc-editable-content>
     </div>
 
     <!-- CONTROL FIELDS -->
     <div class="row pt-0 pb-0 pl-3 form-horizontal" 
       *ngFor="let field of controlFields()">
-      <eg-marc-editable-content [context]="context" fieldType="tag" [field]="field">
+
+      <eg-marc-editable-content [context]="context" fieldType="tag"
+        [field]="field" moreClasses="p-1">
       </eg-marc-editable-content>
 
-      <eg-marc-editable-content [context]="context" fieldType="cfld" [field]="field">
+      <eg-marc-editable-content [context]="context" fieldType="cfld"
+        [field]="field" moreClasses="p-1">
       </eg-marc-editable-content>
     </div>
 
@@ -41,17 +45,18 @@
       *ngFor="let field of dataFields()">
 
       <!-- TAG -->
-      <eg-marc-editable-content [context]="context" fieldType="tag" [field]="field">
+      <eg-marc-editable-content [context]="context" fieldType="tag"
+        [field]="field" moreClasses="p-1">
       </eg-marc-editable-content>
 
       <!-- INDICATOR 1 -->
-      <eg-marc-editable-content [context]="context" fieldType="ind" 
-        [field]="field" fieldName="ind1">
+      <eg-marc-editable-content [context]="context" fieldType="ind1" 
+        [field]="field" moreClasses="p-1">
       </eg-marc-editable-content>
 
       <!-- INDICATOR 2 -->
-      <eg-marc-editable-content [context]="context" fieldType="ind"
-        [field]="field" fieldName="ind2">
+      <eg-marc-editable-content [context]="context" fieldType="ind2" 
+        [field]="field" moreClasses="p-1">
       </eg-marc-editable-content>
 
       <!-- SUBFIELDS -->
@@ -59,18 +64,18 @@
 
         <!-- SUBFIELD DECORATOR/DELIMITER -->
         <eg-marc-editable-content fieldText="‡" i18n-fieldText
-          moreClasses="sf-delimiter border-right-0 bg-transparent">
+          moreClasses="sf-delimiter border-right-0 bg-transparent p-1 pr-0">
         </eg-marc-editable-content>
 
         <!-- SUBFIELD CHARACTER -->
         <eg-marc-editable-content [context]="context" fieldType="sfc" 
           [field]="field" [subfield]="subfield" 
-          moreClasses="sf-code border-left-0">
+          moreClasses="sf-code border-left-0 p-1 pl-0">
         </eg-marc-editable-content>
 
         <!-- SUBFIELD VALUE -->
         <eg-marc-editable-content [context]="context" fieldType="sfv"
-          [field]="field" [subfield]="subfield">
+          [field]="field" [subfield]="subfield" moreClasses="p-1 pt-2">
         </eg-marc-editable-content>
       </ng-container>
     </div>

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 1896e75..9918739 100644 (file)
--- 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
@@ -29,13 +29,49 @@ export class TagTableService {
     ffPosMap: {[rtype: string]: any[]} = {};
     ffValueMap: {[rtype: string]: any} = {};
 
+    extractedValuesCache: 
+        {[valueType: string]: {[which: string]: any}} = {};
+
     constructor(
         private store: StoreService,
         private auth: AuthService,
         private net: NetService,
         private pcrud: PcrudService,
         private evt: EventService
-    ) {}
+    ) {
+        this.extractedValuesCache.fieldtags = {};
+        this.extractedValuesCache.indicators = {};
+        this.extractedValuesCache.sfcodes = {};
+        this.extractedValuesCache.sfvalues = {};
+    }
+
+    // Various data needs munging for display.  Cached the modified
+    // values since they are refernced repeatedly by the UI code.
+    fromCache(dataType: string, which?: string, which2?: string): ValueLabelPair[] {
+        const part1 = this.extractedValuesCache[dataType][which];
+        if (which2) {
+            if (part1) {
+                return part1[which2];
+            }
+        } else {
+            return part1;
+        }
+    }
+
+    toCache(dataType: string, which: string, 
+        which2: string, values: ValueLabelPair[]): ValueLabelPair[] {
+        const base = this.extractedValuesCache[dataType];
+        const part1 = base[which];
+
+        if (which2) {
+            if (!base[which]) { base[which] = {}; }
+            base[which][which2] = values;
+        } else {
+            base[which] = values;
+        }
+
+        return values;
+    }
 
     getFFPosTable(rtype: string): Promise<any> {
         const storeKey = 'FFPosTable_' + rtype;
@@ -126,15 +162,24 @@ export class TagTableService {
     getSubfieldCodes(tag: string): ValueLabelPair[] { 
         if (!tag || !this.tagMap[tag]) { return null; }
 
-        return this.tagMap[tag].subfields.map(sf => ({
+        const cached = this.fromCache('sfcodes', tag);
+
+        const list = this.tagMap[tag].subfields.map(sf => ({
             value: sf.code, 
             label: `${sf.code}: ${sf.description}`
         })) 
         .sort((a, b) => a.label < b.label ? -1 : 1);
+
+        return this.toCache('sfcodes', tag, null, list);
     }
 
     getFieldTags(): ValueLabelPair[] {
+
+        const cached = this.fromCache('fieldtags');
+        if (cached) { return cached; }
+        
         return Object.keys(this.tagMap)
+        .filter(tag => Boolean(this.tagMap[tag]))
         .map(tag => ({
             value: tag,
             label: `${tag}: ${this.tagMap[tag].name}`
@@ -145,6 +190,9 @@ export class TagTableService {
     getSubfieldValues(tag: string, sfCode: string): ValueLabelPair[] {
         if (!tag || !this.tagMap[tag]) { return []; }
 
+        const cached = this.fromCache('sfvalues', tag, sfCode)
+        if (cached) { return cached; }
+
         const list: ValueLabelPair[] = [];
 
         this.tagMap[tag].subfields
@@ -161,20 +209,25 @@ export class TagTableService {
             })
         });
 
-        return list.sort((a, b) => a.label < b.label ? -1 : 1);
+        return this.toCache('sfvalues', tag, sfCode, list);
     }
 
-    getIndicatorValues(tag: string, pos: number): ValueLabelPair[] {
+    getIndicatorValues(tag: string, which: 'ind1' | 'ind2'): ValueLabelPair[] {
         if (!tag || !this.tagMap[tag]) { return }
 
-        const value = this.tagMap[tag][`ind${pos}`];
-        if (!value) { return; }
+        const cached = this.fromCache('indicators', tag, which);
+        if (cached) { return cached; }
 
-        return value.map(tag => ({
+        let values = this.tagMap[tag][which];
+        if (!values) { return; }
+
+        values = values.map(value => ({
             value: value.code,
             label: `${value.code}: ${value.description}`
         }))
         .sort((a, b) => a.label < b.label ? -1 : 1);
+
+        return this.toCache('indicators', tag, which, values);
     }
 }