Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html

   1
   2 <ng-container *ngIf="!dataLoaded">
   3   <div class="row mt-5">
   4     <div class="offset-lg-3 col-lg-6">
   5       <eg-progress-inline></eg-progress-inline>
   6     </div>
   7   </div>
   8 </ng-container>
   9
  10
  11 <ng-template #subfieldChunk let-field="field" let-subfield="subfield">
  12
  13   <!-- move these around depending on whether we are stacking subfields -->
  14
  15   <!-- SUBFIELD DECORATOR/DELIMITER -->
  16   <eg-marc-editable-content fieldText="‡" i18n-fieldText
  17     moreClasses="sf-delimiter border-right-0 bg-transparent p-1 pr-0">
  18   </eg-marc-editable-content>
  19
  20   <!-- SUBFIELD CHARACTER -->
  21   <eg-marc-editable-content
  22     [context]="context" [field]="field" fieldType="sfc"
  23     [subfield]="subfield" ariaLabel="Subfield Code" i18n-ariaLabel
  24     moreClasses="sf-code border-left-0 p-1 pl-0">
  25   </eg-marc-editable-content>
  26
  27   <!-- SUBFIELD VALUE -->
  28   <eg-marc-editable-content
  29     [context]="context" [field]="field" fieldType="sfv"
  30     [subfield]="subfield" ariaLabel="Subfield Value" i18n-ariaLabel
  31     moreClasses="p-1 pt-2">
  32   </eg-marc-editable-content>
  33
  34 </ng-template>
  35
  36 <ng-container *ngIf="dataLoaded">
  37   <div class="mt-3 text-monospace"
  38     (contextmenu)="$event.preventDefault()">
  39     <div class="row pb-2 mb-2 border-bottom border-muted">
  40       <div class="col-lg-9 fixed-fields-container">
  41         <eg-fixed-fields-editor [context]="context"></eg-fixed-fields-editor>
  42       </div>
  43       <div class="col-lg-3">
  44         <div><button class="btn btn-outline-dark"
  45           (click)="showHelp = !showHelp" i18n>Help</button></div>
  46         <div class="mt-2"><button class="btn btn-outline-dark"
  47           [disabled]="true"
  48           (click)="validate()" i18n>Validate</button></div>
  49         <div class="mt-2">
  50           <button type="button" class="btn btn-outline-info"
  51             [disabled]="undoCount() < 1" (click)="undo()">
  52             Undo <span class="badge badge-info">{{undoCount()}}</span>
  53           </button>
  54           <button type="button" class="btn btn-outline-info ml-2"
  55             [disabled]="redoCount() < 1" (click)="redo()">
  56             Redo <span class="badge badge-info">{{redoCount()}}</span>
  57           </button>
  58         </div>
  59         <div class="mt-2">
  60           <div class="form-check">
  61             <input class="form-check-input" type="checkbox"
  62               (change)="stackSubfieldsChange()"
  63               [(ngModel)]="stackSubfields" id="stack-subfields-{{randId}}">
  64             <label class="form-check-label" for="stack-subfields-{{randId}}">
  65               Stack Subfields
  66             </label>
  67           </div>
  68         </div>
  69       </div>
  70       <div class="col-lg-1">
  71       </div>
  72     </div>
  73     <div *ngIf="showHelp" class="row m-2">
  74       <div class="col-lg-4">
  75         <ul>
  76           <li>Undo: CTRL-z</li>
  77           <li>Redo: CTRL-y</li>
  78           <li>Add Row: CTRL+Enter</li>
  79           <li>Insert Row: CTRL+Shift+Enter</li>
  80         </ul>
  81       </div>
  82       <div class="col-lg-4">
  83         <ul>
  84          <li>Copy Current Row Above: CTRL+Up</li>
  85          <li>Copy Current Row Below: CTRL+Down</li>
  86          <li>Add Subfield: CTRL+D or CTRL+I</li>
  87          <li>Remove Row: CTRL+Del</li>
  88         </ul>
  89       </div>
  90       <div class="col-lg-4">
  91         <ul>
  92          <li>Remove Subfield: Shift+Del</li>
  93          <li>Create/Replace 006: Shift+F6</li>
  94          <li>Create/Replace 007: Shift+F7</li>
  95          <li>Create/Replace 008: Shift+F8</li>
  96         </ul>
  97       </div>
  98     </div>
  99
 100     <!-- LEADER -->
 101     <div class="row pt-0 pb-0 pl-3">
 102       <eg-marc-editable-content
 103         [context]="context" fieldType="tag"
 104         fieldText="LDR" i18n-fieldText moreClasses="p-1">
 105       </eg-marc-editable-content>
 106
 107       <eg-marc-editable-content
 108         [context]="context" fieldType="ldr"
 109         ariaLabel="Leader" i18n-ariaLabel moreClasses="p-1 pr-2">
 110       </eg-marc-editable-content>
 111     </div>
 112
 113     <!-- CONTROL FIELDS -->
 114     <div class="row pt-0 pb-0 pl-3"
 115       *ngFor="let field of controlFields()">
 116
 117       <eg-marc-editable-content
 118         [context]="context" [field]="field" fieldType="tag"
 119         ariaLabel="Control Field Tag" i18n-ariaLabel moreClasses="p-1">
 120       </eg-marc-editable-content>
 121
 122       <eg-marc-editable-content
 123         [context]="context" [field]="field" fieldType="cfld"
 124         ariaLabel="Control Field Content" i18n-ariaLabel moreClasses="p-1">
 125       </eg-marc-editable-content>
 126     </div>
 127
 128     <!-- data fields -->
 129     <ng-container *ngFor="let field of dataFields()">
 130
 131       <div class="row pt-0 pb-0 pl-3">
 132
 133         <!-- TAG -->
 134         <eg-marc-editable-content
 135           [context]="context" [field]="field" fieldType="tag"
 136           ariaLabel="Data Field Tag" i18n-ariaLabel moreClasses="p-1">
 137         </eg-marc-editable-content>
 138
 139         <!-- INDICATOR 1 -->
 140         <eg-marc-editable-content
 141           [context]="context" [field]="field" fieldType="ind1"
 142           ariaLabel="Data Field Indicator 1" i18n-ariaLabel moreClasses="p-1">
 143         </eg-marc-editable-content>
 144
 145         <!-- INDICATOR 2 -->
 146         <eg-marc-editable-content
 147           [context]="context" [field]="field" fieldType="ind2"
 148           ariaLabel="Data Field Indicator 2" i18n-ariaLabel moreClasses="p-1">
 149         </eg-marc-editable-content>
 150
 151         <!-- when not stacking subfields, render them inline -->
 152         <ng-container *ngIf="!stackSubfields">
 153           <ng-container *ngFor="let subfield of field.subfields">
 154             <ng-container
 155               *ngTemplateOutlet="subfieldChunk;context:{field:field,subfield:subfield}">
 156             </ng-container>
 157           </ng-container>
 158         </ng-container>
 159       </div>
 160
 161       <!-- when stacking subfields, each subfield gets its own row
 162         preceeded by a placeholder for the tag as a way to 'tab' right -->
 163       <ng-container *ngIf="stackSubfields">
 164         <div class="form-inline" *ngFor="let subfield of field.subfields">
 165           <eg-marc-editable-content fieldText="   " moreClasses="p-1 invisible">
 166           </eg-marc-editable-content>
 167           <ng-container
 168             *ngTemplateOutlet="subfieldChunk;context:{field:field,subfield:subfield}">
 169           </ng-container>
 170         </div>
 171       </ng-container>
 172     </ng-container>
 173
 174   </div>
 175 </ng-container>
 176