diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
index 3ac18c3a66..3382a2b24c 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
@@ -17,16 +17,15 @@
import { DebugElement, SimpleChange } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdButtonModule, MdTooltipModule, OVERLAY_PROVIDERS } from '@angular/material';
-import * as moment from 'moment';
+import { ReportParametersModel } from 'ng2-activiti-diagrams';
import { AlfrescoTranslationService, AppConfigModule, CoreModule } from 'ng2-alfresco-core';
import { Observable } from 'rxjs/Rx';
-
-import { ReportParametersModel } from 'ng2-activiti-diagrams';
import * as analyticParamsMock from '../assets/analyticsParamsReportComponent.mock';
import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
import { WIDGET_DIRECTIVES } from '../components/widgets/index';
+import { MaterialModule } from '../material.module';
import { AnalyticsService } from '../services/analytics.service';
+import { DateRangeWidgetComponent } from './widgets/date-range/date-range.widget';
declare let jasmine: any;
@@ -46,16 +45,15 @@ describe('AnalyticsReportParametersComponent', () => {
AppConfigModule.forRoot('app.config.json', {
bpmHost: 'http://localhost:9876/bpm'
}),
- MdTooltipModule,
- MdButtonModule
+ MaterialModule
],
declarations: [
+ DateRangeWidgetComponent,
AnalyticsReportParametersComponent,
...WIDGET_DIRECTIVES
],
providers: [
- AnalyticsService,
- OVERLAY_PROVIDERS
+ AnalyticsService
]
}).compileComponents();
@@ -115,7 +113,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -135,7 +133,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -162,7 +160,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -224,7 +222,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -235,21 +233,15 @@ describe('AnalyticsReportParametersComponent', () => {
it('Should render a date range components when the definition parameter type is \'dateRange\' ', (done) => {
component.onSuccessReportParams.subscribe(() => {
- fixture.detectChanges();
-
- let today = moment().format('YYYY-MM-DD');
-
- const startDate: any = element.querySelector('#startDateInput');
- const endDate: any = element.querySelector('#endDateInput');
-
- expect(startDate.value).toEqual(today);
- expect(endDate.value).toEqual(today);
+ let dateElement: any = element.querySelector('adf-date-range-widget');
+ expect(dateElement).toBeDefined();
done();
});
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.toggleParameters();
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -274,7 +266,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -312,7 +304,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
});
@@ -346,7 +338,7 @@ describe('AnalyticsReportParametersComponent', () => {
component.appId = appId;
component.reportId = '1';
let change = new SimpleChange(null, appId, true);
- component.ngOnChanges({ 'appId': change });
+ component.ngOnChanges({'appId': change});
});
@@ -359,7 +351,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@@ -409,7 +401,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
});
@@ -421,7 +413,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 404,
@@ -467,7 +459,7 @@ describe('AnalyticsReportParametersComponent', () => {
beforeEach(async(() => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
- component.ngOnChanges({ 'reportId': change });
+ component.ngOnChanges({'reportId': change});
fixture.detectChanges();
jasmine.Ajax.requests.mostRecent().respondWith({
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
index cf7be41b51..37e5a7ff26 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
@@ -26,7 +26,8 @@ import {
OnInit,
Output,
SimpleChanges,
- ViewChild
+ ViewChild,
+ ViewEncapsulation
} from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment';
@@ -45,7 +46,8 @@ declare let dialogPolyfill: any;
@Component({
selector: 'adf-analytics-report-parameters, analytics-report-parameters',
templateUrl: './analytics-report-parameters.component.html',
- styleUrls: ['./analytics-report-parameters.component.css']
+ styleUrls: ['./analytics-report-parameters.component.css'],
+ encapsulation: ViewEncapsulation.None
})
export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, AfterContentChecked {
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.scss
similarity index 100%
rename from ng2-components/ng2-activiti-analytics/src/components/analytics.component.css
rename to ng2-components/ng2-activiti-analytics/src/components/analytics.component.scss
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 1c35493a79..0f1622992f 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
@@ -15,14 +15,15 @@
* limitations under the License.
*/
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
import { ReportQuery } from 'ng2-activiti-diagrams';
import { AnalyticsGeneratorComponent } from './analytics-generator.component';
@Component({
selector: 'adf-analytics, activiti-analytics',
templateUrl: './analytics.component.html',
- styleUrls: ['./analytics.component.css']
+ styleUrls: ['./analytics.component.scss'],
+ encapsulation: ViewEncapsulation.None
})
export class AnalyticsComponent implements OnChanges {
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
index c9963e7d59..9fba7a441a 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
@@ -18,13 +18,14 @@
/* tslint:disable:component-selector */
/* tslint:disable:no-access-missing-member */
-import { Component, ElementRef, Input } from '@angular/core';
+import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { WidgetComponent } from './../widget.component';
@Component({
selector: 'checkbox-widget',
- templateUrl: './checkbox.widget.html'
+ templateUrl: './checkbox.widget.html',
+ encapsulation: ViewEncapsulation.None
})
export class CheckboxWidgetComponent extends WidgetComponent {
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
deleted file mode 100644
index 384c81f215..0000000000
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.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 1533982dc2..8b6f2e72b0 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,43 +1,46 @@
-
- Start date must be less than End date
+
+ {{'DATE-WIDGET.MESSAGES.START-LESS-THAN-END-DATE' | translate}}
-
-
-
-
-
-
- Start is required
-
-
-
-
-
-
-
-
-
-
-
FormGroup : {{dateRange && dateRange.value | json }}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.scss b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.scss
new file mode 100644
index 0000000000..f1c7606a5b
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.scss
@@ -0,0 +1,7 @@
+.adf-text-danger {
+ color: #D8000C;
+
+ .mat-input-container {
+ width: 80% !important;
+ }
+}
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 db874b0fba..6204eb5bd1 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,37 +15,26 @@
* limitations under the License.
*/
- /* tslint:disable:component-selector */
-
-/* tslint:disable::no-access-missing-member */
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
import * as moment from 'moment';
-import { WidgetComponent } from './../widget.component';
-
-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;
-}
-
-declare let mdDateTimePicker: any;
+import { Moment } from 'moment';
+import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
@Component({
- selector: 'date-range-widget',
+ selector: 'adf-date-range-widget',
templateUrl: './date-range.widget.html',
- styleUrls: ['./date-range.widget.css']
+ providers: [
+ {provide: DateAdapter, useClass: MomentDateAdapter},
+ {provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
+ styleUrls: ['./date-range.widget.scss'],
+ encapsulation: ViewEncapsulation.None
})
-export class DateRangeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
+export class DateRangeWidgetComponent implements OnInit {
- public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
-
- @ViewChild('startElement')
- startElement: any;
-
- @ViewChild('endElement')
- endElement: any;
+ public FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
+ public SHOW_FORMAT: string = 'DD/MM/YYYY';
@Input('group')
public dateRange: FormGroup;
@@ -56,152 +45,66 @@ export class DateRangeWidgetComponent extends WidgetComponent implements OnInit,
@Output()
dateRangeChanged: EventEmitter
= new EventEmitter();
+ minDate: Moment;
+ maxDate: Moment;
+ startDatePicker: Moment;
+ endDatePicker: Moment;
+
debug: boolean = false;
- dialogStart: any;
-
- dialogEnd: any;
-
- constructor(public elementRef: ElementRef) {
- super();
+ constructor(public dateAdapter: DateAdapter) {
}
ngOnInit() {
- this.initForm();
- this.addAccessibilityLabelToDatePicker();
- }
+ let momentDateAdapter = this.dateAdapter;
+ momentDateAdapter.overrideDisplyaFormat = this.SHOW_FORMAT;
- initForm() {
- let startDateForm = this.field.value ? this.field.value.startDate : '' ;
- let startDate = this.convertToMomentDate(startDateForm);
- let endDateForm = this.field.value ? this.field.value.endDate : '' ;
- let endDate = this.convertToMomentDate(endDateForm);
+ if (this.field) {
+ if (this.field.value && this.field.value.startDate) {
+ this.startDatePicker = moment(this.field.value.startDate, this.FORMAT_DATE_ACTIVITI);
+ }
- let startDateControl = new FormControl(startDate);
+ if (this.field.value && this.field.value.endDate) {
+ this.endDatePicker = moment(this.field.value.endDate, this.FORMAT_DATE_ACTIVITI);
+ }
+ }
+
+ let startDateControl = new FormControl(this.startDatePicker);
startDateControl.setValidators(Validators.required);
this.dateRange.addControl('startDate', startDateControl);
- let endDateControl = new FormControl(endDate);
+ let endDateControl = new FormControl(this.endDatePicker);
endDateControl.setValidators(Validators.required);
this.dateRange.addControl('endDate', endDateControl);
- this.dateRange.setValidators(dateCheck);
- this.dateRange.valueChanges.subscribe(data => this.onGroupValueChanged(data));
-
- this.initSartDateDialog(startDate);
- this.initEndDateDialog(endDate);
+ this.dateRange.setValidators(this.dateCheck);
+ this.dateRange.valueChanges.subscribe(() => this.onGroupValueChanged());
}
- initSartDateDialog(date: string) {
- let settings: any = {
- type: 'date',
- past: moment().subtract(100, 'years'),
- future: moment().add(100, 'years')
- };
-
- settings.init = moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
-
- this.dialogStart = new mdDateTimePicker.default(settings);
- this.dialogStart.trigger = this.startElement.nativeElement;
-
- let startDateButton = document.getElementById('startDateButton');
- startDateButton.addEventListener('click', () => {
- this.dialogStart.toggle();
- });
- }
-
- private addAccessibilityLabelToDatePicker() {
- let left: any = document.querySelector('#mddtp-date__left');
- if (left) {
- left.appendChild(this.createCustomElement('date left'));
- }
-
- let right: any = document.querySelector('#mddtp-date__right');
- if (right) {
- right.appendChild(this.createCustomElement('date right'));
- }
-
- let cancel: any = document.querySelector('#mddtp-date__cancel');
- if (cancel) {
- cancel.appendChild(this.createCustomElement('date cancel'));
- }
-
- let ok: any = document.querySelector('#mddtp-date__ok');
- if (ok) {
- ok.appendChild(this.createCustomElement('date ok'));
- }
- }
-
- private createCustomElement(text: string): HTMLElement {
- let span = document.createElement('span');
- span.style.visibility = 'hidden';
- let rightSpanText = document.createTextNode(text);
- span.appendChild(rightSpanText);
- return span;
- }
-
- initEndDateDialog(date: string) {
- let settings: any = {
- type: 'date',
- past: moment().subtract(100, 'years'),
- future: moment().add(100, 'years')
- };
-
- settings.init = moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
-
- this.dialogEnd = new mdDateTimePicker.default(settings);
- 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(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
- this.dateRange.patchValue({
- startDate: date
- });
- let materialElemen: any = inputEl.parentElement;
- if (materialElemen) {
- materialElemen.MaterialTextfield.change(date);
- }
- }
-
- onOkEnd(inputEl: HTMLInputElement) {
- let date = this.dialogEnd.time.format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
- this.dateRange.patchValue({
- endDate: date
- });
-
- let materialElemen: any = inputEl.parentElement;
- if (materialElemen) {
- materialElemen.MaterialTextfield.change(date);
- }
- }
-
- onGroupValueChanged(data: any) {
+ onGroupValueChanged() {
if (this.dateRange.valid) {
- let dateStart = this.convertToMomentDateWithTime(this.dateRange.controls['startDate'].value);
- let endStart = this.convertToMomentDateWithTime(this.dateRange.controls['endDate'].value);
+ let dateStart = this.convertToMomentDateWithTime(this.dateRange.controls.startDate.value);
+ let endStart = this.convertToMomentDateWithTime(this.dateRange.controls.endDate.value);
this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
}
}
- public convertToMomentDateWithTime(date: string) {
- return moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
+ convertToMomentDateWithTime(date: string) {
+ return moment(date, this.FORMAT_DATE_ACTIVITI, true).format(this.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
}
- private convertToMomentDate(date: string) {
- if (date) {
- return moment(date).format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
- } else {
- return moment().format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
- }
+ dateCheck(formControl: AbstractControl) {
+ let startDate = moment(formControl.get('startDate').value);
+ let endDate = moment(formControl.get('endDate').value);
+ let result = startDate.isAfter(endDate);
+ return result ? {'greaterThan': true} : null;
}
- ngOnDestroy() {
+ isStartDateGreaterThanEndDate() {
+ return this.dateRange && this.dateRange.errors && this.dateRange.errors.greaterThan;
+ }
+ isStartDateEmpty() {
+ return this.dateRange && this.dateRange.controls.startDate && !this.dateRange.controls.startDate.valid;
}
}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.css b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.css
deleted file mode 100644
index ae995ca854..0000000000
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.dropdown-widget {
- width: 100%;
-}
-
-.dropdown-widget__select {
- width: 100%;
-}
-
-.dropdown-widget__invalid .dropdown-widget__select {
- border-color: #d50000;
-}
-
-.dropdown-widget__invalid .dropdown-widget__label {
- color: #d50000;
-}
-
-.dropdown-widget__invalid .dropdown-widget__label:after {
- background-color: #d50000;
-}
-
-.dropdown-widget__invalid .mdl-textfield__error {
- visibility: visible !important;
-}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.html b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.html
index 688b591560..07095b025e 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.html
@@ -1,7 +1,10 @@
-