diff --git a/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.css b/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.css new file mode 100644 index 00000000..e69de29b diff --git a/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.html b/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.html new file mode 100644 index 00000000..ff4f53a5 --- /dev/null +++ b/projects/ngx-formentry/src/components/ngx-time-picker/ngx-time-picker.component.html @@ -0,0 +1,6 @@ + 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 new file mode 100644 index 00000000..27523281 --- /dev/null +++ b/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; + } +} 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 new file mode 100644 index 00000000..5d04cf6c --- /dev/null +++ b/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 { + } + \ No newline at end of file diff --git a/projects/ngx-formentry/src/form-entry/form-entry.module.ts b/projects/ngx-formentry/src/form-entry/form-entry.module.ts index 35d90bb9..2647c9da 100755 --- a/projects/ngx-formentry/src/form-entry/form-entry.module.ts +++ b/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 {} 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 index b6dc706b..4de7f848 100644 --- a/projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts +++ b/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': diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.css.ts b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.css.ts index bb30d523..4308473a 100644 --- a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.css.ts +++ b/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%; +} `; 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 index 73535bbe..0f1dbef7 100644 --- 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 @@ -185,6 +185,11 @@ (onDateChange)="onDateChanged(node)" [showWeeks]="node.question.showWeeksAdder" > +