mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
* #1184 - adding save export and delete to report * #1184 - added save button for report * #1184 - improved export file * 1184 - fix condition for save and export button * #1184 - added custom validator for dropdown to avoid wrong selection * #1184 -start fixing form model * #1184 - added dynamic build for formBuilder * #1184 - rebased to development * #1184 - little test refactoring * #1184 - added test and some fix * #1184 - added new events * #1184 - removed old changes to api service
This commit is contained in:
Vito
Mario Romano
@@ -251,6 +251,8 @@ platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
| --- | --- |
|
||||
|`onSuccess` | The event is emitted when the report parameters are loaded |
|
||||
|`onError` | The event is emitted when an error occur during the loading |
|
||||
|`reportSaved` | The event is emitted when a report is saved |
|
||||
|`reportDeleted` | The event is emitted when a report is deleted |
|
||||
|
||||
#### Options
|
||||
|
||||
|
||||
@@ -63,3 +63,29 @@
|
||||
.report-container-setting {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.option_button_details{
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.mdl-dialog__title.choose_name{
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mdl-dialog.options-name-dialog {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.export-message{
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.save-export-input{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.delete-parameter {
|
||||
position: absolute;
|
||||
margin-left: 60%;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="reportParameters">
|
||||
<form [formGroup]="reportForm" novalidate>
|
||||
<div *ngIf="isEditable">
|
||||
<input
|
||||
<div *ngIf="isEditable">
|
||||
<input
|
||||
type="text"
|
||||
class="mdl-textfield__input large"
|
||||
id="reportName"
|
||||
@@ -12,68 +12,109 @@
|
||||
[value]="reportParameters.name"
|
||||
(input)="reportParameters.name=$event.target.value"
|
||||
(blur)="editTitle($event)"
|
||||
/>
|
||||
</div>
|
||||
<div *ngIf="!isEditable">
|
||||
<button mdTooltip="{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button" style="float: right">
|
||||
<i class="material-icons">settings</i>
|
||||
/>
|
||||
</div>
|
||||
<div *ngIf="!isEditable">
|
||||
<button mdTooltip="{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button" style="float: right">
|
||||
<i class="material-icons">settings</i>
|
||||
</button>
|
||||
<div class="icon-small">
|
||||
<i class="material-icons">mode_edit</i>
|
||||
<h4 (click)="editEnable()">{{reportParameters.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button id="delete-button" (click)="deleteReport(reportId)" class="mdl-button mdl-js-button">
|
||||
Delete Report
|
||||
</button>
|
||||
<div class="icon-small">
|
||||
<i class="material-icons">mode_edit</i>
|
||||
<h4 (click)="editEnable()">{{reportParameters.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
|
||||
<div [ngSwitch]="field.type">
|
||||
<div *ngSwitchCase="'integer'">
|
||||
<br>
|
||||
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
|
||||
[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" [group]="reportForm.controls.typeFilteringGroup"
|
||||
[controllerName]="'typeFiltering'"></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]="'taskName'"
|
||||
[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]="'dateRangeInterval'"
|
||||
[required]="true" [showDefaultOption]="false"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchDefault>
|
||||
<span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
|
||||
<div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
|
||||
<div [ngSwitch]="field.type">
|
||||
<div *ngSwitchCase="'integer'">
|
||||
<br>
|
||||
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
|
||||
[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" [group]="reportForm.controls.typeFilteringGroup"
|
||||
[controllerName]="'typeFiltering'"></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]="'taskName'"
|
||||
[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]="'dateRangeInterval'"
|
||||
[required]="true" [showDefaultOption]="false"></dropdown-widget>
|
||||
</div>
|
||||
<div *ngSwitchDefault>
|
||||
<span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="debug">
|
||||
<p>ReportForm valid : {{ reportForm.valid }}</p>
|
||||
<p>ReportForm status : {{ reportForm.errors | json }}</p>
|
||||
<p>ReportForm FormGroup valid : {{reportForm && reportForm.controls.dateRange.valid | json }}</p>
|
||||
</div>
|
||||
<div *ngIf="isFormValid()">
|
||||
<div class="option_button_details">
|
||||
<button id="export-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect"
|
||||
(click)="showDialog('Export')">
|
||||
<span>
|
||||
Export to CSV <i class="material-icons">file_download</i>
|
||||
</span>
|
||||
</button>
|
||||
<button id="save-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect"
|
||||
(click)="showDialog('Save')">
|
||||
<span>
|
||||
Save <i class="material-icons">add</i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog>
|
||||
<h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5>
|
||||
<div class="mdl-dialog__content">
|
||||
<div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">{{'DIALOG.SAVE_MESSAGE' | translate}}</div>
|
||||
<div class="mdl-textfield mdl-js-textfield save-export-input">
|
||||
<label id="report-name-label" [attr.for]="repname">Report Name</label>
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
id="repName"
|
||||
[attr.value]="reportName"
|
||||
[(ngModel)]="reportName"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
placeholder="report name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" id="close-dialog-button" (click)="closeDialog()" class="mdl-button close">Close</button>
|
||||
<button type="button" id="action-dialog-button" (click)="performAction(action, reportParamQuery)"
|
||||
class="mdl-button close">{{action}}
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<div *ngIf="debug">
|
||||
<p>ReportForm valid : {{ reportForm.valid }}</p>
|
||||
<p>ReportForm status : {{ reportForm.errors | json }}</p>
|
||||
<p>ReportForm FormGroup valid : {{reportForm && reportForm.controls.dateRange.valid | json }}</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,9 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
|
||||
let translateService = TestBed.get(AlfrescoTranslationService);
|
||||
spyOn(translateService, 'addTranslationFolder').and.stub();
|
||||
spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
|
||||
spyOn(translateService, 'get').and.callFake((key) => {
|
||||
return Observable.of(key);
|
||||
});
|
||||
|
||||
componentHandler = jasmine.createSpyObj('componentHandler', [
|
||||
'upgradeAllRegistered'
|
||||
@@ -80,17 +82,22 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
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 initialize the Report form with a Form Group ', (done) => {
|
||||
let fakeReportParam = new ReportParametersModel(analyticParamsMock.reportDefParamTask);
|
||||
component.onSuccessReportParams.subscribe(() => {
|
||||
fixture.detectChanges();
|
||||
expect(component.reportForm.get('taskGroup')).toBeDefined();
|
||||
expect(component.reportForm.get('taskGroup').get('taskName')).toBeDefined();
|
||||
done();
|
||||
});
|
||||
component.onSuccessReportParams.emit(fakeReportParam);
|
||||
});
|
||||
|
||||
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('h4').innerHTML).toEqual('Fake Task overview status');
|
||||
expect(element.querySelector('h4').textContent.trim()).toEqual('Fake Task overview status');
|
||||
expect(dropDown).toBeDefined();
|
||||
expect(dropDown.length).toEqual(4);
|
||||
expect(dropDown[0].innerHTML).toEqual('Choose One');
|
||||
@@ -400,5 +407,148 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
let numberConvert = component.convertNumber('2');
|
||||
expect(numberConvert).toEqual(2);
|
||||
});
|
||||
|
||||
describe('When the form is rendered correctly', () => {
|
||||
let values: any = {
|
||||
dateRange: {
|
||||
startDate: '2016-09-01', endDate: '2016-10-05'
|
||||
},
|
||||
statusGroup: {
|
||||
status: 'All'
|
||||
},
|
||||
processDefGroup: {
|
||||
processDefinitionId: 'FakeProcess:1:22'
|
||||
},
|
||||
taskGroup: {
|
||||
taskName: 'FakeTaskName'
|
||||
},
|
||||
durationGroup: {
|
||||
duration: 22
|
||||
},
|
||||
dateIntervalGroup: {
|
||||
dateRangeInterval: 120
|
||||
},
|
||||
processInstanceGroup: {
|
||||
slowProcessInstanceInteger: 2
|
||||
},
|
||||
typeFilteringGroup: {
|
||||
typeFiltering: true
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(async(() => {
|
||||
let reportId = 1;
|
||||
let change = new SimpleChange(null, reportId);
|
||||
component.ngOnChanges({ 'reportId': change });
|
||||
fixture.detectChanges();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json',
|
||||
responseText: analyticParamsMock.reportDefParamStatus
|
||||
});
|
||||
fixture.whenStable().then(() => {
|
||||
component.toggleParameters();
|
||||
component.reportId = '1';
|
||||
spyOn(component, 'isFormValid').and.returnValue(true);
|
||||
fixture.detectChanges();
|
||||
});
|
||||
}));
|
||||
|
||||
it('Should be able to change the report title', async(() => {
|
||||
let title: HTMLElement = element.querySelector('h4');
|
||||
title.click();
|
||||
fixture.detectChanges();
|
||||
let reportName: HTMLInputElement = <HTMLInputElement> element.querySelector('#reportName');
|
||||
expect(reportName).not.toBeNull();
|
||||
reportName.focus();
|
||||
component.reportParameters.name = 'FAKE_TEST_NAME';
|
||||
reportName.value = 'FAKE_TEST_NAME';
|
||||
reportName.blur();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json',
|
||||
responseText: analyticParamsMock.reportDefParamStatus
|
||||
});
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let titleChanged: HTMLElement = element.querySelector('h4');
|
||||
expect(titleChanged.textContent.trim()).toEqual('FAKE_TEST_NAME');
|
||||
});
|
||||
}));
|
||||
|
||||
it('Should show a dialog to allowing report save', async(() => {
|
||||
component.saveReportSuccess.subscribe(() => {
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog');
|
||||
expect(reportDialogTitle.getAttribute('open')).toBeNull();
|
||||
});
|
||||
|
||||
component.submit(values);
|
||||
fixture.detectChanges();
|
||||
let saveButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#save-button');
|
||||
expect(saveButton).toBeDefined();
|
||||
expect(saveButton).not.toBeNull();
|
||||
saveButton.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog-title');
|
||||
let saveTitleSubMessage: HTMLElement = <HTMLElement> element.querySelector('#save-title-submessage');
|
||||
let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName');
|
||||
let performActionButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#action-dialog-button');
|
||||
let todayDate = component.getTodayDate();
|
||||
expect(reportDialogTitle).not.toBeNull();
|
||||
expect(saveTitleSubMessage).not.toBeNull();
|
||||
expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )');
|
||||
expect(performActionButton).not.toBeNull();
|
||||
performActionButton.click();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json'
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('Should show a dialog to allowing report export', async(() => {
|
||||
component.submit(values);
|
||||
spyOn(component, 'generateDownloadElement').and.stub();
|
||||
fixture.detectChanges();
|
||||
let exportButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#export-button');
|
||||
expect(exportButton).toBeDefined();
|
||||
expect(exportButton).not.toBeNull();
|
||||
exportButton.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog-title');
|
||||
let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName');
|
||||
let performActionButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#action-dialog-button');
|
||||
let todayDate = component.getTodayDate();
|
||||
expect(reportDialogTitle).not.toBeNull();
|
||||
expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )');
|
||||
expect(performActionButton).not.toBeNull();
|
||||
performActionButton.click();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json'
|
||||
});
|
||||
});
|
||||
}));
|
||||
|
||||
it('Should raise an event for report deleted', async(() => {
|
||||
let deleteButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#delete-button');
|
||||
expect(deleteButton).toBeDefined();
|
||||
expect(deleteButton).not.toBeNull();
|
||||
|
||||
component.deleteReportSuccess.subscribe((reportId) => {
|
||||
expect(reportId).not.toBeNull();
|
||||
});
|
||||
deleteButton.click();
|
||||
jasmine.Ajax.requests.mostRecent().respondWith({
|
||||
status: 200,
|
||||
contentType: 'json'
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -24,7 +24,8 @@ import {
|
||||
Output,
|
||||
SimpleChanges,
|
||||
OnDestroy,
|
||||
AfterViewChecked
|
||||
AfterViewChecked,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
|
||||
import * as moment from 'moment';
|
||||
@@ -38,6 +39,7 @@ import {
|
||||
} from '../models/report.model';
|
||||
|
||||
declare var componentHandler;
|
||||
declare let dialogPolyfill: any;
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
@@ -47,7 +49,7 @@ declare var componentHandler;
|
||||
})
|
||||
export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked {
|
||||
|
||||
public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
|
||||
public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
|
||||
|
||||
@Input()
|
||||
appId: string;
|
||||
@@ -70,6 +72,15 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
@Output()
|
||||
onFormValueChanged = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
saveReportSuccess = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
deleteReportSuccess = new EventEmitter();
|
||||
|
||||
@ViewChild('reportNameDialog')
|
||||
reportNameDialog: any;
|
||||
|
||||
onDropdownChanged = new EventEmitter();
|
||||
|
||||
onSuccessReportParams = new EventEmitter();
|
||||
@@ -84,6 +95,9 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
private reportParamsSub;
|
||||
private paramOpts;
|
||||
private isEditable: boolean = false;
|
||||
private action: string;
|
||||
private reportParamQuery: ReportQuery;
|
||||
private reportName: string;
|
||||
private hideParameters: boolean = true;
|
||||
|
||||
constructor(private translateService: AlfrescoTranslationService,
|
||||
@@ -96,8 +110,6 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initForm();
|
||||
|
||||
this.dropDownSub = this.onDropdownChanged.subscribe((field) => {
|
||||
let paramDependOn: ReportParameterDetailsModel = this.reportParameters.definition.parameters.find(p => p.dependsOn === field.id);
|
||||
if (paramDependOn) {
|
||||
@@ -108,10 +120,9 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
this.paramOpts = this.onSuccessReportParams.subscribe((report: ReportParametersModel) => {
|
||||
if (report.hasParameters()) {
|
||||
this.retrieveParameterOptions(report.definition.parameters, this.appId);
|
||||
this.generateFormGroupFromParameter(report.definition.parameters);
|
||||
}
|
||||
});
|
||||
|
||||
this.reportForm.valueChanges.subscribe(data => this.onValueChanged(data));
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
@@ -127,31 +138,54 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
}
|
||||
}
|
||||
|
||||
initForm() {
|
||||
this.reportForm = this.formBuilder.group({
|
||||
dateRange: new FormGroup({}),
|
||||
statusGroup: new FormGroup({
|
||||
status: new FormControl()
|
||||
}),
|
||||
processInstanceGroup: new FormGroup({
|
||||
slowProcessInstanceInteger: new FormControl()
|
||||
}),
|
||||
taskGroup: new FormGroup({
|
||||
taskName: new FormControl()
|
||||
}),
|
||||
typeFilteringGroup: new FormGroup({
|
||||
typeFiltering: new FormControl()
|
||||
}),
|
||||
dateIntervalGroup: new FormGroup({
|
||||
dateRangeInterval: new FormControl()
|
||||
}),
|
||||
durationGroup: new FormGroup({
|
||||
duration: new FormControl()
|
||||
}),
|
||||
processDefGroup: new FormGroup({
|
||||
processDefinitionId: new FormControl()
|
||||
})
|
||||
private generateFormGroupFromParameter(parameters: ReportParameterDetailsModel[]) {
|
||||
let formBuilderGroup: any = {};
|
||||
parameters.forEach((param: ReportParameterDetailsModel) => {
|
||||
switch (param.type) {
|
||||
case 'dateRange' :
|
||||
formBuilderGroup.dateRange = new FormGroup({});
|
||||
break;
|
||||
case 'processDefinition':
|
||||
formBuilderGroup.processDefGroup = new FormGroup({
|
||||
processDefinitionId: new FormControl()
|
||||
});
|
||||
break;
|
||||
case 'duration':
|
||||
formBuilderGroup.durationGroup = new FormGroup({
|
||||
duration: new FormControl()
|
||||
});
|
||||
break;
|
||||
case 'dateInterval':
|
||||
formBuilderGroup.dateIntervalGroup = new FormGroup({
|
||||
dateRangeInterval: new FormControl()
|
||||
});
|
||||
break;
|
||||
case 'boolean':
|
||||
formBuilderGroup.typeFilteringGroup = new FormGroup({
|
||||
typeFiltering: new FormControl()
|
||||
});
|
||||
break;
|
||||
case 'task':
|
||||
formBuilderGroup.taskGroup = new FormGroup({
|
||||
taskName: new FormControl()
|
||||
});
|
||||
break;
|
||||
case 'integer':
|
||||
formBuilderGroup.processInstanceGroup = new FormGroup({
|
||||
slowProcessInstanceInteger: new FormControl()
|
||||
});
|
||||
break;
|
||||
case 'status':
|
||||
formBuilderGroup.statusGroup = new FormGroup({
|
||||
status: new FormControl()
|
||||
});
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
});
|
||||
this.reportForm = this.formBuilder.group(formBuilderGroup);
|
||||
this.reportForm.valueChanges.subscribe(data => this.onValueChanged(data));
|
||||
}
|
||||
|
||||
public getReportParams(reportId: string) {
|
||||
@@ -193,8 +227,8 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
}
|
||||
|
||||
public submit(values: any) {
|
||||
let reportParamQuery = this.convertFormValuesToReportParamQuery(values);
|
||||
this.onSuccess.emit(reportParamQuery);
|
||||
this.reportParamQuery = this.convertFormValuesToReportParamQuery(values);
|
||||
this.onSuccess.emit(this.reportParamQuery);
|
||||
}
|
||||
|
||||
onValueChanged(values: any) {
|
||||
@@ -209,21 +243,41 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
.format(AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
|
||||
}
|
||||
|
||||
public getTodayDate() {
|
||||
return moment().format(AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI);
|
||||
}
|
||||
|
||||
public convertNumber(value: string): number {
|
||||
return value != null ? parseInt(value, 10) : 0;
|
||||
}
|
||||
|
||||
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);
|
||||
reportParamQuery.typeFiltering = values.typeFilteringGroup.typeFiltering;
|
||||
if (values.dateRange) {
|
||||
reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate);
|
||||
reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate);
|
||||
}
|
||||
if (values.statusGroup) {
|
||||
reportParamQuery.status = values.statusGroup.status;
|
||||
}
|
||||
if (values.processDefGroup) {
|
||||
reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId;
|
||||
}
|
||||
if (values.taskGroup) {
|
||||
reportParamQuery.taskName = values.taskGroup.taskName;
|
||||
}
|
||||
if (values.durationGroup) {
|
||||
reportParamQuery.duration = values.durationGroup.duration;
|
||||
}
|
||||
if (values.dateIntervalGroup) {
|
||||
reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateRangeInterval;
|
||||
}
|
||||
if (values.processInstanceGroup) {
|
||||
reportParamQuery.slowProcessInstanceInteger = this.convertNumber(values.processInstanceGroup.slowProcessInstanceInteger);
|
||||
}
|
||||
if (values.typeFilteringGroup) {
|
||||
reportParamQuery.typeFiltering = values.typeFilteringGroup.typeFiltering;
|
||||
}
|
||||
return reportParamQuery;
|
||||
}
|
||||
|
||||
@@ -236,7 +290,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
}
|
||||
|
||||
public editEnable() {
|
||||
this.isEditable = true;
|
||||
this.isEditable = true;
|
||||
}
|
||||
|
||||
public editDisable() {
|
||||
@@ -256,6 +310,74 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
);
|
||||
}
|
||||
|
||||
public showDialog(event: string) {
|
||||
if (!this.reportNameDialog.nativeElement.showModal) {
|
||||
dialogPolyfill.registerDialog(this.reportNameDialog.nativeElement);
|
||||
}
|
||||
this.reportNameDialog.nativeElement.showModal();
|
||||
this.action = event;
|
||||
this.reportName = this.reportParameters.name + ' ( ' + this.getTodayDate() + ' )';
|
||||
}
|
||||
|
||||
closeDialog() {
|
||||
if (this.reportNameDialog) {
|
||||
this.reportNameDialog.nativeElement.close();
|
||||
}
|
||||
}
|
||||
|
||||
performAction(action: string, reportParamQuery: ReportQuery) {
|
||||
reportParamQuery.reportName = this.reportName;
|
||||
this.closeDialog();
|
||||
if (action === 'Save') {
|
||||
this.doSave(reportParamQuery);
|
||||
} else if (action === 'Export') {
|
||||
this.doExport(reportParamQuery);
|
||||
}
|
||||
this.resetActions();
|
||||
}
|
||||
|
||||
resetActions() {
|
||||
this.action = '';
|
||||
this.reportName = '';
|
||||
}
|
||||
|
||||
isFormValid() {
|
||||
return this.reportForm && this.reportForm.valid && this.reportForm.dirty;
|
||||
}
|
||||
|
||||
isSaveAction() {
|
||||
return this.action === 'Save';
|
||||
}
|
||||
|
||||
doExport(paramQuery: ReportQuery) {
|
||||
this.analyticsService.exportReportToCsv(this.reportId, paramQuery).subscribe(
|
||||
(data: any) => {
|
||||
let blob: Blob = new Blob([data], { type: 'text/csv' });
|
||||
let downloadUrl = window.URL.createObjectURL(blob);
|
||||
this.generateDownloadElement(downloadUrl, paramQuery);
|
||||
});
|
||||
}
|
||||
|
||||
private generateDownloadElement(downloadUrl: string, paramQuery: ReportQuery) {
|
||||
let downloadElement = window.document.createElement('a');
|
||||
downloadElement.setAttribute('id', 'export-download');
|
||||
downloadElement.setAttribute('href', downloadUrl);
|
||||
downloadElement.setAttribute('download', paramQuery.reportName);
|
||||
downloadElement.click();
|
||||
}
|
||||
|
||||
doSave(paramQuery: ReportQuery) {
|
||||
this.analyticsService.saveReport(this.reportId, paramQuery).subscribe(() => {
|
||||
this.saveReportSuccess.emit();
|
||||
});
|
||||
}
|
||||
|
||||
deleteReport(reportId: string) {
|
||||
this.analyticsService.deleteReport(reportId).subscribe(() => {
|
||||
this.deleteReportSuccess.emit(reportId);
|
||||
}, error => this.logService.error(error));
|
||||
}
|
||||
|
||||
ngAfterViewChecked() {
|
||||
// workaround for MDL issues with dynamic components
|
||||
if (componentHandler) {
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
<analytics-report-parameters [appId]="appId" [reportId]="reportId"
|
||||
(onFormValueChanged)="reset()"
|
||||
(onSuccess)="showReport($event)"
|
||||
(saveReportSuccess)="onSaveReportSuccess()"
|
||||
(deleteReportSuccess)="onDeleteReportSuccess()"
|
||||
(onEdit)="onEditReport($event)">
|
||||
</analytics-report-parameters>
|
||||
|
||||
|
||||
@@ -41,6 +41,12 @@ export class AnalyticsComponent implements OnChanges {
|
||||
@Output()
|
||||
editReport = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
reportSaved = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
reportDeleted = new EventEmitter();
|
||||
|
||||
@ViewChild('analyticsgenerator')
|
||||
analyticsgenerator: AnalyticsGeneratorComponent;
|
||||
|
||||
@@ -71,4 +77,12 @@ export class AnalyticsComponent implements OnChanges {
|
||||
this.editReport.emit(name);
|
||||
}
|
||||
|
||||
public onSaveReportSuccess() {
|
||||
this.reportSaved.emit();
|
||||
}
|
||||
|
||||
public onDeleteReportSuccess() {
|
||||
this.reportDeleted.emit();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { FormGroup, Validators } from '@angular/forms';
|
||||
import { FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { WidgetComponent } from './../widget.component';
|
||||
|
||||
@Component({
|
||||
@@ -54,7 +54,20 @@ export class DropdownWidget extends WidgetComponent {
|
||||
|
||||
ngOnInit() {
|
||||
if (this.required) {
|
||||
this.formGroup.get(this.controllerName).setValidators(Validators.required);
|
||||
this.formGroup.get(this.controllerName).setValidators(Validators.compose(this.buildValidatorList()));
|
||||
}
|
||||
}
|
||||
|
||||
validateDropDown(controller: FormControl) {
|
||||
return controller.value !== 'null' ? null : { controllerName: false };
|
||||
}
|
||||
|
||||
buildValidatorList() {
|
||||
let validatorList = [];
|
||||
validatorList.push(Validators.required);
|
||||
if (this.showDefaultOption) {
|
||||
validatorList.push(this.validateDropDown);
|
||||
}
|
||||
return validatorList;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,5 +43,9 @@
|
||||
},
|
||||
"PROCESS-STATUS": "Process status",
|
||||
"TASK-STATUS": "Task status"
|
||||
},
|
||||
"DIALOG":{
|
||||
"SAVE_MESSAGE" : "The current parameter settings will be stored, and a new report will be shown in the reports list. When that particular report is clicked, the report will be generated using these saved parameter values.",
|
||||
"EXPORT_MESSAGE":""
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,6 +106,7 @@ export class ParameterValueModel {
|
||||
}
|
||||
|
||||
export class ReportQuery {
|
||||
reportName: string;
|
||||
processDefinitionId: string;
|
||||
status: string;
|
||||
taskName: string;
|
||||
@@ -116,6 +117,7 @@ export class ReportQuery {
|
||||
duration: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.reportName = obj && obj.reportName || null;
|
||||
this.processDefinitionId = obj && obj.processDefinitionId || null;
|
||||
this.status = obj && obj.status || null;
|
||||
this.taskName = obj && obj.taskName || null;
|
||||
@@ -125,15 +127,18 @@ export class ReportQuery {
|
||||
this.duration = obj && obj.duration || 0;
|
||||
this.dateRange = new ReportDateRange(obj);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class ReportDateRange {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
rangeId: string;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.startDate = obj && obj.startDate || null;
|
||||
this.endDate = obj && obj.endDate || null;
|
||||
this.rangeId = obj && obj.rangeId || null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -184,6 +184,28 @@ export class AnalyticsService {
|
||||
}).catch(err => this.handleError(err));
|
||||
}
|
||||
|
||||
exportReportToCsv(reportId: string, paramsQuery: any): Observable<any> {
|
||||
return Observable.fromPromise(this.apiService.getInstance().activiti.reportApi.exportToCsv(reportId, paramsQuery))
|
||||
.map((res: any) => {
|
||||
this.logService.info('export');
|
||||
return res;
|
||||
}).catch(err => this.handleError(err));
|
||||
}
|
||||
|
||||
saveReport(reportId: string, paramsQuery: any): Observable<any> {
|
||||
return Observable.fromPromise(this.apiService.getInstance().activiti.reportApi.saveReport(reportId, paramsQuery))
|
||||
.map(() => {
|
||||
this.logService.info('save');
|
||||
}).catch(err => this.handleError(err));
|
||||
}
|
||||
|
||||
deleteReport(reportId: string): Observable<any> {
|
||||
return Observable.fromPromise(this.apiService.getInstance().activiti.reportApi.deleteReport(reportId))
|
||||
.map(() => {
|
||||
this.logService.info('delete');
|
||||
}).catch(err => this.handleError(err));
|
||||
}
|
||||
|
||||
private handleError(error: Response) {
|
||||
this.logService.error(error);
|
||||
return Observable.throw(error.json().error || 'Server error');
|
||||
|
||||
Reference in New Issue
Block a user