mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +00:00
[ACA-3637] - Add dueDate range filter (#5919)
* [ACA-3637] - Add dueDate range filter * update documentation * [ACA-3637] - Add due date range filter * update doc * improvements * remove unnecesarry file * fix unit test * fix codecov Co-authored-by: Silviu Popa <p3701014@L3700101120.ness.com>
This commit is contained in:
Silviu Popa
GitHub
parent
f4ebaec501
commit
de07e41b9e
@ -50,12 +50,14 @@ when the task list is empty:
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
|
||||
| appName | `string` | "" | The name of the application. |
|
||||
| assignee | `string` | "" | The assignee of the process. Possible values are: "assignee" (the current user is the assignee), "candidate" (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value (the current user is involved). |
|
||||
| createdDate | `string` | "" | Filter the tasks. Display only tasks created on the supplied date. |
|
||||
| dueDate | `string` | "" | Filter the tasks. Display only tasks with dueDate equal to the supplied date. |
|
||||
| dueDateFrom | `string` | "" | Filter the tasks. Display only tasks with dueDate greater or equal than the supplied date. |
|
||||
| dueDateTo | `string` | "" | Filter the tasks. Display only tasks with dueDate less or equal to the supplied date. |
|
||||
| id | `string` | "" | Filter the tasks. Display only tasks with id equal to the supplied value. |
|
||||
| lastModifiedFrom | `string` | "" | Filter the tasks. Display only tasks with lastModifiedFrom equal to the supplied date. |
|
||||
| lastModifiedTo | `string` | "" | Filter the tasks. Display only tasks with lastModifiedTo equal to the supplied date. |
|
||||
@ -78,7 +80,7 @@ when the task list is empty:
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
|
||||
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a task in the list is clicked |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
|
||||
<mat-form-field [attr.data-automation-id]="processFilterProperty.key">
|
||||
<mat-select
|
||||
placeholder="{{processFilterProperty.label | translate}}"
|
||||
placeholder="{{ processFilterProperty.label | translate }}"
|
||||
(selectionChange)="onSelectionChange($event)"
|
||||
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
|
||||
<mat-option *ngFor="let propertyOption of options" [value]="propertyOption.key" [attr.data-automation-id]="'adf-cloud-edit-process-property-options-' + processFilterProperty.key">
|
||||
<mat-option *ngFor="let propertyOption of filteredProperties" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-process-property-options-' + processFilterProperty.value">
|
||||
{{ propertyOption.label | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
@ -14,13 +14,13 @@
|
||||
<mat-form-field class="adf-cloud-date-range-picker">
|
||||
<mat-label>{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE_TITLE' | translate }}</mat-label>
|
||||
<mat-date-range-input [formGroup]="dateRangeForm" [rangePicker]="picker">
|
||||
<input matStartDate formControlName="start" placeholder="Start date">
|
||||
<input matEndDate formControlName="end" placeholder="End date">
|
||||
<input matStartDate formControlName="from" placeholder="Start date">
|
||||
<input matEndDate formControlName="to" placeholder="End date">
|
||||
</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.start.hasError('matStartDateInvalid')">{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INDALID_START_DATE' | translate }}</mat-error>
|
||||
<mat-error *ngIf="dateRangeForm.controls.end.hasError('matEndDateInvalid')">{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INDALID_END_DATE' | translate }}</mat-error>
|
||||
<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>
|
||||
|
||||
@ -16,18 +16,20 @@
|
||||
*/
|
||||
|
||||
import { DateRangeFilterComponent } from './date-range-filter.component';
|
||||
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { setupTestBed } from 'core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { ProcessDateFilterType } from '../../process/process-filters/models/process-filter-cloud.model';
|
||||
import { MatSelectChange } from '@angular/material/select';
|
||||
import { DateCloudFilterType } from '../../models/date-cloud-filter.model';
|
||||
import { DateRangeFilterService } from './date-range-filter.service';
|
||||
import moment from 'moment-es6';
|
||||
|
||||
describe('DateRangeFilterComponent', () => {
|
||||
let component: DateRangeFilterComponent;
|
||||
let fixture: ComponentFixture<DateRangeFilterComponent>;
|
||||
let service: DateRangeFilterService;
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
@ -39,6 +41,7 @@ describe('DateRangeFilterComponent', () => {
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DateRangeFilterComponent);
|
||||
component = fixture.componentInstance;
|
||||
service = TestBed.inject(DateRangeFilterService);
|
||||
|
||||
component.processFilterProperty = {
|
||||
key: 'createdDate',
|
||||
@ -54,8 +57,8 @@ describe('DateRangeFilterComponent', () => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should setDate on option change', async(() => {
|
||||
spyOn(component, 'setDate');
|
||||
it('should get on option change', async () => {
|
||||
spyOn(service, 'getDateRange');
|
||||
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-createdDate"] .mat-select-trigger');
|
||||
stateElement.click();
|
||||
fixture.detectChanges();
|
||||
@ -63,61 +66,13 @@ describe('DateRangeFilterComponent', () => {
|
||||
const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
|
||||
options[2].nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.setDate).toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should emit today range', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: ProcessDateFilterType.today };
|
||||
component.onSelectionChange(value);
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('day').toDate(),
|
||||
endDate: moment().endOf('day').toDate()
|
||||
};
|
||||
expect(component.dateChanged.emit).toHaveBeenCalledWith(expectedDate);
|
||||
await fixture.whenStable();
|
||||
expect(service.getDateRange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit month range', () => {
|
||||
it('should reset date range when no_date type is selected', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: ProcessDateFilterType.month };
|
||||
component.onSelectionChange(value);
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('month').toDate(),
|
||||
endDate: moment().endOf('month').toDate()
|
||||
};
|
||||
expect(component.dateChanged.emit).toHaveBeenCalledWith(expectedDate);
|
||||
});
|
||||
|
||||
it('should emit year range', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: ProcessDateFilterType.year };
|
||||
component.onSelectionChange(value);
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('year').toDate(),
|
||||
endDate: moment().endOf('year').toDate()
|
||||
};
|
||||
expect(component.dateChanged.emit).toHaveBeenCalledWith(expectedDate);
|
||||
});
|
||||
|
||||
it('should emit quarter range', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: ProcessDateFilterType.quarter };
|
||||
component.onSelectionChange(value);
|
||||
const currentDate = new Date();
|
||||
const quarter = Math.floor((currentDate.getMonth() / 3));
|
||||
const firstDate = new Date(currentDate.getFullYear(), quarter * 3, 1);
|
||||
const expectedDate = {
|
||||
startDate: firstDate,
|
||||
endDate: new Date(firstDate.getFullYear(), firstDate.getMonth() + 3, 0)
|
||||
};
|
||||
expect(component.dateChanged.emit).toHaveBeenCalledWith(expectedDate);
|
||||
});
|
||||
|
||||
it('should reset date range when no type is selected', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: null };
|
||||
const value = <MatSelectChange> { value: DateCloudFilterType.NO_DATE };
|
||||
component.onSelectionChange(value);
|
||||
const expectedDate = {
|
||||
startDate: null,
|
||||
@ -126,8 +81,36 @@ describe('DateRangeFilterComponent', () => {
|
||||
expect(component.dateChanged.emit).toHaveBeenCalledWith(expectedDate);
|
||||
});
|
||||
|
||||
it('should emit date range when any type is selected', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: DateCloudFilterType.TOMORROW };
|
||||
component.onSelectionChange(value);
|
||||
const expectedDate = {
|
||||
startDate: moment().endOf('day').toDate(),
|
||||
endDate: moment().add(1, 'days').startOf('day').toDate()
|
||||
};
|
||||
expect(component.dateChanged.emit).toHaveBeenCalledWith(expectedDate);
|
||||
});
|
||||
|
||||
it('should not emit any date change events when range type is selected', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
const value = <MatSelectChange> { value: DateCloudFilterType.RANGE };
|
||||
component.onSelectionChange(value);
|
||||
expect(component.dateChanged.emit).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit custom date range on date picker closed', () => {
|
||||
spyOn(component.dateChanged, 'emit');
|
||||
component.onDateRangeClosed();
|
||||
expect(component.dateChanged.emit).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should throw error no supported type is selected', () => {
|
||||
expect(function () { service.getDateRange(null); } ).toThrow(new Error('ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INVALID_DATE_FILTER'));
|
||||
});
|
||||
|
||||
it('should show date-range picker when type is range', async () => {
|
||||
const value = <MatSelectChange> { value: ProcessDateFilterType.range };
|
||||
const value = <MatSelectChange> { value: DateCloudFilterType.RANGE };
|
||||
component.onSelectionChange(value);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@ -17,9 +17,19 @@
|
||||
|
||||
import { Component, Input, EventEmitter, Output } from '@angular/core';
|
||||
import { MatSelectChange } from '@angular/material/select';
|
||||
import moment from 'moment-es6';
|
||||
import { ProcessFilterProperties, DateRangeFilter, ProcessDateFilterType } from '../../process/process-filters/models/process-filter-cloud.model';
|
||||
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.TODAY,
|
||||
DateCloudFilterType.WEEK,
|
||||
DateCloudFilterType.MONTH,
|
||||
DateCloudFilterType.QUARTER,
|
||||
DateCloudFilterType.YEAR,
|
||||
DateCloudFilterType.RANGE
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-date-range-filter',
|
||||
@ -31,128 +41,88 @@ import { FormGroup, FormControl } from '@angular/forms';
|
||||
@Input()
|
||||
processFilterProperty: ProcessFilterProperties;
|
||||
|
||||
@Input()
|
||||
options: DateCloudFilterType[] = DEFAULT_DATE_RANGE_OPTIONS;
|
||||
|
||||
@Output()
|
||||
dateChanged = new EventEmitter<DateRangeFilter>();
|
||||
|
||||
type: ProcessDateFilterType;
|
||||
currentDate = new Date();
|
||||
dateRange: DateRangeFilter = {
|
||||
startDate: null,
|
||||
endDate: null
|
||||
};
|
||||
|
||||
type: DateCloudFilterType;
|
||||
filteredProperties: ProcessFilterOptions[] = [];
|
||||
dateRangeForm = new FormGroup({
|
||||
start: new FormControl(),
|
||||
end: new FormControl()
|
||||
from: new FormControl(),
|
||||
to: new FormControl()
|
||||
});
|
||||
|
||||
options = [
|
||||
{
|
||||
key: ProcessDateFilterType.today,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.TODAY'
|
||||
},
|
||||
{
|
||||
key: ProcessDateFilterType.week,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.WEEK'
|
||||
},
|
||||
{
|
||||
key: ProcessDateFilterType.month,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.MONTH'
|
||||
},
|
||||
{
|
||||
key: ProcessDateFilterType.quarter,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.QUARTER'
|
||||
},
|
||||
{
|
||||
key: ProcessDateFilterType.year,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.YEAR'
|
||||
},
|
||||
{
|
||||
key: ProcessDateFilterType.range,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.RANGE'
|
||||
constructor(private dateRangeFilterService: DateRangeFilterService) {}
|
||||
|
||||
ngOnInit() {
|
||||
const defaultProperties = this.createDefaultDateOptions();
|
||||
this.filteredProperties = defaultProperties.filter((filterProperty: ProcessFilterOptions) => this.isValidProperty(this.options, filterProperty));
|
||||
}
|
||||
];
|
||||
|
||||
onSelectionChange(option: MatSelectChange) {
|
||||
this.type = option.value;
|
||||
this.setDate();
|
||||
this.dateChanged.emit(this.dateRange);
|
||||
}
|
||||
|
||||
setDate() {
|
||||
switch (this.type) {
|
||||
case ProcessDateFilterType.today:
|
||||
this.setTodayDateRange();
|
||||
break;
|
||||
case ProcessDateFilterType.week:
|
||||
this.setCurrentWeekRange();
|
||||
break;
|
||||
case ProcessDateFilterType.month:
|
||||
this.setCurrentMonthDateRange();
|
||||
break;
|
||||
case ProcessDateFilterType.quarter:
|
||||
this.setQuarterDateRange();
|
||||
break;
|
||||
case ProcessDateFilterType.year:
|
||||
this.setCurrentYearDateRange();
|
||||
break;
|
||||
default: this.resetDateRange();
|
||||
const dateRange = this.dateRangeFilterService.getDateRange(this.type);
|
||||
if (!this.isDateRangeType()) {
|
||||
this.dateChanged.emit(dateRange);
|
||||
}
|
||||
}
|
||||
|
||||
isDateRangeType(): boolean {
|
||||
return this.type === ProcessDateFilterType.range;
|
||||
return this.type === DateCloudFilterType.RANGE;
|
||||
}
|
||||
|
||||
onDateRangeClosed() {
|
||||
this.dateRange = {
|
||||
startDate: this.dateRangeForm.controls.start.value,
|
||||
endDate: this.dateRangeForm.controls.end.value
|
||||
const dateRange = {
|
||||
startDate: this.dateRangeForm.controls.from.value,
|
||||
endDate: this.dateRangeForm.controls.to.value
|
||||
};
|
||||
this.dateChanged.emit(this.dateRange);
|
||||
this.dateChanged.emit(dateRange);
|
||||
}
|
||||
|
||||
private resetDateRange() {
|
||||
this.dateRange = {
|
||||
startDate: null,
|
||||
endDate: null
|
||||
};
|
||||
private isValidProperty(filterProperties: string[], filterProperty: any): boolean {
|
||||
return filterProperties ? filterProperties.indexOf(filterProperty.value) >= 0 : true;
|
||||
}
|
||||
|
||||
private setCurrentYearDateRange() {
|
||||
this.dateRange = {
|
||||
startDate: moment().startOf('year').toDate(),
|
||||
endDate: moment().endOf('year').toDate()
|
||||
};
|
||||
private createDefaultDateOptions(): ProcessFilterOptions[] {
|
||||
return [
|
||||
{
|
||||
value: DateCloudFilterType.NO_DATE,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.NO_DATE'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.TODAY,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.TODAY'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.TOMORROW,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.TOMORROW'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.NEXT_7_DAYS,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.NEXT_7_DAYS'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.WEEK,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.WEEK'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.MONTH,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.MONTH'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.QUARTER,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.QUARTER'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.YEAR,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.YEAR'
|
||||
},
|
||||
{
|
||||
value: DateCloudFilterType.RANGE,
|
||||
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.RANGE'
|
||||
}
|
||||
|
||||
private setTodayDateRange() {
|
||||
this.dateRange = {
|
||||
startDate: moment().startOf('day').toDate(),
|
||||
endDate: moment().endOf('day').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private setCurrentWeekRange() {
|
||||
this.dateRange = {
|
||||
startDate: moment().startOf('week').toDate(),
|
||||
endDate: moment().endOf('week').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private setCurrentMonthDateRange() {
|
||||
this.dateRange = {
|
||||
startDate: moment().startOf('month').toDate(),
|
||||
endDate: moment().endOf('month').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private setQuarterDateRange() {
|
||||
const quarter = Math.floor((this.currentDate.getMonth() / 3));
|
||||
const firstDate = new Date(this.currentDate.getFullYear(), quarter * 3, 1);
|
||||
this.dateRange = {
|
||||
startDate: firstDate,
|
||||
endDate: new Date(firstDate.getFullYear(), firstDate.getMonth() + 3, 0)
|
||||
};
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,93 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { DateRangeFilterService } from './date-range-filter.service';
|
||||
import { DateCloudFilterType } from '../../models/date-cloud-filter.model';
|
||||
import moment from 'moment-es6';
|
||||
|
||||
describe('Date Range Filter service', () => {
|
||||
|
||||
let service: DateRangeFilterService;
|
||||
|
||||
beforeEach(() => {
|
||||
service = TestBed.inject(DateRangeFilterService);
|
||||
});
|
||||
|
||||
it('should return today range', () => {
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('day').toDate(),
|
||||
endDate: moment().endOf('day').toDate()
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.TODAY)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should return month range', () => {
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('month').toDate(),
|
||||
endDate: moment().endOf('month').toDate()
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.MONTH)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should return year range', () => {
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('year').toDate(),
|
||||
endDate: moment().endOf('year').toDate()
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.YEAR)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should return quarter range', () => {
|
||||
const currentDate = new Date();
|
||||
const quarter = Math.floor((currentDate.getMonth() / 3));
|
||||
const firstDate = new Date(currentDate.getFullYear(), quarter * 3, 1);
|
||||
const expectedDate = {
|
||||
startDate: firstDate,
|
||||
endDate: new Date(firstDate.getFullYear(), firstDate.getMonth() + 3, 0)
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.QUARTER)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should reset date range when no_date type is selected', () => {
|
||||
const expectedDate = {
|
||||
startDate: null,
|
||||
endDate: null
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.NO_DATE)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should return tomorow range', () => {
|
||||
const expectedDate = {
|
||||
startDate: moment().endOf('day').toDate(),
|
||||
endDate: moment().add(1, 'days').startOf('day').toDate()
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.TOMORROW)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should return next 7 days range', () => {
|
||||
const expectedDate = {
|
||||
startDate: moment().startOf('day').toDate(),
|
||||
endDate: moment().add(7, 'days').endOf('day').toDate()
|
||||
};
|
||||
expect(service.getDateRange(DateCloudFilterType.NEXT_7_DAYS)).toEqual(expectedDate);
|
||||
});
|
||||
|
||||
it('should throw error no supported type is selected', () => {
|
||||
expect(function () { service.getDateRange(null); } ).toThrow(new Error('ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.INVALID_DATE_FILTER'));
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,101 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import moment from 'moment-es6';
|
||||
import { DateRangeFilter, DateCloudFilterType } from '../../models/date-cloud-filter.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class DateRangeFilterService {
|
||||
|
||||
currentDate = new Date();
|
||||
|
||||
getDateRange(type: DateCloudFilterType): DateRangeFilter {
|
||||
switch (type) {
|
||||
case DateCloudFilterType.TODAY: return this.getTodayDateRange();
|
||||
case DateCloudFilterType.TOMORROW: return this.getTomorrowDateRange();
|
||||
case DateCloudFilterType.NEXT_7_DAYS: return this.getNext7DaysDateRange();
|
||||
case DateCloudFilterType.WEEK: return this.getCurrentWeekRange();
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
private resetDateRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: null,
|
||||
endDate: null
|
||||
};
|
||||
}
|
||||
|
||||
private getNext7DaysDateRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: moment().startOf('day').toDate(),
|
||||
endDate: moment().add(7, 'days').endOf('day').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private getTomorrowDateRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: moment().endOf('day').toDate(),
|
||||
endDate: moment().add(1, 'days').startOf('day').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private getCurrentYearDateRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: moment().startOf('year').toDate(),
|
||||
endDate: moment().endOf('year').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private getTodayDateRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: moment().startOf('day').toDate(),
|
||||
endDate: moment().endOf('day').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private getCurrentWeekRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: moment().startOf('week').toDate(),
|
||||
endDate: moment().endOf('week').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private getCurrentMonthDateRange(): DateRangeFilter {
|
||||
return {
|
||||
startDate: moment().startOf('month').toDate(),
|
||||
endDate: moment().endOf('month').toDate()
|
||||
};
|
||||
}
|
||||
|
||||
private getQuarterDateRange(): DateRangeFilter {
|
||||
const quarter = Math.floor((this.currentDate.getMonth() / 3));
|
||||
const firstDate = new Date(this.currentDate.getFullYear(), quarter * 3, 1);
|
||||
return {
|
||||
startDate: firstDate,
|
||||
endDate: new Date(firstDate.getFullYear(), firstDate.getMonth() + 3, 0)
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -20,6 +20,7 @@ import { CoreModule } from '@alfresco/adf-core';
|
||||
import { DateRangeFilterComponent } from './date-range-filter/date-range-filter.component';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DateRangeFilterService } from './date-range-filter/date-range-filter.service';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ DateRangeFilterComponent ],
|
||||
@ -30,6 +31,9 @@ import { CommonModule } from '@angular/common';
|
||||
],
|
||||
exports: [
|
||||
DateRangeFilterComponent
|
||||
],
|
||||
providers: [
|
||||
DateRangeFilterService
|
||||
]
|
||||
})
|
||||
export class ProcessCommonModule {}
|
||||
|
||||
@ -168,7 +168,10 @@
|
||||
"APP_VERSION": "AppReleaseVersion",
|
||||
"CREATED_DATE": "Created Date",
|
||||
"DATE_RANGE": {
|
||||
"NO_DATE": "NO_DATE",
|
||||
"TODAY": "today",
|
||||
"TOMORROW": "tomorow",
|
||||
"NEXT_7_DAYS": "Next 7 Days",
|
||||
"WEEK": "this week",
|
||||
"MONTH": "this month",
|
||||
"QUARTER": "this quarter",
|
||||
@ -182,7 +185,8 @@
|
||||
"ERROR": {
|
||||
"DATE": "Date format DD/MM/YYYY",
|
||||
"INDALID_START_DATE": "Invalid start date",
|
||||
"INDALID_END_DATE": "Invalid end date"
|
||||
"INDALID_END_DATE": "Invalid end date",
|
||||
"INVALID_DATE_FILTER": "Date filter option is not supported"
|
||||
},
|
||||
"TOOL_TIP": {
|
||||
"SAVE": "Save filter",
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export enum DateCloudFilterType {
|
||||
NO_DATE = 'NO_DATE',
|
||||
TODAY = 'TODAY',
|
||||
TOMORROW = 'TOMORROW',
|
||||
NEXT_7_DAYS = 'NEXT_7_DAYS',
|
||||
WEEK = 'WEEK',
|
||||
MONTH = 'MONTH',
|
||||
QUARTER = 'QUARTER',
|
||||
YEAR = 'YEAR',
|
||||
RANGE = 'RANGE'
|
||||
}
|
||||
|
||||
export interface DateRangeFilter {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
}
|
||||
@ -99,17 +99,3 @@ export class ProcessFilterProperties {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export enum ProcessDateFilterType {
|
||||
today = 'today',
|
||||
week = 'week',
|
||||
month = 'month',
|
||||
quarter = 'quarter',
|
||||
year = 'year',
|
||||
range = 'range'
|
||||
}
|
||||
|
||||
export interface DateRangeFilter {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<div fxFlex="23%" class="adf-edit-task-filter-checkbox" *ngIf="isCheckBoxType(taskFilterProperty)">
|
||||
<div class="adf-edit-task-filter-checkbox" *ngIf="isCheckBoxType(taskFilterProperty)">
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
[formControlName]="taskFilterProperty.key"
|
||||
@ -67,6 +67,11 @@
|
||||
{{taskFilterProperty.label | translate}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<adf-cloud-date-range-filter *ngIf="isDateRangeType(taskFilterProperty)"
|
||||
[processFilterProperty]="taskFilterProperty"
|
||||
[options]="taskFilterProperty.dateFilterOptions"
|
||||
(dateChanged)="onDateRangeFilterChanged($event, taskFilterProperty)"></adf-cloud-date-range-filter>
|
||||
</ng-container>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
font-size: 16px;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
flex: 1 23%;
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-date-error-container {
|
||||
@ -35,6 +36,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-dateRange mat-grid-list {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-cloud-edit-task-filter-loading-margin {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
|
||||
@ -30,6 +30,7 @@ import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.compo
|
||||
import { TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
|
||||
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
|
||||
import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
|
||||
import { DateCloudFilterType, DateRangeFilter } from '../../../models/date-cloud-filter.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-edit-task-filter',
|
||||
@ -163,7 +164,14 @@ export class EditTaskFilterCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
|
||||
getFormControlsConfig(taskFilterProperties: TaskFilterProperties[]): any {
|
||||
const properties = taskFilterProperties.map((property: TaskFilterProperties) => {
|
||||
if (!property.rangeKeys) {
|
||||
return { [property.key]: property.value };
|
||||
} else {
|
||||
return {
|
||||
[property.rangeKeys.from]: property.value[property.rangeKeys.from],
|
||||
[property.rangeKeys.to]: property.value[property.rangeKeys.to]
|
||||
};
|
||||
}
|
||||
});
|
||||
return properties.reduce(((result, current) => Object.assign(result, current)), {});
|
||||
}
|
||||
@ -317,6 +325,15 @@ export class EditTaskFilterCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
}
|
||||
}
|
||||
|
||||
onDateRangeFilterChanged(dateRange: DateRangeFilter, property: TaskFilterProperties) {
|
||||
this.editTaskFilterForm.get(property.rangeKeys.from).setValue(
|
||||
dateRange.startDate ? dateRange.startDate.toISOString() : null
|
||||
);
|
||||
this.editTaskFilterForm.get(property.rangeKeys.to).setValue(
|
||||
dateRange.endDate ? dateRange.endDate.toISOString() : null
|
||||
);
|
||||
}
|
||||
|
||||
hasError(property: TaskFilterProperties): boolean {
|
||||
return this.getPropertyController(property).errors && this.getPropertyController(property).errors.invalid;
|
||||
}
|
||||
@ -443,6 +460,10 @@ export class EditTaskFilterCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
return property.type === 'date';
|
||||
}
|
||||
|
||||
isDateRangeType(property: TaskFilterProperties): boolean {
|
||||
return property.type === 'date-range';
|
||||
}
|
||||
|
||||
isSelectType(property: TaskFilterProperties): boolean {
|
||||
return property.type === 'select';
|
||||
}
|
||||
@ -588,12 +609,6 @@ export class EditTaskFilterCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
key: 'createdDate',
|
||||
value: ''
|
||||
}),
|
||||
new TaskFilterProperties({
|
||||
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DUE_DATE',
|
||||
type: 'date',
|
||||
key: 'dueDate',
|
||||
value: ''
|
||||
}),
|
||||
new TaskFilterProperties({
|
||||
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.SORT',
|
||||
type: 'select',
|
||||
@ -613,6 +628,19 @@ export class EditTaskFilterCloudComponent implements OnInit, OnChanges, OnDestro
|
||||
type: 'checkbox',
|
||||
key: 'standalone',
|
||||
value: currentTaskFilter.standalone || false
|
||||
}),
|
||||
new TaskFilterProperties({
|
||||
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DUE_DATE',
|
||||
type: 'date-range',
|
||||
key: 'dueDate',
|
||||
rangeKeys: { from: 'dueDateFrom', to: 'dueDateTo'},
|
||||
value: currentTaskFilter.dueDate || false,
|
||||
dateFilterOptions: [
|
||||
DateCloudFilterType.NO_DATE,
|
||||
DateCloudFilterType.TOMORROW,
|
||||
DateCloudFilterType.NEXT_7_DAYS,
|
||||
DateCloudFilterType.RANGE
|
||||
]
|
||||
})
|
||||
];
|
||||
}
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { DateCloudFilterType } from '../../../models/date-cloud-filter.model';
|
||||
|
||||
export class TaskFilterCloudModel {
|
||||
id: string;
|
||||
name: string;
|
||||
@ -31,6 +33,8 @@ export class TaskFilterCloudModel {
|
||||
processInstanceId: string;
|
||||
createdDate: Date;
|
||||
dueDate: Date;
|
||||
dueDateFrom: string;
|
||||
dueDateTo: string;
|
||||
taskName: string;
|
||||
taskId: string;
|
||||
parentTaskId: string;
|
||||
@ -56,6 +60,8 @@ export class TaskFilterCloudModel {
|
||||
this.processInstanceId = obj.processInstanceId || null;
|
||||
this.createdDate = obj.createdDate || null;
|
||||
this.dueDate = obj.dueDate || null;
|
||||
this.dueDateFrom = obj.dueDateFrom || null;
|
||||
this.dueDateTo = obj.dueDateTo || null;
|
||||
this.taskName = obj.taskName || null;
|
||||
this.taskId = obj.taskId || null;
|
||||
this.parentTaskId = obj.parentTaskId || null;
|
||||
@ -104,12 +110,19 @@ export interface FilterOptions {
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export interface RangeKeys {
|
||||
from: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
export class TaskFilterProperties {
|
||||
label: string;
|
||||
type: string;
|
||||
value: any;
|
||||
key: string;
|
||||
rangeKeys?: RangeKeys;
|
||||
options: FilterOptions[];
|
||||
dateFilterOptions?: DateCloudFilterType[];
|
||||
|
||||
constructor(obj?: any) {
|
||||
if (obj) {
|
||||
@ -117,7 +130,9 @@ export class TaskFilterProperties {
|
||||
this.type = obj.type || null;
|
||||
this.value = obj.value || '';
|
||||
this.key = obj.key || null;
|
||||
this.rangeKeys = obj.rangeKeys || null;
|
||||
this.options = obj.options || null;
|
||||
this.dateFilterOptions = obj.dateFilterOptions || null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@ import { EditTaskFilterCloudComponent } from './components/edit-task-filter-clou
|
||||
import { TaskFilterDialogCloudComponent } from './components/task-filter-dialog-cloud.component';
|
||||
import { AppListCloudModule } from './../../app/app-list-cloud.module';
|
||||
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
|
||||
import { ProcessCommonModule } from '../../common/process-common.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@ -37,7 +38,8 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
|
||||
FlexLayoutModule,
|
||||
MaterialModule,
|
||||
AppListCloudModule,
|
||||
CoreModule
|
||||
CoreModule,
|
||||
ProcessCommonModule
|
||||
],
|
||||
declarations: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent, TaskFilterDialogCloudComponent],
|
||||
exports: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent],
|
||||
|
||||
@ -70,6 +70,14 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
|
||||
@Input()
|
||||
lastModifiedTo: string = '';
|
||||
|
||||
/** Filter the tasks. Display only tasks with dueDate greater or equal than the supplied date. */
|
||||
@Input()
|
||||
dueDateFrom: string = '';
|
||||
|
||||
/** Filter the tasks. Display only tasks with dueDate less or equal to the supplied date. */
|
||||
@Input()
|
||||
dueDateTo: string = '';
|
||||
|
||||
/** Filter the tasks. Display only tasks with id equal to the supplied value. */
|
||||
@Input()
|
||||
id: string = '';
|
||||
@ -344,6 +352,8 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
|
||||
priority: this.priority,
|
||||
lastModifiedFrom: this.lastModifiedFrom,
|
||||
lastModifiedTo: this.lastModifiedTo,
|
||||
dueDateFrom: this.dueDateFrom,
|
||||
dueDateTo: this.dueDateTo,
|
||||
status: this.status,
|
||||
dueDate: this.dueDate,
|
||||
createdDate: this.createdDate,
|
||||
|
||||
@ -27,6 +27,8 @@ export class TaskQueryCloudRequestModel {
|
||||
dueDate?: null;
|
||||
lastModifiedFrom?: null;
|
||||
lastModifiedTo?: null;
|
||||
dueDateFrom?: null;
|
||||
dueDateTo?: null;
|
||||
id?: string;
|
||||
name?: string;
|
||||
owner?: string;
|
||||
@ -51,6 +53,8 @@ export class TaskQueryCloudRequestModel {
|
||||
this.dueDate = obj.dueDate;
|
||||
this.lastModifiedFrom = obj.lastModifiedFrom;
|
||||
this.lastModifiedTo = obj.lastModifiedTo;
|
||||
this.dueDateFrom = obj.dueDateFrom;
|
||||
this.dueDateTo = obj.dueDateTo;
|
||||
this.id = obj.id;
|
||||
this.name = obj.name;
|
||||
this.owner = obj.owner;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user