SHIBUI-1378 Implemented new ids for form fields

TIER · Jul 26, 2019 · de4bb35 · de4bb35
1 parent b6dfeef
commit de4bb35
Show file tree

Hide file tree

Showing 21 changed files with 62 additions and 104 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -44,7 +44,7 @@
     "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",
     "ngx-infinite-scroll": "^7.2.0",
-    "ngx-schema-form": "^2.2.0-beta.1",
+    "ngx-schema-form": "2.3.5",
     "rxjs": "^6.5.1",
     "rxjs-compat": "^6.5.1",
     "xml-formatter": "^1.0.1",

diff --git a/ui/src/app/metadata/metadata.module.ts b/ui/src/app/metadata/metadata.module.ts
@@ -10,8 +10,7 @@ import { MetadataRoutingModule } from './metadata.routing';
 import { ProviderModule } from './provider/provider.module';
 import { I18nModule } from '../i18n/i18n.module';
 import { CustomWidgetRegistry } from '../schema-form/registry';
-import { WidgetRegistry, SchemaValidatorFactory } from 'ngx-schema-form';
-import { CustomSchemaValidatorFactory } from '../schema-form/service/schema-validator';
+import { WidgetRegistry } from 'ngx-schema-form';
 import { MetadataConfigurationModule } from './configuration/configuration.module';
 import { NavigationService } from '../core/service/navigation.service';
 import { MetadataResolver } from './domain/model';
@@ -32,11 +31,7 @@ import { Router } from '@angular/router';
         I18nModule
     ],
     providers: [
-        { provide: WidgetRegistry, useClass: CustomWidgetRegistry },
-        {
-            provide: SchemaValidatorFactory,
-            useClass: CustomSchemaValidatorFactory
-        }
+        { provide: WidgetRegistry, useClass: CustomWidgetRegistry }
     ],
     declarations: [
         MetadataPageComponent

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { SchemaFormModule, SchemaValidatorFactory } from 'ngx-schema-form';
+import { SchemaFormModule } from 'ngx-schema-form';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 
@@ -23,7 +23,6 @@ import { CustomObjectWidget } from './widget/object/object.component';
 import { CustomRadioComponent } from './widget/radio/radio.component';
 import { InlineObjectListComponent } from './widget/array/inline-obj-list.component';
 import { InlineObjectComponent } from './widget/object/inline-obj.component';
-import { CustomSchemaValidatorFactory } from './service/schema-validator';
 
 export const COMPONENTS = [
     BooleanRadioComponent,

diff --git a/ui/src/app/schema-form/service/schema-validator.ts b/ui/src/app/schema-form/service/schema-validator.ts
diff --git a/ui/src/app/schema-form/widget/array/array.component.ts b/ui/src/app/schema-form/widget/array/array.component.ts
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 
 import { ArrayWidget } from 'ngx-schema-form';
 import { map } from 'rxjs/operators';
@@ -40,7 +40,7 @@ export class CustomArrayComponent extends ArrayWidget implements AfterViewInit {
         this.hasErrors$ = this.errors$.pipe(map(errors => !!errors.length));
     }
 
-    removeItem(index: number, item: FormProperty = null): void {
+    removeItem(item: FormProperty = null): void {
         this.formProperty.properties = (<FormProperty[]>this.formProperty.properties).filter(i => i !== item);
         this.formProperty.updateValueAndValidity(false, true);
     }

diff --git a/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts b/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 
-import { ObjectWidget } from 'ngx-schema-form';
 import { CustomArrayComponent } from './array.component';
 
 /* tslint:disable */

diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -9,7 +9,7 @@
     <div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
         <label class="control-label">
             <input
-                [id]="name + '-' + i"
+                [id]="formProperty._canonicalPath"
                 [formControl]="control"
                 [name]="name"
                 [value]="option.enum[0]"

diff --git a/ui/src/app/schema-form/widget/button/icon-button.component.html b/ui/src/app/schema-form/widget/button/icon-button.component.html
@@ -1,4 +1,9 @@
-<button class="btn btn-link text-right" [ngSwitch]="button.id" (click)="this.action($event)" *ngIf="this.visible">
+<button
+    [id]="formProperty._canonicalPath"
+    class="btn btn-link text-right"
+    [ngSwitch]="button.id"
+    (click)="this.action($event)"
+    *ngIf="this.visible">
     <i class="fa fa-eye fa-lg text-success" *ngSwitchCase="'preview'"></i>
     <i class="fa fa-floppy-o fa-lg text-info" *ngSwitchDefault></i>
 </button>
diff --git a/ui/src/app/schema-form/widget/button/icon-button.component.ts b/ui/src/app/schema-form/widget/button/icon-button.component.ts
@@ -1,9 +1,7 @@
 import {
     Component, AfterViewInit, ChangeDetectorRef
 } from '@angular/core';
-import { ButtonWidget } from 'ngx-schema-form';
-import { ActionRegistry } from 'ngx-schema-form';
-import { interval } from 'rxjs';
+import { ButtonWidget, ActionRegistry } from 'ngx-schema-form';
 
 @Component({
     selector: 'icon-button',

diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -8,9 +8,9 @@
                     [indeterminate]="control.value !== false && control.value !== true ? true :null"
                     type="checkbox"
                     [attr.disabled]="schema.readOnly?true:null"
-                    id="{{ name }}"
+                    [id]="formProperty._canonicalPath"
                     [disableValidation]="true">
-                <label for="{{ name }}" class="custom-control-label" [translate]="schema.title">
+                <label [attr.for]="formProperty._canonicalPath" class="custom-control-label" [translate]="schema.title">
                     {{ schema.title }}
                 </label>
             </div>
@@ -21,8 +21,10 @@
     </ng-container>
     <ng-container *ngIf="schema.type === 'array'">
         <div *ngFor="let option of schema.items.oneOf" class="checkbox">
-            <label class="horizontal control-label">
-                <input [attr.name]="name" 
+            <label class="horizontal control-label" [attr.for]="formProperty._canonicalPath">
+                <input
+                    [id]="formProperty._canonicalPath"
+                    [attr.name]="name" 
                     value="{{option.enum[0]}}"
                     type="checkbox"
                     [attr.disabled]="schema.readOnly?true:null"

diff --git a/ui/src/app/schema-form/widget/check/checklist.component.html b/ui/src/app/schema-form/widget/check/checklist.component.html
@@ -17,7 +17,7 @@
                                 class="custom-control-input"
                                 (change)="onCheck(attr.key)"
                                 [checked]="checked[attr.key]"
-                                id="input-{{ i }}"
+                                [id]="formProperty._canonicalPath + '.' + i"
                                 [attr.name]="attr.label | translate"
                                 [attr.aria-label]="attr.label | translate"
                                 role="checkbox"
@@ -35,7 +35,7 @@
             <tr>
                 <td scope="col" translate="label.check-all-attributes">Check All Attributes</td>
                 <td scope="col">
-                    <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()">
+                    <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()" [id]="formProperty._canonicalPath + '.checkall'">
                         <i class="fa fa-fw fa-check"></i>
                         <span class="sr-only" translate="label.check-all-attributes">Check All Attributes</span>
                     </button>
@@ -44,7 +44,7 @@
             <tr>
                 <td scope="col" translate="label.clear-all-attributes">Clear All Attributes</td>
                 <td scope="col">
-                    <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()">
+                    <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()" [id]="formProperty._canonicalPath + '.clearall'">
                         <i class="fa fa-fw fa-times"></i>
                         <span class="sr-only" translate="label.clear-all-attributes">Clear All Attributes</span>
                     </button>

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -10,8 +10,8 @@
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <auto-complete
-        [id]="id"
-        [fieldId]="id"
+        [id]="formProperty._canonicalPath"
+        [fieldId]="formProperty._canonicalPath"
         [formControl]="control"
         [matches]="schema.widget.data"
         [required]="true"