LP#1779158 Ang vandelay import form cont.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.css b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.css
index 310131c..a640412 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.css
@@ -13,6 +13,7 @@
 
 .import-form .row:nth-child(even) {
   background-color: rgba(0,0,0,.03);
+  border-top: 1px solid rgba(0,0,0,.125);
   border-bottom: 1px solid rgba(0,0,0,.125);
 }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
index 3286fc5..ca70ad2 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.html
@@ -8,9 +8,10 @@
       <label i18n>Record Type</label>
     </div>
     <div class="col-lg-3">
-      <eg-combobox placeholder="Record Type..." i18n-placeholder>
+      <eg-combobox (onChange)="recordType=$event.id" [startId]="recordType"
+        placeholder="Record Type..." i18n-placeholder>
         <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records" 
-          [selected]="true" i18n-entryLabel></eg-combobox-entry>
+          i18n-entryLabel></eg-combobox-entry>
         <eg-combobox-entry entryId="auth" entryLabel="Authority Records" 
           i18n-entryLabel></eg-combobox-entry>
         <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records" 
@@ -22,7 +23,8 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('bibSources')" 
-        [selectFirst]="true" placeholder="Record Source..." i18n-placeholder>
+        (onChange)="selectedBibSource=$event.id"
+        placeholder="Record Source..." i18n-placeholder>
       </eg-combobox>
     </div>
   </div>
@@ -32,7 +34,8 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('activeQueues')"
-        [allowFreeText]="true" placeholder="Select or Create a Queue..." i18n-placeholder>
+        (onChange)="selectedQueue=$event" i18n-placeholder
+        [allowFreeText]="true" placeholder="Select or Create a Queue...">
       </eg-combobox>
     </div>
     <div class="col-lg-3">
@@ -40,6 +43,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('bibBuckets')" 
+        (onChange)="selectedBucket=$event.id"
         placeholder="Buckets..." i18n-placeholder></eg-combobox>
     </div>
   </div>
@@ -49,6 +53,8 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('matchSets')" 
+        [startId]="defaultMatchSet"
+        (onChange)="selectedMatchSet=$event.id"
         placeholder="Match Set..." i18n-placeholder></eg-combobox>
     </div>
     <div class="col-lg-3"><label i18n>Import Non-Matching Records</label></div>
@@ -63,6 +69,7 @@
     </div>
     <div class="col-lg-3"> <!-- TODO disable for authority -->
       <eg-combobox [entries]="formatEntries('importItemDefs')"
+        (onChange)="selectedHoldingsProfile=$event.id"
         placeholder="Holdings Import Profile..." i18n-placeholder>
       </eg-combobox>
     </div>
@@ -78,6 +85,7 @@
     </div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('mergeProfiles')"
+        (onChange)="selectedMergeProfile=$event.id"
         placeholder="Merge Profile..." i18n-placeholder>
       </eg-combobox>
     </div>
@@ -92,6 +100,7 @@
       <label i18n>Insufficient Quality Fall-Through Profile</label></div>
     <div class="col-lg-3">
       <eg-combobox [entries]="formatEntries('mergeProfiles')"
+        (onChange)="selectedFallThruMergeProfile=$event.id"
         placeholder="Merge Profile..." i18n-placeholder>
       </eg-combobox>
     </div>
@@ -116,6 +125,28 @@
     </div>
   </div>
   <div class="row">
+    <div class="col-lg-3">
+      <label i18n>File to Upload:</label>
+    </div>
+    <div class="col-lg-3">
+      <input #fileSelector (change)="fileSelected($event)" 
+        class="form-control" type="file"/>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 offset-lg-3">
+      <button class="btn btn-success btn-lg btn-block font-weight-bold"
+        (click)="upload()" i18n>Upload</button>
+    </div>
+  </div>
+  <!-- hide instead of *ngIf so ViewChild can find the progress bars -->
+  <div class="row" [hidden]="!showProgress">
+    <div class="col-lg-3">
+      <label i18n>Upload Progress</label>
+    </div>
+    <div class="col-lg-3">
+      <eg-progress-inline #uploadProgress></eg-progress-inline>
+    </div>
   </div>
 </div>
 

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.ts
index c5b7f05..ee49b5f 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/import.component.ts
@@ -1,9 +1,15 @@
 import {Component, OnInit, AfterViewInit, Input, ViewChild} from '@angular/core';
 import {IdlObject} from '@eg/core/idl.service';
 import {OrgService} from '@eg/core/org.service';
+import {ToastService} from '@eg/share/toast/toast.service';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
 import {VandelayService} from './vandelay.service';
-import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
+import {HttpClient, HttpRequest, HttpEventType} from '@angular/common/http';
+import {HttpResponse, HttpErrorResponse} from '@angular/common/http';
+import {ProgressInlineComponent} from '@eg/share/dialog/progress-inline.component';
+import {Subject} from 'rxjs/Subject';
+
+const VAND_UPLOAD_URL = '/vandelay-upload';
 
 @Component({
   templateUrl: 'import.component.html',
@@ -12,7 +18,15 @@ import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
 export class ImportComponent implements OnInit, AfterViewInit {
 
     recordType: string;
-    newQueueName: string;
+    selectedQueue: ComboboxEntry; // freetext enabled
+    selectedBucket: number;
+    selectedBibSource: number;
+    selectedMatchSet: number;
+    selectedHoldingsProfile: number;
+    selectedMergeProfile: number;
+    selectedFallThruMergeProfile: number;
+    selectedFile: File;
+
     attrDefs: {[atype: string]: IdlObject[]};
     defaultMatchSet: string;
 
@@ -23,10 +37,15 @@ export class ImportComponent implements OnInit, AfterViewInit {
     minQualityRatio: number;
     autoOverlayAcqCopies: boolean;
 
-    @ViewChild('progressDialog')
-        private progressDialog: ProgressDialogComponent;
+    showProgress: boolean;
+
+    @ViewChild('fileSelector') private fileSelector;
+    @ViewChild('uploadProgress') 
+        private uploadProgress: ProgressInlineComponent;
 
     constructor(
+        private http: HttpClient,
+        private toast: ToastService,
         private org: OrgService,
         private vandelay: VandelayService
     ) {
@@ -38,13 +57,10 @@ export class ImportComponent implements OnInit, AfterViewInit {
     ngOnInit() {}
 
     ngAfterViewInit() {
-        // loading startup data changes our data in the midst of a
-        // lifecycle hook.  Run after timeout.
-        //setTimeout(() => this.loadStartupData());
         this.loadStartupData();
     }
 
-    loadStartupData(): Promise<any>{
+    loadStartupData(): Promise<any> {
         // Note displaying and manipulating a progress dialog inside
         // the AfterViewInit cycle leads to errors because the child
         // component is modifed after dirty checking.
@@ -104,5 +120,42 @@ export class ImportComponent implements OnInit, AfterViewInit {
             return {id: item.id(), label: item.name()};
         });
     }
+
+    fileSelected($event) {
+       this.selectedFile = $event.target.files[0]; 
+    }
+
+    upload() {
+        this.showProgress = true;
+        this.uploadProgress.reset();
+
+        const formData: FormData = new FormData();
+
+        formData.append(
+            'marc_upload', this.selectedFile, this.selectedFile.name);
+        // TODO: fill in other fields
+
+        const req = new HttpRequest('POST', VAND_UPLOAD_URL, formData, 
+            {reportProgress: true, responseType: 'text'});
+
+        this.http.request(req).subscribe(
+            evt => {
+                if (evt.type === HttpEventType.UploadProgress) {
+                    this.uploadProgress.update(
+                        {value: evt.loaded, max: evt.total});
+
+                } else if (evt instanceof HttpResponse) {
+                    console.log('file uploaded OK');
+                }
+            },
+
+            (err: HttpErrorResponse) => {
+                //this.progressDialog.close();
+                console.error(err);
+                this.toast.danger(err.error.error);
+            }
+        );
+
+    }
 }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/vandelay.module.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/vandelay.module.ts
index c65a44f..6758945 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/vandelay.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/vandelay.module.ts
@@ -6,6 +6,7 @@ import {VandelayComponent} from './vandelay.component';
 import {ImportComponent} from './import.component';
 import {ExportComponent} from './export.component';
 import {GridModule} from '@eg/share/grid/grid.module';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -16,6 +17,7 @@ import {GridModule} from '@eg/share/grid/grid.module';
   imports: [
     StaffCommonModule,
     VandelayRoutingModule,
+    HttpClientModule,
     GridModule
   ],
   providers: [