(feat) Add decimal rendering type

openmrs · Feb 26, 2024 · b5df293 · b5df293
1 parent d4c74ef
commit b5df293
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
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
@@ -31,6 +31,7 @@ import { DiagnosisQuestion } from '../question-models/diagnosis-question';
 import { MaxLengthValidationModel } from '../question-models/max-length-validation.model';
 import { MinLengthValidationModel } from '../question-models/min-length-validation.model';
 import { WorkspaceLauncherQuestion } from '../question-models';
+import { DecimalValidationModel } from '../question-models/decimal-validation.model';
 
 @Injectable()
 export class QuestionFactory {
@@ -744,6 +745,35 @@ export class QuestionFactory {
     return question;
   }
 
+  toDecimalQuestion(schemaQuestion: any): TextInputQuestion {
+    const question = new TextInputQuestion({
+      placeholder: '',
+      type: '',
+      key: ''
+    });
+
+    question.renderingType = 'decimal';
+    question.label = schemaQuestion.label;
+    question.key = schemaQuestion.id;
+    question.placeholder = schemaQuestion.questionOptions.placeholder || '';
+    question.extras = schemaQuestion;
+
+    const mappings = {
+      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;
+  }
+
   toWorkspaceLauncher(schemaQuestion: any): WorkspaceLauncherQuestion {
     if (!this.checkedForEsmPatientCommonLib) {
       this.checkedForEsmPatientCommonLib = true;
@@ -866,6 +896,8 @@ 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':
@@ -978,6 +1010,9 @@ export class QuestionFactory {
           case 'conditionalAnswered':
             validators.push(new ConditionalValidationModel(validator));
             break;
+          case 'decimal':
+            validators.push(new DecimalValidationModel(validator));
+            break;
           default:
             validators.push(new ValidationModel(validator));
             break;
@@ -988,6 +1023,7 @@ export class QuestionFactory {
     const questionOptions = schemaQuestion.questionOptions;
     const renderingType = questionOptions ? questionOptions.rendering : '';
     switch (renderingType) {
+      case 'decimal':
       case 'number':
         if (questionOptions.max && questionOptions.min) {
           validators.push(

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
@@ -29,7 +29,7 @@
               *ngIf="i > 0"
               (click)="tabSelected(i - 1)"
               class="nav-link"
-              [title]='node.question.questions[i - 1].label | translate'
+              [title]="node.question.questions[i - 1].label | translate"
             >
               <label class="nav-label">{{ 'previous' | translate }}</label>
               <span class="nav-link-text">{{
@@ -46,7 +46,7 @@
               *ngIf="i < node.question.questions.length - 1"
               (click)="tabSelected(i + 1)"
               class="nav-link"
-              [title]='node.question.questions[i + 1].label | translate'
+              [title]="node.question.questions[i + 1].label | translate"
             >
               <label class="nav-label">{{ 'next' | translate }}</label>
               <span class="nav-link-text">{{
@@ -342,6 +342,17 @@
             [invalid]="node.control.touched && !node.control.valid"
           ></ofe-number-input>
 
+          <ofe-number-input
+            [theme]="theme"
+            *ngSwitchCase="'decimal'"
+            [id]="node.question.key + 'id'"
+            [min]="node.question.extras.questionOptions.min"
+            [max]="node.question.extras.questionOptions.max"
+            [formControlName]="node.question.key"
+            [attr.placeholder]="node.question.placeholder | translate"
+            [invalid]="node.control.touched && !node.control.valid"
+          ></ofe-number-input>
+
           <div *ngSwitchCase="'workspace-launcher'">
             <ofe-workspace-launcher
               [id]="node.question.key + 'id'"

diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.ts b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.ts
@@ -210,11 +210,13 @@ export class FormRendererComponent implements OnInit, OnChanges {
       }
     }, this.TAB_SELECTION_DELAY_MS);
   }
+
   public setPreviousTab() {
     if (this.node && this.node.form) {
       this.node.form.valueProcessingInfo['lastFormTab'] = this.activeTab;
     }
   }
+
   public hasErrors() {
     return (
       this.node.control.touched &&

diff --git a/projects/ngx-formentry/src/form-entry/question-models/decimal-validation.model.ts b/projects/ngx-formentry/src/form-entry/question-models/decimal-validation.model.ts
@@ -0,0 +1,24 @@
+export class DecimalValidationModel {
+  type: string;
+  message: string;
+  decimalPlace = 0;
+  failsWhenExpression = '';
+
+  constructor(validations: any) {
+    this.type = 'js_expression';
+    this.decimalPlace = validations.decimalPlace;
+  }
+
+  setFailsWhenExpression(): void {
+    this.failsWhenExpression = `!isEmpty(myValue) && String(myValue).split('.')[1].length !== ${this.decimalPlace}`;
+  }
+
+  setMessage(): void {
+    this.message = `The value should have ${this.decimalPlace} decimal places`;
+  }
+
+  setValuesAndExpressions() {
+    this.setMessage();
+    this.setFailsWhenExpression();
+  }
+}