From dacca60ce1f1ee97c93519b0423b2a73dea411e5 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Sat, 8 Dec 2018 12:30:38 -0600
Subject: [PATCH] LP1807523: Associating labels and inputs in angular fmeditor
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
.../eg2/src/app/share/date-select/date-select.component.html | 1 +
.../src/eg2/src/app/share/date-select/date-select.component.ts | 2 ++
.../src/eg2/src/app/share/fm-editor/fm-editor.component.html | 10 ++++++++++
.../src/eg2/src/app/share/org-select/org-select.component.html | 1 +
.../src/eg2/src/app/share/org-select/org-select.component.ts | 3 +++
5 files changed, 17 insertions(+)
diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
index c686be4d28..a1558b1ce9 100644
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
@@ -4,6 +4,7 @@
class="form-control"
ngbDatepicker
#datePicker="ngbDatepicker"
+ [attr.id]="domId.length ? domId : null"
placeholder="yyyy-mm-dd"
class="form-control"
name="{{fieldName}}"
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 ae3a729a3c..2f8837d967 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
@@ -19,6 +19,8 @@ export class DateSelectComponent implements OnInit {
@Input() required: boolean;
@Input() fieldName: string;
+ @Input() domId = '';
+
current: NgbDateStruct;
@Output() onChangeAsDate: EventEmitter<Date>;
diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index 721423c05c..bcd995d3f3 100644
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -30,6 +30,7 @@
<input *ngIf="field.datatype == 'id' && pkeyIsEditable"
class="form-control"
name="{{field.name}}"
+ id="rec-{{field.name}}"
placeholder="{{field.label}}..."
i18n-placeholder
[readonly]="field.readOnly"
@@ -40,6 +41,7 @@
<input *ngIf="field.datatype == 'text' || field.datatype == 'interval'"
class="form-control"
name="{{field.name}}"
+ id="rec-{{field.name}}"
placeholder="{{field.label}}..."
i18n-placeholder
[readonly]="field.readOnly"
@@ -49,6 +51,7 @@
<span *ngIf="field.datatype == 'timestamp'">
<eg-date-select
+ domId="rec-{{field.name}}"
(onChangeAsIso)="record[field.name]($event)"
initialIso="{{record[field.name]()}}">
</eg-date-select>
@@ -58,6 +61,7 @@
class="form-control"
type="number"
name="{{field.name}}"
+ id="rec-{{field.name}}"
placeholder="{{field.label}}..."
i18n-placeholder
[readonly]="field.readOnly"
@@ -69,6 +73,7 @@
class="form-control"
type="number" step="0.1"
name="{{field.name}}"
+ id="rec-{{field.name}}"
placeholder="{{field.label}}..."
i18n-placeholder
[readonly]="field.readOnly"
@@ -82,6 +87,7 @@
class="form-control"
type="number" step="0.1"
name="{{field.name}}"
+ id="rec-{{field.name}}"
[readonly]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]() | currency"/>
@@ -90,6 +96,7 @@
class="form-control"
type="number" step="0.1"
name="{{field.name}}"
+ id="rec-{{field.name}}"
placeholder="{{field.label}}..."
i18n-placeholder
[readonly]="field.readOnly"
@@ -102,6 +109,7 @@
class="form-check-input"
type="checkbox"
name="{{field.name}}"
+ id="rec-{{field.name}}"
[readonly]="field.readOnly"
[ngModel]="record[field.name]()"
(ngModelChange)="record[field.name]($event)"/>
@@ -111,6 +119,7 @@
<select
class="form-control"
name="{{field.name}}"
+ id="rec-{{field.name}}"
[disabled]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]()"
@@ -123,6 +132,7 @@
<eg-org-select *ngIf="field.datatype == 'org_unit'"
placeholder="{{field.label}}..."
i18n-placeholder
+ domId="rec-{{field.name}}"
[limitPerms]="modePerms[mode]"
[applyDefault]="field.orgDefaultAllowed"
[initialOrgId]="record[field.name]()"
diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
index 2a4bd3a0c2..b03211420d 100644
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
@@ -6,6 +6,7 @@
<input type="text"
class="form-control"
+ [attr.id]="domId.length ? domId : null"
[placeholder]="placeholder"
[(ngModel)]="selected"
[ngbTypeahead]="filter"
diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
index 39e0cff2ea..598a9886ae 100644
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
@@ -43,6 +43,9 @@ export class OrgSelectComponent implements OnInit {
@Input() placeholder = '';
@Input() stickySetting: string;
+ // ID to display in the DOM for this selector
+ @Input() domId = '';
+
// Org unit field displayed in the selector
@Input() displayField = 'shortname';
--
2.11.0