From: Bill Erickson Date: Fri, 28 Jun 2019 19:07:03 +0000 (-0400) Subject: LP1831390 ControlValueAccessor continued X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fberick%2Flp1831390-ang-form-control-value-accessor;p=working%2FEvergreen.git 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 --- 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 82041be444..79042c63c1 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 @@ -97,6 +97,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, @@ -118,7 +121,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) { @@ -267,12 +270,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 b78cebeeb8..d4802e193b 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 @@ -37,6 +37,9 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor { @Output() onChangeAsIso: EventEmitter; @Output() onChangeAsYmd: EventEmitter; + // Stub function required by ControlValueAccessor + propagateChange = (_: any) => {}; + constructor() { this.onChangeAsDate = new EventEmitter(); this.onChangeAsIso = new EventEmitter(); @@ -67,8 +70,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. @@ -79,14 +82,12 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor { Number(parts[0]), Number(parts[1]) - 1, Number(parts[2])); } - 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 a924e8b6a8..be0a2bcc34 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 @@ -183,7 +183,7 @@

Do you like template-driven forms?

- + @@ -194,9 +194,9 @@ Result: {{templateEntry.value | json}}
- + - ngModel: {{dateString}} + ngModel: {{dateObject.toLocaleDateString()}}
@@ -205,7 +205,8 @@

Or perhaps reactive forms interest you?

Choose your favorite law of library science: - + @@ -221,3 +222,19 @@
+ +
+
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 51501bfc54..29b9fd0976 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 @@ -63,7 +63,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; @@ -94,7 +96,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: [ ]