#1184 - Added option to reports : Save, Delete and Export to CSV (#1600)

* #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

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -119,7 +119,9 @@
                         <activiti-analytics *ngIf="report"
                                             [appId]="appId"
                                             [reportId]="report.id"
-                                            (editReport)="onEditReport($event)">
+                                            (editReport)="onEditReport($event)"
+                                            (reportSaved)="onReportSaved()"
+                                            (reportDeleted)="onReportDeleted()">
                         </activiti-analytics>
                     </div>
                 </div>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -104,8 +104,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.dataTasks = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
-                {type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true}
+                { type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true }
             ]
         );
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
@@ -113,8 +113,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
-                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
+                { type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true }
             ]
         );
         this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
@@ -154,7 +154,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
     }
 
     onTaskFilterClick(event: FilterRepresentationModel) {
-        if(event){
+        if (event) {
             this.taskFilter = event;
         }
     }
@@ -202,6 +202,21 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.analyticsreportlist.reload();
     }
 
+    onReportSaved() {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportDeleted() {
+        this.analyticsreportlist.reload();
+        this.selectFirstElementInReportList();
+    }
+
+    selectFirstElementInReportList(){
+        if (! this.analyticsreportlist.isReportsEmpty()) {
+            this.analyticsreportlist.selectReport(this.analyticsreportlist.reports[0]);
+        }
+    }
+
     navigateStartProcess() {
         this.resetProcessFilters();
         this.reloadProcessFilters();

ng2-components/ng2-activiti-analytics/README.md

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

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css

@@ -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;
+}

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html

@@ -2,8 +2,8 @@
     <div class="col-md-6">
         <div *ngIf="reportParameters">
             <form [formGroup]="reportForm" novalidate>
-            <div *ngIf="isEditable">
+                <div *ngIf="isEditable">
-                <input
+                    <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>
-            <div *ngIf="!isEditable">
+                <div *ngIf="!isEditable">
-                <button mdTooltip="{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button" style="float: right">
+                    <button mdTooltip="{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button" style="float: right">
-                    <i class="material-icons">settings</i>
+                        <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">
+                <div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
-                <i class="material-icons">mode_edit</i>
+                    <div [ngSwitch]="field.type">
-                    <h4 (click)="editEnable()">{{reportParameters.name}}</h4>
+                        <div *ngSwitchCase="'integer'">
-                </div>
+                            <br>
-            </div>
+                            <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
-            <div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
+                                           [required]="true"></number-widget>
-                <div [ngSwitch]="field.type">
+                        </div>
-                    <div *ngSwitchCase="'integer'">
+                        <div *ngSwitchCase="'duration'">
-                        <br>
+                            <br>
-                        <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
+                            <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
-                                       [required]="true"></number-widget>
+                                             [controllerName]="'duration'"></duration-widget>
-                    </div>
+                        </div>
-                    <div *ngSwitchCase="'duration'">
+                        <div *ngSwitchCase="'boolean'">
-                        <br>
+                            <br>
-                        <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
+                            <checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
-                                         [controllerName]="'duration'"></duration-widget>
+                                             [controllerName]="'typeFiltering'"></checkbox-widget>
-                    </div>
+                        </div>
-                    <div *ngSwitchCase="'boolean'">
+                        <div *ngSwitchCase="'status'">
-                        <br>
+                            <br>
-                        <checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
+                            <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" [controllerName]="'status'"
-                                         [controllerName]="'typeFiltering'"></checkbox-widget>
+                                             [required]="true"></dropdown-widget>
-                    </div>
+                        </div>
-                    <div *ngSwitchCase="'status'">
+                        <div *ngSwitchCase="'processDefinition'">
-                        <br>
+                            <br>
-                        <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" [controllerName]="'status'"
+                            <dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'"
-                                         [required]="true"></dropdown-widget>
+                                             [required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
-                    </div>
+                        </div>
-                    <div *ngSwitchCase="'processDefinition'">
+                        <div *ngSwitchCase="'task'">
-                        <br>
+                            <br>
-                        <dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'"
+                            <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'taskName'"
-                                         [required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
+                                             [required]="true"></dropdown-widget>
-                    </div>
+                        </div>
-                    <div *ngSwitchCase="'task'">
+                        <div *ngSwitchCase="'dateRange'">
-                        <br>
+                            <br>
-                        <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'taskName'"
+                            <date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></date-range-widget>
-                                         [required]="true"></dropdown-widget>
+                        </div>
-                    </div>
+                        <div *ngSwitchCase="'dateInterval'">
-                    <div *ngSwitchCase="'dateRange'">
+                            <br>
-                        <br>
+                            <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateRangeInterval'"
-                        <date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></date-range-widget>
+                                             [required]="true" [showDefaultOption]="false"></dropdown-widget>
-                    </div>
+                        </div>
-                    <div *ngSwitchCase="'dateInterval'">
+                        <div *ngSwitchDefault>
-                        <br>
+                            <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
-                        <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateRangeInterval'"
+                        </div>
-                                         [required]="true" [showDefaultOption]="false"></dropdown-widget>
-                    </div>
-                    <div *ngSwitchDefault>
-                        <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
                     </div>
                 </div>
-            </div>
+                <div *ngIf="isFormValid()">
-            <div *ngIf="debug">
+                    <div class="option_button_details">
-                <p>ReportForm valid : {{ reportForm.valid }}</p>
+                        <button id="export-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect"
-                <p>ReportForm status : {{ reportForm.errors | json }}</p>
+                                (click)="showDialog('Export')">
-                <p>ReportForm FormGroup valid : {{reportForm && reportForm.controls.dateRange.valid | json }}</p>
+                        <span>
-            </div>
+                            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>

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts

@@ -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 ', () => {
+        it('Should initialize the Report form with a Form Group ', (done) => {
-            expect(component.reportForm.get('dateRange')).toBeDefined();
+            let fakeReportParam = new ReportParametersModel(analyticParamsMock.reportDefParamTask);
-            expect(component.reportForm.get('dateRange').get('startDate')).toBeDefined();
+            component.onSuccessReportParams.subscribe(() => {
-            expect(component.reportForm.get('dateRange').get('endDate')).toBeDefined();
+                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'
+                });
+            }));
+        });
     });
 });

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts

@@ -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() {
+    private generateFormGroupFromParameter(parameters: ReportParameterDetailsModel[]) {
-        this.reportForm = this.formBuilder.group({
+        let formBuilderGroup: any = {};
-            dateRange: new FormGroup({}),
+        parameters.forEach((param: ReportParameterDetailsModel) => {
-            statusGroup: new FormGroup({
+            switch (param.type) {
-                status: new FormControl()
+                case 'dateRange' :
-            }),
+                    formBuilderGroup.dateRange = new FormGroup({});
-            processInstanceGroup: new FormGroup({
+                    break;
-                slowProcessInstanceInteger: new FormControl()
+                case 'processDefinition':
-            }),
+                    formBuilderGroup.processDefGroup = new FormGroup({
-            taskGroup: new FormGroup({
+                        processDefinitionId: new FormControl()
-                taskName: new FormControl()
+                    });
-            }),
+                    break;
-            typeFilteringGroup: new FormGroup({
+                case 'duration':
-                typeFiltering: new FormControl()
+                    formBuilderGroup.durationGroup = new FormGroup({
-            }),
+                        duration: new FormControl()
-            dateIntervalGroup: new FormGroup({
+                    });
-                dateRangeInterval: new FormControl()
+                    break;
-            }),
+                case 'dateInterval':
-            durationGroup: new FormGroup({
+                    formBuilderGroup.dateIntervalGroup = new FormGroup({
-                duration: new FormControl()
+                        dateRangeInterval: new FormControl()
-            }),
+                    });
-            processDefGroup: new FormGroup({
+                    break;
-                processDefinitionId: new FormControl()
+                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.reportParamQuery = this.convertFormValuesToReportParamQuery(values);
-        this.onSuccess.emit(reportParamQuery);
+        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);
+        if (values.dateRange) {
-        reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate);
+            reportParamQuery.dateRange.startDate = this.convertMomentDate(values.dateRange.startDate);
-        reportParamQuery.status = values.statusGroup.status;
+            reportParamQuery.dateRange.endDate = this.convertMomentDate(values.dateRange.endDate);
-        reportParamQuery.processDefinitionId = values.processDefGroup.processDefinitionId;
+        }
-        reportParamQuery.taskName = values.taskGroup.taskName;
+        if (values.statusGroup) {
-        reportParamQuery.duration = values.durationGroup.duration;
+            reportParamQuery.status = values.statusGroup.status;
-        reportParamQuery.dateRangeInterval = values.dateIntervalGroup.dateRangeInterval;
+        }
-        reportParamQuery.slowProcessInstanceInteger = this.convertNumber(values.processInstanceGroup.slowProcessInstanceInteger);
+        if (values.processDefGroup) {
-        reportParamQuery.typeFiltering = values.typeFilteringGroup.typeFiltering;
+            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) {

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

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

ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts

@@ -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();
+    }
+
 }

ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts

@@ -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;
+    }
 }

ng2-components/ng2-activiti-analytics/src/i18n/en.json

@@ -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":""
   }
 }

ng2-components/ng2-activiti-analytics/src/models/report.model.ts

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

ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts

@@ -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');