LP1840782 <eg-date-select-native /> component

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 fda671e..0e961f4 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
@@ -17,6 +17,7 @@ import {DateTimeSelectComponent} from '@eg/share/datetime-select/datetime-select
 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';
+import {DateSelectNativeComponent} from '@eg/share/date-select-native/date-select-native.component';
 
 
 @NgModule({
@@ -29,6 +30,7 @@ import {IntervalInputComponent} from '@eg/share/interval-input/interval-input.co
     DateTimeSelectComponent,
     FileReaderComponent,
     IdlClassTemplateDirective,
+    DateSelectNativeComponent,
     IntervalInputComponent,
   ],
   imports: [
@@ -52,6 +54,7 @@ import {IntervalInputComponent} from '@eg/share/interval-input/interval-input.co
     DateTimeSelectComponent,
     ContextMenuModule,
     FileReaderComponent,
+    DateSelectNativeComponent,
     IntervalInputComponent,
   ],
 })

diff --git a/Open-ILS/src/eg2/src/app/share/date-select-native/date-select-native.component.html b/Open-ILS/src/eg2/src/app/share/date-select-native/date-select-native.component.html
new file mode 100644 (file)
index 0000000..a92fe3e
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/date-select-native/date-select-native.component.html
@@ -0,0 +1,12 @@
+<input 
+  type="date"
+  id="{{domId}}" 
+  name="{{fieldName}}"
+  [min]="min"
+  [max]="max"
+  [required]="required"
+  [disabled]="disabled"
+  (blur)="propagateTouch()"
+  (change)="inputChange($event)"
+/>
+

diff --git a/Open-ILS/src/eg2/src/app/share/date-select-native/date-select-native.component.ts b/Open-ILS/src/eg2/src/app/share/date-select-native/date-select-native.component.ts
new file mode 100644 (file)
index 0000000..5fe5aa7
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/date-select-native/date-select-native.component.ts
@@ -0,0 +1,62 @@
+import {Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {DateUtil} from '@eg/share/util/date';
+
+
+@Component({
+  selector: 'eg-date-select-native',
+  templateUrl: './date-select-native.component.html',
+  providers: [{
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DateSelectNativeComponent),
+      multi: true
+  }]
+})
+export class DateSelectNativeComponent implements OnInit, ControlValueAccessor {
+
+    static domAutoId = 1;
+
+    @Input() fieldName = '';
+    @Input() required = false;
+    @Input() disabled = false;  // Also works for readOnly
+    @Input() min = '';          // YYYY-MM-DD
+    @Input() max = '';          // YYYY-MM-DD
+    @Input() domId = 'eg-date-select-native-' + DateSelectNativeComponent.domAutoId++;
+
+    // Emits YYYY-MM-DD on value change, null on empty.
+    @Output() dateChange: EventEmitter<string> = new EventEmitter<string>();
+
+    // Stub functions required by ControlValueAccessor
+    propagateChange = (_: any) => {};
+    propagateTouch = () => {};
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    input(): HTMLInputElement {
+        return document.getElementById(this.domId) as HTMLInputElement;
+    }
+
+    inputChange(evt: Event) {
+        const value = this.input().value;
+        this.dateChange.emit(value || null);
+        this.propagateChange(value);
+    }
+
+    writeValue(ymd: string) {
+        if (this.input()) {
+            this.input().value = ymd;
+        }
+    }
+
+    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 4415eca..c564da5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -2,6 +2,17 @@
 <eg-staff-banner bannerText="Sandbox" i18n-bannerText>
 </eg-staff-banner>
 
+<h2>Native Date Select</h2>
+<div class="row mb-3">
+  <div class="col-lg-3">
+    <eg-date-select-native min="2021-10-01" 
+      max="2021-10-20" [(ngModel)]="nativeDate"></eg-date-select-native>
+  </div>
+  <div class="col-lg-3">
+    Value: {{nativeDate}}
+  </div>
+</div>
+
 <eg-title 
   i18n-prefix i18n-suffix
   prefix=":) {{dynamicTitleText}}"

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 06bb31c..0659b2e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -32,6 +32,8 @@ import {HtmlToTxtService} from '@eg/share/util/htmltotxt.service';
 })
 export class SandboxComponent implements OnInit {
 
+    nativeDate = '2021-10-06';
+
     @ViewChild('progressDialog', { static: true })
     private progressDialog: ProgressDialogComponent;