#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
This commit is contained in:
Vito 2017-04-06 06:11:50 -07:00 committed by Mario Romano
parent 7239b37dac
commit 02052c3ea9
2 changed files with 93 additions and 23 deletions

View File

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

View File

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