]> git.evergreen-ils.org Git - Evergreen.git/blob - Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.html
LP1852782 Angular MARC enriched editor (first batch)
[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 <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 [context]="context" fieldType="tag" 
77         fieldText="LDR" i18n-fieldText moreClasses="p-1">
78       </eg-marc-editable-content>
79
80       <eg-marc-editable-content [context]="context" fieldType="ldr"
81          moreClasses="p-1 pr-2">
82       </eg-marc-editable-content>
83     </div>
84
85     <!-- CONTROL FIELDS -->
86     <div class="row pt-0 pb-0 pl-3 form-horizontal" 
87       *ngFor="let field of controlFields()">
88
89       <eg-marc-editable-content [context]="context" fieldType="tag"
90         [field]="field" moreClasses="p-1">
91       </eg-marc-editable-content>
92
93       <eg-marc-editable-content [context]="context" fieldType="cfld"
94         [field]="field" moreClasses="p-1">
95       </eg-marc-editable-content>
96     </div>
97
98     <!-- data fields -->
99     <div class="row pt-0 pb-0 pl-3 form-horizontal" 
100       *ngFor="let field of dataFields()">
101
102       <!-- TAG -->
103       <eg-marc-editable-content [context]="context" fieldType="tag"
104         [field]="field" moreClasses="p-1">
105       </eg-marc-editable-content>
106
107       <!-- INDICATOR 1 -->
108       <eg-marc-editable-content [context]="context" fieldType="ind1" 
109         [field]="field" moreClasses="p-1">
110       </eg-marc-editable-content>
111
112       <!-- INDICATOR 2 -->
113       <eg-marc-editable-content [context]="context" fieldType="ind2" 
114         [field]="field" moreClasses="p-1">
115       </eg-marc-editable-content>
116
117       <!-- SUBFIELDS -->
118       <ng-container *ngFor="let subfield of field.subfields">
119
120         <!-- SUBFIELD DECORATOR/DELIMITER -->
121         <eg-marc-editable-content fieldText="‡" i18n-fieldText
122           moreClasses="sf-delimiter border-right-0 bg-transparent p-1 pr-0">
123         </eg-marc-editable-content>
124
125         <!-- SUBFIELD CHARACTER -->
126         <eg-marc-editable-content [context]="context" fieldType="sfc" 
127           [field]="field" [subfield]="subfield" 
128           moreClasses="sf-code border-left-0 p-1 pl-0">
129         </eg-marc-editable-content>
130
131         <!-- SUBFIELD VALUE -->
132         <eg-marc-editable-content [context]="context" fieldType="sfv"
133           [field]="field" [subfield]="subfield" moreClasses="p-1 pt-2">
134         </eg-marc-editable-content>
135       </ng-container>
136     </div>
137   </div>
138 </ng-container>
139