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 1/1] LP1807523: Associating labels and inputs in angular
 fmeditor

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../app/share/date-select/date-select.component.html   |  1 +
 .../src/app/share/date-select/date-select.component.ts |  2 ++
 .../src/app/share/fm-editor/fm-editor.component.html   | 10 ++++++++++
 .../src/app/share/org-select/org-select.component.html |  1 +
 .../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.43.2