Adding integer and decimal fields

IHTSDO · Jan 31, 2024 · 30bc4d2 · 30bc4d2
1 parent ba1482c
commit 30bc4d2
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 6 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -54,6 +54,8 @@ import { ListQuestionnairesComponent } from './questionnaires/list-questionnaire
 import { ValidateQuestionnaireComponent } from './questionnaires/validate-questionnaire/validate-questionnaire.component';
 import { CreateRootModuleComponent } from './questionnaires/create-root-module/create-root-module.component';
 import { ConfirmationDialogComponent } from './questionnaires/confirmation-dialog/confirmation-dialog.component';
+import { IntegerBindingComponent } from './bindings/integer-binding/integer-binding.component';
+import { DecimalBindingComponent } from './bindings/decimal-binding/decimal-binding.component';
 
 @NgModule({
   declarations: [
@@ -78,7 +80,9 @@ import { ConfirmationDialogComponent } from './questionnaires/confirmation-dialo
     ListQuestionnairesComponent,
     ValidateQuestionnaireComponent,
     CreateRootModuleComponent,
-    ConfirmationDialogComponent
+    ConfirmationDialogComponent,
+    IntegerBindingComponent,
+    DecimalBindingComponent
   ],
   imports: [
     HttpClientModule,

diff --git a/src/app/bindings-sandbox/bindings-sandbox.component.html b/src/app/bindings-sandbox/bindings-sandbox.component.html
@@ -62,7 +62,7 @@ <h4>New binding:</h4>
                     </mat-select>
                     <mat-error>{{ getErrorMessage('type')}}</mat-error>
                 </mat-form-field>
-                <mat-form-field class="input-field" *ngIf="newBindingForm.controls.type.value != 'Section header' && newBindingForm.controls.type.value != 'Text box' && newBindingForm.controls.type.value != 'Checkbox'">
+                <mat-form-field class="input-field" *ngIf="newBindingForm.controls.type.value != 'Section header' && newBindingForm.controls.type.value != 'Text box' && newBindingForm.controls.type.value != 'Checkbox' && newBindingForm.controls.type.value != 'Integer' && newBindingForm.controls.type.value != 'Decimal'">
                     <mat-label>Answer options: ECL Expression</mat-label>
                     <input matInput type="text" formControlName="ecl" placeholder="Enter ECL...">
                     <a href="javascript:void(0)" class="top-right-link" (click)="openEclBuilder(newBindingForm.get('ecl')?.value, 'ecl')">ECL Builder</a>
@@ -125,6 +125,8 @@ <h4>New binding:</h4>
                         <app-radios-binding [binding]="binding" class="grow" *ngIf="binding.type == 'Options'" (selectionChange)="optionSelected(binding.title, binding.code, $event)"></app-radios-binding>
                         <span class="title grow" *ngIf="binding.type == 'Section header'">{{ binding.title }}</span>
                         <app-textbox-binding [binding]="binding" class="grow" *ngIf="binding.type == 'Text box'" (textChange)="optionSelected(binding.title, binding.code, $event)"></app-textbox-binding>
+                        <app-integer-binding [binding]="binding" class="grow" *ngIf="binding.type == 'Integer'" (textChange)="optionSelected(binding.title, binding.code, $event)"></app-integer-binding>
+                        <app-decimal-binding [binding]="binding" class="grow" *ngIf="binding.type == 'Decimal'" (textChange)="optionSelected(binding.title, binding.code, $event)"></app-decimal-binding>
                         <app-checkbox-binding [binding]="binding" class="grow" *ngIf="binding.type == 'Checkbox'" (selectionChange)="optionSelected(binding.title, binding.code, $event)"></app-checkbox-binding>
                         <button mat-icon-button color="primary" [matMenuTriggerFor]="substancePopoverMenu" *ngIf="binding.type != 'Section header'" [disabled]="binding.type == 'Text box'">
                             <mat-icon>info</mat-icon>

diff --git a/src/app/bindings-sandbox/bindings-sandbox.component.ts b/src/app/bindings-sandbox/bindings-sandbox.component.ts
@@ -140,7 +140,7 @@ export class BindingsSandboxComponent {
   maxSelectCount = 50;
   maxOptionsCount = 10;
 
-  controlTypes = ['Autocomplete', 'Select (Single)', 'Select (Multiple)', 'Options', 'Section header', 'Text box', 'Checkbox'].sort((a, b) => a.localeCompare(b));
+  controlTypes = ['Autocomplete', 'Select (Single)', 'Select (Multiple)', 'Options', 'Section header', 'Text box', 'Integer', 'Decimal', 'Checkbox'].sort((a, b) => a.localeCompare(b));
 
   showRightContainer = false;
 
@@ -179,7 +179,7 @@ export class BindingsSandboxComponent {
             ecl.setErrors({ optionsTooManyResults: true });
           }
         }
-    } else if (binding.type != 'Section header' && binding.type != 'Text box') {
+    } else if (binding.type != 'Section header' && binding.type != 'Text box' && binding.type != 'Integer' && binding.type != 'Decimal') {
       errors = true;
       ecl.setErrors({ required: true });
     }
@@ -194,8 +194,10 @@ export class BindingsSandboxComponent {
     this.newBindingForm.reset();
     this.newPanel.close();
     this.indexInEdit = -1;
-    this.refreshFhirQuestionnaire();
-    this.refreshResponse();
+    setTimeout(() => {
+      this.refreshFhirQuestionnaire();
+      this.refreshResponse();
+    },100);
   }
 
   refreshFhirQuestionnaire() {
@@ -407,6 +409,7 @@ export class BindingsSandboxComponent {
   }
 
   refreshResponse() {
+    console.log('refreshResponse');
     this.response = {};
     for (let binding of this.bindings) {
       this.response[binding.title] = {};

diff --git a/src/app/bindings/decimal-binding/decimal-binding.component.css b/src/app/bindings/decimal-binding/decimal-binding.component.css
@@ -0,0 +1,44 @@
+.chip {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: sandybrown;
+    border: none;
+    cursor: default;
+    height: 36px;
+    outline: none;
+    padding: 0;
+    font-size: 14px;
+    color: white;
+    font-family:"Open Sans", sans-serif;
+    white-space: nowrap;
+    align-items: center;
+    border-radius: 16px;
+    vertical-align: middle;
+    text-decoration: none;
+    justify-content: center;
+    margin-right: 20px;
+}
+
+.chip-content{
+    cursor: inherit;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    white-space: nowrap;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+.code {
+    font-size: small;
+    font-weight: lighter;
+    margin-right: 15px;
+}
+
+mat-hint {
+    font-size: 12px;
+}
diff --git a/src/app/bindings/decimal-binding/decimal-binding.component.html b/src/app/bindings/decimal-binding/decimal-binding.component.html
@@ -0,0 +1,13 @@
+<mat-form-field class="example-full-width">
+     <mat-label>{{ binding.title }}</mat-label>
+     <input matInput
+            type="number"
+            placeholder="Enter decimal value..."
+            [(ngModel)]="value"
+            (ngModelChange)="onValueChange($event)"
+            pattern="^-?[0-9]*\.?[0-9]+$"
+            title="Only decimal values are allowed"
+            step="any">
+     <mat-hint>{{ binding.note }}</mat-hint>
+</mat-form-field>
+
diff --git a/src/app/bindings/decimal-binding/decimal-binding.component.ts b/src/app/bindings/decimal-binding/decimal-binding.component.ts
@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TerminologyService } from 'src/app/services/terminology.service';
+
+@Component({
+  selector: 'app-decimal-binding',
+  templateUrl: './decimal-binding.component.html',
+  styleUrls: ['./decimal-binding.component.css']
+})
+export class DecimalBindingComponent {
+  @Input() binding: any;
+  @Output() textChange = new EventEmitter<any>();
+
+  options: any[] | undefined;
+  selectedOptions: any[] | undefined;
+
+  value: number = 0;
+
+  constructor(private terminologyService: TerminologyService) { }
+
+  ngOnInit(): void {
+    // this.terminologyService.expandValueSet(this.binding.ecl, '').subscribe(response => this.options = response.expansion.contains)
+  }
+
+  onValueChange(newValue: number) {
+    this.value = newValue;
+    this.textChange.emit(newValue);
+  }
+
+}
diff --git a/src/app/bindings/integer-binding/integer-binding.component.css b/src/app/bindings/integer-binding/integer-binding.component.css
@@ -0,0 +1,44 @@
+.chip {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: sandybrown;
+    border: none;
+    cursor: default;
+    height: 36px;
+    outline: none;
+    padding: 0;
+    font-size: 14px;
+    color: white;
+    font-family:"Open Sans", sans-serif;
+    white-space: nowrap;
+    align-items: center;
+    border-radius: 16px;
+    vertical-align: middle;
+    text-decoration: none;
+    justify-content: center;
+    margin-right: 20px;
+}
+
+.chip-content{
+    cursor: inherit;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    white-space: nowrap;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+.code {
+    font-size: small;
+    font-weight: lighter;
+    margin-right: 15px;
+}
+
+mat-hint {
+    font-size: 12px;
+}
diff --git a/src/app/bindings/integer-binding/integer-binding.component.html b/src/app/bindings/integer-binding/integer-binding.component.html
@@ -0,0 +1,12 @@
+<mat-form-field class="example-full-width">
+    <mat-label>{{ binding.title }}</mat-label>
+    <!-- <input matInput placeholder="Enter integer value..." [(ngModel)]="value" (ngModelChange)="onTextChange($event)"> -->
+    <input matInput
+         type="number"
+         placeholder="Enter integer value..."
+         [(ngModel)]="value"
+         (ngModelChange)="onValueChange($event)"
+         pattern="^-?[0-9]\d*$"
+         title="Only integer values are allowed">
+    <mat-hint>{{ binding.note }}</mat-hint>
+  </mat-form-field>
diff --git a/src/app/bindings/integer-binding/integer-binding.component.ts b/src/app/bindings/integer-binding/integer-binding.component.ts
@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TerminologyService } from 'src/app/services/terminology.service';
+
+@Component({
+  selector: 'app-integer-binding',
+  templateUrl: './integer-binding.component.html',
+  styleUrls: ['./integer-binding.component.css']
+})
+export class IntegerBindingComponent {
+  @Input() binding: any;
+  @Output() textChange = new EventEmitter<any>();
+
+  options: any[] | undefined;
+  selectedOptions: any[] | undefined;
+
+  value: number = 0;
+
+  constructor(private terminologyService: TerminologyService) { }
+
+  ngOnInit(): void {
+    // this.terminologyService.expandValueSet(this.binding.ecl, '').subscribe(response => this.options = response.expansion.contains)
+  }
+
+  onValueChange(newValue: number) {
+    this.value = newValue;
+    this.textChange.emit(newValue);
+  }
+
+}