Merge pull request #102 from maikofelix47/add-time-control

Added time control

projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.html

@@ -0,0 +1,6 @@
+<input
+  type="time"
+  class="form-control"
+  [ngModel]="value"
+  (ngModelChange)="onTimeSelect($event)"
+/>

projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.ts

@@ -0,0 +1,73 @@
+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"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => NgxTimePickerComponent),
+    },
+  ],
+})
+export class NgxTimePickerComponent implements OnInit, ControlValueAccessor {
+  public value: string = moment().format("HH:mm:ss");
+  public onChange: any = () => {};
+  public onTouched: any = () => {};
+
+  public ngOnInit() {
+  }
+
+  public writeValue(value: any): void {
+    this.value = this.formatTimeValue(value);
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: any): void {}
+
+  public onTimeSelect($event: string): void {
+    const timeValue = this.formatTimeValue($event);
+    this.value = timeValue;
+    this.onChange(timeValue);
+  }
+
+  public formatTimeValue(timeInputString: string): string {
+    /*
+      Allows processing of data that comes in as date-time
+      or just time i.e '1970-03-01 12:32:21' or '12:32:21'
+      or '12:32' or '1970-01-01T13:03:00.000+0300'
+    */
+    let timeArray = [];
+    let dateArray = [];
+    let timeValue = "";
+
+    if (typeof timeInputString === "undefined" || timeInputString === null) {
+    } else {
+      timeArray = timeInputString.split(":");
+      dateArray = timeInputString.split("-");
+    }
+    if (timeArray.length === 1 && moment(timeInputString).isValid()) {
+      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");
+    }
+    return timeValue;
+  }
+}

projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.module.ts

@@ -0,0 +1,27 @@
+
+ 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 {
+ }
+

projects/ngx-formentry/src/form-entry/form-entry.module.ts

@@ -38,6 +38,7 @@ import { EncounterViewerModule } from '../encounter-viewer/encounter-viewer.modu
 import { CheckboxModule } from '../components/check-box/checkbox.module';
 import { SharedModule } from '../shared.module';
 import { TimeAgoPipe } from 'time-ago-pipe';
+import { NgxTimePickerModule } from '../components/ngx-time-picker/ngx-time-picker.module';
 
 @NgModule({
   imports: [
@@ -56,6 +57,7 @@ import { TimeAgoPipe } from 'time-ago-pipe';
     MatTabsModule,
     MatCardModule,
     NgxDateTimePickerModule,
+    NgxTimePickerModule,
     SharedModule
   ],
   declarations: [
@@ -94,7 +96,8 @@ import { TimeAgoPipe } from 'time-ago-pipe';
     ErrorRendererComponent,
     DateTimePickerModule,
     EncounterViewerModule,
-    NgxDateTimePickerModule
+    NgxDateTimePickerModule,
+    NgxTimePickerModule
   ]
 })
 export class FormEntryModule {}

projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts

@@ -8,6 +8,7 @@ import { TextAreaInputQuestion } from '../question-models/text-area-input-questi
 import { SelectQuestion } from '../question-models/select-question';
 import { UiSelectQuestion } from '../question-models/ui-select-question';
 import { DateQuestion } from '../question-models/date-question';
+import { TimeQuestion } from './../question-models/time-question';
 import { MultiSelectQuestion } from '../question-models/multi-select-question';
 import { QuestionGroup } from '../question-models/group-question';
 import { RepeatingQuestion } from '../question-models/repeating-question';
@@ -158,6 +159,27 @@ export class QuestionFactory {
     return question;
   }
 
+  toTimeQuestion(schemaQuestion: any): TimeQuestion {
+    const question = new TimeQuestion({ type: '', key: '' });
+    question.renderingType = 'time';
+    question.validators = this.addValidators(schemaQuestion);
+    question.extras = schemaQuestion;
+
+    const mappings: any = {
+      label: 'label',
+      required: 'required',
+      id: 'key'
+    };
+
+
+    this.copyProperties(mappings, schemaQuestion, question);
+    this.addDisableOrHideProperty(schemaQuestion, question);
+    this.addAlertProperty(schemaQuestion, question);
+    this.addHistoricalExpressions(schemaQuestion, question);
+    this.addCalculatorProperty(schemaQuestion, question);
+    return question;
+  }
+
   toEncounterDatetimeQuestion(schemaQuestion: any): DateQuestion {
     const question = new DateQuestion({ type: '', key: '' });
     question.label = schemaQuestion.label;
@@ -705,6 +727,8 @@ export class QuestionFactory {
         return this.toEncounterDatetimeQuestion(schema);
       case 'date':
         return this.toDateQuestion(schema);
+      case 'time':
+          return this.toTimeQuestion(schema);
       case 'multiCheckbox':
         return this.toMultiCheckboxQuestion(schema);
       case 'drug':

projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.css.ts

@@ -60,6 +60,9 @@ export const DEFAULT_STYLES = `a {
       .slick-initialized .swipe-tab-content {
         min-height: 500px;
       }
+      .time-control{
+        width:50%;
+      }
     }
     .slick-initialized .swipe-tab {
       display: flex;
@@ -151,5 +154,8 @@ export const DEFAULT_STYLES = `a {
   border: 0;
   box-shadow: none;
 }
+.time-control{
+  width:100%;
+}
 
     `;

projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html

@@ -185,6 +185,11 @@
         (onDateChange)="onDateChanged(node)"
         [showWeeks]="node.question.showWeeksAdder"
       ></ngx-date-time-picker>
+      <ngx-time-picker  
+      *ngSwitchCase="'time'"  
+      id="node.question.key + 'id'"  
+      [formControlName]="node.question.key"
+      ></ngx-time-picker>
       <ng-select
         *ngSwitchCase="'multi-select'"
         [style.height]="'auto'"

projects/ngx-formentry/src/form-entry/question-models/interfaces/time-question-options.ts

@@ -0,0 +1,6 @@
+import { BaseOptions } from '../interfaces/base-options';
+
+// tslint:disable-next-line:no-empty-interface
+export interface TimeQuestionOptions extends BaseOptions {
+
+}

projects/ngx-formentry/src/form-entry/question-models/question-base.ts

@@ -11,6 +11,7 @@ export class QuestionBase implements BaseOptions {
   hidden?: any;
   showTime?: any;
   showWeek?: any;
+  showDate?: boolean;
   historicalDisplay?: any;
   rows?: any;
   showWeeksAdder?: any;
@@ -36,6 +37,8 @@ export class QuestionBase implements BaseOptions {
   disable?: string | boolean;
   calculateExpression?: string;
   options?: any;
+  maxTime?: string;
+  minTime?: string;
 
   constructor(options: BaseOptions) {
     this.defaultValue = options.defaultValue;

projects/ngx-formentry/src/form-entry/question-models/time-question.ts

@@ -0,0 +1,11 @@
+import { QuestionBase } from './question-base';
+import { TimeQuestionOptions } from './interfaces/time-question-options';
+import { AfeControlType } from '../../abstract-controls-extension/afe-control-type';
+
+export class TimeQuestion extends QuestionBase {
+    constructor(options: TimeQuestionOptions) {
+        super(options);
+        this.renderingType = 'time';
+        this.controlType = AfeControlType.AfeFormControl;
+    }
+}

src/app/adult.json

@@ -209,6 +209,24 @@
               "questionOptions": {
                 "rendering": "ui-select-extended"
               }
+            },
+            {
+              "label": "Time of Consent",
+              "questionInfo":"",
+              "id": "timeOfConsent",
+              "questionOptions": {
+                "concept": "4e1a9d59-3d06-47eb-82a7-30410db249e4",
+                "rendering": "time",
+                "maxTime":"17:59",
+                "minTime": "00:00"
+              },
+              "type": "obs",
+              "validators": [{
+                "type": "time"
+              }],
+              "hide": {
+                "hideWhenExpression": ""
+              }
             }
           ]
         }