From f071f273e09031385053708442f8759807171b2f Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 21 May 2020 15:43:32 -0400
Subject: [PATCH] LPXXX MARC Batch update Angular port

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../staff/cat/marcbatch/marcbatch.component.html   | 41 ++++++++++++----------
 .../app/staff/cat/marcbatch/marcbatch.component.ts | 27 +++++++++++---
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html b/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html
index 82a91f9481..1ea34b0045 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.html
@@ -6,12 +6,12 @@
       <hr *ngIf="idx > 0"/>
       <div class="row mb-2">
         <div class="col-lg-3 font-weight-bold" i18n>Rule Setup</div>
-        <div class="col-lg-3 font-weight-bold" i18n>Data</div>
-        <div class="col-lg-6 font-weight-bold" i18n>Help</div>
+        <div class="col-lg-4 font-weight-bold" i18n>Data</div>
+        <div class="col-lg-5 font-weight-bold" i18n>Help</div>
       </div>
       <div class="row mb-2">
         <div class="col-lg-3" i18n>Action (Rule Type)</div>
-        <div class="col-lg-3">
+        <div class="col-lg-4">
           <select class="form-control" [(ngModel)]="rule.ruleType"
             (change)="rulesetToRecord()">
             <option value='r' i18n>Replace</option>
@@ -19,33 +19,33 @@
             <option value='d' i18n>Delete</option>
           </select>
         </div>
-        <div class="col-lg-6" i18n>How to change the existing record.</div>
+        <div class="col-lg-5" i18n>How to change the existing record.</div>
       </div>
       <div class="row mb-2">
         <div class="col-lg-3" i18n>MARC Tag</div>
-        <div class="col-lg-3">
-          <input type="text" class="form-control"
+        <div class="col-lg-4">
+          <input type="text" class="form-control" maxlength="3"
             (change)="rulesetToRecord(true)" [(ngModel)]="rule.marcTag"/>
         </div>
-        <div class="col-lg-6" i18n>
+        <div class="col-lg-5" i18n>
           Three characters, no spaces, no indicators, etc. eg: 245
         </div>
       </div>
       <div class="row mb-2">
         <div class="col-lg-3" i18n>Subfields (optional)</div>
-        <div class="col-lg-3">
+        <div class="col-lg-4">
           <input type="text" class="form-control" 
             (change)="rulesetToRecord(true)" [(ngModel)]="rule.marcSubfields"/>
         </div>
-        <div class="col-lg-6" i18n>No spaces, no delimiters, eg: abcnp</div>
+        <div class="col-lg-5" i18n>No spaces, no delimiters, eg: abcnp</div>
       </div>
       <div class="row mb-2">
         <div class="col-lg-3" i18n>MARC Data</div>
-        <div class="col-lg-3">
+        <div class="col-lg-4">
           <input type="text" class="form-control" 
             (change)="rulesetToRecord()" [(ngModel)]="rule.marcData"/>
         </div>
-        <div class="col-lg-6" i18n>
+        <div class="col-lg-5" i18n>
           MARC-Breaker formatted data with indicators and subfield delimiters, 
           eg: 245 04$aThe End
         </div>
@@ -59,23 +59,24 @@
       </div>
       <div class="row mb-2">
         <div class="col-lg-3" i18n>Subfield</div>
-        <div class="col-lg-3">
+        <div class="col-lg-4">
           <input type="text" class="form-control" 
             (change)="rulesetToRecord()" [(ngModel)]="rule.advSubfield"/>
         </div>
-        <div class="col-lg-6" i18n>
+        <div class="col-lg-5" i18n>
           A single subfield code, no delimiters, eg: a
         </div>
       </div>
       <div class="row mb-2">
         <div class="col-lg-3" i18n>Expression</div>
-        <div class="col-lg-3">
+        <div class="col-lg-4">
           <input type="text" class="form-control" 
             (change)="rulesetToRecord()" [(ngModel)]="rule.advRegex"/>
         </div>
-        <div class="col-lg-6" i18n>
+        <div class="col-lg-5" i18n>
           See the 
-          <a href="https://perldoc.perl.org/perlre.html#Regular-Expressions">
+          <a target="_blank" 
+            href="https://perldoc.perl.org/perlre.html#Regular-Expressions">
             Perl documentation
           </a> for an explanation of Regular Expressions.
         </div>
@@ -103,7 +104,7 @@
   <div class="col-lg-5">
     <div class="row pb-2 pt-2 border">
       <div class="col-lg-12">
-        <div i18n>Update Template Preview</div>
+        <div class="font-weight-bold" i18n>Template Preview</div>
         <div>
           <textarea class="form-control" [ngModel]="breaker()" 
             disabled rows="{{breakerRows()}}"></textarea>
@@ -182,7 +183,11 @@
         <button class="btn btn-outline-dark" (click)="process()" i18n>Go!</button>
       </div>
     </div>
-    <div class="row mt-2 p-2">
+    <div class="row mt-2 p-2" *ngIf="processing">
+      <div class="col-lg-10 offset-lg-1">
+        <eg-progress-inline [max]="progressMax" [value]="progressValue">
+        </eg-progress-inline>
+      </div>
     </div>
   </div>
 </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.ts
index 44e132cf98..1b37b70290 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/marcbatch/marcbatch.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, AfterViewInit, ViewChild, Renderer2} from '@angular/core';
+import {Component, OnInit, ViewChild, Renderer2} from '@angular/core';
 import {Router, ActivatedRoute, ParamMap} from '@angular/router';
 import {tap} from 'rxjs/operators';
 import {NetService} from '@eg/core/net.service';
@@ -19,7 +19,7 @@ interface TemplateRule {
 @Component({
   templateUrl: 'marcbatch.component.html'
 })
-export class MarcBatchComponent implements OnInit, AfterViewInit {
+export class MarcBatchComponent implements OnInit {
 
     session: string;
     source: 'bucket' | 'csv' | 'id' = 'bucket';
@@ -32,6 +32,10 @@ export class MarcBatchComponent implements OnInit, AfterViewInit {
     templateRules: TemplateRule[] = [];
     record: MarcRecord;
 
+    processing = false;
+    progressMax: number = null;
+    progressValue: number = null;
+
     constructor(
         private router: Router,
         private route: ActivatedRoute,
@@ -61,7 +65,8 @@ export class MarcBatchComponent implements OnInit, AfterViewInit {
 
             let ruleText = rule.marcTag + (rule.marcSubfields || '');
             if (rule.advSubfield) {
-                ruleText += `[${rule.advSubfield} ~ ${rule.advRegex}]`;
+                ruleText +=
+                    `[${rule.advSubfield || ''} ~ ${rule.advRegex || ''}]`;
             }
 
             // Merge behavior is encoded in the 905 field.
@@ -158,6 +163,20 @@ export class MarcBatchComponent implements OnInit, AfterViewInit {
        this.selectedFile = $event.target.files[0];
     }
 
-    ngAfterViewInit() {}
+
+    process() {
+        this.processing = true;
+        this.postForm()
+        .then(_ => this.pollProgress())
+        .then(_ => this.processing = false);
+    }
+
+    postForm(): Promise<any> {
+        return Promise.resolve();
+    }
+
+    pollProgress(): Promise<any> {
+        return Promise.resolve();
+    }
 }
 
-- 
2.11.0