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