From eb3583e7f58340c0f498a1e94413555a29ff2a6a Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Thu, 13 Oct 2016 18:18:45 +0100 Subject: [PATCH 1/5] Slit component in analitycs-param-report Improve the form validation Fix the reset reports on change params --- .../ng2-activiti-analytics/index.ts | 3 + .../src/assets/analyticsComponent.mock.ts | 14 +- .../analytics-report-list.component.ts | 12 +- .../analytics-report-parameters.component.css | 23 + ...analytics-report-parameters.component.html | 61 +++ ...lytics-report-parameters.component.spec.ts | 401 ++++++++++++++++++ .../analytics-report-parameters.component.ts | 194 +++++++++ .../src/components/analytics.component.html | 63 +-- .../components/analytics.component.spec.ts | 386 +---------------- .../src/components/analytics.component.ts | 150 +------ .../widgets/date-range/date-range.widget.html | 14 +- .../widgets/date-range/date-range.widget.ts | 4 + .../widgets/dropdown/dropdown.widget.html | 8 +- .../widgets/dropdown/dropdown.widget.ts | 16 + .../widgets/duration/duration.widget.html | 3 +- .../widgets/duration/duration.widget.ts | 31 +- .../widgets/number/number.widget.html | 4 +- .../widgets/number/number.widget.ts | 21 +- .../src/models/report.model.ts | 20 +- .../src/services/analytics.service.ts | 16 +- 20 files changed, 824 insertions(+), 620 deletions(-) create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts create mode 100644 ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts diff --git a/ng2-components/ng2-activiti-analytics/index.ts b/ng2-components/ng2-activiti-analytics/index.ts index c06595d22a..5fdc8def07 100644 --- a/ng2-components/ng2-activiti-analytics/index.ts +++ b/ng2-components/ng2-activiti-analytics/index.ts @@ -19,6 +19,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CoreModule } from 'ng2-alfresco-core'; import { AnalyticsReportListComponent } from './src/components/analytics-report-list.component'; +import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component'; import { AnalyticsComponent } from './src/components/analytics.component'; import { AnalyticsService } from './src/services/analytics.service'; import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts'; @@ -27,12 +28,14 @@ import { WIDGET_DIRECTIVES } from './src/components/widgets/index'; export * from './src/components/analytics.component'; export * from './src/components/analytics-report-list.component'; +export * from './src/components/analytics-report-parameters.component'; export * from './src/services/analytics.service'; export * from './src/components/widgets/index'; export const ANALYTICS_DIRECTIVES: any[] = [ AnalyticsComponent, AnalyticsReportListComponent, + AnalyticsReportParametersComponent, WIDGET_DIRECTIVES ]; diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts index 606fca6c11..6213205550 100644 --- a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts +++ b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { ReportParameterModel } from '../models/report.model'; +import { ReportParameterDetailsModel } from '../models/report.model'; export var reportDefParamStatus = { 'id': 2005, @@ -199,7 +199,7 @@ export var chartTaskOverview = { }] }; -export var fieldNumber = new ReportParameterModel( +export var fieldNumber = new ReportParameterDetailsModel( { id: 'slowProcessInstanceInteger', type: 'integer', @@ -207,7 +207,7 @@ export var fieldNumber = new ReportParameterModel( } ); -export var fieldStatus = new ReportParameterModel( +export var fieldStatus = new ReportParameterDetailsModel( { id: 'status', type: 'status', @@ -215,7 +215,7 @@ export var fieldStatus = new ReportParameterModel( } ); -export var fieldTypeFiltering = new ReportParameterModel( +export var fieldTypeFiltering = new ReportParameterDetailsModel( { id: 'typeFiltering', type: 'boolean', @@ -223,7 +223,7 @@ export var fieldTypeFiltering = new ReportParameterModel( } ); -export var fieldTask = new ReportParameterModel( +export var fieldTask = new ReportParameterDetailsModel( { id: 'taskName', type: 'task', @@ -236,7 +236,7 @@ export var fieldDateRange = { endDate: '2016-10-14T00:00:00.000Z' }; -export var fieldDateRangeInterval = new ReportParameterModel( +export var fieldDateRangeInterval = new ReportParameterDetailsModel( { id: 'dateRangeInterval', type: 'dateInterval', @@ -244,7 +244,7 @@ export var fieldDateRangeInterval = new ReportParameterModel( } ); -export var fieldProcessDef = new ReportParameterModel( +export var fieldProcessDef = new ReportParameterDetailsModel( { id: 'processDefinitionId', type: 'processDefinition', diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts index 2445989824..759c6cc0aa 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts @@ -18,7 +18,7 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import { AlfrescoAuthenticationService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../services/analytics.service'; -import { ReportModel } from '../models/report.model'; +import { ReportParametersModel } from '../models/report.model'; import { Observer } from 'rxjs/Observer'; import { Observable } from 'rxjs/Observable'; @@ -31,7 +31,7 @@ import { Observable } from 'rxjs/Observable'; export class AnalyticsReportListComponent implements OnInit { @Output() - reportClick: EventEmitter = new EventEmitter(); + reportClick: EventEmitter = new EventEmitter(); @Output() onSuccess = new EventEmitter(); @@ -44,16 +44,16 @@ export class AnalyticsReportListComponent implements OnInit { currentReport: any; - reports: ReportModel[] = []; + reports: ReportParametersModel[] = []; constructor(private auth: AlfrescoAuthenticationService, private analyticsService: AnalyticsService) { - this.report$ = new Observable(observer => this.reportObserver = observer).share(); + this.report$ = new Observable(observer => this.reportObserver = observer).share(); } ngOnInit() { - this.report$.subscribe((report: ReportModel) => { + this.report$.subscribe((report: ReportParametersModel) => { this.reports.push(report); }); @@ -62,7 +62,7 @@ export class AnalyticsReportListComponent implements OnInit { getReportListByAppId() { this.analyticsService.getReportList().subscribe( - (res: ReportModel[]) => { + (res: ReportParametersModel[]) => { res.forEach((report) => { this.reportObserver.next(report); }); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css new file mode 100644 index 0000000000..ae995ca854 --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css @@ -0,0 +1,23 @@ +.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/analytics-report-parameters.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html new file mode 100644 index 0000000000..d6aaf29e1b --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html @@ -0,0 +1,61 @@ +
+
+
+

{{reportParameters.name}}

+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ UNKNOWN WIDGET TYPE: {{field.type}} +
+
+
+

+ +
+

ReportForm valid : {{ reportForm.valid }}

+

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

+

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

+
+
+
+
\ No newline at end of file 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 new file mode 100644 index 0000000000..f2b37c730f --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts @@ -0,0 +1,401 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { + CoreModule +} from 'ng2-alfresco-core'; + +import { AnalyticsReportListComponent } from '../components/analytics-report-list.component'; +import { AnalyticsComponent } from '../components/analytics.component'; +import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component'; +import { WIDGET_DIRECTIVES } from '../components/widgets/index'; +import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts'; + +import { AnalyticsService } from '../services/analytics.service'; +import { ReportParametersModel } from '../models/report.model'; +import * as moment from 'moment'; +import { DebugElement, SimpleChange } from '@angular/core'; +import * as analyticMock from '../assets/analyticsComponent.mock'; + +export const ANALYTICS_DIRECTIVES: any[] = [ + AnalyticsComponent, + AnalyticsReportParametersComponent, + AnalyticsReportListComponent, + WIDGET_DIRECTIVES +]; +export const ANALYTICS_PROVIDERS: any[] = [ + AnalyticsService +]; + +declare let jasmine: any; +declare let mdDateTimePicker: any; + +describe('Test ng2-analytics-report-parameters Report Parameters ', () => { + + let component: any; + let fixture: ComponentFixture; + let debug: DebugElement; + let element: HTMLElement; + + let componentHandler: any; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + CoreModule + ], + declarations: [ + ...ANALYTICS_DIRECTIVES, + ...CHART_DIRECTIVES + ], + providers: [ + ...ANALYTICS_PROVIDERS + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AnalyticsReportParametersComponent); + component = fixture.componentInstance; + debug = fixture.debugElement; + element = fixture.nativeElement; + fixture.detectChanges(); + componentHandler = jasmine.createSpyObj('componentHandler', [ + 'upgradeAllRegistered' + ]); + window['componentHandler'] = componentHandler; + }); + + describe('Rendering tests', () => { + beforeEach(() => { + jasmine.Ajax.install(); + }); + + afterEach(() => { + jasmine.Ajax.uninstall(); + }); + + it('Should initialize the Report form with a Form Group ', () => { + expect(component.reportForm.get('dateRange')).toBeDefined(); + expect(component.reportForm.get('dateRange').get('startDate')).toBeDefined(); + expect(component.reportForm.get('dateRange').get('endDate')).toBeDefined(); + }); + + it('Should render a dropdown with all the status when the definition parameter type is \'status\' ', (done) => { + component.onSuccessReportParams.subscribe(() => { + fixture.detectChanges(); + let dropDown: any = element.querySelector('#select-status'); + expect(element.querySelector('h1').innerHTML).toEqual('Fake Task overview status'); + expect(dropDown).toBeDefined(); + expect(dropDown.length).toEqual(4); + expect(dropDown[0].innerHTML).toEqual('Choose One'); + expect(dropDown[1].innerHTML).toEqual('All'); + expect(dropDown[2].innerHTML).toEqual('Active'); + expect(dropDown[3].innerHTML).toEqual('Complete'); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamStatus + }); + }); + + it('Should render a number with the default value when the definition parameter type is \'integer\' ', (done) => { + component.onSuccessReportParams.subscribe(() => { + fixture.detectChanges(); + let numberElement: any = element.querySelector('#slowProcessInstanceInteger'); + expect(numberElement.value).toEqual('10'); + + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamNumber + }); + }); + + it('Should render a duration component when the definition parameter type is \'duration\' ', (done) => { + component.onSuccessReportParams.subscribe(() => { + fixture.detectChanges(); + let numberElement: any = element.querySelector('#duration'); + expect(numberElement.value).toEqual('0'); + + let dropDown: any = element.querySelector('#select-duration'); + expect(dropDown).toBeDefined(); + expect(dropDown.length).toEqual(4); + expect(dropDown[0].innerHTML).toEqual('Seconds'); + expect(dropDown[1].innerHTML).toEqual('Minutes'); + expect(dropDown[2].innerHTML).toEqual('Hours'); + expect(dropDown[3].innerHTML).toEqual('Days'); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamDuration + }); + }); + + it('Should save an Params object when the submit is performed', () => { + component.onSuccess.subscribe((res) => { + expect(res.dateRange.startDate).toEqual('2016-09-01T00:00:00.000Z'); + expect(res.dateRange.endDate).toEqual('2016-10-05T00:00:00.000Z'); + expect(res.status).toEqual('All'); + expect(res.processDefinitionId).toEqual('FakeProcess:1:22'); + expect(res.taskName).toEqual('FakeTaskName'); + expect(res.duration).toEqual(22); + expect(res.dateRangeInterval).toEqual(120); + expect(res.slowProcessInstanceInteger).toEqual(2); + }); + + let values: any = { + dateRange: { + startDate: '2016-09-01', endDate: '2016-10-05' + }, + statusGroup: { + status: 'All' + }, + processDefGroup: { + processDefinitionId: 'FakeProcess:1:22' + }, + taskGroup: { + task: 'FakeTaskName' + }, + durationGroup: { + duration: 22 + }, + dateIntervalGroup: { + dateInterval: 120 + }, + processInstanceGroup: { + processInstance: 2 + } + }; + component.submit(values); + }); + + it('Should render a checkbox with the value true when the definition parameter type is \'boolean\' ', (done) => { + component.onSuccessReportParams.subscribe(() => { + fixture.detectChanges(); + let checkElement: any = element.querySelector('#typeFiltering'); + expect(checkElement.checked).toBeTruthy(); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamCheck + }); + }); + + 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); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamDateRange + }); + }); + + it('Should render a dropdown with all the RangeInterval when the definition parameter type is \'dateRangeInterval\' ', (done) => { + component.onSuccessReportParams.subscribe(() => { + fixture.detectChanges(); + let dropDown: any = element.querySelector('#select-dateRangeInterval'); + expect(dropDown).toBeDefined(); + expect(dropDown.length).toEqual(5); + expect(dropDown[0].innerHTML).toEqual('By hour'); + expect(dropDown[1].innerHTML).toEqual('By day'); + expect(dropDown[2].innerHTML).toEqual('By week'); + expect(dropDown[3].innerHTML).toEqual('By month'); + expect(dropDown[4].innerHTML).toEqual('By year'); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamRangeInterval + }); + }); + + it('Should render a dropdown with all the process definition when the definition parameter type is \'processDefinition\' and the' + + ' reportId change', (done) => { + component.onSuccessParamOpt.subscribe(() => { + fixture.detectChanges(); + let dropDown: any = element.querySelector('#select-processDefinitionId'); + expect(dropDown).toBeDefined(); + expect(dropDown.length).toEqual(5); + expect(dropDown[0].innerHTML).toEqual('Choose One'); + expect(dropDown[1].innerHTML).toEqual('Fake Process Test 1 Name (v 1) '); + expect(dropDown[2].innerHTML).toEqual('Fake Process Test 1 Name (v 2) '); + expect(dropDown[3].innerHTML).toEqual('Fake Process Test 2 Name (v 1) '); + expect(dropDown[4].innerHTML).toEqual('Fake Process Test 3 Name (v 1) '); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.first().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamProcessDef + }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamProcessDefOptions + }); + }); + + it('Should render a dropdown with all the process definition when the definition parameter type is \'processDefinition\' and the' + + ' appId change', (done) => { + component.onSuccessParamOpt.subscribe(() => { + fixture.detectChanges(); + let dropDown: any = element.querySelector('#select-processDefinitionId'); + expect(dropDown).toBeDefined(); + expect(dropDown.length).toEqual(3); + expect(dropDown[0].innerHTML).toEqual('Choose One'); + expect(dropDown[1].innerHTML).toEqual('Fake Process Test 1 Name (v 1) '); + expect(dropDown[2].innerHTML).toEqual('Fake Process Test 1 Name (v 2) '); + done(); + }); + + let appId = 1; + component.appId = appId; + let change = new SimpleChange(null, appId); + component.ngOnChanges({ 'appId': change }); + + jasmine.Ajax.requests.first().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamProcessDef + }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamProcessDefOptionsApp + }); + }); + + it('Should load the task list when a process definition is selected', () => { + component.onSuccessReportParams.subscribe((res) => { + expect(res).toBeDefined(); + expect(res.length).toEqual(2); + expect(res[0].id).toEqual('Fake task name 1'); + expect(res[0].name).toEqual('Fake task name 1'); + expect(res[1].id).toEqual('Fake task name 2'); + expect(res[1].name).toEqual('Fake task name 2'); + }); + + component.reportId = 100; + component.reportParameters = new ReportParametersModel(analyticMock.reportDefParamTask); + component.onProcessDefinitionChanges(analyticMock.fieldProcessDef); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamTaskOptions + }); + }); + + it('Should emit an error with a 404 response when the options response is not found', (done) => { + component.onError.subscribe((err) => { + expect(err).toBeDefined(); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.first().respondWith({ + status: 200, + contentType: 'json', + responseText: analyticMock.reportDefParamProcessDef + }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 404, + contentType: 'json', + responseText: [] + }); + }); + + it('Should emit an error with a 404 response when the report parameters response is not found', (done) => { + component.onError.subscribe((err) => { + expect(err).toBeDefined(); + done(); + }); + + let reportId = 1; + let change = new SimpleChange(null, reportId); + component.ngOnChanges({ 'reportId': change }); + + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 404, + contentType: 'json', + responseText: [] + }); + }); + }); +}); 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 new file mode 100644 index 0000000000..633cbbf25c --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts @@ -0,0 +1,194 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges } from '@angular/core'; +import { AlfrescoTranslationService } from 'ng2-alfresco-core'; +import { AnalyticsService } from '../services/analytics.service'; +import { ReportParametersModel, ReportQuery, ParameterValueModel, ReportParameterDetailsModel } from '../models/report.model'; +import { FormGroup, FormBuilder, FormControl } from '@angular/forms'; +import * as moment from 'moment'; + +@Component({ + moduleId: module.id, + selector: 'analytics-report-parameters', + templateUrl: './analytics-report-parameters.component.html', + styleUrls: ['./analytics-report-parameters.component.css'] +}) +export class AnalyticsReportParametersComponent implements OnInit, OnChanges { + + public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD'; + + @Input() + appId: string; + + @Input() + reportId: string; + + @Output() + onSuccess = new EventEmitter(); + + @Output() + onError = new EventEmitter(); + + @Output() + onFormValueChanged = new EventEmitter(); + + onDropdownChanged = new EventEmitter(); + + onSuccessReportParams = new EventEmitter(); + + onSuccessParamOpt = new EventEmitter(); + + reportParameters: ReportParametersModel; + + reportParamQuery = new ReportQuery(); + + reportForm: FormGroup; + + debug: boolean = false; + + private dropDownSub; + private reportParamsSub; + private paramOpts; + + constructor(private translate: AlfrescoTranslationService, + private analyticsService: AnalyticsService, + private formBuilder: FormBuilder ) { + if (translate) { + translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src'); + } + } + + ngOnInit() { + this.initForm(); + + this.dropDownSub = this.onDropdownChanged.subscribe((field) => { + let paramDependOn: ReportParameterDetailsModel = this.reportParameters.definition.parameters.find(p => p.dependsOn === field.id); + if (paramDependOn) { + this.retrieveParameterOptions(this.reportParameters.definition.parameters, this.appId, this.reportId, field.value); + } + }); + + this.paramOpts = this.onSuccessReportParams.subscribe((report: ReportParametersModel) => { + if (report.hasParameters()) { + this.retrieveParameterOptions(report.definition.parameters, this.appId); + } + }); + + this.reportForm.valueChanges.subscribe(data => this.onValueChanged(data)); + } + + ngOnChanges(changes: SimpleChanges) { + this.initForm(); + let reportId = changes['reportId']; + if (reportId && reportId.currentValue) { + this.getReportParams(reportId.currentValue); + } + + let appId = changes['appId']; + if (appId && (appId.currentValue || appId.currentValue === null)) { + this.getReportParams(this.reportId); + } + } + + initForm() { + this.reportForm = this.formBuilder.group({ + dateRange: new FormGroup({}), + statusGroup: new FormGroup({ + status: new FormControl() + }), + processInstanceGroup: new FormGroup({ + processInstance: new FormControl() + }), + taskGroup: new FormGroup({ + task: new FormControl() + }), + dateIntervalGroup: new FormGroup({ + dateInterval: new FormControl() + }), + durationGroup: new FormGroup({ + duration: new FormControl() + }), + processDefGroup: new FormGroup({ + processDefinitionId: new FormControl() + }) + }); + } + + public getReportParams(reportId: string) { + this.reportParamsSub = this.analyticsService.getReportParams(reportId).subscribe( + (res: ReportParametersModel) => { + this.reportParameters = res; + this.onSuccessReportParams.emit(res); + }, + (err: any) => { + console.log(err); + this.onError.emit(err); + } + ); + } + + private retrieveParameterOptions(parameters: ReportParameterDetailsModel[], appId: string, reportId?: string, processDefinitionId?: string) { + parameters.forEach((param) => { + this.analyticsService.getParamValuesByType(param.type, appId, reportId, processDefinitionId).subscribe( + (opts: ParameterValueModel[]) => { + param.options = opts; + this.onSuccessParamOpt.emit(opts); + }, + (err: any) => { + console.log(err); + this.onError.emit(err); + } + ); + }); + } + + onProcessDefinitionChanges(field: any) { + if (field.value) { + this.onDropdownChanged.emit(field); + } + } + + public submit(values: any) { + this.reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate); + this.reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate); + this.reportParamQuery.status = values.statusGroup.status; + this.reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId; + this.reportParamQuery.taskName = values.taskGroup.task; + this.reportParamQuery.duration = values.durationGroup.duration; + this.reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateInterval; + this.reportParamQuery.slowProcessInstanceInteger = values.processInstanceGroup.processInstance; + this.onSuccess.emit(this.reportParamQuery); + } + + onValueChanged(data: any) { + this.onFormValueChanged.emit(data); + } + + public convertMomentDate(date: string) { + return moment(date, AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI, true) + .format(AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z'; + } + + ngOnDestroy() { + this.dropDownSub.unsubscribe(); + this.paramOpts.unsubscribe(); + if (this.reportParamsSub) { + this.reportParamsSub.unsubscribe(); + } + } +} 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 93f958d5e5..74697003b5 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -1,65 +1,8 @@
-
-
-

{{reportDetails.name}}

-
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
- UNKNOWN WIDGET TYPE: {{field.type}} -
-
-
-

- -
-

ReportForm valid : {{ reportForm.valid }}

-

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

-

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

-
-
+ +

{{report.title}}

diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts index 47ff595574..16d1fbd100 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts @@ -22,18 +22,18 @@ import { import { AnalyticsReportListComponent } from '../components/analytics-report-list.component'; import { AnalyticsComponent } from '../components/analytics.component'; +import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component'; import { WIDGET_DIRECTIVES } from '../components/widgets/index'; import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts'; - -import { AnalyticsService } from '../services/analytics.service'; -import { ReportModel, ReportQuery } from '../models/report.model'; import { Chart } from '../models/chart.model'; -import * as moment from 'moment'; +import { AnalyticsService } from '../services/analytics.service'; +import { ReportQuery } from '../models/report.model'; import { DebugElement, SimpleChange } from '@angular/core'; import * as analyticMock from '../assets/analyticsComponent.mock'; export const ANALYTICS_DIRECTIVES: any[] = [ AnalyticsComponent, + AnalyticsReportParametersComponent, AnalyticsReportListComponent, WIDGET_DIRECTIVES ]; @@ -89,215 +89,6 @@ describe('Test ng2-activiti-analytics Report ', () => { jasmine.Ajax.uninstall(); }); - it('Should initialize the Report form with a Form Group ', () => { - expect(component.reportForm.get('dateRange')).toBeDefined(); - expect(component.reportForm.get('dateRange').get('startDate')).toBeDefined(); - expect(component.reportForm.get('dateRange').get('endDate')).toBeDefined(); - }); - - it('Should render a dropdown with all the status when the definition parameter type is \'status\' ', (done) => { - component.onSuccessParamsReport.subscribe(() => { - fixture.detectChanges(); - let dropDown: any = element.querySelector('#select-status'); - expect(element.querySelector('h1').innerHTML).toEqual('Fake Task overview status'); - expect(dropDown).toBeDefined(); - expect(dropDown.length).toEqual(4); - expect(dropDown[0].innerHTML).toEqual('Choose One'); - expect(dropDown[1].innerHTML).toEqual('All'); - expect(dropDown[2].innerHTML).toEqual('Active'); - expect(dropDown[3].innerHTML).toEqual('Complete'); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamStatus - }); - }); - - it('Should render a number with the default value when the definition parameter type is \'integer\' ', (done) => { - component.onSuccessParamsReport.subscribe(() => { - fixture.detectChanges(); - let numberElement: any = element.querySelector('#slowProcessInstanceInteger'); - expect(numberElement.value).toEqual('10'); - - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamNumber - }); - }); - - it('Should render a duration component when the definition parameter type is \'duration\' ', (done) => { - component.onSuccessParamsReport.subscribe(() => { - fixture.detectChanges(); - let numberElement: any = element.querySelector('#duration'); - expect(numberElement.value).toEqual('0'); - - let dropDown: any = element.querySelector('#select-duration'); - expect(dropDown).toBeDefined(); - expect(dropDown.length).toEqual(4); - expect(dropDown[0].innerHTML).toEqual('Seconds'); - expect(dropDown[1].innerHTML).toEqual('Minutes'); - expect(dropDown[2].innerHTML).toEqual('Hours'); - expect(dropDown[3].innerHTML).toEqual('Days'); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamDuration - }); - }); - - it('Should render a checkbox with the value true when the definition parameter type is \'boolean\' ', (done) => { - component.onSuccessParamsReport.subscribe(() => { - fixture.detectChanges(); - let checkElement: any = element.querySelector('#typeFiltering'); - expect(checkElement.checked).toBeTruthy(); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamCheck - }); - }); - - it('Should render a date range components when the definition parameter type is \'dateRange\' ', (done) => { - component.onSuccessParamsReport.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); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamDateRange - }); - }); - - it('Should render a dropdown with all the RangeInterval when the definition parameter type is \'dateRangeInterval\' ', (done) => { - component.onSuccessParamsReport.subscribe(() => { - fixture.detectChanges(); - let dropDown: any = element.querySelector('#select-dateRangeInterval'); - expect(dropDown).toBeDefined(); - expect(dropDown.length).toEqual(5); - expect(dropDown[0].innerHTML).toEqual('By hour'); - expect(dropDown[1].innerHTML).toEqual('By day'); - expect(dropDown[2].innerHTML).toEqual('By week'); - expect(dropDown[3].innerHTML).toEqual('By month'); - expect(dropDown[4].innerHTML).toEqual('By year'); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamRangeInterval - }); - }); - - it('Should render a dropdown with all the process definition when the definition parameter type is \'processDefinition\' and the' + - ' reportId change', (done) => { - component.onSuccessParamOpt.subscribe(() => { - fixture.detectChanges(); - let dropDown: any = element.querySelector('#select-processDefinitionId'); - expect(dropDown).toBeDefined(); - expect(dropDown.length).toEqual(5); - expect(dropDown[0].innerHTML).toEqual('Choose One'); - expect(dropDown[1].innerHTML).toEqual('Fake Process Test 1 Name (v 1) '); - expect(dropDown[2].innerHTML).toEqual('Fake Process Test 1 Name (v 2) '); - expect(dropDown[3].innerHTML).toEqual('Fake Process Test 2 Name (v 1) '); - expect(dropDown[4].innerHTML).toEqual('Fake Process Test 3 Name (v 1) '); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.first().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamProcessDef - }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamProcessDefOptions - }); - }); - - it('Should render a dropdown with all the process definition when the definition parameter type is \'processDefinition\' and the' + - ' appId change', (done) => { - component.onSuccessParamOpt.subscribe(() => { - fixture.detectChanges(); - let dropDown: any = element.querySelector('#select-processDefinitionId'); - expect(dropDown).toBeDefined(); - expect(dropDown.length).toEqual(3); - expect(dropDown[0].innerHTML).toEqual('Choose One'); - expect(dropDown[1].innerHTML).toEqual('Fake Process Test 1 Name (v 1) '); - expect(dropDown[2].innerHTML).toEqual('Fake Process Test 1 Name (v 2) '); - done(); - }); - - let appId = 1; - component.appId = appId; - let change = new SimpleChange(null, appId); - component.ngOnChanges({ 'appId': change }); - - jasmine.Ajax.requests.first().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamProcessDef - }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamProcessDefOptionsApp - }); - }); - it('Should render the Process definition overview report ', (done) => { component.onShowReport.subscribe((res) => { expect(res).toBeDefined(); @@ -325,14 +116,10 @@ describe('Test ng2-activiti-analytics Report ', () => { done(); }); - component.reportDetails = new ReportModel({ - id: 1, - definition: - '{ "parameters" :[{"id":"status","type":"status", "options": [{"id": "all", "name" :"all"}],"value":null}]}' - }); - - component.reportParamQuery = new ReportQuery({status: 'All'}); - component.showReport(); + let reportParamQuery = new ReportQuery({status: 'All'}); + component.appId = 1; + component.reportId = 1001; + component.showReport(reportParamQuery); jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, @@ -378,14 +165,8 @@ describe('Test ng2-activiti-analytics Report ', () => { done(); }); - component.reportDetails = new ReportModel({ - id: 1, - definition: - '{ "parameters" :[{"id":"status","type":"status", "options": [{"id": "all", "name" :"all"}],"value":null}]}' - }); - - component.reportParamQuery = new ReportQuery({status: 'All'}); - component.showReport(); + let reportParamQuery = new ReportQuery({status: 'All'}); + component.showReport(reportParamQuery); jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, @@ -394,157 +175,22 @@ describe('Test ng2-activiti-analytics Report ', () => { }); }); - it('Should reset the report and save the number value onNumberChanges method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onNumberChanges(analyticMock.fieldNumber); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.slowProcessInstanceInteger).toEqual(102); - }); - - it('Should reset the report and save the duration value onDurationChanges method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onDurationChanges(analyticMock.fieldDuration); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.duration).toEqual(30); - }); - - it('Should reset the report and save the status value onStatusChanges method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onStatusChanges(analyticMock.fieldStatus); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.status).toEqual('fake-value'); - }); - - it('Should reset the report and save the typeFiltering value onTypeFilteringChanges method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onTypeFilteringChanges(analyticMock.fieldTypeFiltering); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.typeFiltering).toBeFalsy(); - }); - - it('Should reset the report and save the taskName value onTaskChanges method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onTaskChanges(analyticMock.fieldTask); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.taskName).toEqual('fake-task-name'); - }); - - it('Should reset the report and save the dateRange value onDateRangeChange method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onDateRangeChange(analyticMock.fieldDateRange); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.dateRange.startDate).toEqual('2016-10-12T00:00:00.000Z'); - expect(component.reportParamQuery.dateRange.endDate).toEqual('2016-10-14T00:00:00.000Z'); - }); - - it('Should reset the report and save the dateRangeInterval value onDateRangeIntervalChange method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.onDateRangeIntervalChange(analyticMock.fieldDateRangeInterval); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.dateRangeInterval).toEqual('fake-date-interval'); - }); - - it('Should reset the report and save the processDefinitionId value onProcessDefinitionChanges method', () => { - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.reportDetails = new ReportModel({ - id: 1, - definition: - '{ "parameters" :[{"id":"processDefinitionId","type":"processDefinition","value":null}]}' - }); - component.onProcessDefinitionChanges(analyticMock.fieldProcessDef); - - expect(component.reports).toBeNull(); - expect(component.reportParamQuery.processDefinitionId).toEqual('fake-process-name:1:15027'); - }); - - it('Should load the task list when a process definition is selected', () => { - component.onSuccessParamsReport.subscribe((res) => { - expect(res).toBeDefined(); - expect(res.length).toEqual(2); - expect(res[0].id).toEqual('Fake task name 1'); - expect(res[0].name).toEqual('Fake task name 1'); - expect(res[1].id).toEqual('Fake task name 2'); - expect(res[1].name).toEqual('Fake task name 2'); - }); - - component.reportId = 100; - component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; - component.reportDetails = new ReportModel(analyticMock.reportDefParamTask); - component.onProcessDefinitionChanges(analyticMock.fieldProcessDef); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamTaskOptions - }); - }); - - it('Should convert a string in number', () => { - let numberConvert = component.convertNumber('2'); - expect(numberConvert).toEqual(2); - }); - - it('Should emit an error with a 404 response when the options response is not found', (done) => { - component.onError.subscribe((err) => { - expect(err).toBeDefined(); - done(); - }); - + it('Should reset the reports when the onChanged is call', () => { let reportId = 1; + component.reports = [ new Chart({id: 'fake', type: 'fake-type'})]; let change = new SimpleChange(null, reportId); component.ngOnChanges({ 'reportId': change }); - - jasmine.Ajax.requests.first().respondWith({ - status: 200, - contentType: 'json', - responseText: analyticMock.reportDefParamProcessDef - }); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 404, - contentType: 'json', - responseText: [] - }); + expect(component.reports).toBeUndefined(); }); - it('Should emit an error with a 404 response when the Process definition overview response is not found ', (done) => { + it('Should emit onError event with a 404 response ', (done) => { component.onError.subscribe((err) => { expect(err).toBeDefined(); done(); }); - component.reportDetails = new ReportModel({ - id: 1, - definition: - '{ "parameters" :[{"id":"status","type":"status", "options": [{"id": "all", "name" :"all"}],"value":null}]}' - }); - - component.reportParamQuery = new ReportQuery({status: 'All'}); - component.showReport(); - - jasmine.Ajax.requests.mostRecent().respondWith({ - status: 404, - contentType: 'json', - responseText: [] - }); - }); - - it('Should emit an error with a 404 response when the report parameters response is not found', (done) => { - component.onError.subscribe((err) => { - expect(err).toBeDefined(); - done(); - }); - - let reportId = 1; - let change = new SimpleChange(null, reportId); - component.ngOnChanges({ 'reportId': change }); + let reportParamQuery = new ReportQuery({status: 'All'}); + component.showReport(reportParamQuery); jasmine.Ajax.requests.mostRecent().respondWith({ status: 404, 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 86ae04a74d..af92e42665 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts @@ -15,12 +15,11 @@ * limitations under the License. */ -import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges, ViewChild } from '@angular/core'; +import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges } from '@angular/core'; import { AlfrescoTranslationService } from 'ng2-alfresco-core'; import { AnalyticsService } from '../services/analytics.service'; -import { ReportModel, ReportQuery, ParameterValueModel, ReportParameterModel } from '../models/report.model'; +import { ReportQuery } from '../models/report.model'; import { Chart } from '../models/chart.model'; -import { FormGroup, FormBuilder } from '@angular/forms'; @Component({ moduleId: module.id, @@ -30,50 +29,29 @@ import { FormGroup, FormBuilder } from '@angular/forms'; }) export class AnalyticsComponent implements OnInit, OnChanges { - @ViewChild('processDefinition') - processDefinition: any; - @Input() appId: string; @Input() - reportId: string; + reportId: number; @Output() onSuccess = new EventEmitter(); - @Output() - onError = new EventEmitter(); - - @Output() - onDropdownChanged = new EventEmitter(); - @Output() onShowReport = new EventEmitter(); @Output() - onSuccessParamsReport = new EventEmitter(); - - @Output() - onSuccessParamOpt = new EventEmitter(); - - reportDetails: ReportModel; + onError = new EventEmitter(); reportParamQuery = new ReportQuery(); reports: any[]; - reportForm: FormGroup; - debug: boolean = false; - private dropDownSub; - private paramsReportSub; - private paramOpts; - constructor(private translate: AlfrescoTranslationService, - private analyticsService: AnalyticsService, - private formBuilder: FormBuilder ) { + private analyticsService: AnalyticsService) { console.log('AnalyticsComponent'); if (translate) { translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src'); @@ -81,67 +59,15 @@ export class AnalyticsComponent implements OnInit, OnChanges { } ngOnInit() { - this.reportForm = this.formBuilder.group({ - dateRange: new FormGroup({}) - }); - - this.dropDownSub = this.onDropdownChanged.subscribe((field) => { - let paramDependOn: ReportParameterModel = this.reportDetails.definition.parameters.find(p => p.dependsOn === field.id); - if (paramDependOn) { - this.retrieveParameterOptions(this.reportDetails.definition.parameters, this.appId, this.reportId, field.value); - } - }); - - this.paramOpts = this.onSuccessParamsReport.subscribe((report: ReportModel) => { - if (report.hasParameters()) { - this.retrieveParameterOptions(report.definition.parameters, this.appId); - } - }); } ngOnChanges(changes: SimpleChanges) { - let reportId = changes['reportId']; - if (reportId && reportId.currentValue) { - this.getParamsReports(reportId.currentValue); - } - - let appId = changes['appId']; - if (appId && (appId.currentValue || appId.currentValue === null)) { - this.getParamsReports(this.reportId); - } - } - - public getParamsReports(reportId: string) { this.reset(); - this.paramsReportSub = this.analyticsService.getParamsReports(reportId).subscribe( - (res: ReportModel) => { - this.reportDetails = res; - this.onSuccessParamsReport.emit(res); - }, - (err: any) => { - console.log(err); - this.onError.emit(err); - } - ); } - private retrieveParameterOptions(parameters: ReportParameterModel[], appId: string, reportId?: string, processDefinitionId?: string) { - parameters.forEach((param) => { - this.analyticsService.getParamValuesByType(param.type, appId, reportId, processDefinitionId).subscribe( - (opts: ParameterValueModel[]) => { - param.options = opts; - this.onSuccessParamOpt.emit(opts); - }, - (err: any) => { - console.log(err); - this.onError.emit(err); - } - ); - }); - } - - public showReport() { - this.analyticsService.getReportsByParams(this.reportDetails.id, this.reportParamQuery).subscribe( + public showReport($event) { + this.reportParamQuery = $event; + this.analyticsService.getReportsByParams(this.reportId, this.reportParamQuery).subscribe( (res: Chart[]) => { this.reports = res; this.onShowReport.emit(res); @@ -153,65 +79,9 @@ export class AnalyticsComponent implements OnInit, OnChanges { ); } - onNumberChanges(field: any) { - this.reset(); - this.reportParamQuery.slowProcessInstanceInteger = parseInt(field.value, 10); - } - - onDurationChanges(field: any) { - this.reset(); - if (field && field.value) { - this.reportParamQuery.duration = parseInt(field.value, 10); - } - } - - onTypeFilteringChanges(field: any) { - this.reset(); - this.reportParamQuery.typeFiltering = field.value; - } - - onStatusChanges(field: any) { - this.reset(); - this.reportParamQuery.status = field.value; - } - - onProcessDefinitionChanges(field: any) { - this.reset(); - if (field.value) { - this.reportParamQuery.processDefinitionId = field.value; - this.onDropdownChanged.emit(field); - } - } - - onTaskChanges(field: any) { - this.reset(); - this.reportParamQuery.taskName = field.value; - } - - onDateRangeChange(dateRange: any) { - this.reset(); - this.reportParamQuery.dateRange.startDate = dateRange.startDate; - this.reportParamQuery.dateRange.endDate = dateRange.endDate; - } - - onDateRangeIntervalChange(field: any) { - this.reset(); - this.reportParamQuery.dateRangeInterval = field.value; - } - public reset() { - this.reports = null; - } - - public convertNumber(value: string): number { - return parseInt(value, 10); - } - - ngOnDestroy() { - this.dropDownSub.unsubscribe(); - this.paramOpts.unsubscribe(); - if (this.paramsReportSub) { - this.paramsReportSub.unsubscribe(); + if (this.reports) { + this.reports = undefined; } } } 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 bade2bc528..ded990cf99 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,6 +1,6 @@
- + Start date must be less than End date
@@ -12,7 +12,7 @@ (onOk)="onOkStart(startElement)" id="startDateInput" #startElement> - + Start is required
@@ -40,9 +40,9 @@
-

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 }}

+

FormGroup : {{dateRange && dateRange.value | json }}

+

FormGroup valid : {{dateRange && dateRange.valid }}

+

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

+

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

+

FormGroup end status: {{dateRange && 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 6dcbcf9513..732c311879 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 @@ -144,4 +144,8 @@ 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'; } + + ngOnDestroy() { + + } } 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 3cad3a1852..8ab003b892 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,8 +1,8 @@ -
+
- +
\ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts index ce798550ca..4e9450b361 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts @@ -16,6 +16,7 @@ */ import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { FormGroup, Validators } from '@angular/forms'; import { WidgetComponent } from './../widget.component'; @Component({ @@ -29,16 +30,31 @@ export class DropdownWidget extends WidgetComponent { @Input() field: any; + @Input('group') + public formGroup: FormGroup; + + @Input('controllerName') + public controllerName: string; + @Output() fieldChanged: EventEmitter = new EventEmitter(); @Input() showDefaultOption: boolean = true; + @Input() + required: boolean = false; + @Input() defaultOptionText: string = 'Choose One'; constructor() { super(); } + + ngOnInit() { + if (this.required) { + this.formGroup.get(this.controllerName).setValidators(Validators.required); + } + } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html index 629574bd09..0a3668f160 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html @@ -13,7 +13,8 @@
-
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts index 19a74feca7..0f1e2efbf0 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts @@ -15,9 +15,10 @@ * limitations under the License. */ -import { Component, ElementRef, OnInit } from '@angular/core'; +import { Component, ElementRef, OnInit, Input } from '@angular/core'; import { NumberWidget } from './../number/number.widget'; -import { ReportParameterModel, ParameterValueModel } from './../../../models/report.model'; +import { ReportParameterDetailsModel, ParameterValueModel } from './../../../models/report.model'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ moduleId: module.id, @@ -26,14 +27,35 @@ import { ReportParameterModel, ParameterValueModel } from './../../../models/rep styleUrls: ['./duration.widget.css'] }) export class DurationWidget extends NumberWidget implements OnInit { - duration: ReportParameterModel; + + @Input() + field: any; + + @Input('group') + public formGroup: FormGroup; + + @Input('controllerName') + public controllerName: string; + + @Input() + required: boolean = false; + + duration: ReportParameterDetailsModel; currentValue: number; + public selectionGroup: FormGroup; + constructor(public elementRef: ElementRef) { super(elementRef); } ngOnInit() { + let timeType = new FormControl(); + this.formGroup.addControl('timeType', timeType); + + if (this.required) { + this.formGroup.get(this.controllerName).setValidators(Validators.required); + } if (this.field.value === null) { this.field.value = 0; } @@ -44,13 +66,14 @@ export class DurationWidget extends NumberWidget implements OnInit { paramOptions.push(new ParameterValueModel({id: '3600', name: 'Hours'})); paramOptions.push(new ParameterValueModel({id: '86400', name: 'Days', selected: true})); - this.duration = new ReportParameterModel({id: 'duration', name: 'duration', options: paramOptions}); + this.duration = new ReportParameterDetailsModel({id: 'duration', name: 'duration', options: paramOptions}); this.duration.value = paramOptions[0].id; } public calculateDuration() { if (this.field && this.duration.value ) { this.currentValue = parseInt(this.field.value, 10) * parseInt(this.duration.value, 10); + this.formGroup.get(this.controllerName).setValue(this.currentValue); this.fieldChanged.emit({value: this.currentValue}); } } diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html index babd53fc39..8219909603 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html +++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html @@ -1,5 +1,5 @@ -
- + { - let reportParamsModel = new ReportParameterModel(params); + let reportParamsModel = new ReportParameterDetailsModel(params); this.parameters.push(reportParamsModel); }); } - findParam(name: string): ReportParameterModel { + findParam(name: string): ReportParameterDetailsModel { this.parameters.forEach((param) => { return param.type === name ? param : null; }); @@ -65,9 +65,9 @@ export class ReportParametersModel { * This object represent the report parameter definition. * * - * @returns {ReportParameterModel} . + * @returns {ReportParameterDetailsModel} . */ -export class ReportParameterModel { +export class ReportParameterDetailsModel { id: string; name: string; nameKey: string; diff --git a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts index fbef18f7ee..5025e14d6f 100644 --- a/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts +++ b/ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts @@ -19,7 +19,7 @@ import { Injectable } from '@angular/core'; import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; import { Observable } from 'rxjs/Rx'; import { Response, Http, Headers, RequestOptions, URLSearchParams } from '@angular/http'; -import { ReportModel, ParameterValueModel } from '../models/report.model'; +import { ReportParametersModel, ParameterValueModel } from '../models/report.model'; import { Chart, PieChart, TableChart, BarChart } from '../models/chart.model'; @Injectable() @@ -40,10 +40,10 @@ export class AnalyticsService { return this.http .get(url, options) .map((res: any) => { - let reports: ReportModel[] = []; + let reports: ReportParametersModel[] = []; let body = res.json(); - body.forEach((report: ReportModel) => { - let reportModel = new ReportModel(report); + body.forEach((report: ReportParametersModel) => { + let reportModel = new ReportParametersModel(report); reports.push(reportModel); }); if (body && body.length === 0) { @@ -53,14 +53,14 @@ export class AnalyticsService { }).catch(this.handleError); } - getParamsReports(reportId: string): Observable { + getReportParams(reportId: string): Observable { let url = `${this.alfrescoSettingsService.getBPMApiBaseUrl()}/app/rest/reporting/report-params/${reportId}`; let options = this.getRequestOptions(); return this.http .get(url, options) .map((res: any) => { let body = res.json(); - return new ReportModel(body); + return new ReportParametersModel(body); }).catch(this.handleError); } @@ -183,8 +183,8 @@ export class AnalyticsService { }).catch(this.handleError); } - public createDefaultReports(): ReportModel[] { - let reports: ReportModel[] = []; + public createDefaultReports(): ReportParametersModel[] { + let reports: ReportParametersModel[] = []; return reports; } From 795d35059df597d953681dbfdd4ad21a60a0359a Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Fri, 14 Oct 2016 09:27:59 +0100 Subject: [PATCH 2/5] Split mock in different files --- .../src/assets/analyticsComponent.mock.ts | 158 ------------------ .../analyticsParamsReportComponent.mock.ts | 127 ++++++++++++++ ...lytics-report-parameters.component.spec.ts | 30 ++-- 3 files changed, 142 insertions(+), 173 deletions(-) create mode 100644 ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts index 6213205550..79b185cf0f 100644 --- a/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts +++ b/ng2-components/ng2-activiti-analytics/src/assets/analyticsComponent.mock.ts @@ -15,109 +15,6 @@ * limitations under the License. */ -import { ReportParameterDetailsModel } from '../models/report.model'; - -export var reportDefParamStatus = { - 'id': 2005, - 'name': 'Fake Task overview status', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters" :[{"id":"status","name":null,"nameKey":null,"type":"status","value":null,"dependsOn":null}]}' -}; - -export var reportDefParamNumber = { - 'id': 2005, - 'name': 'Fake Process instances overview', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters"' + - ' :[{"id":"slowProcessInstanceInteger","name":null,"nameKey":null,"type":"integer","value":10,"dependsOn":null}]}' -}; - -export var reportDefParamDuration = { - 'id': 2005, - 'name': 'Fake Task service level agreement', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters"' + - ' :[{"id":"duration","name":null,"nameKey":null,"type":"duration","value":null,"dependsOn":null}]}' -}; - -export var reportDefParamCheck = { - 'id': 2005, - 'name': 'Fake Task service level agreement', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters"' + - ' :[{"id":"typeFiltering","name":null,"nameKey":null,"type":"boolean","value":true,"dependsOn":null}]}' -}; - -export var reportDefParamDateRange = { - 'id': 2005, - 'name': 'Fake Process instances overview', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters" :[{"id":"dateRange","name":null,"nameKey":null,"type":"dateRange","value":null,"dependsOn":null}]}' -}; - -export var reportDefParamRangeInterval = { - 'id': 2006, - 'name': 'Fake Task overview RangeInterval', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters" :[{"id":"dateRangeInterval","name":null,"nameKey":null,"type":"dateInterval","value":null,"dependsOn":null}]}' -}; - -export var reportDefParamProcessDef = { - 'id': 2006, - 'name': 'Fake Task overview ProcessDefinition', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters" :[{"id":"processDefinitionId","name":null,"nameKey":null,"type":"processDefinition","value":null,"dependsOn":null}]}' -}; - -export var reportDefParamProcessDefOptions = { - 'size': 4, 'total': 4, 'start': 0, 'data': [ - { - 'id': 'FakeProcessTest 1:1:1', - 'name': 'Fake Process Test 1 Name ', - 'version': 1 - }, - { - 'id': 'FakeProcessTest 1:2:1', - 'name': 'Fake Process Test 1 Name ', - 'version': 2 - }, - { - 'id': 'FakeProcessTest 2:1:1', - 'name': 'Fake Process Test 2 Name ', - 'version': 1 - }, - { - 'id': 'FakeProcessTest 3:1:1', - 'name': 'Fake Process Test 3 Name ', - 'version': 1 - } - ] -}; - -export var reportDefParamProcessDefOptionsApp = { - 'size': 2, 'total': 2, 'start': 2, 'data': [ - { - 'id': 'FakeProcessTest 1:1:1', - 'name': 'Fake Process Test 1 Name ', - 'version': 1 - }, - { - 'id': 'FakeProcessTest 1:2:1', - 'name': 'Fake Process Test 1 Name ', - 'version': 2 - } - ] -}; - -export var reportDefParamTask = { - 'id': 2006, - 'name': 'Fake Task service level agreement', - 'created': '2016-10-05T15:39:40.222+0000', - 'definition': '{ "parameters" :[{"id":"taskName","name":null,"nameKey":null,"type":"task","value":null,"dependsOn":"processDefinitionId"}]}' -}; - -export var reportDefParamTaskOptions = ['Fake task name 1', 'Fake task name 2']; - export var chartProcessDefOverview = { 'elements': [{ 'id': 'id1585876275153', @@ -198,58 +95,3 @@ export var chartTaskOverview = { ] }] }; - -export var fieldNumber = new ReportParameterDetailsModel( - { - id: 'slowProcessInstanceInteger', - type: 'integer', - value: '102' - } -); - -export var fieldStatus = new ReportParameterDetailsModel( - { - id: 'status', - type: 'status', - value: 'fake-value' - } -); - -export var fieldTypeFiltering = new ReportParameterDetailsModel( - { - id: 'typeFiltering', - type: 'boolean', - value: false - } -); - -export var fieldTask = new ReportParameterDetailsModel( - { - id: 'taskName', - type: 'task', - value: 'fake-task-name' - } -); - -export var fieldDateRange = { - startDate: '2016-10-12T00:00:00.000Z', - endDate: '2016-10-14T00:00:00.000Z' -}; - -export var fieldDateRangeInterval = new ReportParameterDetailsModel( - { - id: 'dateRangeInterval', - type: 'dateInterval', - value: 'fake-date-interval' - } -); - -export var fieldProcessDef = new ReportParameterDetailsModel( - { - id: 'processDefinitionId', - type: 'processDefinition', - value: 'fake-process-name:1:15027' - } -); - -export var fieldDuration = {value: 30}; diff --git a/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts b/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts new file mode 100644 index 0000000000..626996af3b --- /dev/null +++ b/ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts @@ -0,0 +1,127 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ReportParameterDetailsModel } from '../models/report.model'; + +export var reportDefParamStatus = { + 'id': 2005, + 'name': 'Fake Task overview status', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters" :[{"id":"status","name":null,"nameKey":null,"type":"status","value":null,"dependsOn":null}]}' +}; + +export var reportDefParamNumber = { + 'id': 2005, + 'name': 'Fake Process instances overview', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters"' + + ' :[{"id":"slowProcessInstanceInteger","name":null,"nameKey":null,"type":"integer","value":10,"dependsOn":null}]}' +}; + +export var reportDefParamDuration = { + 'id': 2005, + 'name': 'Fake Task service level agreement', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters"' + + ' :[{"id":"duration","name":null,"nameKey":null,"type":"duration","value":null,"dependsOn":null}]}' +}; + +export var reportDefParamCheck = { + 'id': 2005, + 'name': 'Fake Task service level agreement', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters"' + + ' :[{"id":"typeFiltering","name":null,"nameKey":null,"type":"boolean","value":true,"dependsOn":null}]}' +}; + +export var reportDefParamDateRange = { + 'id': 2005, + 'name': 'Fake Process instances overview', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters" :[{"id":"dateRange","name":null,"nameKey":null,"type":"dateRange","value":null,"dependsOn":null}]}' +}; + +export var reportDefParamRangeInterval = { + 'id': 2006, + 'name': 'Fake Task overview RangeInterval', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters" :[{"id":"dateRangeInterval","name":null,"nameKey":null,"type":"dateInterval","value":null,"dependsOn":null}]}' +}; + +export var reportDefParamProcessDef = { + 'id': 2006, + 'name': 'Fake Task overview ProcessDefinition', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters" :[{"id":"processDefinitionId","name":null,"nameKey":null,"type":"processDefinition","value":null,"dependsOn":null}]}' +}; + +export var reportDefParamProcessDefOptions = { + 'size': 4, 'total': 4, 'start': 0, 'data': [ + { + 'id': 'FakeProcessTest 1:1:1', + 'name': 'Fake Process Test 1 Name ', + 'version': 1 + }, + { + 'id': 'FakeProcessTest 1:2:1', + 'name': 'Fake Process Test 1 Name ', + 'version': 2 + }, + { + 'id': 'FakeProcessTest 2:1:1', + 'name': 'Fake Process Test 2 Name ', + 'version': 1 + }, + { + 'id': 'FakeProcessTest 3:1:1', + 'name': 'Fake Process Test 3 Name ', + 'version': 1 + } + ] +}; + +export var reportDefParamProcessDefOptionsApp = { + 'size': 2, 'total': 2, 'start': 2, 'data': [ + { + 'id': 'FakeProcessTest 1:1:1', + 'name': 'Fake Process Test 1 Name ', + 'version': 1 + }, + { + 'id': 'FakeProcessTest 1:2:1', + 'name': 'Fake Process Test 1 Name ', + 'version': 2 + } + ] +}; + +export var reportDefParamTask = { + 'id': 2006, + 'name': 'Fake Task service level agreement', + 'created': '2016-10-05T15:39:40.222+0000', + 'definition': '{ "parameters" :[{"id":"taskName","name":null,"nameKey":null,"type":"task","value":null,"dependsOn":"processDefinitionId"}]}' +}; + +export var reportDefParamTaskOptions = ['Fake task name 1', 'Fake task name 2']; + +export var fieldProcessDef = new ReportParameterDetailsModel( + { + id: 'processDefinitionId', + type: 'processDefinition', + value: 'fake-process-name:1:15027' + } +); 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 f2b37c730f..5dfbcadd24 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 @@ -30,7 +30,7 @@ import { AnalyticsService } from '../services/analytics.service'; import { ReportParametersModel } from '../models/report.model'; import * as moment from 'moment'; import { DebugElement, SimpleChange } from '@angular/core'; -import * as analyticMock from '../assets/analyticsComponent.mock'; +import * as analyticParamsMock from '../assets/analyticsParamsReportComponent.mock'; export const ANALYTICS_DIRECTIVES: any[] = [ AnalyticsComponent, @@ -117,7 +117,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamStatus + responseText: analyticParamsMock.reportDefParamStatus }); }); @@ -137,7 +137,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamNumber + responseText: analyticParamsMock.reportDefParamNumber }); }); @@ -164,7 +164,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamDuration + responseText: analyticParamsMock.reportDefParamDuration }); }); @@ -221,7 +221,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamCheck + responseText: analyticParamsMock.reportDefParamCheck }); }); @@ -245,7 +245,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamDateRange + responseText: analyticParamsMock.reportDefParamDateRange }); }); @@ -270,7 +270,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamRangeInterval + responseText: analyticParamsMock.reportDefParamRangeInterval }); }); @@ -296,13 +296,13 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.first().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamProcessDef + responseText: analyticParamsMock.reportDefParamProcessDef }); jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamProcessDefOptions + responseText: analyticParamsMock.reportDefParamProcessDefOptions }); }); @@ -327,13 +327,13 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.first().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamProcessDef + responseText: analyticParamsMock.reportDefParamProcessDef }); jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamProcessDefOptionsApp + responseText: analyticParamsMock.reportDefParamProcessDefOptionsApp }); }); @@ -348,13 +348,13 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { }); component.reportId = 100; - component.reportParameters = new ReportParametersModel(analyticMock.reportDefParamTask); - component.onProcessDefinitionChanges(analyticMock.fieldProcessDef); + component.reportParameters = new ReportParametersModel(analyticParamsMock.reportDefParamTask); + component.onProcessDefinitionChanges(analyticParamsMock.fieldProcessDef); jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamTaskOptions + responseText: analyticParamsMock.reportDefParamTaskOptions }); }); @@ -371,7 +371,7 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { jasmine.Ajax.requests.first().respondWith({ status: 200, contentType: 'json', - responseText: analyticMock.reportDefParamProcessDef + responseText: analyticParamsMock.reportDefParamProcessDef }); jasmine.Ajax.requests.mostRecent().respondWith({ From a8896a11ef1a87bfebfbc4680975b5bea0511f5c Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Fri, 14 Oct 2016 12:43:09 +0100 Subject: [PATCH 3/5] Add No data found message --- .../activiti/activiti-demo.component.html | 2 +- ...analytics-report-parameters.component.html | 12 ++--- ...lytics-report-parameters.component.spec.ts | 11 +++-- .../analytics-report-parameters.component.ts | 44 ++++++++++------- .../src/components/analytics.component.html | 47 +++++++++++-------- .../widgets/date-range/date-range.widget.html | 2 +- .../src/models/chart.model.ts | 29 ++++++++++-- 7 files changed, 93 insertions(+), 54 deletions(-) diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index eb25883a76..92170512ed 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -5,7 +5,7 @@ APPS TASK LIST PROCESS LIST - REPORT + ANALYTICS
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html index d6aaf29e1b..2322623fad 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html @@ -6,7 +6,7 @@

-
@@ -30,7 +30,7 @@

-
@@ -39,7 +39,7 @@

-
@@ -47,14 +47,10 @@
-

-

ReportForm valid : {{ reportForm.valid }}

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

-

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

+

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

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 5dfbcadd24..afd6c03fee 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 @@ -191,16 +191,16 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { processDefinitionId: 'FakeProcess:1:22' }, taskGroup: { - task: 'FakeTaskName' + taskName: 'FakeTaskName' }, durationGroup: { duration: 22 }, dateIntervalGroup: { - dateInterval: 120 + dateRangeInterval: 120 }, processInstanceGroup: { - processInstance: 2 + slowProcessInstanceInteger: 2 } }; component.submit(values); @@ -398,4 +398,9 @@ describe('Test ng2-analytics-report-parameters Report Parameters ', () => { }); }); }); + + it('Should convert a string in number', () => { + let numberConvert = component.convertNumber('2'); + expect(numberConvert).toEqual(2); + }); }); 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 633cbbf25c..22de0b3f9c 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 @@ -55,8 +55,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { reportParameters: ReportParametersModel; - reportParamQuery = new ReportQuery(); - reportForm: FormGroup; debug: boolean = false; @@ -93,7 +91,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { } ngOnChanges(changes: SimpleChanges) { - this.initForm(); let reportId = changes['reportId']; if (reportId && reportId.currentValue) { this.getReportParams(reportId.currentValue); @@ -112,13 +109,13 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { status: new FormControl() }), processInstanceGroup: new FormGroup({ - processInstance: new FormControl() + slowProcessInstanceInteger: new FormControl() }), taskGroup: new FormGroup({ - task: new FormControl() + taskName: new FormControl() }), dateIntervalGroup: new FormGroup({ - dateInterval: new FormControl() + dateRangeInterval: new FormControl() }), durationGroup: new FormGroup({ duration: new FormControl() @@ -164,19 +161,15 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { } public submit(values: any) { - this.reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate); - this.reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate); - this.reportParamQuery.status = values.statusGroup.status; - this.reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId; - this.reportParamQuery.taskName = values.taskGroup.task; - this.reportParamQuery.duration = values.durationGroup.duration; - this.reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateInterval; - this.reportParamQuery.slowProcessInstanceInteger = values.processInstanceGroup.processInstance; - this.onSuccess.emit(this.reportParamQuery); + let reportParamQuery = this.convertFormValuesToReportParamQuery(values); + this.onSuccess.emit(reportParamQuery); } - onValueChanged(data: any) { - this.onFormValueChanged.emit(data); + onValueChanged(values: any) { + this.onFormValueChanged.emit(values); + if (this.reportForm && this.reportForm.valid) { + this.submit(values); + } } public convertMomentDate(date: string) { @@ -184,6 +177,23 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { .format(AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z'; } + public convertNumber(value: string): number { + return parseInt(value, 10); + } + + convertFormValuesToReportParamQuery(values: any): ReportQuery { + let reportParamQuery: ReportQuery = new ReportQuery(); + reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate); + reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate); + reportParamQuery.status = values.statusGroup.status; + reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId; + reportParamQuery.taskName = values.taskGroup.taskName; + reportParamQuery.duration = values.durationGroup.duration; + reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateRangeInterval; + reportParamQuery.slowProcessInstanceInteger = this.convertNumber(values.processInstanceGroup.slowProcessInstanceInteger); + return reportParamQuery; + } + ngOnDestroy() { this.dropDownSub.unsubscribe(); this.paramOpts.unsubscribe(); 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 74697003b5..492fa7f0c0 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -8,38 +8,43 @@
- No data found
+
-
- - - - - - - -
{{label | translate}}
{{row | translate }}
+
No data found
+
+ + + + + + + +
{{label | translate}}
{{row | translate }}
- - - - - - - -
{{label | translate}}
{{row | translate }}
+
No data found
+
+ + + + + + + +
{{label | translate}}
{{row | translate }}
+
- No data found
+
+


+
Fill in the parameters to generate your report
\ 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 ded990cf99..e6b3c60e37 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 @@ -43,6 +43,6 @@

FormGroup : {{dateRange && dateRange.value | json }}

FormGroup valid : {{dateRange && dateRange.valid }}

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

-

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

+

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

FormGroup end status: {{dateRange && dateRange.controls.endDate.errors | json }}

\ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts b/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts index 00599d3221..3f61139a4f 100644 --- a/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts +++ b/ng2-components/ng2-activiti-analytics/src/models/chart.model.ts @@ -99,10 +99,15 @@ export class BarChart extends Chart { } }); }); - this.datasets.push({data: dataValue, label: params.key}); - + if (dataValue && dataValue.length > 0) { + this.datasets.push({data: dataValue, label: params.key}); + } }); } + + hasDatasets() { + return this.datasets && this.datasets.length > 0 ? true : false; + } } export class TableChart extends Chart { @@ -116,7 +121,13 @@ export class TableChart extends Chart { this.title = obj && obj.title || null; this.titleKey = obj && obj.titleKey || null; this.labels = obj && obj.columnNames; - this.datasets = obj && obj.rows; + if (obj.rows) { + this.datasets = obj && obj.rows; + } + } + + hasDatasets() { + return this.datasets && this.datasets.length > 0 ? true : false; } } @@ -131,7 +142,13 @@ export class HeatMapChart extends Chart { this.title = obj && obj.title || null; this.titleKey = obj && obj.titleKey || null; this.labels = obj && obj.columnNames; - this.datasets = obj && obj.rows; + if (obj.rows) { + this.datasets = obj && obj.rows; + } + } + + hasDatasets() { + return this.datasets && this.datasets.length > 0 ? true : false; } } @@ -156,4 +173,8 @@ export class PieChart extends Chart { this.labels.push(label); this.data.push(data); } + + hasData() { + return this.data && this.data.length > 0 ? true : false; + } } From 71094181ce20af6177bd2c378a41fd529d29595f Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Fri, 14 Oct 2016 15:27:58 +0100 Subject: [PATCH 4/5] Fix translation --- .../analytics-report-parameters.component.html | 2 +- .../src/components/analytics.component.html | 12 ++++++------ .../ng2-activiti-analytics/src/i18n/en.json | 7 ++++++- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html index 2322623fad..bc98145dee 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html @@ -43,7 +43,7 @@ [required]="true" [showDefaultOption]="false">
- UNKNOWN WIDGET TYPE: {{field.type}} + {{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}
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 492fa7f0c0..403632310c 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html @@ -8,7 +8,7 @@
-
No data found
+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
-
No data found
+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
@@ -29,7 +29,7 @@
-
No data found
+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
@@ -43,7 +43,7 @@
-
No data found
+
{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}
- UNKNOWN WIDGET TYPE: {{report.type}} + {{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}



-
Fill in the parameters to generate your report
+
{{'ANALYTICS.MESSAGES.FILL-PARAMETER' | translate}}
\ No newline at end of file diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/en.json b/ng2-components/ng2-activiti-analytics/src/i18n/en.json index fd01ebcd42..1dce1a9c60 100644 --- a/ng2-components/ng2-activiti-analytics/src/i18n/en.json +++ b/ng2-components/ng2-activiti-analytics/src/i18n/en.json @@ -1,6 +1,11 @@ { "ANALYTICS": { - "TTILE": "ANALYTICS" + "TTILE": "ANALYTICS", + "MESSAGES": { + "UNKNOWN-WIDGET-TYPE": "UNKNOWN WIDGET TYPE", + "FILL-PARAMETER": "Fill in the parameters to generate your report", + "NO-DATA-FOUND": "No data found" + } }, "__KEY_REPORTING": { "DEFAULT-REPORTS": { From 01404b16b46273e9d1b1142b3d179f37f715ec25 Mon Sep 17 00:00:00 2001 From: mauriziovitale84 Date: Fri, 14 Oct 2016 16:27:05 +0100 Subject: [PATCH 5/5] Provide debug property as public API --- .../src/components/analytics-report-parameters.component.ts | 5 +++-- .../src/components/analytics.component.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) 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 22de0b3f9c..993d2121cf 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 @@ -38,6 +38,9 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { @Input() reportId: string; + @Input() + debug: boolean = false; + @Output() onSuccess = new EventEmitter(); @@ -57,8 +60,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges { reportForm: FormGroup; - debug: boolean = false; - private dropDownSub; private reportParamsSub; private paramOpts; 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 af92e42665..b1ba8da484 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts @@ -35,6 +35,9 @@ export class AnalyticsComponent implements OnInit, OnChanges { @Input() reportId: number; + @Input() + debug: boolean = false; + @Output() onSuccess = new EventEmitter(); @@ -48,8 +51,6 @@ export class AnalyticsComponent implements OnInit, OnChanges { reports: any[]; - debug: boolean = false; - constructor(private translate: AlfrescoTranslationService, private analyticsService: AnalyticsService) { console.log('AnalyticsComponent');