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