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