mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +00:00
Slit component in analitycs-param-report
Improve the form validation Fix the reset reports on change params
This commit is contained in:
mauriziovitale84
parent
7a4bb0aec9
commit
eb3583e7f5
@ -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
|
||||
];
|
||||
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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<ReportModel> = new EventEmitter<ReportModel>();
|
||||
reportClick: EventEmitter<ReportParametersModel> = new EventEmitter<ReportParametersModel>();
|
||||
|
||||
@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<ReportModel>(observer => this.reportObserver = observer).share();
|
||||
this.report$ = new Observable<ReportParametersModel>(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);
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="reportParameters">
|
||||
<form [formGroup]="reportForm" novalidate>
|
||||
<h1>{{reportParameters.name}}</h1>
|
||||
<div *ngFor="let field of reportParameters.definition.parameters">
|
||||
<div [ngSwitch]="field.type">
|
||||
<div *ngSwitchCase="'integer'">
|
||||
<br>
|
||||
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'processInstance'"
|
||||
[required]="true"></number-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'duration'">
|
||||
<br>
|
||||
<duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
|
||||
[controllerName]="'duration'"></duration-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'boolean'">
|
||||
<br>
|
||||
<checkbox-widget [field]="field"></checkbox-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'status'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" [controllerName]="'status'"
|
||||
[required]="true"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'processDefinition'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'"
|
||||
[required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'task'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'task'"
|
||||
[required]="true"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'dateRange'">
|
||||
<br>
|
||||
<date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></date-range-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'dateInterval'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateInterval'"
|
||||
[required]="true" [showDefaultOption]="false"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchDefault>
|
||||
<span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<button type="submit" [disabled]="!reportForm.valid" class="mdl-button mdl-js-button mdl-button--fab" (click)="submit(reportForm.value)" >
|
||||
<i class="material-icons">refresh</i>
|
||||
</button>
|
||||
<div *ngIf="debug">
|
||||
<p>ReportForm valid : {{ reportForm.valid }}</p>
|
||||
<p>ReportForm status : {{ reportForm.errors | json }}</p>
|
||||
<p>ReportForm FormGroup valid : {{reportForm.controls.dateRange.valid | json }}</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -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<AnalyticsReportParametersComponent>;
|
||||
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: []
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,65 +1,8 @@
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="reportDetails">
|
||||
<form [formGroup]="reportForm" novalidate>
|
||||
<h1>{{reportDetails.name}}</h1>
|
||||
<div *ngFor="let field of reportDetails.definition.parameters">
|
||||
<div [ngSwitch]="field.type">
|
||||
<div *ngSwitchCase="'integer'">
|
||||
<br>
|
||||
<number-widget [field]="field"
|
||||
(fieldChanged)="onNumberChanges(field)"></number-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'duration'">
|
||||
<br>
|
||||
<duration-widget [field]="field"
|
||||
(fieldChanged)="onDurationChanges($event)"></duration-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'boolean'">
|
||||
<br>
|
||||
<checkbox-widget [field]="field"
|
||||
(fieldChanged)="onTypeFilteringChanges(field)"></checkbox-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'status'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field"
|
||||
(fieldChanged)="onStatusChanges(field)"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'processDefinition'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field"
|
||||
(fieldChanged)="onProcessDefinitionChanges(field)" #processDefinition></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'task'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field"
|
||||
(fieldChanged)="onTaskChanges(field)"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'dateRange'">
|
||||
<br>
|
||||
<date-range-widget [field]="field" [group]="reportForm.controls.dateRange"
|
||||
(dateRangeChanged)="onDateRangeChange($event)"></date-range-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'dateInterval'">
|
||||
<br>
|
||||
<dropdown-widget [field]="field" [showDefaultOption]="false"
|
||||
(fieldChanged)="onDateRangeIntervalChange(field)"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchDefault>
|
||||
<span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<button type="submit" class="mdl-button mdl-js-button mdl-button--fab" (click)="showReport()" >
|
||||
<i class="material-icons">refresh</i>
|
||||
</button>
|
||||
<div *ngIf="debug">
|
||||
<p>ReportForm valid : {{ reportForm.valid }}</p>
|
||||
<p>ReportForm status : {{ reportForm.errors | json }}</p>
|
||||
<p>ReportForm FormGroup valid : {{ reportForm.controls.dateRange.valid | json }}</p>
|
||||
</div>
|
||||
</form>
|
||||
<analytics-report-parameters [appId]="appId" [reportId]="reportId"
|
||||
(onFormValueChanged)="reset()" (onSuccess)="showReport($event)"></analytics-report-parameters>
|
||||
|
||||
<div *ngIf="reports">
|
||||
<div *ngFor="let report of reports">
|
||||
<h2>{{report.title}}</h2>
|
||||
<div [ngSwitch]="report.type">
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<label>{{field.nameKey | translate}}</label><br>
|
||||
<div [formGroup]="dateRange">
|
||||
<small *ngIf="dateRange.errors && dateRange.errors.greaterThan" [hidden]="!dateRange.errors" class="text-danger">
|
||||
<small *ngIf="dateRange && dateRange.errors && dateRange.errors.greaterThan" [hidden]="!dateRange.errors" class="text-danger">
|
||||
Start date must be less than End date
|
||||
</small>
|
||||
<div class="mdl-grid">
|
||||
@ -12,7 +12,7 @@
|
||||
(onOk)="onOkStart(startElement)"
|
||||
id="startDateInput" #startElement>
|
||||
<label class="mdl-textfield__label" for="startDateInput">Start Date</label>
|
||||
<small [hidden]="dateRange.controls.startDate.valid" class="text-danger">
|
||||
<small [hidden]="dateRange && dateRange.controls.startDate && dateRange.controls.startDate.valid" class="text-danger">
|
||||
Start is required
|
||||
</small>
|
||||
</div>
|
||||
@ -40,9 +40,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="debug">
|
||||
<p>FormGroup : {{ dateRange.value | json }}</p>
|
||||
<p>FormGroup valid : {{ dateRange.valid }}</p>
|
||||
<p>FormGroup status : {{ dateRange.errors | json }}</p>
|
||||
<p>FormGroup start status : {{ dateRange.controls.startDate.errors | json }}</p>
|
||||
<p>FormGroup end status: {{ dateRange.controls.endDate.errors | json }}</p>
|
||||
<p>FormGroup : {{dateRange && dateRange.value | json }}</p>
|
||||
<p>FormGroup valid : {{dateRange && dateRange.valid }}</p>
|
||||
<p>FormGroup status : {{dateRange && dateRange.errors | json }}</p>
|
||||
<p>FormGroup start status : {{dateRange && dateRange.controls.startDate.errors | json }}</p>
|
||||
<p>FormGroup end status: {{dateRange && dateRange.controls.endDate.errors | json }}</p>
|
||||
</div>
|
||||
@ -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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<div class="dropdown-widget">
|
||||
<div class="dropdown-widget" [formGroup]="formGroup">
|
||||
<label class="dropdown-widget__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
|
||||
<select [attr.id]="'select-' + field.id" class="dropdown-widget__select"
|
||||
[(ngModel)]="field.value" (ngModelChange)="changeValue($event)" required>
|
||||
<option *ngIf="showDefaultOption">{{defaultOptionText}}</option>
|
||||
<select [formControlName]="controllerName" [attr.id]="'select-' + field.id" class="dropdown-widget__select"
|
||||
[(ngModel)]="field.value" (ngModelChange)="changeValue($event)">
|
||||
<option *ngIf="showDefaultOption" value="">{{defaultOptionText}}</option>
|
||||
<option *ngFor="let opt of field.options" [value]="opt.id">{{opt.label}}</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -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<any> = new EventEmitter<any>();
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--6-col">
|
||||
<div style="margin-top: 30px">
|
||||
<dropdown-widget [field]="duration" [showDefaultOption]="false"
|
||||
<dropdown-widget [field]="duration" [group]="formGroup" [controllerName]="'timeType'"
|
||||
[showDefaultOption]="false"
|
||||
(fieldChanged)="calculateDuration()"></dropdown-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
|
||||
<input class="mdl-textfield__input"
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget" [formGroup]="formGroup">
|
||||
<input formControlName="{{controllerName}}" class="mdl-textfield__input"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
[attr.id]="field.id"
|
||||
|
||||
@ -15,8 +15,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, ElementRef } from '@angular/core';
|
||||
import { Component, ElementRef, Input } from '@angular/core';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
import { FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@ -26,10 +27,28 @@ import { WidgetComponent } from './../widget.component';
|
||||
})
|
||||
export class NumberWidget extends WidgetComponent {
|
||||
|
||||
@Input()
|
||||
field: any;
|
||||
|
||||
@Input('group')
|
||||
public formGroup: FormGroup;
|
||||
|
||||
@Input('controllerName')
|
||||
public controllerName: string;
|
||||
|
||||
@Input()
|
||||
required: boolean = false;
|
||||
|
||||
constructor(public elementRef: ElementRef) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.required) {
|
||||
this.formGroup.get(this.controllerName).setValidators(Validators.required);
|
||||
}
|
||||
}
|
||||
|
||||
setupMaterialComponents(handler: any): boolean {
|
||||
// workaround for MDL issues with dynamic components
|
||||
if (handler) {
|
||||
|
||||
@ -20,19 +20,19 @@
|
||||
* This object represent the report definition.
|
||||
*
|
||||
*
|
||||
* @returns {ReportModel} .
|
||||
* @returns {ReportParametersModel} .
|
||||
*/
|
||||
export class ReportModel {
|
||||
export class ReportParametersModel {
|
||||
id: number;
|
||||
name: string;
|
||||
definition: ReportParametersModel;
|
||||
definition: ReportDefinitionModel;
|
||||
created: string;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.id = obj && obj.id;
|
||||
this.name = obj && obj.name || null;
|
||||
if (obj && obj.definition) {
|
||||
this.definition = new ReportParametersModel(JSON.parse(obj.definition));
|
||||
this.definition = new ReportDefinitionModel(JSON.parse(obj.definition));
|
||||
}
|
||||
this.created = obj && obj.created || null;
|
||||
}
|
||||
@ -42,17 +42,17 @@ export class ReportModel {
|
||||
}
|
||||
}
|
||||
|
||||
export class ReportParametersModel {
|
||||
parameters: ReportParameterModel[] = [];
|
||||
export class ReportDefinitionModel {
|
||||
parameters: ReportParameterDetailsModel[] = [];
|
||||
|
||||
constructor(obj?: any) {
|
||||
obj.parameters.forEach((params: any) => {
|
||||
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;
|
||||
|
||||
@ -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<any> {
|
||||
getReportParams(reportId: string): Observable<any> {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user