LP1807523: Associating labels and inputs in angular fmeditor

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 c686be4..a1558b1 100644 (file)
--- 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 ae3a729..2f8837d 100644 (file)
--- 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 721423c..bcd995d 100644 (file)
--- 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 2a4bd3a..b032114 100644 (file)
--- 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 39e0cff..598a988 100644 (file)
--- 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';