From b168510e8442877e03b4f43f98f4b287ed1090df Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 21 Nov 2019 16:07:06 -0500
Subject: [PATCH] LPXXX editor continued

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../share/marc-edit/editable-content.component.css | 14 ++++--
 .../marc-edit/editable-content.component.html      |  4 +-
 .../share/marc-edit/editable-content.component.ts  | 58 ++++++++++++++++++----
 .../share/marc-edit/fixed-field.component.html     | 13 +++--
 .../staff/share/marc-edit/fixed-field.component.ts |  8 +--
 .../marc-edit/fixed-fields-editor.component.html   | 24 ++++-----
 .../share/marc-edit/rich-editor.component.css      |  8 +++
 .../share/marc-edit/rich-editor.component.html     | 10 ++--
 8 files changed, 95 insertions(+), 44 deletions(-)

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 1206312a6d..d84ad8a555 100644
--- 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
@@ -8,7 +8,15 @@ div[contenteditable] {
    min-height: calc(1.5em + .75rem + 2px);
 }
 
-/* snuggle the delimiter and subfield codes */
-.sf-delimiter { margin-right: -0.4rem; }
-.sf-code { margin-left: -0.4rem; }
+.sf-delimiter { 
+  /* match angjs color */
+  color: rgb(0, 0, 255); 
+  /* snuggle up to my subfield code */
+  margin-right: -1rem; 
+}
+
+.sf-code { 
+  /* match angjs color */
+  color: rgb(0, 0, 255); 
+}
 
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 f63f5aac58..87fd2cf0f9 100644
--- 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
@@ -2,7 +2,7 @@
 <ng-container *ngIf="bigText">
   <div contenteditable
     id='{{randId}}' 
-    class="d-inline-block p-1 text-break {{moreClasses}}"
+    class="d-inline-block p-1 pt-2 text-dark text-break {{moreClasses}}"
     [attr.tabindex]="fieldText ? -1 : ''"
     (keydown)="inputKeyDown($event)"
     (focus)="focusBigText()"
@@ -13,7 +13,7 @@
 <ng-container *ngIf="!bigText">
   <input 
     id='{{randId}}' 
-    class="p-0 pl-1 text-break rounded-0 form-control {{moreClasses}}"
+    class="p-0 pl-1 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 1c3cc11174..1dcbbf0cc6 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
@@ -143,7 +143,10 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
     }
 
     inputSize(): number {
-        // give at least 2 chars space and grow with the content
+        if (this.maxLength) {
+            return this.maxLength;
+        }
+        // give at least 2+ chars space and grow with the content
         return Math.max(2, (this.getContent() || '').length) * 1.1;
     }
 
@@ -169,6 +172,9 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
             case 'Delete': return this.keyDelete(evt);
             case 'ArrowDown': return this.keyArrowDown(evt);
             case 'ArrowUp': return this.keyArrowUp(evt);
+            case 'F6': return this.keyF6(evt);
+            case 'F7': return this.keyF7(evt);
+            case 'F8': return this.keyF8(evt);
         }
     }
 
@@ -243,12 +249,12 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
                 this.field, 
                 this.context.record.cloneField(this.field)
             );
+        }
 
-            const field = this.record.getNextField(this.field.fieldId);
-            if (field) {
-                this.context.requestFieldFocus(
-                    {fieldId: field.fieldId, target: 'tag'});
-            }
+        const field = this.record.getNextField(this.field.fieldId);
+        if (field) {
+            this.context.requestFieldFocus(
+                {fieldId: field.fieldId, target: 'tag'});
         }
 
         evt.preventDefault();
@@ -264,15 +270,45 @@ export class EditableContentComponent implements OnInit, AfterViewInit {
                 this.field, 
                 this.context.record.cloneField(this.field)
             );
+        }
 
-            const field = this.record.getPreviousField(this.field.fieldId);
-            if (field) {
-                this.context.requestFieldFocus(
-                    {fieldId: field.fieldId, target: 'tag'});
-            }
+        const field = this.record.getPreviousField(this.field.fieldId);
+        if (field) {
+            this.context.requestFieldFocus(
+                {fieldId: field.fieldId, target: 'tag'});
         }
 
         evt.preventDefault();
     }
+
+    keyF6(evt: KeyboardEvent) {
+        console.log('f6');
+
+        if (evt.shiftKey) {
+
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+    }
+
+    keyF7(evt: KeyboardEvent) {
+        console.log('f7');
+
+        if (evt.shiftKey) {
+
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+    }
+
+    keyF8(evt: KeyboardEvent) {
+        console.log('f8');
+
+        if (evt.shiftKey) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+    }
 }
 
+
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 4ec452360f..3cd6d73109 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
@@ -9,11 +9,14 @@
     </div>
   </ng-template>
 
-  <div class="form-inline d-flex border-bottom">
-    <label for='fixed-field-input-{{field}}' class="pr-2 flex-1">
-      {{fieldLabel}}
-    </label>
-    <input id='fixed-field-input-{{fieldCode}}-{{randId}}'
+  <div class="form-inline d-flex">
+    <div class="pr-2 flex-1">
+      <span id='label-{{randId}}' class="text-left font-weight-bold">
+        {{fieldLabel}}
+      </span>
+    </div>
+    <input 
+      [attr.aria-labelledby]="'label-' + randId"
       class="form-control rounded-0 flex-1 pl-1" type="text" 
       (change)="valueChange()"
       [(ngModel)]="fieldValue" 
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 28ad9d3c63..1f6bb8eff1 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
@@ -32,13 +32,9 @@ export class FixedFieldComponent implements OnInit {
     fieldLength: number = null;
     fieldValues: FixedFieldValue[] = null;
     popOver: NgbPopover;
-    randId: string;
+    randId = Math.floor(Math.random() * 10000000);
 
-    constructor(
-        private tagTable: TagTableService
-    ) {
-        this.randId = Math.random().toFixed(5);
-    }
+    constructor(private tagTable: TagTableService) {}
 
     ngOnInit() {
         this.init().then(_ =>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.html b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.html
index 33497e44e5..97d866f54a 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/fixed-fields-editor.component.html
@@ -1,4 +1,4 @@
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="Type" fieldLabel="Type"></eg-fixed-field>
@@ -24,7 +24,7 @@
       fieldCode="Lang" fieldLabel="Lang"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="BLvl" fieldLabel="BLvl"></eg-fixed-field>
@@ -50,7 +50,7 @@
       fieldCode="Ctry" fieldLabel="Ctry"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="s_l" fieldLabel="s_l"></eg-fixed-field>
@@ -76,7 +76,7 @@
       fieldCode="Alph" fieldLabel="Alph"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="Desc" fieldLabel="Desc"></eg-fixed-field>
@@ -102,7 +102,7 @@
       fieldCode="Date2" fieldLabel="Date2"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="SrTp" fieldLabel="SrTp"></eg-fixed-field>
@@ -124,7 +124,7 @@
       fieldCode="EntW" fieldLabel="EntW"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="TrAr" fieldLabel="TrAr"></eg-fixed-field>
@@ -150,7 +150,7 @@
       fieldCode="Comp" fieldLabel="Comp"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="SpFm" fieldLabel="SpFm"></eg-fixed-field>
@@ -168,7 +168,7 @@
       fieldCode="CrTp" fieldLabel="CrTp"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="TMat" fieldLabel="TMat"></eg-fixed-field>
@@ -186,7 +186,7 @@
       fieldCode="File" fieldLabel="File"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="Type_tbmfhd" fieldLabel="Type_tbmfhd"></eg-fixed-field>
@@ -212,7 +212,7 @@
       fieldCode="CatLang" fieldLabel="CatLang"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="Kind" fieldLabel="Kind"></eg-fixed-field>
@@ -238,7 +238,7 @@
       fieldCode="NameUse" fieldLabel="NameUse"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="SubjUse" fieldLabel="SubjUse"></eg-fixed-field>
@@ -264,7 +264,7 @@
       fieldCode="UpdStatus" fieldLabel="UpdStatus"></eg-fixed-field>
   </div>
 </div>
-<div class="row pb-1">
+<div class="row p-0">
   <div class="col-lg-2">
     <eg-fixed-field i18n-fieldLabel [context]="context" 
       fieldCode="Name" fieldLabel="Name"></eg-fixed-field>
diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css
index e69de29bb2..5c90f28b9b 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.css
@@ -0,0 +1,8 @@
+
+.fixed-fields-container {
+  /*
+   * wait for https://bugs.launchpad.net/evergreen/+bug/1735568 approval
+  background-color: lightcyan;
+  border-bottom: 1px solid gray;
+  */
+}
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 b14628ef75..dd494ba67e 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
@@ -4,10 +4,10 @@
 </ng-container>
 
 <ng-container *ngIf="dataLoaded">
-  <div class="mt-3 text-monospace" 
+  <div class="mt-3 text-monospace"
     (contextmenu)="$event.preventDefault()">
-    <div class="row">
-      <div class="col-lg-9">
+    <div class="row pb-2">
+      <div class="col-lg-9 fixed-fields-container">
         <eg-fixed-fields-editor [context]="context"></eg-fixed-fields-editor>
       </div>
     </div>
@@ -55,13 +55,13 @@
 
         <!-- SUBFIELD DECORATOR/DELIMITER -->
         <eg-marc-editable-content fieldText="‡" i18n-fieldText
-          moreClasses="sf-delimiter text-primary border-right-0 bg-transparent">
+          moreClasses="sf-delimiter border-right-0 bg-transparent">
         </eg-marc-editable-content>
 
         <!-- SUBFIELD CHARACTER -->
         <eg-marc-editable-content [context]="context" fieldType="sfc" 
           [field]="field" [subfield]="subfield" 
-          moreClasses="sf-code text-primary border-left-0">
+          moreClasses="sf-code border-left-0">
         </eg-marc-editable-content>
 
         <!-- SUBFIELD VALUE -->
-- 
2.11.0