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