From: Bill Erickson <berickxx@gmail.com>
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=e85385f7d1d341d1fbca6a91979d326cc7a8fac0;p=evergreen%2Fjoelewis.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 <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 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<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 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 @@
</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 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: [
]