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