Merge pull request #36 from fagnerlima/v3.0.0-beta1

v3.0.0 beta1

Author: fagnerlima

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="3.0.0-beta1"></a>
+## [3.0.0-beta1](https://github.com/robust-team/angular-forms/compare/v2.1.0...v3.0.0-beta1) (2017-10-10)
+
+### Changes
+
+* **Answers**' type into **Questions** changed of *string* to **Answer** object.
+
+### Bug Fixes
+
+* Fixed **isPristine** and **isDirty** methods into **AngularFormsComponent**.
+
 <a name="2.1.0"></a>
 ## [2.1.0](https://github.com/robust-team/angular-forms/compare/v1.2.0...v2.1.0) (2017-09-28)
 

README.md

@@ -8,7 +8,7 @@
 [![Issue Stats](http://issuestats.com/github/robust-team/angular-forms/badge/pr?style=flat)](http://issuestats.com/github/robust-team/angular-forms)
 [![Issue Stats](http://issuestats.com/github/robust-team/angular-forms/badge/issue?style=flat)](http://issuestats.com/github/robust-team/angular-forms)
 
-A Simple Form Generator for Angular.
+A Robust Forms Generator for Angular.
 
 ## Table of Contents
 
@@ -243,15 +243,15 @@ Example output:
   value: {
     "G-01": [
       {
-        "Q-101": "Option 1",
-        "Q-102": "123"
+        "Q-101": { "value": "Option 1", "id": null },
+        "Q-102": { "value": "123", "id": null }
       }
     ],
     "G-02": {
-      "Q-201": "Option 1",
-      "Q-202": "Option 2",
-      "Q-203": null,
-      "Q-204": null
+      "Q-201": { "value": "Option 1", "id": null },
+      "Q-202": { "value": "Option 2", "id": null },
+      "Q-203": { "value": null, "id": null },
+      "Q-204": { "value": null, "id": null }
     }
   }
 }
@@ -494,6 +494,19 @@ Read more in [https://fagnerlima.github.io/ng-mask/](https://fagnerlima.github.i
 }
 ```
 
+### Answer
+
+**Answer** represents the question's answer.
+
+```json
+{
+  "value": "My answer",
+  "id": 1
+}
+```
+
+The **value** property represents the user's answer itself, while the **id** property is the answer's *identifier* into *database*, for example.
+
 ## Validations
 
 **Validations** can be used in **Question** and **DataTable**, which can be of seven types:

demo/demo.component.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '
 
 import { DemoService } from './demo.service';
 import { AngularFormsComponent } from '../src';
-import { Fieldset } from '../src/group/fieldset';
+import { Fieldset } from '../src/group';
 
 @Component({
   selector: 'rb-demo-app',

demo/demo.service.ts

@@ -39,7 +39,8 @@ const groups: any[] = [
         'placeholder': 'Select',
         'validations': [
           { 'type': 'required', 'message': 'Required field.' }
-        ]
+        ],
+        'answer': { 'value': 'op-2', 'id': 1 }
       },
       {
         'name': 'Q-0103',
@@ -165,7 +166,7 @@ const groups: any[] = [
           ],
           'options': ['Option 1', 'Option 2', 'Option 3'],
           'placeholder': 'Select',
-          'answer': 'Option 2'
+          'answer': { 'value': 'Option 2', 'id': 1 }
         },
         {
           'name': 'Q-0202',
@@ -175,7 +176,7 @@ const groups: any[] = [
             { 'type': 'required', 'message': 'Required field.' }
           ],
           'placeholder': 'Text Question 0202',
-          'answer': 'Answer 0202'
+          'answer': { 'value': 'Answer 0202', 'id': 1 }
         }
       ],
       [
@@ -188,7 +189,7 @@ const groups: any[] = [
           ],
           'options': ['Option 1', 'Option 2', 'Option 3'],
           'placeholder': 'Select',
-          'answer': 'Option 3'
+          'answer': { 'value': 'Option 3', 'id': 2 }
         },
         {
           'name': 'Q-0202',
@@ -198,7 +199,7 @@ const groups: any[] = [
             { 'type': 'required', 'message': 'Required field.' }
           ],
           'placeholder': 'Text Question 0202',
-          'answer': 'Answer 0202 2'
+          'answer': { 'value': 'Answer 0202 2', 'id': 2 }
         }
       ]
     ]

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@robust-team/angular-forms",
-  "version": "2.1.0",
+  "version": "3.0.0-beta1",
   "license": "MIT",
   "description": "A Simple Angular Forms Generator",
   "main": "./bundles/angular-forms.umd.js",

package.json

@@ -5,10 +5,10 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 
 import { AngularForms, Status } from '.';
-import { Group } from './group';
-import { DependencyService, Select, SelectService, Question } from './question';
+import { DataTable, Fieldset, Group, GroupType } from './group';
+import { Answer, DependencyService, Question, Select, SelectService } from './question';
 import { ReactiveFormsFactory } from './factory';
-import { StringUtils } from './util';
+import { ObjectUtils, StringUtils } from './util';
 
 @Component({
   selector: 'rb-angular-forms',
@@ -187,6 +187,7 @@ export class AngularFormsComponent implements OnInit, OnChanges, AfterViewChecke
   @Output() public error: EventEmitter<Error> = new EventEmitter();
   @Output() public ready: EventEmitter<boolean> = new EventEmitter();
 
+  private _originalValueFormGroup: Object;
   private _status: Status;
 
   public constructor(
@@ -249,28 +250,28 @@ export class AngularFormsComponent implements OnInit, OnChanges, AfterViewChecke
   }
 
   public isPristine(): boolean {
-    return this.formGroup.pristine;
+    return ObjectUtils.isEquals(this._originalValueFormGroup, this.formGroup.value);
   }
 
   public isDirty(): boolean {
-    return this.formGroup.dirty;
+    return !ObjectUtils.isEquals(this._originalValueFormGroup, this.formGroup.value);
   }
 
   public isValid(): boolean {
     return this.formGroup.valid;
   }
 
   public getAnswersGroups(): Object {
-    const answersGroups: Object = this.formGroup.value;
+    const answersGroups: Object = ObjectUtils.clone(this.formGroup.value);
 
     Object.keys(answersGroups).forEach((groupIndex: string) => {
       if (answersGroups[groupIndex] instanceof Array) {
-        (<Array<Object>>answersGroups[groupIndex]).map((answersGroup: Object) => this.convertAnswersOfGroupToString(answersGroup));
-
+        (<Array<Object>>answersGroups[groupIndex]).map((answersGroup: Object, index: number) =>
+          this.convertAnswersDataTable(answersGroup, <DataTable>this.getGroupByCode(groupIndex), index + 1));
         return;
       }
 
-      answersGroups[groupIndex] = this.convertAnswersOfGroupToString(answersGroups[groupIndex]);
+      answersGroups[groupIndex] = this.convertAnswersFieldset(answersGroups[groupIndex], <Fieldset>this.getGroupByCode(groupIndex));
     });
 
     return answersGroups;
@@ -283,7 +284,6 @@ export class AngularFormsComponent implements OnInit, OnChanges, AfterViewChecke
     Object.keys(answersGroups).forEach((groupIndex: string) => {
       if (answersGroups[groupIndex] instanceof Array) {
         answers[groupIndex] = answersGroups[groupIndex];
-
         return;
       }
 
@@ -300,6 +300,10 @@ export class AngularFormsComponent implements OnInit, OnChanges, AfterViewChecke
     this.error.emit(error);
   }
 
+  public get originalValueFormGroup(): Object {
+    return this._originalValueFormGroup;
+  }
+
   public get status(): Status {
     return this._status;
   }
@@ -315,16 +319,38 @@ export class AngularFormsComponent implements OnInit, OnChanges, AfterViewChecke
       try {
         this.groups = await AngularForms.fromJson(this.groups);
         this.formGroup = await ReactiveFormsFactory.createFormGroupFromGroups(this.groups);
+        setTimeout(() => this.initOriginalValueFormGroup(), 2000);
         resolve();
       } catch (error) {
         reject(error);
       }
     });
   }
 
-  private convertAnswersOfGroupToString(answersGroup: Object): Object {
-    Object.keys(answersGroup)
-      .forEach((questionIndex: string) => answersGroup[questionIndex] = StringUtils.convertToString(answersGroup[questionIndex]));
+  private initOriginalValueFormGroup(): void {
+    this._originalValueFormGroup = ObjectUtils.clone(this.formGroup.value);
+  }
+
+  private convertAnswersFieldset(answersGroup: Object, group: Fieldset): Object {
+    Object.keys(answersGroup).forEach((questionName: string) => {
+      const question: Question<any> = group.getQuestionByName(questionName);
+      const id: number | string = (<Answer<any>>question.answer).id || null;
+      const value: string = StringUtils.convertToString(answersGroup[questionName]);
+
+      answersGroup[questionName] = new Answer(value, id);
+    });
+
+    return answersGroup;
+  }
+
+  private convertAnswersDataTable(answersGroup: Object, group: DataTable, index: number): Object {
+    Object.keys(answersGroup).forEach((questionName: string) => {
+      const question: Question<any> = group.getQuestionByNameAndIndex(questionName, index);
+      const id: number | string = question ? (<Answer<any>>question.answer).id : null;
+      const value: string = StringUtils.convertToString(answersGroup[questionName]);
+
+      answersGroup[questionName] = new Answer(value, id);
+    });
 
     return answersGroup;
   }

src/angular-forms.component.ts

@@ -0,0 +1,12 @@
+import { isNullOrUndefined } from 'util';
+
+import { Answer } from '../question';
+
+export class AnswerFactory {
+
+  public static create<AnswerType>(answer: Answer<AnswerType> | AnswerType): Answer<AnswerType> {
+    return !isNullOrUndefined(answer) && 'object' === typeof answer
+      ? new Answer<AnswerType>(answer['value'], answer['id'])
+      : new Answer<AnswerType>(answer);
+  }
+}

src/factory/answer-factory.ts

@@ -1,4 +1,5 @@
 export * from './validation-factory';
+export * from './answer-factory';
 export * from './question-factory';
 export * from './validator-factory';
 export * from './reactive-forms-factory';

src/factory/index.ts

@@ -46,7 +46,7 @@ export class ReactiveFormsFactory {
 
         for await (const question of questions) {
           const validators: ValidatorFn[] = await ReactiveFormsFactory.createValidators(question.validations);
-          const answer: any = !question.answer && (<Choice>question).defaultOption ? (<Choice>question).defaultOption : question.answer;
+          const answer: any = ReactiveFormsFactory.getFormStateValue(question);
           const formState: any = { value: answer, disabled: checkDisabledQuestions && question.disabled };
           const control: FormControl = new FormControl(formState, validators);
 
@@ -73,7 +73,7 @@ export class ReactiveFormsFactory {
           const group: FormGroup = new FormGroup({});
 
           for (const column of question) {
-            group.addControl(column.name, new FormControl(column.answer));
+            group.addControl(column.name, new FormControl(column.answer ? column.answer.value : null));
           }
 
           formArray.push(group);
@@ -110,4 +110,16 @@ export class ReactiveFormsFactory {
       }
     });
   }
+
+  private static getFormStateValue(question: Question<any>): any {
+    if ((<Choice>question).defaultOption && (!question.answer || !question.answer.value)) {
+      return (<Choice>question).defaultOption;
+    }
+
+    if (question.answer && question.answer.value) {
+      return question.answer.value;
+    }
+
+    return null;
+  }
 }