diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css
index e69de29bb2..384c81f215 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css
@@ -0,0 +1,3 @@
+.date-picker-mdl {
+ margin-left: 20px;
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html
index a674d0fe5d..3754f5a3ab 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html
@@ -1,16 +1,48 @@
-
-
-
+
+
+
Form : {{ dataForm.value | json }}
+
+
FormGroup : {{ dataForm.get('dateRange').value | json }}
+
+
FormGroup valid : {{ dataForm.get('dateRange').valid }}
+
+
FormGroup status : {{ dataForm.get('dateRange').errors | json }}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
index d1821d4251..e9f60df975 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
@@ -15,16 +15,35 @@
* limitations under the License.
*/
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { WidgetComponent } from './../widget.component';
import * as moment from 'moment';
+declare let mdDateTimePicker: any;
+
+function dateCheck(c: AbstractControl) {
+ let startDate = moment(c.get('startDate').value);
+ let endDate = moment(c.get('endDate').value);
+ let result = startDate.isAfter(endDate);
+ return result ? {'greaterThan': true} : null;
+}
+
@Component({
moduleId: module.id,
selector: 'date-range-widget',
templateUrl: './date-range.widget.html',
styleUrls: ['./date-range.widget.css']
})
-export class DateRangeWidget {
+export class DateRangeWidget extends WidgetComponent {
+
+ public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
+
+ @ViewChild('startElement')
+ startElement: any;
+
+ @ViewChild('endElement')
+ endElement: any;
@Input()
field: any;
@@ -32,18 +51,106 @@ export class DateRangeWidget {
@Output()
dateRangeChanged: EventEmitter
= new EventEmitter();
- constructor() {}
+ dataForm: FormGroup;
- public onDateRangeChanged(startDate: HTMLInputElement, endDate: HTMLInputElement) {
- if (startDate.validity.valid && endDate.validity.valid) {
- let dateStart = this.convertMomentDate(startDate.value);
- let endStart = this.convertMomentDate(endDate.value);
+ dialogStart: any = new mdDateTimePicker.default({
+ type: 'date',
+ future: moment().add(21, 'years')
+ });
+
+ dialogEnd: any = new mdDateTimePicker.default({
+ type: 'date',
+ future: moment().add(21, 'years')
+ });
+
+ debug: boolean = false;
+
+ constructor(public elementRef: ElementRef,
+ private formBuilder: FormBuilder) {
+ super();
+ }
+
+ ngOnInit() {
+ this.initForm();
+ this.initSartDateDialog();
+ this.initEndDateDialog();
+ }
+
+ initForm() {
+ let today = moment().format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
+ this.dataForm = this.formBuilder.group({
+ dateRange: this.formBuilder.group({
+ startDate: [today, Validators.required],
+ endDate: [today, Validators.required]
+ }, {validator: dateCheck})
+ });
+ this.dataForm.valueChanges.subscribe(data => this.onValueChanged(data));
+ this.dataForm.controls['dateRange'].valueChanges.subscribe(data => this.onGroupValueChanged(data));
+ }
+
+ initSartDateDialog() {
+ this.dialogStart.trigger = this.startElement.nativeElement;
+
+ let startDateButton = document.getElementById('startDateButton');
+ startDateButton.addEventListener('click', () => {
+ this.dialogStart.toggle();
+ });
+ }
+
+ initEndDateDialog() {
+ this.dialogEnd.trigger = this.endElement.nativeElement;
+
+ let endDateButton = document.getElementById('endDateButton');
+ endDateButton.addEventListener('click', () => {
+ this.dialogEnd.toggle();
+ });
+ }
+
+ onOkStart(inputEl: HTMLInputElement) {
+ let date = this.dialogStart.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
+ let dateRange: any = this.dataForm.controls['dateRange'];
+ dateRange.patchValue({
+ startDate: date
+ });
+ let materialElemen: any = inputEl.parentElement;
+ if (materialElemen) {
+ materialElemen.MaterialTextfield.change(date);
+ }
+ }
+
+ onOkEnd(inputEl: HTMLInputElement) {
+ let date = this.dialogEnd.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
+ let dateRange: any = this.dataForm.controls['dateRange'];
+ dateRange.patchValue({
+ endDate: date
+ });
+
+ let materialElemen: any = inputEl.parentElement;
+ if (materialElemen) {
+ materialElemen.MaterialTextfield.change(date);
+ }
+ }
+
+ onGroupValueChanged(data: any) {
+ if (this.dataForm.controls['dateRange'].valid) {
+ let dateRange: any = this.dataForm.controls['dateRange'];
+ let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
+ // let endStart = this.convertMomentDate(this.dataForm.controls['endDate'].value);
+ console.log(dateStart);
+ }
+ }
+
+ onValueChanged(data: any) {
+ if (this.dataForm.valid) {
+ let dateRange: any = this.dataForm.controls['dateRange'];
+ let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
+ let endStart = this.convertMomentDate(dateRange.controls['endDate'].value);
this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
}
}
public convertMomentDate(date: string) {
- return moment(date, 'DD/MM/YYYY', true).format('YYYY-MM-DD') + 'T00:00:00.000Z';
+ return moment(date, DateRangeWidget.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidget.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
}
}
diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/en.json b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
index 9d9cf9aa42..fd01ebcd42 100644
--- a/ng2-components/ng2-activiti-analytics/src/i18n/en.json
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
@@ -28,8 +28,10 @@
"DATE-RANGE-INTERVAL": "Aggregate dates by"
},
"TASK-SLA": {
+ "TASK": "Task",
"PROCESS-DEFINITION": "Process definition",
- "DATE-RANGE": "Date range"
+ "DATE-RANGE": "Date range",
+ "SLA-DURATION": "What is the time this task needs to be completed in to be within the SLA?"
}
},
"PROCESS-STATUS": "Process status",