From 02052c3ea9103bf429bcc0b2949d4f53dcdb3321 Mon Sep 17 00:00:00 2001 From: Vito Date: Thu, 6 Apr 2017 06:11:50 -0700 Subject: [PATCH] #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 --- ...lytics-report-parameters.component.spec.ts | 55 ++++++++++++++++- .../analytics-report-parameters.component.ts | 61 ++++++++++++------- 2 files changed, 93 insertions(+), 23 deletions(-) diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts index 89a292a9cc..50f34e6b99 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts @@ -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 = element.querySelector('#export-button'); + expect(exportButton).toBeDefined(); + expect(exportButton).not.toBeNull(); + validForm = false; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + exportButton = element.querySelector('#export-button'); + expect(exportButton).toBeNull(); + }); + })); + + it('Should hide save button if the form is not valid', async(() => { + let saveButton: HTMLButtonElement = element.querySelector('#save-button'); + expect(saveButton).toBeDefined(); + expect(saveButton).not.toBeNull(); + validForm = false; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + saveButton = 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 = element.querySelector('#save-button'); + let exportButton: HTMLButtonElement = element.querySelector('#export-button'); + expect(saveButton).toBeNull(); + expect(exportButton).toBeNull(); + validForm = true; + fixture.whenStable().then(() => { + fixture.detectChanges(); + saveButton = element.querySelector('#save-button'); + exportButton = element.querySelector('#export-button'); + expect(saveButton).not.toBeNull(); + expect(saveButton).toBeDefined(); + expect(exportButton).not.toBeNull(); + expect(exportButton).toBeDefined(); + }); + })); }); + }); }); diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts index cc1905f2b1..bac24f8cdc 100644 --- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts +++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts @@ -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; }