Merge pull request #29 from robust-team/v1.0.0

v1.0.0

Author: fagnerlima

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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="1.0.0"></a>
+## [1.0.0](https://github.com/robust-team/angular-forms/compare/v0.5.2...v1.0.0) (2017-09-01)
+
+### Features
+
+* Addition of *asterisk* to required form controls.
+* Addition of the **editableOption** attribute in **Select**.
+* Addition of the **disabled** attribute in **Questions** into **Fieldset**.
+
+### Changes
+
+* Creation of the **styles.css** file and deletion of the inline styles into the components.
+* **String** updated to **StringUtils**.
+* Constructors of the **Groups**, **Questions** and **Validations** updated.
+* Methods into **DependencyService** updated to static methods.
+* **GroupType**, **QuestionType**, **ValidationType** and **DependencyCriteria** Enum created.
+* **ValidationFactory** created.
+
 <a name="0.5.2"></a>
 ## [0.5.2](https://github.com/robust-team/angular-forms/compare/v0.5.1...v0.5.2) (2017-07-19)
 

README.md

@@ -17,7 +17,7 @@ A Simple Form Generator for Angular.
 - **@angular/forms**: 4.0.0 or higher,
 - **@fagnerlima/ng-mask**: 2.2.1 or higher,
 - **@ngx-translate/core**: 7.0.0 or higher,
-- **rxjs**: 5.0.1 or higher.
+- **rxjs**: 5.4.2 or higher.
 
 ## Usage
 
@@ -27,7 +27,13 @@ A Simple Form Generator for Angular.
 npm i @robust-team/angular-forms
 ```
 
-2. Import the AngularFormsModule into Module class.
+2. Import the styles.css:
+
+```
+node_modules/@robust-team/angular-forms/assets/css/styles.css
+```
+
+3. Import the AngularFormsModule into Module class.
 
 ```typescript
 import { AngularFormsModule } from '@robust-team/angular-forms';
@@ -42,7 +48,7 @@ import { AngularFormsModule } from '@robust-team/angular-forms';
 export class MyModule { }
 ```
 
-3. Insert the AngularFormsComponent into template.
+4. Insert the AngularFormsComponent into template.
 
 ```html
 <rb-angular-forms [groups]="customForm"></rb-angular-forms>
@@ -81,6 +87,7 @@ The **customForm** attribute represents the JSON coming from API. For example:
         "description": "Select Question 0103",
         "type": "select",
         "options": ["Option 1", "Option 2"],
+        "editableOption": "Option 2",
         "placeholder": "Select",
         "validations": [
           { "type": "required", "message": "Required field." }
@@ -183,7 +190,7 @@ The **customForm** attribute represents the JSON coming from API. For example:
 
 ![screen](docs/screens/angular-forms-01.png)
 
-4. Get form values by adding a local variable to the component and calling the **getForm()** method. For example:
+5. Get form values by adding a local variable to the component and calling the **getForm()** method. For example:
 
 ```html
 <rb-angular-forms #angularForms [groups]="customForm"></rb-angular-forms>
@@ -236,15 +243,15 @@ Example output:
 | **getForm()** | Returns an object with two attributes: **valid** (return of **isValid** method) and **value** (return of **getAnswersGroups** method. |
 | **submit()** | Send the form, enabling the validation of all questions. |
 
-5. If you want only to show the answers from JSON, use the **readOnly** input with **true** value (your default value is **false**).
+6. If you want only to show the answers from JSON, use the **readOnly** input with **true** value (your default value is **false**).
 
 ```html
 <rb-angular-forms #angularForms [groups]="customForm" [readOnly]="true"></rb-angular-forms>
 ```
 
 ![screen](docs/screens/angular-forms-02.png)
 
-6. For you config the language to be used by AngularForms, use the **lang** input. There are two langs available: **en-US** (default) and **pt-BR**.
+7. For you config the language to be used by AngularForms, use the **lang** input. There are two langs available: **en-US** (default) and **pt-BR**.
 
 ```html
 <rb-angular-forms #angularForms [groups]="customForm" lang="pt-BR"></rb-angular-forms>
@@ -333,6 +340,7 @@ The **Group** represents a grouping of questions, which can be of two types: **F
   "type": "checkbox",
   "answer": null,
   "validations": [],
+  "disabled": false,
   "defaultOption": "false"
 }
 ```
@@ -349,6 +357,7 @@ The **Group** represents a grouping of questions, which can be of two types: **F
   "type": "radio",
   "answer": null,
   "validations": [],
+  "disabled": false,
   "options": ["Option 1", "Option 2"],
   "defaultOption": null
 }
@@ -366,8 +375,10 @@ The **Group** represents a grouping of questions, which can be of two types: **F
   "type": "select",
   "answer": null,
   "validations": [],
+  "disabled": false,
   "options": ["Option 1", "Option 2"],
   "defaultOption": null,
+  "editableOption": "Option 2",
   "placeholder": "Select an option"
 }
 ```
@@ -384,6 +395,7 @@ The **Group** represents a grouping of questions, which can be of two types: **F
   "type": "text",
   "answer": null,
   "validations": [],
+  "disabled": false,
   "mask": null,
   "placeholder": null
 }
@@ -420,6 +432,7 @@ Read more in [https://fagnerlima.github.io/ng-mask/](https://fagnerlima.github.i
   "type": "textarea",
   "answer": null,
   "validations": [],
+  "disabled": false,
   "placeholder": null
 }
 ```

assets/css/styles.css

@@ -0,0 +1,55 @@
+/* Icons */
+.rb-ico { font-style: normal }
+.rb-ico:after { font-size: 1.6rem }
+.rb-ico.rb-ico-add:after { content: '✚' }
+.rb-ico.rb-ico-remove:after { content: '✖' }
+.rb-ico.rb-ico-square:after {
+  background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
+  border: 1px solid #888;
+  border-radius: .3rem;
+  content: '';
+  cursor: default;
+  display: inline-block;
+  font-size: 1.6rem;
+  height: 1.4rem;
+  line-height: 1.4rem;
+  margin-right: .5rem;
+  text-align: center;
+  width: 1.4rem;
+}
+.rb-ico.rb-ico-square.rb-ico-checked:after { content: '✔' }
+.rb-ico.rb-ico-square.rb-ico-unchecked:after { content: '' }
+
+/* DataTable */
+.rb-data-table {
+  border: 1px solid #ccc;
+  margin-bottom: 15px;
+  padding: 0 15px 15px;
+}
+.rb-data-table legend {
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+}
+
+/* Validation */
+.rb-validation-message {
+  margin: 0;
+  padding: 0;
+}
+.rb-validation-message li {
+  border-left: 3px solid #a00;
+  color: #a00;
+  font-size: .9em;
+  list-style: none;
+  margin-bottom: 3px;
+  padding: 1px 0 1px 5px;
+}
+.rb-validation-message li:first-of-type { margin-top: 5px }
+
+.required-control::after {
+  color: #a00;
+  content: '*';
+}
+
+/* Choice Question */
+.editable-option { margin-top: 10px; }

demo/demo.service.ts

@@ -23,13 +23,15 @@ const groups: any[] = [
         'defaultOption': 'Option 1',
         'validations': [
           { 'type': 'required', 'message': 'Required field.' }
-        ]
+        ],
+        'disabled': true
       },
       {
         'name': 'Q-0103',
         'description': 'Select Question 0103',
         'type': 'select',
         'options': ['Option 1', 'Option 2'],
+        'editableOption': 'Option 2',
         'placeholder': 'Select',
         'validations': [
           { 'type': 'required', 'message': 'Required field.' }
@@ -39,6 +41,7 @@ const groups: any[] = [
         'name': 'Q-0104',
         'description': 'Text Question 0104',
         'type': 'text',
+        'answer': 200,
         'placeholder': 'Text Question 0104',
         'validations': [
           { 'type': 'required', 'message': 'Required field.' },
@@ -68,6 +71,40 @@ const groups: any[] = [
         'dependencies': [
           { 'code': 'Q-0103', 'criteria': 'equals', 'expectedAnswer': 'Option 1' }
         ]
+      },
+      {
+        'name': 'Q-0107',
+        'description': 'Text Question 0107',
+        'type': 'text',
+        'placeholder': 'Text Question 0107',
+        'validations': [
+          { 'type': 'required', 'message': 'Required field.' }
+        ],
+        'dependencies': [
+          { 'code': 'Q-0104', 'criteria': 'lessthan', 'expectedAnswer': '300' },
+          { 'code': 'Q-0104', 'criteria': 'notequals', 'expectedAnswer': '100' },
+          { 'code': 'Q-0104', 'criteria': 'greaterthan', 'expectedAnswer': '100' },
+          { 'code': 'Q-0104', 'criteria': 'lessthanorequals', 'expectedAnswer': '300' }
+        ]
+      },
+      {
+        'name': 'Q-0108',
+        'description': 'Text Question 0108',
+        'type': 'text',
+        'placeholder': 'Text Question 0108',
+        'validations': [
+          { 'type': 'min', 'message': 'Min value: 1.', 'value': '1' },
+          { 'type': 'max', 'message': 'Min value: 10.', 'value': '10' }
+        ]
+      },
+      {
+        'name': 'Q-0109',
+        'description': 'Text Question 0109',
+        'type': 'text',
+        'placeholder': 'Text Question 0109',
+        'validations': [
+          { 'type': 'email', 'message': 'Invalid e-mail.' }
+        ]
       }
     ]
   },
@@ -90,20 +127,9 @@ const groups: any[] = [
             { 'type': 'required', 'message': 'Required field.' }
           ],
           'options': ['Option 1', 'Option 2', 'Option 3'],
+          'editableOption': 'Option 3',
           'placeholder': 'Select'
         },
-        {
-          'name': 'Q-020201',
-          'description': 'Text Question 020201',
-          'type': 'text',
-          'validations': [
-            { 'type': 'required', 'message': 'Required field.' }
-          ],
-          'dependencies': [
-            { 'code': 'Q-0201', 'criteria': 'equals', 'expectedAnswer': 'Option 3' }
-          ],
-          'placeholder': 'Text Question 020201'
-        },
         {
           'name': 'Q-0202',
           'description': 'Text Question 0202',
@@ -126,19 +152,6 @@ const groups: any[] = [
           'placeholder': 'Select',
           'answer': 'Option 2'
         },
-        {
-          'name': 'Q-020201',
-          'description': 'Text Question 020201',
-          'type': 'text',
-          'validations': [
-            { 'type': 'required', 'message': 'Required field.' }
-          ],
-          'dependencies': [
-            { 'code': 'Q-0201', 'criteria': 'equals', 'expectedAnswer': 'Option 3' }
-          ],
-          'placeholder': 'Text Question 020201',
-          'answer': null
-        },
         {
           'name': 'Q-0202',
           'description': 'Text Question 0202',
@@ -162,19 +175,6 @@ const groups: any[] = [
           'placeholder': 'Select',
           'answer': 'Option 3'
         },
-        {
-          'name': 'Q-020201',
-          'description': 'Text Question 020201',
-          'type': 'text',
-          'validations': [
-            { 'type': 'required', 'message': 'Required field.' }
-          ],
-          'dependencies': [
-            { 'code': 'Q-0201', 'criteria': 'equals', 'expectedAnswer': 'Option 3' }
-          ],
-          'placeholder': 'Text Question 020201',
-          'answer': 'Anwer 3'
-        },
         {
           'name': 'Q-0202',
           'description': 'Text Question 0202',

demo/index.ejs

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/css/styles.css">
     <title>AngularForms</title>
     <style type="text/css">
       .container-demo {