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 fw-bold" i18n>Rule Setup</div>
   9         <div class="col-lg-4 fw-bold" i18n>Data</div>
  10         <div class="col-lg-5 fw-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-select" [(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="fw-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)" type="button">
  88             <span i18n>Remove this Merge Rule</span>
  89             <span class="material-icons ms-2" aria-hidden="true">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()" type="button">
  98           <span i18n>Add a New Merge Rule</span>
  99           <span class="material-icons ms-2" aria-hidden="true">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="fw-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-select" [(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 [selectedId]="bucket"
 129             [entries]="buckets" (onChange)="bucketChanged($event)">
 130           </eg-combobox>
 131         </div>
 132       </ng-container>
 133       <ng-container *ngIf="source === 'r'">
 134         <div class="col-lg-3" i18n>Record ID: </div>
 135         <div class="col-lg-3">
 136           <input type="text" class="form-control" [(ngModel)]="recordId"/>
 137         </div>
 138       </ng-container>
 139       <ng-container *ngIf="source === 'c'">
 140         <div class="col-lg-12">
 141           <div class="row">
 142             <div class="col-lg-3" i18n>Column: </div>
 143             <div class="col-lg-3 d-flex">
 144               <input min="0" type="number" class="form-control" [(ngModel)]="csvColumn"/>
 145               <span class="ps-2" i18n> of </span>
 146             </div>
 147             <div class="col-lg-6">
 148               <input type="file" class="form-control"
 149                 #fileSelector (change)="fileSelected($event)"/>
 150             </div>
 151           </div>
 152           <div class="row pt-2">
 153             <div class="col-lg-12" i18n>
 154               Columns are numbered starting at 0. For instance, when looking
 155               at a CSV file in Excel, the column labeled A is the same as
 156               column 0, and the column labeled B is the same as column 1.
 157             </div>
 158           </div>
 159         </div>
 160       </ng-container>
 161     </div>
 162     <div class="row mt-2 pt-2 pb-2 border">
 163       <div class="col-lg-12">
 164         <button type="button" class="btn btn-outline-dark"
 165           [disabled]="disableSave()" (click)="process()" i18n>Go!</button>
 166       </div>
 167     </div>
 168     <div class="row mt-2 p-2" *ngIf="processing">
 169       <div class="col-lg-10 offset-lg-1">
 170         <eg-progress-inline [max]="progressMax" [value]="progressValue">
 171         </eg-progress-inline>
 172       </div>
 173     </div>
 174     <div class="row mt-2 p-2" *ngIf="!processing && progressMax">
 175       <div class="col-lg-12 alert alert-success">
 176         <div i18n>Processing Complete</div>
 177         <div class="row">
 178           <div class="col-lg-3" i18n>Success count: </div>
 179           <div class="col-lg-3">{{this.numSucceeded}}</div>
 180         </div>
 181         <div class="row">
 182           <div class="col-lg-3" i18n>Failed count: </div>
 183           <div class="col-lg-3">{{this.numFailed}}</div>
 184         </div>
 185       </div>
 186     </div>
 187   </div>
 188 </div>