From e504b21ebe96a504178a7220f6fea99571d18c13 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Fri, 31 Jan 2020 18:13:59 -0500
Subject: [PATCH] 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.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 .../src/eg2/src/app/share/common-widgets.module.ts |  3 ++
 .../interval-input/interval-input.component.html   | 10 +++++
 .../interval-input/interval-input.component.ts     | 50 ++++++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.html
 create mode 100644 Open-ILS/src/eg2/src/app/share/interval-input/interval-input.component.ts

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 0f9abd8f45..76e0ff0ae8 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
@@ -15,6 +15,7 @@ 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';
+import {IntervalInputComponent} from '@eg/share/interval-input/interval-input.component';
 
 
 @NgModule({
@@ -26,6 +27,7 @@ import {FileReaderComponent} from '@eg/share/file-reader/file-reader.component';
     DateRangeSelectComponent,
     DateTimeSelectComponent,
     FileReaderComponent,
+    IntervalInputComponent,
   ],
   imports: [
     CommonModule,
@@ -46,6 +48,7 @@ import {FileReaderComponent} from '@eg/share/file-reader/file-reader.component';
     DateRangeSelectComponent,
     DateTimeSelectComponent,
     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
index 0000000000..5b9919b90d
--- /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
index 0000000000..c3d8a3cef5
--- /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;
+    }
+}
-- 
2.11.0