LP#1850547: new eg-interval-input: Angular component for inputting time intervals

Usage:

   <eg-interval-input [(ngModel)]="interval">
   </eg-interval-input>

This provides a simple combination of a numeric input and a
drop-down for time interval units.

Sponsored-by: Evergreen Community Development Initiative
Sponsored-by: Georgia Public Library Service
Sponsored-by: Indiana State Library
Sponsored-by: C/W MARS

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Tiffany Little <tlittle@georgialibraries.org>
Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 c0b0f4e..fda671e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/common-widgets.module.ts
+++ b/Open-ILS/src/eg2/src/app/share/common-widgets.module.ts
@@ -16,6 +16,7 @@ import {DateRangeSelectComponent} from '@eg/share/daterange-select/daterange-sel
 import {DateTimeSelectComponent} from '@eg/share/datetime-select/datetime-select.component';
 import {ContextMenuModule} from '@eg/share/context-menu/context-menu.module';
 import {FileReaderComponent} from '@eg/share/file-reader/file-reader.component';
+import {IntervalInputComponent} from '@eg/share/interval-input/interval-input.component';
 
 
 @NgModule({
@@ -27,7 +28,8 @@ import {FileReaderComponent} from '@eg/share/file-reader/file-reader.component';
     DateRangeSelectComponent,
     DateTimeSelectComponent,
     FileReaderComponent,
-    IdlClassTemplateDirective
+    IdlClassTemplateDirective,
+    IntervalInputComponent,
   ],
   imports: [
     CommonModule,
@@ -50,6 +52,7 @@ import {FileReaderComponent} from '@eg/share/file-reader/file-reader.component';
     DateTimeSelectComponent,
     ContextMenuModule,
     FileReaderComponent,
+    IntervalInputComponent,
   ],
 })
 

diff --git a/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html b/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html
new file mode 100644 (file)
index 0000000..5b9919b
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html
@@ -0,0 +1,10 @@
+<div class="input-group">
+  <input class="form-control" type="numeric" [(ngModel)]="period" (ngModelChange)="changeListener()" />
+  <select class="form-control" [(ngModel)]="unit" (ngModelChange)="changeListener()">
+    <option value="hours" i18n>hours</option>
+    <option value="days" i18n>days</option>
+    <option value="weeks" i18n>weeks</option>
+    <option value="months" i18n>months</option>
+    <option value="years" i18n>years</option>
+  </select>
+</div>

diff --git a/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.ts b/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.ts
new file mode 100644 (file)
index 0000000..c3d8a3c
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.ts
@@ -0,0 +1,50 @@
+/**
+ * <eg-interval-input [(ngModel)]="interval">
+ * </eg-interval-input>
+ */
+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-interval-input',
+  templateUrl: './interval-input.component.html',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => IntervalInputComponent),
+    multi: true
+  }]
+})
+export class IntervalInputComponent implements ControlValueAccessor, OnInit {
+
+    period: string;
+    unit = 'days';
+
+    // Stub functions required by ControlValueAccessor
+    propagateChange = (_: any) => {};
+    propagateTouch = () => {};
+
+    ngOnInit() {
+    }
+
+    changeListener(): void {
+        this.propagateChange(this.period + ' ' + this.unit);
+    }
+
+    writeValue(value: string) {
+        if (value) {
+            this.period = value.split(' ')[0];
+            this.unit   = value.split(' ')[1];
+        }
+    }
+
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+
+    registerOnTouched(fn) {
+        this.propagateTouch = fn;
+    }
+}