diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html index 1f81ae1637..9409f13586 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -1,6 +1,6 @@
-
+

{{reportDetails.name}}

@@ -36,7 +36,7 @@

-
@@ -53,6 +53,12 @@ +
+

ReportForm : {{ reportForm.value | json }}

+

ReportForm valid : {{ reportForm.valid }}

+

ReportForm status : {{ reportForm.errors | json }}

+

ReportForm FormGroup valid : {{ reportForm.controls.dateRange.valid | json }}

+
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts index 1fe4d00070..cb897fe774 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts @@ -20,7 +20,8 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../services/analytics.service'; import { ReportModel, ReportQuery, ParameterValueModel, ReportParameterModel } from '../models/report.model'; import { Chart } from '../models/chart.model'; - +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import * as moment from 'moment'; @Component({ moduleId: module.id, @@ -48,8 +49,13 @@ export class AnalyticsComponent implements OnInit, OnChanges { reports: any[]; + reportForm: FormGroup; + + debug: boolean = true; + constructor(private translate: AlfrescoTranslationService, - private analyticsService: AnalyticsService) { + private analyticsService: AnalyticsService, + private formBuilder: FormBuilder ) { console.log('AnalyticsComponent'); if (translate) { translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src'); @@ -57,7 +63,13 @@ export class AnalyticsComponent implements OnInit, OnChanges { } ngOnInit() { - + let today = moment().format('YYYY-MM-DD'); + this.reportForm = this.formBuilder.group({ + dateRange: this.formBuilder.group({ + startDate: [today, Validators.required], + endDate: [today, Validators.required] + }) + }); } ngOnChanges(changes: SimpleChanges) { 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 3754f5a3ab..bade2bc528 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,48 +1,48 @@
-
-
- Error: startDate is greater than - endDate -
-
-
- - -
-
-
- -
-
-
- - -
-
-
- +
+ + Start date must be less than End date + +
+
+
+ + + + Start is required +
-
-
+
+ +
+
+
+ + +
+
+
+ +
+
+
-

Form : {{ dataForm.value | json }}

- -

FormGroup : {{ dataForm.get('dateRange').value | json }}

- -

FormGroup valid : {{ dataForm.get('dateRange').valid }}

- -

FormGroup status : {{ dataForm.get('dateRange').errors | json }}

+

FormGroup : {{ dateRange.value | json }}

+

FormGroup valid : {{ dateRange.valid }}

+

FormGroup status : {{ dateRange.errors | json }}

+

FormGroup start status : {{ dateRange.controls.startDate.errors | json }}

+

FormGroup end status: {{ dateRange.controls.endDate.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 e9f60df975..315c2ca109 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 @@ -16,7 +16,7 @@ */ import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core'; -import { AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; +import { AbstractControl, FormGroup, FormBuilder } from '@angular/forms'; import { WidgetComponent } from './../widget.component'; import * as moment from 'moment'; @@ -45,13 +45,16 @@ export class DateRangeWidget extends WidgetComponent { @ViewChild('endElement') endElement: any; + @Input('group') + public dateRange: FormGroup; + @Input() field: any; @Output() dateRangeChanged: EventEmitter = new EventEmitter(); - dataForm: FormGroup; + debug: boolean = true; dialogStart: any = new mdDateTimePicker.default({ type: 'date', @@ -63,8 +66,6 @@ export class DateRangeWidget extends WidgetComponent { future: moment().add(21, 'years') }); - debug: boolean = false; - constructor(public elementRef: ElementRef, private formBuilder: FormBuilder) { super(); @@ -77,15 +78,8 @@ export class DateRangeWidget extends WidgetComponent { } 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)); + this.dateRange.setValidators(dateCheck); + this.dateRange.valueChanges.subscribe(data => this.onGroupValueChanged(data)); } initSartDateDialog() { @@ -108,8 +102,7 @@ export class DateRangeWidget extends WidgetComponent { onOkStart(inputEl: HTMLInputElement) { let date = this.dialogStart.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI); - let dateRange: any = this.dataForm.controls['dateRange']; - dateRange.patchValue({ + this.dateRange.patchValue({ startDate: date }); let materialElemen: any = inputEl.parentElement; @@ -120,8 +113,7 @@ export class DateRangeWidget extends WidgetComponent { onOkEnd(inputEl: HTMLInputElement) { let date = this.dialogEnd.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI); - let dateRange: any = this.dataForm.controls['dateRange']; - dateRange.patchValue({ + this.dateRange.patchValue({ endDate: date }); @@ -132,19 +124,9 @@ export class DateRangeWidget extends WidgetComponent { } 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); + if (this.dateRange.valid) { + let dateStart = this.convertMomentDate(this.dateRange.controls['startDate'].value); + let endStart = this.convertMomentDate(this.dateRange.controls['endDate'].value); this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart}); } } @@ -152,5 +134,4 @@ export class DateRangeWidget extends WidgetComponent { public convertMomentDate(date: string) { return moment(date, DateRangeWidget.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidget.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z'; } - }