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 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>