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> --- .../share/marc-edit/editable-content.component.ts | 5 + .../share/marc-edit/rich-editor.component.html | 101 +++++++++++++-------- .../staff/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.11.0