From e85385f7d1d341d1fbca6a91979d326cc7a8fac0 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Fri, 28 Jun 2019 15:07:03 -0400 Subject: [PATCH] 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 Signed-off-by: Jane Sandberg Signed-off-by: Galen Charlton --- .../app/share/combobox/combobox.component.ts | 8 +++--- .../date-select/date-select.component.ts | 11 ++++---- .../app/staff/sandbox/sandbox.component.html | 25 ++++++++++++++++--- .../app/staff/sandbox/sandbox.component.ts | 6 +++-- .../src/app/staff/sandbox/sandbox.module.ts | 5 ++-- 5 files changed, 37 insertions(+), 18 deletions(-) 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 b4c85bf5e2..9277bb060e 100644 --- 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 079c4fe715..ec35601928 100644 --- 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(); this.onChangeAsIso = new EventEmitter(); @@ -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 fd8a75508b..cc778ce230 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 @@ -242,7 +242,7 @@ The best libraries are: {{bestOnes.value | json}}
- + @@ -253,9 +253,9 @@ Result: {{templateEntry.value | json}}
- + - ngModel: {{dateString}} + ngModel: {{dateObject.toLocaleDateString()}} @@ -264,7 +264,8 @@

Or perhaps reactive forms interest you?

Choose your favorite law of library science: - + @@ -318,3 +319,19 @@ Test Readonly Date
+ +
+
Simple Combobox using [(ngModel)]
+
+ + + + +
+
+ Combobox Value: {{simpleCombo ? simpleCombo.label : ''}} +
+
+ 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 373e86fe4c..d5b37bf8e2 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 @@ -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 ebb886a67f..0937ab0ee3 100644 --- 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: [ ] -- 2.43.2