Code review from @igor

ESSS · Jan 31, 2018 · 37d2a66 · 37d2a66
1 parent aafedfc
commit 37d2a66
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 49 deletions.
diff --git a/src/ng-xform/fields/index.ts b/src/ng-xform/fields/index.ts
@@ -6,4 +6,4 @@ export * from './select-option';
 export * from './checkbox-field';
 export * from './multiline-field';
 export * from './autocomplete-field';
-export * from './field-group';
+export * from './nested-object-field';
diff --git a/src/ng-xform/fields/field-group.ts → src/ng-xform/fields/nested-object-field.ts b/src/ng-xform/fields/field-group.ts → src/ng-xform/fields/nested-object-field.ts
@@ -1,13 +1,13 @@
 import { DynamicField } from './dynamic-field';
 
-export class FieldGroup extends DynamicField {
+export class NestedObjectField extends DynamicField {
     public controlType ? = 'GROUP';
     public key: string;
     public label?: string;
     public fields: DynamicField[];
 
     constructor(
-        options: FieldGroup
+        options: NestedObjectField
     ) {
         super(options);
         this.key = options.key;

diff --git a/.../fields-group/fields-group.component.html → ...form/form-group/form-group.component.html b/.../fields-group/fields-group.component.html → ...form/form-group/form-group.component.html
@@ -3,12 +3,13 @@
 
         <ng-template [ngSwitchCase]="'GROUP'">
             <hr *ngIf='field.label'>
-            <h3 *ngIf='field.label'>
+            <h4 *ngIf='field.label'>
                 {{field.label}}
-            </h3>
+            </h4>
             <div [formGroup]='form'>
                 <div [formGroupName]="field.key">
-                    <ng-xform-fields-group [fields]='field.fields' [form]='form.get(field.key)' [editing]='editing'></ng-xform-fields-group>
+                    <ng-xform-form-group [fields]='field.fields' [form]='form.get(field.key)' [editing]='editing'>
+                    </ng-xform-form-group>
                 </div>
             </div>
         </ng-template>

diff --git a/...rm/fields-group/fields-group.component.ts → ...-xform/form-group/form-group.component.ts b/...rm/fields-group/fields-group.component.ts → ...-xform/form-group/form-group.component.ts
@@ -3,7 +3,7 @@ import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { Component, OnInit, Input, EventEmitter, Output, OnChanges } from '@angular/core';
 
 import { DynamicField } from '../fields/dynamic-field';
-import { FieldGroup } from '../fields/field-group';
+import { NestedObjectField } from '../fields/nested-object-field';
 
 /**
  * This component builds a form with input components from fields list.
@@ -12,11 +12,11 @@ import { FieldGroup } from '../fields/field-group';
  * :editing: Flag to control components state
  */
 @Component({
-  selector: 'ng-xform-fields-group',
-  templateUrl: './fields-group.component.html',
+  selector: 'ng-xform-form-group',
+  templateUrl: './form-group.component.html',
   styles: []
 })
-export class FieldsGroupComponent {
+export class FormGroupComponent {
   @Input() fields: DynamicField[];
   @Input() form: FormGroup;
   @Input() editing: boolean;

diff --git a/src/ng-xform/ng-xform.component.html b/src/ng-xform/ng-xform.component.html
@@ -1,6 +1,6 @@
 <div>
   <form [formGroup]="form">
-    <ng-xform-fields-group [fields]='fields' [form]=form [editing]='editing'></ng-xform-fields-group>
+    <ng-xform-form-group [fields]='fields' [form]=form [editing]='editing'></ng-xform-form-group>
   </form>
 </div>
 <div class="row">

diff --git a/src/ng-xform/ng-xform.component.spec.ts b/src/ng-xform/ng-xform.component.spec.ts
@@ -2,34 +2,20 @@ import {
   async,
   ComponentFixture,
   TestBed,
-  fakeAsync,
-  tick
 } from '@angular/core/testing';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 
-import { NgXformComponent } from './ng-xform.component';
-import { EditableLabelComponent } from './editable-label/editable-label.component';
-import { MeasureFieldComponent } from './measure-field/measure-field.component';
-import { SelectFieldComponent } from './select-field/select-field.component';
-import { AutocompleteFieldComponent } from './autocomplete-field/autocomplete-field.component';
-import { CheckboxFieldComponent } from './checkbox-field/checkbox-field.component';
-import { MultilineFieldComponent } from './multiline-field/multiline-field.component';
-import { FieldErrorMessageComponent } from './field-error-message/field-error-message.component';
-import { ErrorMessagePipe } from './field-error-message/error-message.pipe';
 import { OptionValue } from '../types';
-import { PipesModule } from '../pipes/pipes.module';
 import { MultilineField } from './fields/multiline-field';
-import { FieldsGroupComponent } from './fields-group/fields-group.component';
-import { FieldGroup } from './fields/field-group';
+import { NestedObjectField } from './fields/nested-object-field';
 import {
   AutocompleteField,
   TextField,
   MeasureField,
   SelectField
 } from './fields';
+import { NgXformModule } from './ng-xform.module';
+import { NgXformComponent } from './ng-xform.component';
 
 describe('DynamicFormComponent', () => {
   let component: NgXformComponent;
@@ -38,23 +24,8 @@ describe('DynamicFormComponent', () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        declarations: [
-          NgXformComponent,
-          EditableLabelComponent,
-          FieldsGroupComponent,
-          AutocompleteFieldComponent,
-          CheckboxFieldComponent,
-          MeasureFieldComponent,
-          SelectFieldComponent,
-          FieldErrorMessageComponent,
-          ErrorMessagePipe,
-          MultilineFieldComponent
-        ],
         imports: [
-          CommonModule,
-          NguiAutoCompleteModule,
-          ReactiveFormsModule,
-          PipesModule
+          NgXformModule
         ]
       }).compileComponents();
     })
@@ -99,7 +70,7 @@ describe('DynamicFormComponent', () => {
         valueFormatter: 'name',
         listFormatter: 'name'
       }),
-      new FieldGroup({
+      new NestedObjectField({
         key: 'address', label: 'Address',
         fields: [
           new TextField({ key: 'street', label: 'Street' }),

diff --git a/src/ng-xform/ng-xform.component.ts b/src/ng-xform/ng-xform.component.ts
@@ -2,7 +2,7 @@ import { Validators, FormGroup, FormControl } from '@angular/forms';
 import { Component, OnInit, Input, EventEmitter, Output, OnChanges, SimpleChanges } from '@angular/core';
 
 import { DynamicField } from './fields/dynamic-field';
-import { FieldGroup } from './fields/field-group';
+import { NestedObjectField } from './fields/nested-object-field';
 
 /**
  * This component builds a form with input components from fields list.
@@ -57,7 +57,7 @@ export class NgXformComponent implements OnInit, OnChanges {
     let group: any = {};
 
     fields.forEach(field => {
-      if (field instanceof FieldGroup) {
+      if (field instanceof NestedObjectField) {
         group[field.key] = this.createFormGroup(field.fields);
       } else {
         group[field.key] = field.validators

diff --git a/src/ng-xform/ng-xform.module.ts b/src/ng-xform/ng-xform.module.ts
@@ -13,7 +13,7 @@ import { ErrorMessagePipe } from './field-error-message/error-message.pipe';
 import { PipesModule } from '../pipes/pipes.module';
 import { MultilineFieldComponent } from './multiline-field/multiline-field.component';
 import { AutocompleteFieldComponent } from './autocomplete-field/autocomplete-field.component';
-import { FieldsGroupComponent } from './fields-group/fields-group.component';
+import { FormGroupComponent } from './form-group/form-group.component';
 
 @NgModule({
   imports: [
@@ -24,7 +24,7 @@ import { FieldsGroupComponent } from './fields-group/fields-group.component';
   ],
   declarations: [
     NgXformComponent,
-    FieldsGroupComponent,
+    FormGroupComponent,
     EditableLabelComponent,
     CheckboxFieldComponent,
     MeasureFieldComponent,