LP1831390 ControlValueAccessor continued

Make eg-date-select traffic in Date objects instead of YMD strings.
Added simple combobox [(ngModel)] example.
Added combobox freetext testing
Avoid forcing startIdFiresOnChange for combobox.
Avoid redundant FormsModule import.
Minor lint repairs.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
index b4c85bf..9277bb0 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
@@ -107,6 +107,9 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
     // and display.  Default version trims leading/trailing spaces.
     formatDisplayString: (e: ComboboxEntry) => string;
 
+    // Stub function required by ControlValueAccessor
+    propagateChange = (_: any) => {};
+
     constructor(
       private elm: ElementRef,
       private store: StoreService,
@@ -153,7 +156,7 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
 
     onClick($event) {
         this.registerOnTouched();
-        this.click$.next($event.target.value)
+        this.click$.next($event.target.value);
     }
 
     openMe($event) {
@@ -303,12 +306,9 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
     writeValue(value: any) {
         if (value !== undefined) {
             this.startId = value;
-            this.startIdFiresOnChange = true;
         }
     }
 
-    propagateChange = (_: any) => {};
-
     registerOnChange(fn) {
         this.propagateChange = fn;
     }

diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
index 079c4fe..ec35601 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
@@ -58,6 +58,9 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
         return date;
     }
 
+    // Stub function required by ControlValueAccessor
+    propagateChange = (_: any) => {};
+
     constructor() {
         this.onChangeAsDate = new EventEmitter<Date>();
         this.onChangeAsIso = new EventEmitter<string>();
@@ -102,8 +105,8 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
         const iso = date.toISOString();
         this.onChangeAsDate.emit(date);
         this.onChangeAsYmd.emit(ymd);
-        this.propagateChange(ymd);
         this.onChangeAsIso.emit(iso);
+        this.propagateChange(date);
     }
 
     // Create a date in the local time zone with selected YMD values.
@@ -122,14 +125,12 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
         };
     }
 
-    writeValue(value: string) {
+    writeValue(value: Date) {
         if (value !== undefined) {
-            this.initialYmd = value;
+            this.initialDate = value;
         }
     }
 
-    propagateChange = (_: any) => {};
-
     registerOnChange(fn) {
         this.propagateChange = 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 fd8a755..cc778ce 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
@@ -242,7 +242,7 @@
         </eg-org-family-select>
         The best libraries are: {{bestOnes.value | json}}
         <hr>
-        <eg-combobox ngModel #templateEntry="ngModel">
+        <eg-combobox ngModel #templateEntry="ngModel" [allowFreeText]="true">
           <eg-combobox-entry entryId="Bacteria"></eg-combobox-entry>
           <eg-combobox-entry entryId="Archaea"></eg-combobox-entry>
           <eg-combobox-entry entryId="Protozoa"></eg-combobox-entry>
@@ -253,9 +253,9 @@
         </eg-combobox>
       Result: {{templateEntry.value | json}}
         <hr>
-        <eg-date-select [(ngModel)]="dateString">
+        <eg-date-select [(ngModel)]="dateObject">
         </eg-date-select>
-      ngModel: {{dateString}}
+      ngModel: {{dateObject.toLocaleDateString()}}
       </div>
     </div>
   </div>
@@ -264,7 +264,8 @@
       <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
       <div class="card-text">
         Choose your favorite law of library science: 
-        <eg-combobox formControlName="law" value="second">
+        <eg-combobox formControlName="law" value="second" 
+          [allowFreeText]="true" [startIdFiresOnChange]="true">
           <eg-combobox-entry entryId="first" entryLabel="Books are for use" i18n-entryLabel></eg-combobox-entry>
           <eg-combobox-entry entryId="second" entryLabel="Every person his or her book" i18n-entryLabel></eg-combobox-entry>
           <eg-combobox-entry entryId="third" entryLabel="Every book its reader" i18n-entryLabel></eg-combobox-entry>
@@ -318,3 +319,19 @@
     Test Readonly Date
   </button>
 </div>
+
+<div class="row m-3 p-3 border-top border-dark">
+  <div class="col-lg-3">Simple Combobox using [(ngModel)]</div>
+  <div class="col-lg-3">
+    <eg-combobox [(ngModel)]="simpleCombo" [allowFreeText]="true">
+      <eg-combobox-entry 
+        entryId="abc" entryLabel="ABC" i18n-entryLabel></eg-combobox-entry>
+      <eg-combobox-entry 
+        entryId="def" entryLabel="DEF" i18n-entryLabel></eg-combobox-entry>
+    </eg-combobox>
+  </div>
+  <div class="col-lg-3">
+    <span i18n>Combobox Value: {{simpleCombo ? simpleCombo.label : ''}}</span>
+  </div>
+</div>
+

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 373e86f..d5b37bf 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
@@ -83,7 +83,9 @@ export class SandboxComponent implements OnInit {
 
     ranganathan: FormGroup;
 
-    dateString = '2019-09-09';
+    dateObject: Date = new Date();
+
+    simpleCombo: ComboboxEntry;
 
     complimentEvergreen: (rows: IdlObject[]) => void;
     notOneSelectedRow: (rows: IdlObject[]) => boolean;
@@ -126,7 +128,7 @@ export class SandboxComponent implements OnInit {
         this.ranganathan = new FormGroup({
             'law': new FormControl('second', (c: FormControl) => {
                 // An Angular custom validator
-                if ("wrong" === c.value.id) {
+                if ('wrong' === c.value.id || c.value.freetext) {
                     return { notALaw: 'That\'s not a real law of library science!' };
                     } else {
                         return null;

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts
index ebb886a..0937ab0 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.module.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {StaffCommonModule} from '@eg/staff/common.module';
 import {SandboxRoutingModule} from './routing.module';
 import {SandboxComponent} from './sandbox.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -11,8 +11,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
   imports: [
     StaffCommonModule,
     SandboxRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
+    ReactiveFormsModule
   ],
   providers: [
   ]