From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Fri, 8 Nov 2019 23:39:34 +0000 (-0500)
Subject: new Angular file-reader component
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=85190b641f149810e8add1695fe281b04a2e8942;p=working%2FEvergreen.git

new Angular file-reader component

This adds a ControlValueAccessor wrapper around a file
reader form input. Any file loaded via that input is interpreted
as a text file whose lines are to be split into an array on
newlines, with leading and trailng whitespace removed.

Usage is:

<eg-file-reader [(ngModel)]="fileContents">
</eg-file-reader>

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---

diff --git a/Open-ILS/src/eg2/src/app/share/common-widgets.module.ts b/Open-ILS/src/eg2/src/app/share/common-widgets.module.ts
index 01b16bd4da..0f9abd8f45 100644
--- a/Open-ILS/src/eg2/src/app/share/common-widgets.module.ts
+++ b/Open-ILS/src/eg2/src/app/share/common-widgets.module.ts
@@ -14,6 +14,7 @@ import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
 import {OrgSelectComponent} from '@eg/share/org-select/org-select.component';
 import {DateRangeSelectComponent} from '@eg/share/daterange-select/daterange-select.component';
 import {DateTimeSelectComponent} from '@eg/share/datetime-select/datetime-select.component';
+import {FileReaderComponent} from '@eg/share/file-reader/file-reader.component';
 
 
 @NgModule({
@@ -24,6 +25,7 @@ import {DateTimeSelectComponent} from '@eg/share/datetime-select/datetime-select
     OrgSelectComponent,
     DateRangeSelectComponent,
     DateTimeSelectComponent,
+    FileReaderComponent,
   ],
   imports: [
     CommonModule,
@@ -43,6 +45,7 @@ import {DateTimeSelectComponent} from '@eg/share/datetime-select/datetime-select
     OrgSelectComponent,
     DateRangeSelectComponent,
     DateTimeSelectComponent,
+    FileReaderComponent,
   ],
 })
 
diff --git a/Open-ILS/src/eg2/src/app/share/file-reader/file-reader.component.html b/Open-ILS/src/eg2/src/app/share/file-reader/file-reader.component.html
new file mode 100644
index 0000000000..d938bf6a21
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/file-reader/file-reader.component.html
@@ -0,0 +1 @@
+<input type="file" (change)="changeListener($event)" />
diff --git a/Open-ILS/src/eg2/src/app/share/file-reader/file-reader.component.ts b/Open-ILS/src/eg2/src/app/share/file-reader/file-reader.component.ts
new file mode 100644
index 0000000000..4cbe5deaf0
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/file-reader/file-reader.component.ts
@@ -0,0 +1,62 @@
+/**
+ * <eg-file-reader [(ngModel)]="fileContents">
+ * </eg-file-reader>
+ */
+import {Component, OnInit, Input, Output, ViewChild,
+    TemplateRef, EventEmitter, ElementRef, forwardRef} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Observable, of, Subject} from 'rxjs';
+import {map, tap, reduce, mergeMap, mapTo, debounceTime, distinctUntilChanged, merge, filter} from 'rxjs/operators';
+
+@Component({
+  selector: 'eg-file-reader',
+  templateUrl: './file-reader.component.html',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FileReaderComponent),
+    multi: true
+  }]
+})
+export class FileReaderComponent implements ControlValueAccessor, OnInit {
+
+    // Stub functions required by ControlValueAccessor
+    propagateChange = (_: any) => {};
+    propagateTouch = () => {};
+
+    ngOnInit() {
+    }
+
+    changeListener($event): void {
+        const me = this;
+        if ($event.target.files.length < 1) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.onloadend = function(e) {
+            me.propagateChange(me.parseFileContents(reader.result));
+        };
+        reader.readAsText($event.target.files[0]);
+    }
+
+    parseFileContents(contents): Array<string> {
+        const values = contents.split('\n');
+        values.forEach((val, idx) => {
+            val = val.replace(/\s+$/, '');
+            val = val.replace(/^\s+/, '');
+            values[idx] = val;
+        });
+        return values;
+    }
+
+    writeValue(value: any) {
+        // intentionally empty
+    }
+
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+
+    registerOnTouched(fn) {
+        this.propagateTouch = fn;
+    }
+}
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 3b9609b399..6d88085938 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -175,6 +175,15 @@
 
 
 <div>
+  <h4>File reader component</h4>
+  <eg-file-reader [(ngModel)]="fileContents"></eg-file-reader>
+  <h5>Contents are:</h5>
+  <ol *ngIf="fileContents && fileContents.length > 0">
+    <li *ngFor="let val of fileContents">{{val}}</li>
+  </ol>
+</div>
+
+<div>
   <h4>Cross-tab communications example</h4>
   <p>To test, open this sandbox in a second browser tab. Enter something in the input box below, then switch to the other tab and click anywhere on the page. 
      You should see the message that you sent to the other browser tab.</p>
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index c44a7f7a0b..29b84c9e3a 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -103,6 +103,9 @@ export class SandboxComponent implements OnInit {
     // selector field value on metarecord object
     aMetarecord: string;
 
+    // file-reader example
+    fileContents:  Array<string>;
+
     // cross-tab communications example
     private sbChannel: any;
     sbChannelText: string;