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