LP1807523: Adding some randomness to DOM ID generation

Ensures ID values across multiple FmEditor instances in a page will not
collide.

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/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index bcd995d..4aab72d 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
@@ -11,7 +11,7 @@
     <form #fmEditForm="ngForm" role="form" class="form-validated common-form striped-odd">
       <div class="form-group row" *ngFor="let field of fields">
         <div class="col-lg-3 offset-lg-1">
-          <label for="rec-{{field.name}}">{{field.label}}</label>
+          <label for="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
         </div>
         <div class="col-lg-7">
 
@@ -30,7 +30,7 @@
             <input *ngIf="field.datatype == 'id' && pkeyIsEditable"
               class="form-control"
               name="{{field.name}}"
-              id="rec-{{field.name}}"
+              id="{{idPrefix}}-{{field.name}}"
               placeholder="{{field.label}}..."
               i18n-placeholder
               [readonly]="field.readOnly"
@@ -41,7 +41,7 @@
             <input *ngIf="field.datatype == 'text' || field.datatype == 'interval'"
               class="form-control"
               name="{{field.name}}"
-              id="rec-{{field.name}}"
+              id="{{idPrefix}}-{{field.name}}"
               placeholder="{{field.label}}..."
               i18n-placeholder
               [readonly]="field.readOnly"
@@ -51,7 +51,7 @@
 
             <span *ngIf="field.datatype == 'timestamp'">
               <eg-date-select
-                domId="rec-{{field.name}}"
+                domId="{{idPrefix}}-{{field.name}}"
                 (onChangeAsIso)="record[field.name]($event)"
                 initialIso="{{record[field.name]()}}">
               </eg-date-select>
@@ -61,7 +61,7 @@
               class="form-control"
               type="number"
               name="{{field.name}}"
-              id="rec-{{field.name}}"
+              id="{{idPrefix}}-{{field.name}}"
               placeholder="{{field.label}}..."
               i18n-placeholder
               [readonly]="field.readOnly"
@@ -73,7 +73,7 @@
               class="form-control"
               type="number" step="0.1"
               name="{{field.name}}"
-              id="rec-{{field.name}}"
+              id="{{idPrefix}}-{{field.name}}"
               placeholder="{{field.label}}..."
               i18n-placeholder
               [readonly]="field.readOnly"
@@ -87,7 +87,7 @@
                 class="form-control"
                 type="number" step="0.1"
                 name="{{field.name}}"
-                id="rec-{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
                 [readonly]="field.readOnly"
                 [required]="field.isRequired()"
                 [ngModel]="record[field.name]() | currency"/>
@@ -96,7 +96,7 @@
                 class="form-control"
                 type="number" step="0.1"
                 name="{{field.name}}"
-                id="rec-{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
                 placeholder="{{field.label}}..."
                 i18n-placeholder
                 [readonly]="field.readOnly"
@@ -109,7 +109,7 @@
               class="form-check-input"
               type="checkbox"
               name="{{field.name}}"
-              id="rec-{{field.name}}"
+              id="{{idPrefix}}-{{field.name}}"
               [readonly]="field.readOnly"
               [ngModel]="record[field.name]()"
               (ngModelChange)="record[field.name]($event)"/>
@@ -119,7 +119,7 @@
               <select
                 class="form-control"
                 name="{{field.name}}"
-                id="rec-{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
                 [disabled]="field.readOnly"
                 [required]="field.isRequired()"
                 [ngModel]="record[field.name]()"
@@ -132,7 +132,7 @@
             <eg-org-select *ngIf="field.datatype == 'org_unit'"
               placeholder="{{field.label}}..."
               i18n-placeholder
-              domId="rec-{{field.name}}"
+              domId="{{idPrefix}}-{{field.name}}"
               [limitPerms]="modePerms[mode]"
               [applyDefault]="field.orgDefaultAllowed"
               [initialOrgId]="record[field.name]()"

diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
index 308218a..3ad4892 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.ts
@@ -110,6 +110,8 @@ export class FmRecordEditorComponent
         if (id) { this.recId = id; }
     }
 
+    idPrefix: string;
+
     constructor(
       private modal: NgbModal, // required for passing to parent
       private idl: IdlService,
@@ -124,6 +126,9 @@ export class FmRecordEditorComponent
         this.listifyInputs();
         this.idlDef = this.idl.classes[this.idlClass];
         this.recordLabel = this.idlDef.label;
+
+       // Add some randomness to the generated DOM IDs to ensure against clobbering
+       this.idPrefix = 'fm-editor-' + Math.floor(Math.random() * 100000);
     }
 
     // Opening dialog, fetch data.