Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ACA-3692] - Add completed date/due date/started date filter #6145

Merged
merged 11 commits into from Sep 24, 2020
Merged

[ACA-3692] - Add completed date/due date/started date filter #6145

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
31e7fcc
add completedDate filter
Sep 21, 2020
ae1b445
[ACA-3692] - Add completed date filter
Sep 21, 2020
ffe4e74
fix lint
Sep 21, 2020
3471ee7
fix description
Sep 21, 2020
6f11a34
fix lint
Sep 22, 2020
be9414e
preserve filters
Sep 23, 2020
c21f6ac
fix startDate/dueDate fitlers and add unit test
Sep 23, 2020
586af22
revert app.config.json changes
Sep 23, 2020
9e317eb
add support for completed date field in datatable
Sep 23, 2020
ef3974d
fix unit tests
Sep 23, 2020
8e77c84
fix date range unit test
Sep 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 2 additions & 4 deletions lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html
View file
Open in desktop
Expand Up @@ -2,9 +2,10 @@
<mat-form-field [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{ processFilterProperty.label | translate }}"
[value]="type"
(selectionChange)="onSelectionChange($event)"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
<mat-option *ngFor="let propertyOption of filteredProperties" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-process-property-options-' + processFilterProperty.value">
<mat-option *ngFor="let propertyOption of filteredProperties" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-process-property-options-' + propertyOption.value.toString()">
{{ propertyOption.label | translate }}
</mat-option>
</mat-select>
Expand All @@ -19,8 +20,5 @@
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker (closed)="onDateRangeClosed()"></mat-date-range-picker>

<mat-error *ngIf="dateRangeForm.controls.from.hasError('matStartDateInvalid')">{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INDALID_START_DATE' | translate }}</mat-error>
<mat-error *ngIf="dateRangeForm.controls.to.hasError('matEndDateInvalid')">{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INDALID_END_DATE' | translate }}</mat-error>
</mat-form-field>
</ng-container>
56 changes: 38 additions & 18 deletions lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.ts
View file
Open in desktop
Expand Up @@ -19,18 +19,8 @@ import { Component, Input, EventEmitter, Output } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';
import { ProcessFilterProperties, ProcessFilterOptions } from '../../process/process-filters/models/process-filter-cloud.model';
import { FormGroup, FormControl } from '@angular/forms';
import { DateRangeFilterService } from './date-range-filter.service';
import { DateRangeFilter, DateCloudFilterType } from '../../models/date-cloud-filter.model';

const DEFAULT_DATE_RANGE_OPTIONS = [
DateCloudFilterType.NO_DATE,
DateCloudFilterType.TODAY,
DateCloudFilterType.WEEK,
DateCloudFilterType.MONTH,
DateCloudFilterType.QUARTER,
DateCloudFilterType.YEAR,
DateCloudFilterType.RANGE
];
import moment from 'moment-es6';

@Component({
selector: 'adf-cloud-date-range-filter',
Expand All @@ -43,31 +33,31 @@ const DEFAULT_DATE_RANGE_OPTIONS = [
processFilterProperty: ProcessFilterProperties;

@Input()
options: DateCloudFilterType[] = DEFAULT_DATE_RANGE_OPTIONS;
options: DateCloudFilterType[];

@Output()
dateChanged = new EventEmitter<DateRangeFilter>();

@Output()
dateTypeChange = new EventEmitter<DateCloudFilterType>();

type: DateCloudFilterType;
filteredProperties: ProcessFilterOptions[] = [];
dateRangeForm = new FormGroup({
from: new FormControl(),
to: new FormControl()
});

constructor(private dateRangeFilterService: DateRangeFilterService) {}

ngOnInit() {
this.options = this.options ? this.options : this.createDefaultRangeOptions();
const defaultProperties = this.createDefaultDateOptions();
this.filteredProperties = defaultProperties.filter((filterProperty: ProcessFilterOptions) => this.isValidProperty(this.options, filterProperty));
this.setPreselectedValues();
}

onSelectionChange(option: MatSelectChange) {
this.type = option.value;
const dateRange = this.dateRangeFilterService.getDateRange(this.type);
if (!this.isDateRangeType()) {
this.dateChanged.emit(dateRange);
}
this.dateTypeChange.emit(this.type);
}

isDateRangeType(): boolean {
Expand All @@ -82,10 +72,40 @@ const DEFAULT_DATE_RANGE_OPTIONS = [
this.dateChanged.emit(dateRange);
}

private setPreselectedValues() {
const from = this.getFilterAttribute('from');
const to = this.getFilterAttribute('to');
const type = this.getFilterAttribute('dateType');

this.dateRangeForm.get('from').setValue(moment(this.getFilterValue(from)));
this.dateRangeForm.get('to').setValue(moment(this.getFilterValue(to)));
this.type = this.getFilterValue(type);
}

private getFilterAttribute(key: string): string {
return this.processFilterProperty.attributes[key];
}

private getFilterValue(attribute: string) {
return this.processFilterProperty.value[attribute];
}

private isValidProperty(filterProperties: string[], filterProperty: any): boolean {
return filterProperties ? filterProperties.indexOf(filterProperty.value) >= 0 : true;
}

private createDefaultRangeOptions(): DateCloudFilterType[] {
return [
DateCloudFilterType.NO_DATE,
DateCloudFilterType.TODAY,
DateCloudFilterType.WEEK,
DateCloudFilterType.MONTH,
DateCloudFilterType.QUARTER,
DateCloudFilterType.YEAR,
DateCloudFilterType.RANGE
];
}

private createDefaultDateOptions(): ProcessFilterOptions[] {
return [
{
Expand Down
8 changes: 5 additions & 3 deletions lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.service.ts
View file
Open in desktop
Expand Up @@ -35,12 +35,14 @@ export class DateRangeFilterService {
case DateCloudFilterType.MONTH: return this.getCurrentMonthDateRange();
case DateCloudFilterType.QUARTER: return this.getQuarterDateRange();
case DateCloudFilterType.YEAR: return this.getCurrentYearDateRange();
case DateCloudFilterType.RANGE: return this.resetDateRange();
case DateCloudFilterType.NO_DATE: return this.resetDateRange();
default: throw new Error('ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INVALID_DATE_FILTER');
default: return this.resetDateRange();
}
}

isDateRangeType(type: DateCloudFilterType) {
return type === DateCloudFilterType.RANGE;
}

private resetDateRange(): DateRangeFilter {
return {
startDate: null,
Expand Down
4 changes: 3 additions & 1 deletion lib/process-services-cloud/src/lib/i18n/en.json
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@
"CREATED": "Created",
"STATUS": "Status",
"START_DATE": "Start Date",
"COMPLETED_DATE": "Completed Date",
"ID": "Id",
"INITIATOR": "Initiator",
"APP_NAME": "Application Name",
Expand Down Expand Up @@ -167,7 +168,8 @@
"LAST_MODIFIED_TO": "LastModifiedTo",
"PROCESS_NAME": "Process Name",
"APP_VERSION": "AppReleaseVersion",
"CREATED_DATE": "Created Date",
"STARTED_DATE": "Started Date",
"COMPLETED_DATE": "Completed Date",
"DATE_RANGE": {
"NO_DATE": "No Date",
"TODAY": "Today",
Expand Down
3 changes: 3 additions & 0 deletions ...cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
View file
Open in desktop
Expand Up @@ -66,8 +66,11 @@
</div>
</div>
</mat-form-field>

<adf-cloud-date-range-filter *ngIf="isDateRangeType(processFilterProperty)"
[processFilterProperty]="processFilterProperty"
[options]="processFilterProperty.dateFilterOptions"
(dateTypeChange)="onDateTypeChange($event, processFilterProperty)"
(dateChanged)="onDateRangeFilterChanged($event, processFilterProperty)"></adf-cloud-date-range-filter>
</ng-container>
</div>
Expand Down
74 changes: 74 additions & 0 deletions ...ud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
View file
Open in desktop
Expand Up @@ -37,6 +37,7 @@ import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.ser
import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
import { TranslateModule } from '@ngx-translate/core';
import { ProcessCloudService } from '../../services/process-cloud.service';
import { DateCloudFilterType } from '../../../models/date-cloud-filter.model';

describe('EditProcessFilterCloudComponent', () => {
let component: EditProcessFilterCloudComponent;
Expand Down Expand Up @@ -443,6 +444,21 @@ describe('EditProcessFilterCloudComponent', () => {
});
}));

it('should get form attributes', async() => {
fixture.detectChanges();
component.filterProperties = ['appName', 'completedDateRange'];
fixture.detectChanges();
const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
component.ngOnChanges({ 'id': processFilterIdChange });
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(component.editProcessFilterForm.get('_completedFrom')).toBeDefined();
expect(component.editProcessFilterForm.get('_completedTo')).toBeDefined();
expect(component.editProcessFilterForm.get('completedDateType')).toBeDefined();
});
});

it('should able to build a editProcessFilter form with default properties if input is empty', async(() => {
fixture.detectChanges();
component.filterProperties = [];
Expand Down Expand Up @@ -767,6 +783,64 @@ describe('EditProcessFilterCloudComponent', () => {
component.onFilterChange();
});

it('should set the correct started date range when date range option is changed', (done) => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'completedDateRange'];
const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIdChange });
fixture.detectChanges();

const startedDateTypeControl: AbstractControl = component.editProcessFilterForm.get('completedDateType');
startedDateTypeControl.setValue(DateCloudFilterType.TODAY);
const dateFilter = {
startFrom: moment().startOf('day').toDate(),
startTo: moment().endOf('day').toDate()
};

component.filterChange.subscribe(() => {
expect(component.changedProcessFilter.completedFrom).toEqual(dateFilter.startFrom.toISOString());
expect(component.changedProcessFilter.completedTo).toEqual(dateFilter.startTo.toISOString());
done();
});
component.onFilterChange();
});

it('should update form on date range value is updated', (done) => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'completedDateRange'];
const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIdChange });
fixture.detectChanges();

const dateFilter = {
startDate: moment().startOf('day').toDate(),
endDate: moment().endOf('day').toDate()
};

const startedDateTypeControl: AbstractControl = component.editProcessFilterForm.get('completedDateType');
startedDateTypeControl.setValue(DateCloudFilterType.RANGE);

component.onDateRangeFilterChanged(dateFilter, {
key: 'completedDateRange',
label: '',
type: 'date-range',
value: '',
attributes: {
dateType: 'completedDateType',
from: '_completedFrom',
to: '_completedTo'
}
});

fixture.detectChanges();
component.filterChange.subscribe(() => {
expect(component.changedProcessFilter.completedFrom).toEqual(dateFilter.startDate.toISOString());
expect(component.changedProcessFilter.completedTo).toEqual(dateFilter.endDate.toISOString());
done();
});
component.onFilterChange();
});

it('should call restore default filters service on deletion of last filter', (done) => {
component.toggleFilterActions = true;
const deleteFilterSpy = spyOn(service, 'deleteFilter').and.returnValue(of([]));
Expand Down
75 changes: 53 additions & 22 deletions ...s-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@ import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud
import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
import { ProcessCloudService } from '../../services/process-cloud.service';
import { ProcessDefinitionCloud } from '../../../models/process-definition-cloud.model';
import { DateRangeFilter } from '../../../models/date-cloud-filter.model';
import { DateCloudFilterType, DateRangeFilter } from '../../../models/date-cloud-filter.model';

@Component({
selector: 'adf-cloud-edit-process-filter',
Expand Down Expand Up @@ -165,18 +165,22 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes

getFormControlsConfig(processFilterProperties: ProcessFilterProperties[]): any {
const properties = processFilterProperties.map((property: ProcessFilterProperties) => {
if (!property.rangeKeys) {
return { [property.key]: property.value };
if (!!property.attributes) {
return this.getAttributesControlConfig(property);
} else {
return {
[property.rangeKeys.from]: property.value[property.rangeKeys.from],
[property.rangeKeys.to]: property.value[property.rangeKeys.to]
};
return { [property.key]: property.value };
}
});
return properties.reduce(((result, current) => Object.assign(result, current)), {});
}

private getAttributesControlConfig(property: ProcessFilterProperties) {
return Object.values(property.attributes).reduce((result, key) => {
result[key] = property.value[key];
return result;
}, {});
}

/**
* Fetches process instance filter by application name and filter id and creates filter properties, build form
*/
Expand Down Expand Up @@ -316,6 +320,19 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
}
}

onDateTypeChange(dateType: DateCloudFilterType, property: ProcessFilterProperties) {
this.editProcessFilterForm.get(property.attributes.dateType).setValue(dateType);
}

onDateRangeFilterChanged(dateRange: DateRangeFilter, property: ProcessFilterProperties) {
this.editProcessFilterForm.get(property.attributes?.from).setValue(
dateRange.startDate ? dateRange.startDate.toISOString() : null
);
this.editProcessFilterForm.get(property.attributes?.to).setValue(
dateRange.endDate ? dateRange.endDate.toISOString() : null
);
}

hasError(property: ProcessFilterProperties): boolean {
return this.getPropertyController(property).errors && this.getPropertyController(property).errors.invalid;
}
Expand Down Expand Up @@ -455,15 +472,6 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
this.toggleFilterActions = false;
}

onDateRangeFilterChanged(dateRange: DateRangeFilter, property: ProcessFilterProperties) {
this.editProcessFilterForm.get(property.rangeKeys.from).setValue(
dateRange.startDate ? dateRange.startDate.toISOString() : null
);
this.editProcessFilterForm.get(property.rangeKeys.to).setValue(
dateRange.endDate ? dateRange.endDate.toISOString() : null
);
}

isDateType(property: ProcessFilterProperties): boolean {
return property.type === 'date';
}
Expand Down Expand Up @@ -605,6 +613,11 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
key: 'processDefinitionId',
value: 'processDefinitionId'
},
{
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_DEF_NAME',
key: 'processDefinitionName',
value: 'processDefinitionName'
},
{
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_DEF_KEY',
key: 'processDefinitionKey',
Expand Down Expand Up @@ -697,13 +710,31 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
options: this.directions
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.START_DATE',
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.COMPLETED_DATE',
type: 'date',
key: 'completedDate',
value: currentProcessFilter.completedDate || false
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.COMPLETED_DATE',
type: 'date-range',
key: 'completedDateRange',
attributes: { dateType: 'completedDateType', from: '_completedFrom', to: '_completedTo'},
value: {
completedDateType: currentProcessFilter.completedDateType || null,
_completedFrom: currentProcessFilter.completedFrom || null,
_completedTo: currentProcessFilter.completedTo || null
}
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.STARTED_DATE',
type: 'date-range',
key: 'startDateRange',
rangeKeys: { from: 'startFrom', to: 'startTo'},
values: {
from: currentProcessFilter.startFrom || null,
to: currentProcessFilter.startTo || null
key: 'startedDateRange',
attributes: { dateType: 'startedDateType', from: '_startFrom', to: '_startTo'},
value: {
startedDateType: currentProcessFilter.startedDateType || null,
_startFrom: currentProcessFilter.startFrom || null,
_startTo: currentProcessFilter.startTo || null
}
})
];
Expand Down