Merged in bugfix/SHIBUI-1378 (pull request #345)

SHIBUI-1378 Implemented new ids for form fields
TIER · Jul 29, 2019 · 1c8797b · 1c8797b
2 parents 5ff53ea + de4bb35
commit 1c8797b
Show file tree

Hide file tree

Showing 21 changed files with 49 additions and 69 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"

diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -11,6 +11,7 @@
                 </label>
                 <div ngbDropdown>
                     <button ngbDropdownToggle
+                        [id]="formProperty._canonicalPath + '.valuedd'"
                         class="btn btn-outline-secondary dropdown-toggle"
                         type="button"
                         data-toggle="dropdown"
@@ -47,7 +48,7 @@
                     <div class="flex-grow-1" [ngSwitch]="this.targetType">
                         <ng-container *ngSwitchDefault>
                             <auto-complete
-                                [fieldId]="'targetInput'"
+                                [fieldId]="formProperty._canonicalPath + '.target'"
                                 class="component-control"
                                 limit="10"
                                 [formControl]="search"
@@ -59,7 +60,7 @@
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'CONDITION_SCRIPT'">
-                            <p id="targetInput" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
+                            <p [id]="formProperty._canonicalPath + '.target'" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
                             <small id="script-help" class="text-danger">
                                 <ng-container *ngIf="script.invalid && script.touched">
                                     <translate-i18n key="message.required-for-scripts">Required for Scripts</translate-i18n>
@@ -68,7 +69,7 @@
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'REGEX'">
-                            <input id="targetInput" class="form-control" type="text" [formControl]="script" name="script" />
+                            <input [id]="formProperty._canonicalPath + '.target'" class="form-control" type="text" [formControl]="script" name="script" />
                             <small id="regex-help" class="form-text text-secondary">
                                 <translate-i18n key="message.required-for-regex">Required for Regex</translate-i18n>
                                 &nbsp;

diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
@@ -10,6 +10,7 @@
     </label>
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
     <input [attr.readonly]="schema.readOnly?true:null"
+        [id]="formProperty._canonicalPath"
         [name]="name"
         class="text-widget integer-widget form-control"
         [formControl]="control"

diff --git a/ui/src/app/schema-form/widget/radio/radio.component.html b/ui/src/app/schema-form/widget/radio/radio.component.html
@@ -3,7 +3,7 @@
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
     <ng-container *ngFor="let option of schema.oneOf">
         <div class="form-check" [ngClass]="schema.widget.class">
-            <input class="form-check-input" [formControl]="control" type="radio" [attr.name]="name" [id]="name" value="{{option.enum[0]}}" [attr.disabled]="schema.readOnly">
+            <input class="form-check-input" [formControl]="control" type="radio" [attr.name]="name" [id]="formProperty._canonicalPath" value="{{option.enum[0]}}" [attr.disabled]="schema.readOnly">
             <label class="form-check-label" [for]="name" [translate]="option.description">{{option.description}}</label>
         </div>
     </ng-container>

diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -15,7 +15,7 @@
         {{ schema.description }}
     </span>
     <select *ngIf="schema.type !== 'array'"
-        [id]="id"
+        [id]="formProperty._canonicalPath"
         [formControl]="control"
         [attr.name]="name"
         class="form-control"
@@ -36,7 +36,12 @@
             <option *ngFor="let option of options$ | async" [ngValue]="option.value" [translate]="option.label">{{ option.label }}</option>
         </ng-container>
     </select>
-    <select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+    <select *ngIf="schema.type === 'array'"
+        [id]="formProperty._canonicalPath"
+        multiple [formControl]="control"
+        [attr.name]="name"
+        [attr.disabled]="schema.readOnly"
+        class="form-control">
         <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">

diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
@@ -15,14 +15,14 @@
         class="text-widget.id textline-widget form-control"
         [class.is-invalid]="control.touched && !control.value && errorMessages.length"
         [attr.type]="this.getInputType()"
-        [attr.id]="id"
+        [id]="formProperty._canonicalPath"
         [formControl]="control"
         [attr.placeholder]="schema.placeholder | translate"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null"
         [attr.aria-label]="schema.title">
-    <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [attr.name]="name" type="hidden" [formControl]="control">
+    <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [id]="formProperty._canonicalPath" [attr.name]="name" type="hidden" [formControl]="control">
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>

diff --git a/ui/src/app/schema-form/widget/string/string.component.ts b/ui/src/app/schema-form/widget/string/string.component.ts
@@ -1,6 +1,5 @@
 import { Component, AfterViewInit, OnDestroy } from '@angular/core';
 import { StringWidget } from 'ngx-schema-form';
-import { Validators } from '@angular/forms';
 import { SchemaService } from '../../service/schema.service';
 import { startWith } from 'rxjs/operators';
 import { Subscription } from 'rxjs';

diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -10,6 +10,7 @@
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <textarea [attr.readonly]="schema.readOnly?true:null"
+        [id]="formProperty._canonicalPath"
         [name]="name"
         class="text-widget textarea-widget form-control"
         [attr.placeholder]="schema.placeholder"

diff --git a/ui/src/app/schema-form/widget/widget.component.scss b/ui/src/app/schema-form/widget/widget.component.scss
@@ -1,7 +0,0 @@
-:host {
-    .widget {
-        .popover {
-
-        }
-    }
-}