From f9fd5df8f4f83e043792c7934c249fbc4ef0d0a0 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Wed, 11 Dec 2019 14:48:40 -0500
Subject: [PATCH] LP1852782 MARC editor subfield stacking support

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

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
 .../marc-edit/editable-content.component.ts   |   5 +
 .../marc-edit/rich-editor.component.html      | 101 +++++++++++-------
 .../share/marc-edit/rich-editor.component.ts  |  14 +++
 3 files changed, 83 insertions(+), 37 deletions(-)

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 f1afe30922..03acd76b18 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
@@ -177,6 +177,11 @@ export class EditableContentComponent
                 this.watchForFocusRequests();
                 this.watchForUndoRedoRequests();
                 break;
+
+            default:
+                if (this.fieldText) {
+                    this.maxLength = this.fieldText.length;
+                }
         }
     }
 
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 16d164933d..506fc56a4d 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
@@ -7,6 +7,32 @@
   </div>
 </ng-container>
 
+
+<ng-template #subfieldChunk let-field="field" let-subfield="subfield">
+
+  <!-- move these around depending on whether we are stacking subfields -->
+
+  <!-- SUBFIELD DECORATOR/DELIMITER -->
+  <eg-marc-editable-content fieldText="‡" i18n-fieldText
+    moreClasses="sf-delimiter border-right-0 bg-transparent p-1 pr-0">
+  </eg-marc-editable-content>
+
+  <!-- SUBFIELD CHARACTER -->
+  <eg-marc-editable-content
+    [context]="context" [field]="field" fieldType="sfc"
+    [subfield]="subfield" ariaLabel="Subfield Code" i18n-ariaLabel
+    moreClasses="sf-code border-left-0 p-1 pl-0">
+  </eg-marc-editable-content>
+
+  <!-- SUBFIELD VALUE -->
+  <eg-marc-editable-content
+    [context]="context" [field]="field" fieldType="sfv"
+    [subfield]="subfield" ariaLabel="Subfield Value" i18n-ariaLabel
+    moreClasses="p-1 pt-2">
+  </eg-marc-editable-content>
+
+</ng-template>
+
 <ng-container *ngIf="dataLoaded">
   <div class="mt-3 text-monospace"
     (contextmenu)="$event.preventDefault()">
@@ -33,7 +59,7 @@
         <div class="mt-2">
           <div class="form-check">
             <input class="form-check-input" type="checkbox" 
-              [disabled]="true"
+              (change)="stackSubfieldsChange()"
               [(ngModel)]="stackSubfields" id="stack-subfields-{{randId}}">
             <label class="form-check-label" for="stack-subfields-{{randId}}">
               Stack Subfields
@@ -72,7 +98,7 @@
     </div>
 
     <!-- LEADER -->
-    <div class="row pt-0 pb-0 pl-3 form-horizontal">
+    <div class="row pt-0 pb-0 pl-3">
       <eg-marc-editable-content
         [context]="context" fieldType="tag"
         fieldText="LDR" i18n-fieldText moreClasses="p-1">
@@ -85,7 +111,7 @@
     </div>
 
     <!-- CONTROL FIELDS -->
-    <div class="row pt-0 pb-0 pl-3 form-horizontal" 
+    <div class="row pt-0 pb-0 pl-3"
       *ngFor="let field of controlFields()">
 
       <eg-marc-editable-content
@@ -100,50 +126,51 @@
     </div>
 
     <!-- data fields -->
-    <div class="row pt-0 pb-0 pl-3 form-horizontal" 
-      *ngFor="let field of dataFields()">
-
-      <!-- TAG -->
-      <eg-marc-editable-content
-        [context]="context" [field]="field" fieldType="tag"
-        ariaLabel="Data Field Tag" i18n-ariaLabel moreClasses="p-1">
-      </eg-marc-editable-content>
-
-      <!-- INDICATOR 1 -->
-      <eg-marc-editable-content
-        [context]="context" [field]="field" fieldType="ind1"
-        ariaLabel="Data Field Indicator 1" i18n-ariaLabel moreClasses="p-1">
-      </eg-marc-editable-content>
-
-      <!-- INDICATOR 2 -->
-      <eg-marc-editable-content
-        [context]="context" [field]="field" fieldType="ind2"
-        ariaLabel="Data Field Indicator 2" i18n-ariaLabel moreClasses="p-1">
-      </eg-marc-editable-content>
+    <ng-container *ngFor="let field of dataFields()">
 
-      <!-- SUBFIELDS -->
-      <ng-container *ngFor="let subfield of field.subfields">
+      <div class="row pt-0 pb-0 pl-3">
 
-        <!-- SUBFIELD DECORATOR/DELIMITER -->
-        <eg-marc-editable-content fieldText="‡" i18n-fieldText
-          moreClasses="sf-delimiter border-right-0 bg-transparent p-1 pr-0">
+        <!-- TAG -->
+        <eg-marc-editable-content
+          [context]="context" [field]="field" fieldType="tag"
+          ariaLabel="Data Field Tag" i18n-ariaLabel moreClasses="p-1">
         </eg-marc-editable-content>
 
-        <!-- SUBFIELD CHARACTER -->
+        <!-- INDICATOR 1 -->
         <eg-marc-editable-content
-          [context]="context" [field]="field" fieldType="sfc"
-          [subfield]="subfield" ariaLabel="Subfield Code" i18n-ariaLabel
-          moreClasses="sf-code border-left-0 p-1 pl-0">
+          [context]="context" [field]="field" fieldType="ind1"
+          ariaLabel="Data Field Indicator 1" i18n-ariaLabel moreClasses="p-1">
         </eg-marc-editable-content>
 
-        <!-- SUBFIELD VALUE -->
+        <!-- INDICATOR 2 -->
         <eg-marc-editable-content
-          [context]="context" [field]="field" fieldType="sfv"
-          [subfield]="subfield" ariaLabel="Subfield Value" i18n-ariaLabel
-          moreClasses="p-1 pt-2">
+          [context]="context" [field]="field" fieldType="ind2"
+          ariaLabel="Data Field Indicator 2" i18n-ariaLabel moreClasses="p-1">
         </eg-marc-editable-content>
+
+        <!-- when not stacking subfields, render them inline -->
+        <ng-container *ngIf="!stackSubfields">
+          <ng-container *ngFor="let subfield of field.subfields">
+            <ng-container 
+              *ngTemplateOutlet="subfieldChunk;context:{field:field,subfield:subfield}">
+            </ng-container>
+          </ng-container>
+        </ng-container>
+      </div>
+
+      <!-- when stacking subfields, each subfield gets its own row 
+        preceeded by a placeholder for the tag as a way to 'tab' right -->
+      <ng-container *ngIf="stackSubfields">
+        <div class="form-inline" *ngFor="let subfield of field.subfields">
+          <eg-marc-editable-content fieldText="   " moreClasses="p-1 invisible">
+          </eg-marc-editable-content>
+          <ng-container 
+            *ngTemplateOutlet="subfieldChunk;context:{field:field,subfield:subfield}">
+          </ng-container>
+        </div>
       </ng-container>
-    </div>
+    </ng-container>
+
   </div>
 </ng-container>
 
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 337756a79f..6b79fe2415 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
@@ -3,6 +3,7 @@ import {Component, Input, Output, OnInit, AfterViewInit, EventEmitter,
 import {filter} from 'rxjs/operators';
 import {IdlService} from '@eg/core/idl.service';
 import {OrgService} from '@eg/core/org.service';
+import {ServerStoreService} from '@eg/core/server-store.service';
 import {TagTableService} from './tagtable.service';
 import {MarcRecord, MarcField} from './marcrecord';
 import {MarcEditContext} from './editor-context';
@@ -31,10 +32,15 @@ export class MarcRichEditorComponent implements OnInit {
     constructor(
         private idl: IdlService,
         private org: OrgService,
+        private store: ServerStoreService,
         private tagTable: TagTableService
     ) {}
 
     ngOnInit() {
+
+        this.store.getItem('cat.marcedit.stack_subfields')
+        .then(stack => this.stackSubfields = stack);
+
         this.init().then(_ =>
             this.context.recordChange.subscribe(__ => this.init()));
 
@@ -62,6 +68,14 @@ export class MarcRichEditorComponent implements OnInit {
         );
     }
 
+    stackSubfieldsChange() {
+        if (this.stackSubfields) {
+            this.store.setItem('cat.marcedit.stack_subfields', true);
+        } else {
+            this.store.removeItem('cat.marcedit.stack_subfields');
+        }
+    }
+
     undoCount(): number {
         return this.context.undoStack.length;
     }
-- 
2.43.2