LP1910409 MARC Batch Edit Allows CSV Column 0
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / cat / marcbatch / marcbatch.component.html
1 <eg-staff-banner bannerText="MARC Batch Edit" i18n-bannerText></eg-staff-banner>
2
3 <div class="row">
4   <div class="col-lg-7 common-form striped-odd">
5     <ng-container *ngFor="let rule of templateRules; let idx = index">
6       <hr *ngIf="idx > 0"/>
7       <div class="row mb-2">
8         <div class="col-lg-3 font-weight-bold" i18n>Rule Setup</div>
9         <div class="col-lg-4 font-weight-bold" i18n>Data</div>
10         <div class="col-lg-5 font-weight-bold" i18n>Help</div>
11       </div>
12       <div class="row mb-2">
13         <div class="col-lg-3" i18n>Action (Rule Type)</div>
14         <div class="col-lg-4">
15           <select class="form-control" [(ngModel)]="rule.ruleType"
16             (change)="rulesetToRecord()">
17             <option value='r' i18n>Replace</option>
18             <option value='a' i18n>Add</option>
19             <option value='d' i18n>Delete</option>
20           </select>
21         </div>
22         <div class="col-lg-5" i18n>How to change the existing record.</div>
23       </div>
24       <div class="row mb-2">
25         <div class="col-lg-3" i18n>MARC Tag</div>
26         <div class="col-lg-4">
27           <input type="text" class="form-control" maxlength="3"
28             (change)="rulesetToRecord(true)" [(ngModel)]="rule.marcTag"/>
29         </div>
30         <div class="col-lg-5" i18n>
31           Three characters, no spaces, no indicators, etc. eg: 245
32         </div>
33       </div>
34       <div class="row mb-2">
35         <div class="col-lg-3" i18n>Subfields (optional)</div>
36         <div class="col-lg-4">
37           <input type="text" class="form-control" 
38             (change)="rulesetToRecord(true)" [(ngModel)]="rule.marcSubfields"/>
39         </div>
40         <div class="col-lg-5" i18n>No spaces, no delimiters, eg: abcnp</div>
41       </div>
42       <div class="row mb-2">
43         <div class="col-lg-3" i18n>MARC Data</div>
44         <div class="col-lg-4">
45           <input type="text" class="form-control" 
46             (change)="rulesetToRecord()" [(ngModel)]="rule.marcData"/>
47         </div>
48         <div class="col-lg-5" i18n>
49           MARC-Breaker formatted data with indicators and subfield delimiters, 
50           eg: 245 04$aThe End
51         </div>
52       </div>
53       <div class="row mt-3 mb-2 pt-2 border-top">
54         <div class="col-lg-12 justify-content-center d-flex">
55           <div class="font-weight-bold" i18n>
56             Advanced Matching Restriction (Optional)
57           </div>
58         </div>
59       </div>
60       <div class="row mb-2">
61         <div class="col-lg-3" i18n>Subfield</div>
62         <div class="col-lg-4">
63           <input type="text" class="form-control" 
64             (change)="rulesetToRecord()" [(ngModel)]="rule.advSubfield"/>
65         </div>
66         <div class="col-lg-5" i18n>
67           A single subfield code, no delimiters, eg: a
68         </div>
69       </div>
70       <div class="row mb-2">
71         <div class="col-lg-3" i18n>Expression</div>
72         <div class="col-lg-4">
73           <input type="text" class="form-control" 
74             (change)="rulesetToRecord()" [(ngModel)]="rule.advRegex"/>
75         </div>
76         <div class="col-lg-5" i18n>
77           See the 
78           <a target="_blank" 
79             href="https://perldoc.perl.org/perlre.html#Regular-Expressions">
80             Perl documentation
81           </a> for an explanation of Regular Expressions.
82         </div>
83       </div>
84       <div class="row mb-2">
85         <div class="col-lg-12 d-flex justify-content-end">
86           <button class="btn btn-outline-danger label-with-material-icon"
87             (click)="removeRule(idx)" i18n>
88             <span>Remove this Merge Rule</span>
89             <span class="material-icons ml-2">delete</span>
90           </button>
91         </div>
92       </div>
93     </ng-container>
94     <div class="row mb-2">
95       <div class="col-lg-6">
96         <button class="btn btn-outline-dark label-with-material-icon" 
97           (click)="addRule()">
98           <span i18n>Add a New Merge Rule</span>
99           <span class="material-icons ml-2">arrow_downward</span>
100         </button>
101       </div>
102     </div>
103   </div>
104   <div class="col-lg-5">
105     <div class="row pb-2 pt-2 border">
106       <div class="col-lg-12">
107         <div class="font-weight-bold" i18n>Merge Template Preview</div>
108         <div>
109           <textarea class="form-control" [ngModel]="breaker()" 
110             disabled rows="{{breakerRows()}}"></textarea>
111         </div>
112       </div>
113     </div>
114     <div class="row mt-2">
115       <div class="col-lg-3" i18n>Record Source: </div>
116       <div class="col-lg-6">
117         <select class="form-control" [(ngModel)]="source">
118           <option value='b' i18n>Bucket</option>
119           <option value='c' i18n>CSV File</option>
120           <option value='r' i18n>Bib Record ID</option>
121         </select>
122       </div>
123     </div>
124     <div class="row mt-2 pt-2 pb-2 border">
125       <ng-container *ngIf="source == 'b'">
126         <div class="col-lg-3" i18n>Bucket named: </div>
127         <div class="col-lg-6">
128           <eg-combobox [entries]="buckets" (onChange)="bucketChanged($event)">
129           </eg-combobox>
130         </div>
131       </ng-container>
132       <ng-container *ngIf="source == 'r'">
133         <div class="col-lg-3" i18n>Record ID: </div>
134         <div class="col-lg-3">
135           <input type="text" class="form-control" [(ngModel)]="recordId"/>
136         </div>
137       </ng-container>
138       <ng-container *ngIf="source == 'c'">
139         <div class="col-lg-12">
140           <div class="row">
141             <div class="col-lg-3" i18n>Column: </div>
142             <div class="col-lg-3 d-flex">
143               <input min="0" type="number" class="form-control" [(ngModel)]="csvColumn"/>
144               <span class="pl-2" i18n> of </span>
145             </div>
146             <div class="col-lg-6">
147               <input type="file" class="form-control"
148                 #fileSelector (change)="fileSelected($event)"/>
149             </div>
150           </div>
151           <div class="row pt-2">
152             <div class="col-lg-12" i18n>
153               Columns are numbered starting at 0. For instance, when looking 
154               at a CSV file in Excel, the column labeled A is the same as 
155               column 0, and the column labeled B is the same as column 1.
156             </div>
157           </div>
158         </div>
159       </ng-container>
160     </div>
161     <div class="row mt-2 pt-2 pb-2 border">
162       <div class="col-lg-12">
163         <button class="btn btn-outline-dark" 
164           [disabled]="disableSave()" (click)="process()" i18n>Go!</button>
165       </div>
166     </div>
167     <div class="row mt-2 p-2" *ngIf="processing">
168       <div class="col-lg-10 offset-lg-1">
169         <eg-progress-inline [max]="progressMax" [value]="progressValue">
170         </eg-progress-inline>
171       </div>
172     </div>
173     <div class="row mt-2 p-2" *ngIf="!processing && progressMax">
174       <div class="col-lg-12 alert alert-success">
175         <div i18n>Processing Complete</div>
176         <div class="row">
177           <div class="col-lg-3" i18n>Success count: </div>
178           <div class="col-lg-3">{{this.numSucceeded}}</div>
179         </div>
180         <div class="row">
181           <div class="col-lg-3" i18n>Failed count: </div>
182           <div class="col-lg-3">{{this.numFailed}}</div>
183         </div>
184       </div>
185     </div>
186   </div>
187 </div>