#1652 - Save and Export should appear on saved reports (#1807)

* #1652 - Save and Export should appear on saved reports

* #1652 - added some test and upgraded condition on html

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

@@ -428,6 +428,7 @@ describe('AnalyticsReportParametersComponent', () => {
         });
 
         describe('When the form is rendered correctly', () => {
+            let validForm: boolean = true;
             let values: any = {
                 dateRange: {
                     startDate: '2016-09-01', endDate: '2016-10-05'
@@ -468,11 +469,17 @@ describe('AnalyticsReportParametersComponent', () => {
                 fixture.whenStable().then(() => {
                     component.toggleParameters();
                     component.reportId = '1';
-                    spyOn(component, 'isFormValid').and.returnValue(true);
+                    spyOn(component, 'isFormValid').and.callFake(() => {
+                        return validForm;
+                    });
                     fixture.detectChanges();
                 });
             }));
 
+            afterEach(() => {
+                validForm = true;
+            });
+
             it('Should be able to change the report title', async(() => {
                 let title: HTMLElement = element.querySelector('h4');
                 title.click();
@@ -567,6 +574,52 @@ describe('AnalyticsReportParametersComponent', () => {
                     contentType: 'json'
                 });
             }));
+
+            it('Should hide export button if the form is not valid', async(() => {
+                let exportButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#export-button');
+                expect(exportButton).toBeDefined();
+                expect(exportButton).not.toBeNull();
+                validForm = false;
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    exportButton = <HTMLButtonElement>element.querySelector('#export-button');
+                    expect(exportButton).toBeNull();
                 });
+            }));
+
+            it('Should hide save button if the form is not valid', async(() => {
+                let saveButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#save-button');
+                expect(saveButton).toBeDefined();
+                expect(saveButton).not.toBeNull();
+                validForm = false;
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    saveButton = <HTMLButtonElement>element.querySelector('#save-button');
+                    expect(saveButton).toBeNull();
+                });
+            }));
+
+            it('Should show export and save button when the form became valid', async(() => {
+                validForm = false;
+                fixture.detectChanges();
+                let saveButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#save-button');
+                let exportButton: HTMLButtonElement = <HTMLButtonElement>element.querySelector('#export-button');
+                expect(saveButton).toBeNull();
+                expect(exportButton).toBeNull();
+                validForm = true;
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    saveButton = <HTMLButtonElement>element.querySelector('#save-button');
+                    exportButton = <HTMLButtonElement>element.querySelector('#export-button');
+                    expect(saveButton).not.toBeNull();
+                    expect(saveButton).toBeDefined();
+                    expect(exportButton).not.toBeNull();
+                    expect(exportButton).toBeDefined();
+                });
+            }));
+        });
+
     });
 });

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

@@ -25,9 +25,10 @@ import {
     SimpleChanges,
     OnDestroy,
     AfterViewChecked,
+    AfterContentChecked,
     ViewChild
 } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import * as moment from 'moment';
 import { AlfrescoTranslationService, LogService, ContentService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
@@ -47,7 +48,7 @@ declare let dialogPolyfill: any;
     templateUrl: './analytics-report-parameters.component.html',
     styleUrls: ['./analytics-report-parameters.component.css']
 })
-export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked {
+export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, AfterContentChecked {
 
     public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
 
@@ -102,6 +103,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
     private reportParamQuery: ReportQuery;
     private reportName: string;
     private hideParameters: boolean = true;
+    private formValidState: boolean = false;
 
     constructor(private translateService: AlfrescoTranslationService,
                 private analyticsService: AnalyticsService,
@@ -131,6 +133,9 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
 
     ngOnChanges(changes: SimpleChanges) {
         this.isEditable = false;
+        if (this.reportForm) {
+            this.reportForm.reset();
+        }
         let reportId = changes['reportId'];
         if (reportId && reportId.currentValue) {
             this.getReportParams(reportId.currentValue);
@@ -147,42 +152,42 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
         parameters.forEach((param: ReportParameterDetailsModel) => {
             switch (param.type) {
                 case 'dateRange' :
-                    formBuilderGroup.dateRange = new FormGroup({});
+                    formBuilderGroup.dateRange = new FormGroup({}, Validators.required);
                     break;
                 case 'processDefinition':
                     formBuilderGroup.processDefGroup = new FormGroup({
-                        processDefinitionId: new FormControl()
+                        processDefinitionId: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 case 'duration':
                     formBuilderGroup.durationGroup = new FormGroup({
-                        duration: new FormControl()
+                        duration: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 case 'dateInterval':
                     formBuilderGroup.dateIntervalGroup = new FormGroup({
-                        dateRangeInterval: new FormControl()
+                        dateRangeInterval: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 case 'boolean':
                     formBuilderGroup.typeFilteringGroup = new FormGroup({
-                        typeFiltering: new FormControl()
+                        typeFiltering: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 case 'task':
                     formBuilderGroup.taskGroup = new FormGroup({
-                        taskName: new FormControl()
+                        taskName: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 case 'integer':
                     formBuilderGroup.processInstanceGroup = new FormGroup({
-                        slowProcessInstanceInteger: new FormControl()
+                        slowProcessInstanceInteger: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 case 'status':
                     formBuilderGroup.statusGroup = new FormGroup({
-                        status: new FormControl()
+                        status: new FormControl(null, Validators.required, null)
-                    });
+                    }, Validators.required);
                     break;
                 default:
                     return;
@@ -190,6 +195,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
         });
         this.reportForm = this.formBuilder.group(formBuilderGroup);
         this.reportForm.valueChanges.subscribe(data => this.onValueChanged(data));
+        this.reportForm.statusChanges.subscribe(data => this.onStatusChanged(data));
     }
 
     public getReportParams(reportId: string) {
@@ -243,6 +249,12 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
         }
     }
 
+    onStatusChanged(status: any) {
+        if (this.reportForm && !this.reportForm.pending && this.reportForm.dirty) {
+            this.formValidState = this.reportForm.valid;
+        }
+    }
+
     public convertMomentDate(date: string) {
         return moment(date, AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI, true)
                 .format(AnalyticsReportParametersComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
@@ -346,14 +358,14 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
         this.reportName = '';
     }
 
-    isFormValid() {
-        return this.reportForm && this.reportForm.valid && this.reportForm.dirty;
-    }
-
     isSaveAction() {
         return this.action === 'Save';
     }
 
+    isFormValid() {
+        return this.reportForm && this.reportForm.dirty && this.reportForm.valid;
+    }
+
     doExport(paramQuery: ReportQuery) {
         this.analyticsService.exportReportToCsv(this.reportId, paramQuery).subscribe(
             (data: any) => {
@@ -375,12 +387,17 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
     }
 
     ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
         if (componentHandler) {
             componentHandler.upgradeAllRegistered();
         }
     }
 
+    ngAfterContentChecked() {
+        if (this.reportForm && this.reportForm.valid) {
+            this.reportForm.markAsDirty();
+        }
+    }
+
     toggleParameters() {
         this.hideParameters = !this.hideParameters;
     }