Added decimal render type, model and validators (#118)

AMPATH · Sep 20, 2022 · 5347f46 · 5347f46
1 parent 8005f8c
commit 5347f46
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 89 deletions.
diff --git a/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.ts b/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.ts
@@ -1,30 +1,26 @@
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR
-} from "@angular/forms";
-import { Component, OnInit, forwardRef } from "@angular/core";
-import * as moment_ from "moment";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, OnInit, forwardRef } from '@angular/core';
+import * as moment_ from 'moment';
 const moment = moment_;
 
 @Component({
-  selector: "ngx-time-picker",
-  templateUrl: "./ngx-time-picker.component.html",
-  styleUrls: ["./ngx-time-picker.component.css"],
+  selector: 'ngx-time-picker',
+  templateUrl: './ngx-time-picker.component.html',
+  styleUrls: ['./ngx-time-picker.component.css'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       multi: true,
-      useExisting: forwardRef(() => NgxTimePickerComponent),
-    },
-  ],
+      useExisting: forwardRef(() => NgxTimePickerComponent)
+    }
+  ]
 })
 export class NgxTimePickerComponent implements OnInit, ControlValueAccessor {
-  public value: string = moment().format("HH:mm:ss");
+  public value: string = moment().format('HH:mm:ss');
   public onChange: any = () => {};
   public onTouched: any = () => {};
 
-  public ngOnInit() {
-  }
+  public ngOnInit() {}
 
   public writeValue(value: any): void {
     this.value = this.formatTimeValue(value);
@@ -50,23 +46,27 @@ export class NgxTimePickerComponent implements OnInit, ControlValueAccessor {
     */
     let timeArray = [];
     let dateArray = [];
-    let timeValue = "";
+    let timeValue = '';
 
-    if (typeof timeInputString === "undefined" || timeInputString === null) {
+    if (typeof timeInputString === 'undefined' || timeInputString === null) {
     } else {
-      timeArray = timeInputString.split(":");
-      dateArray = timeInputString.split("-");
+      timeArray = timeInputString.split(':');
+      dateArray = timeInputString.split('-');
     }
     if (timeArray.length === 1 && moment(timeInputString).isValid()) {
-      timeValue = moment(timeInputString).format("HH:mm:ss");
+      timeValue = moment(timeInputString).format('HH:mm:ss');
     } else if (timeArray.length > 1 && timeArray.length < 2) {
-      timeValue = moment(timeInputString,moment.defaultFormat).format('HH:mm:ss');
-    } else if(timeArray.length >= 2 && dateArray.length > 1){
-        timeValue = moment(timeInputString,moment.defaultFormat).format('HH:mm:ss');;
-    }else if(timeArray.length >= 2 && dateArray.length <= 1) {
-      timeValue = moment(timeInputString,'HH:mm:ss').format('HH:mm:ss');
-    }else {
-      timeValue = moment().format("HH:mm:ss");
+      timeValue = moment(timeInputString, moment.defaultFormat).format(
+        'HH:mm:ss'
+      );
+    } else if (timeArray.length >= 2 && dateArray.length > 1) {
+      timeValue = moment(timeInputString, moment.defaultFormat).format(
+        'HH:mm:ss'
+      );
+    } else if (timeArray.length >= 2 && dateArray.length <= 1) {
+      timeValue = moment(timeInputString, 'HH:mm:ss').format('HH:mm:ss');
+    } else {
+      timeValue = moment().format('HH:mm:ss');
     }
     return timeValue;
   }

diff --git a/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.module.ts b/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.module.ts
@@ -1,27 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgxTimePickerComponent } from './ngx-time-picker.component';
 
- import { NgModule } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { FormsModule , ReactiveFormsModule } from '@angular/forms';
- import { NgxTimePickerComponent } from './ngx-time-picker.component';
-
-
-
-
- @NgModule({
-     imports: [
-         CommonModule,
-         FormsModule,
-         ReactiveFormsModule
-     ],
-     declarations: [
-      NgxTimePickerComponent
-     ],
-     exports: [
-      NgxTimePickerComponent
-     ],
-     providers: [
-     ]
- })
- export class NgxTimePickerModule {
- }
-
+@NgModule({
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  declarations: [NgxTimePickerComponent],
+  exports: [NgxTimePickerComponent],
+  providers: []
+})
+export class NgxTimePickerModule {}
diff --git a/projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts b/projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts
@@ -23,6 +23,7 @@ import { MaxValidationModel } from '../question-models/max-validation.model';
 import { MinValidationModel } from '../question-models/min-validation.model';
 import { JsExpressionValidationModel } from '../question-models/js-expression-validation.model';
 import { ConditionalValidationModel } from '../question-models/conditional-validation.model';
+import { DecimalPointValidationModel } from '../question-models/decimal-point-validation.model';
 import { DummyDataSource } from '../data-sources/dummy-data-source';
 import { HistoricalHelperService } from '../helpers/historical-expression-helper-service';
 import { Form } from './form';
@@ -132,6 +133,33 @@ export class QuestionFactory {
     return question;
   }
 
+  toDecimalQuestion(schemaQuestion: any): TextInputQuestion {
+    const question = new TextInputQuestion({
+      placeholder: '',
+      type: '',
+      key: ''
+    });
+    question.label = schemaQuestion.label;
+    question.key = schemaQuestion.id;
+    question.renderingType = 'decimal';
+    question.placeholder = schemaQuestion.questionOptions.placeholder || '';
+    question.extras = schemaQuestion;
+
+    const mappings: any = {
+      label: 'label',
+      required: 'required',
+      id: 'key'
+    };
+
+    this.copyProperties(mappings, schemaQuestion, question);
+    question.validators = this.addValidators(schemaQuestion);
+    this.addDisableOrHideProperty(schemaQuestion, question);
+    this.addAlertProperty(schemaQuestion, question);
+    this.addHistoricalExpressions(schemaQuestion, question);
+    this.addCalculatorProperty(schemaQuestion, question);
+    return question;
+  }
+
   toDateQuestion(schemaQuestion: any): DateQuestion {
     if (schemaQuestion.type === 'encounterDatetime') {
       return this.toEncounterDatetimeQuestion(schemaQuestion);
@@ -171,7 +199,6 @@ export class QuestionFactory {
       id: 'key'
     };
 
-
     this.copyProperties(mappings, schemaQuestion, question);
     this.addDisableOrHideProperty(schemaQuestion, question);
     this.addAlertProperty(schemaQuestion, question);
@@ -723,12 +750,14 @@ export class QuestionFactory {
         return this.toNumericQuestion(schema);
       case 'number':
         return this.toNumberQuestion(schema);
+      case 'decimal':
+        return this.toDecimalQuestion(schema);
       case 'encounterDatetime':
         return this.toEncounterDatetimeQuestion(schema);
       case 'date':
         return this.toDateQuestion(schema);
       case 'time':
-          return this.toTimeQuestion(schema);
+        return this.toTimeQuestion(schema);
       case 'multiCheckbox':
         return this.toMultiCheckboxQuestion(schema);
       case 'drug':
@@ -831,6 +860,11 @@ export class QuestionFactory {
           case 'js_expression':
             validators.push(new JsExpressionValidationModel(validator));
             break;
+          case 'decimal':
+            const decimalModel = new DecimalPointValidationModel(validator);
+            decimalModel.setValuesAndExpressions();
+            validators.push(decimalModel);
+            break;
           case 'conditionalAnswered':
             validators.push(new ConditionalValidationModel(validator));
             break;
@@ -843,26 +877,21 @@ export class QuestionFactory {
 
     const questionOptions = schemaQuestion.questionOptions;
     const renderingType = questionOptions ? questionOptions.rendering : '';
-    switch (renderingType) {
-      case 'number':
-        if (questionOptions.max && questionOptions.min) {
-          validators.push(
-            new MaxValidationModel({
-              type: 'max',
-              max: questionOptions.max
-            })
-          );
-          validators.push(
-            new MinValidationModel({
-              type: 'min',
-              min: questionOptions.min
-            })
-          );
-        }
-
-        break;
-      default:
-        break;
+    if (renderingType === 'number' || renderingType === 'decimal') {
+      if (questionOptions.max && questionOptions.min) {
+        validators.push(
+          new MaxValidationModel({
+            type: 'max',
+            max: questionOptions.max
+          })
+        );
+        validators.push(
+          new MinValidationModel({
+            type: 'min',
+            min: questionOptions.min
+          })
+        );
+      }
     }
 
     // add conditional required validators

diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
@@ -222,6 +222,16 @@
         [min]="node.question.extras.questionOptions.min"
         [max]="node.question.extras.questionOptions.max"
       />
+      <input
+        class="form-control"
+        *ngSwitchCase="'decimal'"
+        [formControlName]="node.question.key"
+        [attr.placeholder]="node.question.placeholder"
+        [type]="'text'"
+        [id]="node.question.key + 'id'"
+        [min]="node.question.extras.questionOptions.min"
+        [max]="node.question.extras.questionOptions.max"
+      />
       <input
         class="form-control"
         *ngSwitchDefault

diff --git a/projects/ngx-formentry/src/form-entry/question-models/decimal-point-validation.model.ts b/projects/ngx-formentry/src/form-entry/question-models/decimal-point-validation.model.ts
@@ -0,0 +1,21 @@
+export class DecimalPointValidationModel {
+  type: string;
+  message: string;
+  decimalPlace = 0;
+  failsWhenExpression = '';
+
+  constructor(validations: any) {
+    this.type = 'js_expression';
+    this.decimalPlace = validations.decimalPlace;
+  }
+  setFailExpression(): void {
+    this.failsWhenExpression = `!isEmpty(myValue) && String(myValue).split('.')[1].length !== ${this.decimalPlace}`;
+  }
+  setMessage() {
+    this.message = `Value must be to ${this.decimalPlace} decimal places`;
+  }
+  setValuesAndExpressions() {
+    this.setMessage();
+    this.setFailExpression();
+  }
+}
diff --git a/projects/ngx-formentry/src/form-entry/question-models/interfaces/time-question-options.ts b/projects/ngx-formentry/src/form-entry/question-models/interfaces/time-question-options.ts
@@ -1,6 +1,4 @@
 import { BaseOptions } from '../interfaces/base-options';
 
 // tslint:disable-next-line:no-empty-interface
-export interface TimeQuestionOptions extends BaseOptions {
-
-}
+export interface TimeQuestionOptions extends BaseOptions {}
diff --git a/src/app/adult-1.4.json b/src/app/adult-1.4.json
@@ -3147,17 +3147,23 @@
               "type": "obs",
               "validators": []
             },
-            {
-              "label": "Temp (C):",
-              "questionOptions": {
-                "rendering": "number",
-                "concept": "a8a65fee-1350-11df-a1f1-0026b9348838",
-                "max": "43",
-                "min": "25"
-              },
-              "type": "obs",
-              "validators": []
-            },
+						{
+							"label": "Temp(C):",
+							"questionOptions": {
+								"rendering": "decimal",
+								"concept": "a8a65fee-1350-11df-a1f1-0026b9348838",
+								"max": "43.00",
+								"min": "25.00"
+							},
+							"type": "obs",
+							"validators": [
+								{
+									"type": "decimal",
+									"decimalPlace": 1
+								}
+							],
+							"id": "temp"
+						},
             {
               "label": "Weight (Kg):",
               "id": "weight",