inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[APPS-2132] migrate components to date-fns (#9001)

Browse Source 
* migrate edit process filter to date-fns

* refresh unit tests

* fix a11y for date-fns

* Revert "fix a11y for date-fns"

This reverts commit 2e706d4aed1b8a50d1de62fe11d9d528530d628c.

* update e2e

* start task fixes

* cleanup code

* remove fdescribe

* remove moment, improve unit testing

* remove dependency on date util

* cleanup search date range component

* cleanup code

* migrate search date range component

* revert e2e changes for now

* extra fixes and tests

* add missing functionality, extra tests

* increase time constraints

* improved code, disabled e2e

* move e2e to unit tests, extra rework for insights

* extra unit test for date range validation

* migrate date-range to date-fns
This commit is contained in:
Denys Vuika
2023-10-17 17:24:46 +01:00
committed by GitHub
parent f7b0544172
commit e6d625253c
21 changed files with 857 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.ts
View File

@@ -18,17 +18,21 @@
import { Component, Input, EventEmitter, Output, OnInit } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';
import { ProcessFilterProperties, ProcessFilterOptions } from '../../process/process-filters/models/process-filter-cloud.model';
import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { DateRangeFilter, DateCloudFilterType } from '../../models/date-cloud-filter.model';
import { endOfDay, startOfDay } from 'date-fns';
import { endOfDay, isValid, startOfDay } from 'date-fns';
interface DateRangeFormProps {
from: FormControl<Date>;
to: FormControl<Date>;
}
@Component({
selector: 'adf-cloud-date-range-filter',
styleUrls: ['./date-range-filter.component.scss'],
templateUrl: './date-range-filter.component.html'
})
export class DateRangeFilterComponent implements OnInit {
selector: 'adf-cloud-date-range-filter',
styleUrls: ['./date-range-filter.component.scss'],
templateUrl: './date-range-filter.component.html'
})
export class DateRangeFilterComponent implements OnInit {
@Input()
processFilterProperty: ProcessFilterProperties;
@@ -43,9 +47,9 @@ import { endOfDay, startOfDay } from 'date-fns';
type: DateCloudFilterType;
filteredProperties: ProcessFilterOptions[] = [];
dateRangeForm = new UntypedFormGroup({
from: new UntypedFormControl(),
to: new UntypedFormControl()
dateRangeForm = new FormGroup<DateRangeFormProps>({
from: new FormControl(),
to: new FormControl()
});
ngOnInit() {
@@ -69,14 +73,17 @@ import { endOfDay, startOfDay } from 'date-fns';
}
onDateRangeClosed() {
const startDate = isValid(this.dateRangeForm.controls.from.value) ? startOfDay(this.dateRangeForm.controls.from.value).toISOString() : null;
const endDate = isValid(this.dateRangeForm.controls.to.value) ? endOfDay(this.dateRangeForm.controls.to.value).toISOString() : null;
const dateRange = {
startDate: startOfDay(new Date(this.dateRangeForm.controls.from.value)).toISOString(),
endDate: endOfDay(new Date(this.dateRangeForm.controls.to.value)).toISOString()
startDate,
endDate
};
this.dateChanged.emit(dateRange);
}
private hasPreselectedValues() {
private hasPreselectedValues(): boolean {
return !!this.processFilterProperty?.attributes && !!this.processFilterProperty?.value;
}
@@ -94,7 +101,7 @@ import { endOfDay, startOfDay } from 'date-fns';
return this.processFilterProperty.attributes[key];
}
private getFilterValue(attribute: string) {
private getFilterValue<T = any>(attribute: string): T {
return this.processFilterProperty.value[attribute];
}
@@ -115,7 +122,7 @@ import { endOfDay, startOfDay } from 'date-fns';
}
private createDefaultDateOptions(): ProcessFilterOptions[] {
return [
return [
{
value: DateCloudFilterType.NO_DATE,
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DATE_RANGE.NO_DATE'
@@ -154,4 +161,4 @@ import { endOfDay, startOfDay } from 'date-fns';
}
];
}
}
}

2
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
View File

@@ -67,7 +67,7 @@
<input
matInput
[formControlName]="processFilterProperty.key"
(keyup)="onDateChanged($any($event).srcElement.value, processFilterProperty)"
(keyup)="onDateChanged($any($event).target.value, processFilterProperty)"
(dateChange)="onDateChanged($event.value, processFilterProperty)"
[matDatepicker]="dateController"
placeholder="{{processFilterProperty.label | translate}}"

430
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
View File

@@ -30,7 +30,6 @@ import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
import { fakeApplicationInstance, fakeApplicationInstanceWithEnvironment } from './../../../app/mock/app-model.mock';
import moment from 'moment';
import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
import { TranslateModule } from '@ngx-translate/core';
@@ -40,12 +39,13 @@ import { MatIconTestingModule } from '@angular/material/icon/testing';
import { ProcessDefinitionCloud } from '../../../models/process-definition-cloud.model';
import { mockAppVersions } from '../mock/process-filters-cloud.mock';
import { fakeEnvironmentList } from '../../../common/mock/environment.mock';
import { endOfDay, format, startOfDay, subYears } from 'date-fns';
import { endOfDay, format, startOfDay, subYears, isValid } from 'date-fns';
describe('EditProcessFilterCloudComponent', () => {
let component: EditProcessFilterCloudComponent;
let service: ProcessFilterCloudService;
let fixture: ComponentFixture<EditProcessFilterCloudComponent>;
let nativeElement: HTMLElement;
let dialog: MatDialog;
let appsService: AppsProcessCloudService;
let processService: ProcessCloudService;
@@ -89,6 +89,7 @@ describe('EditProcessFilterCloudComponent', () => {
});
fixture = TestBed.createComponent(EditProcessFilterCloudComponent);
component = fixture.componentInstance;
nativeElement = fixture.debugElement.nativeElement;
service = TestBed.inject(ProcessFilterCloudService);
appsService = TestBed.inject(AppsProcessCloudService);
processService = TestBed.inject(ProcessCloudService);
@@ -111,6 +112,29 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.destroy();
});
const clickExpansionPanel = async () => {
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
await fixture.whenStable();
};
const clickDeleteButton = async () => {
const deleteButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-delete"]');
deleteButton.click();
fixture.detectChanges();
await fixture.whenStable();
};
const clickPropertyStatus = () => {
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
};
it('should not raise filter change events if filter remains the same', () => {
let count = 0;
component.filterChange.subscribe(() => count++);
@@ -145,8 +169,8 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
const title = nativeElement.querySelector<HTMLElement>('#adf-edit-process-filter-title-id');
const subTitle = nativeElement.querySelector<HTMLElement>('#adf-edit-process-filter-sub-title-id');
expect(title).toBeDefined();
expect(subTitle).toBeDefined();
@@ -162,7 +186,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
const title = nativeElement.querySelector('#adf-edit-process-filter-title-id');
expect(title).toBeNull();
});
@@ -173,9 +197,9 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-process-filter-loading-margin');
const title = nativeElement.querySelector<HTMLElement>('#adf-edit-process-filter-title-id');
const subTitle = nativeElement.querySelector<HTMLElement>('#adf-edit-process-filter-sub-title-id');
const matSpinnerElement = nativeElement.querySelector('.adf-cloud-edit-process-filter-loading-margin');
expect(matSpinnerElement).toBeNull();
expect(title).toBeDefined();
@@ -192,7 +216,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-process-filter-loading-margin');
const matSpinnerElement = nativeElement.querySelector('.adf-cloud-edit-process-filter-loading-margin');
expect(matSpinnerElement).toBeDefined();
});
@@ -225,34 +249,28 @@ describe('EditProcessFilterCloudComponent', () => {
describe('Save & Delete buttons', () => {
it('should enable delete button for custom process filters', async () => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(deleteButton.disabled).toEqual(false);
});
it('should enable save button if the filter is changed for custom process filters', (done) => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editProcessFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
fixture.detectChanges();
expect(saveButton.disabled).toBe(false);
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
clickPropertyStatus();
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
@@ -261,13 +279,9 @@ describe('EditProcessFilterCloudComponent', () => {
it('should disable save button if the filter is not changed for custom filter', async () => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
expect(saveButton.disabled).toBe(true);
});
});
@@ -288,25 +302,17 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
expect(saveButton.disabled).toEqual(true);
});
it('should disable saveAs button if the process filter is not changed for custom filter', async () => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
expect(saveButton.disabled).toEqual(true);
});
@@ -324,22 +330,20 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editProcessFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
fixture.detectChanges();
expect(saveButton.disabled).toEqual(false);
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
clickPropertyStatus();
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
@@ -348,22 +352,20 @@ describe('EditProcessFilterCloudComponent', () => {
it('should enable saveAs button if the filter values are changed for custom filter', (done) => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editProcessFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
fixture.detectChanges();
expect(saveButton.disabled).toEqual(false);
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
clickPropertyStatus();
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
@@ -374,16 +376,11 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display current process filter details', async () => {
fixture.detectChanges();
await fixture.whenStable();
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
await fixture.whenStable();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"]');
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-order"]');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-status"]');
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-sort"]');
const orderElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-order"]');
expect(stateElement).toBeDefined();
expect(sortElement).toBeDefined();
expect(orderElement).toBeDefined();
@@ -395,12 +392,9 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display state drop down', async () => {
fixture.detectChanges();
await fixture.whenStable();
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
clickPropertyStatus();
fixture.detectChanges();
await fixture.whenStable();
@@ -412,10 +406,9 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display sort drop down', async () => {
fixture.detectChanges();
await fixture.whenStable();
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"] .mat-select-trigger');
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-sort"] .mat-select-trigger');
sortElement.click();
fixture.detectChanges();
@@ -428,10 +421,9 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display order drop down', async () => {
fixture.detectChanges();
await fixture.whenStable();
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-order"] .mat-select-trigger');
const orderElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-order"] .mat-select-trigger');
orderElement.click();
fixture.detectChanges();
@@ -604,7 +596,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
const controller = component.editProcessFilterForm.get('appVersionMultiple');
const appVersionMultiple = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-appVersionMultiple"]');
const appVersionMultiple = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-appVersionMultiple"]');
appVersionMultiple.click();
fixture.detectChanges();
@@ -633,7 +625,7 @@ describe('EditProcessFilterCloudComponent', () => {
await fixture.whenStable();
const controller = component.editProcessFilterForm.get('processDefinitionName');
const processDefinitionNamesElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-processDefinitionName"]');
const processDefinitionNamesElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-processDefinitionName"]');
processDefinitionNamesElement.click();
fixture.detectChanges();
@@ -653,13 +645,9 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -691,13 +679,9 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -727,13 +711,9 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -761,14 +741,14 @@ describe('EditProcessFilterCloudComponent', () => {
component.toggleFilterActions = true;
const saveFilterSpy = spyOn(service, 'updateFilter').and.returnValue(of([fakeFilter]));
const saveSpy: jasmine.Spy = spyOn(component.action, 'emit');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editProcessFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
fixture.detectChanges();
expect(saveButton.disabled).toBe(false);
saveButton.click();
@@ -777,9 +757,7 @@ describe('EditProcessFilterCloudComponent', () => {
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
clickPropertyStatus();
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
@@ -794,23 +772,13 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
clickPropertyStatus();
fixture.detectChanges();
await fixture.whenStable();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
await fixture.whenStable();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
deleteButton.click();
fixture.detectChanges();
await fixture.whenStable();
await clickDeleteButton();
expect(deleteFilterSpy).toHaveBeenCalled();
expect(deleteSpy).toHaveBeenCalled();
@@ -820,14 +788,14 @@ describe('EditProcessFilterCloudComponent', () => {
component.toggleFilterActions = true;
const saveAsFilterSpy = spyOn(service, 'addFilter').and.callThrough();
const saveAsSpy = spyOn(component.action, 'emit');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editProcessFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
fixture.detectChanges();
expect(saveButton.disabled).toBe(false);
saveButton.click();
@@ -837,9 +805,7 @@ describe('EditProcessFilterCloudComponent', () => {
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
clickPropertyStatus();
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
@@ -848,15 +814,11 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display default filter actions', async () => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const saveAsButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-save"]');
const deleteButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-delete"]');
expect(component.processFilterActions).toBeDefined();
expect(component.processFilterActions.length).toEqual(3);
expect(saveButton).toBeDefined();
@@ -902,12 +864,10 @@ describe('EditProcessFilterCloudComponent', () => {
await fixture.whenStable();
const saveDefaultFilterSpy = spyOn(service, 'updateFilter').and.returnValue(of([fakeFilter]));
const saveDefaultFilterEmitSpy: jasmine.Spy = spyOn(component.action, 'emit');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const saveDefaultFilterEmitSpy = spyOn(component.action, 'emit');
await clickExpansionPanel();
const saveDefaultFilterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="adf-filter-action-${PROCESS_FILTER_ACTION_SAVE_DEFAULT}"]`);
const saveDefaultFilterButton = nativeElement.querySelector<HTMLButtonElement>(`[data-automation-id="adf-filter-action-${PROCESS_FILTER_ACTION_SAVE_DEFAULT}"]`);
fixture.detectChanges();
expect(saveDefaultFilterButton.disabled).toBe(false);
saveDefaultFilterButton.click();
@@ -942,11 +902,9 @@ describe('EditProcessFilterCloudComponent', () => {
const restoreDefaultProcessFiltersSpy = spyOn(service, 'getProcessFilters').and.returnValue(of([fakeFilter]));
const resetDefaultsFilterSpy = spyOn(service, 'resetProcessFilterToDefaults').and.returnValue(of([fakeFilter]));
const resetDefaultsEmitSpy: jasmine.Spy = spyOn(component.action, 'emit');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
await clickExpansionPanel();
const resetButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="adf-filter-action-${PROCESS_FILTER_ACTION_RESTORE}"]`);
const resetButton = nativeElement.querySelector<HTMLButtonElement>(`[data-automation-id="adf-filter-action-${PROCESS_FILTER_ACTION_RESTORE}"]`);
fixture.detectChanges();
expect(resetButton.disabled).toBe(false);
resetButton.click();
@@ -966,16 +924,11 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
await fixture.whenStable();
const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const saveAsButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-save"]');
const deleteButton = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-filter-action-delete"]');
expect(component.processFilterActions).toBeDefined();
expect(component.processFilterActions.length).toEqual(3);
expect(saveButton).toBeDefined();
@@ -990,20 +943,132 @@ describe('EditProcessFilterCloudComponent', () => {
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
const date = moment();
const date = endOfDay(new Date());
component.filterChange.subscribe(() => {
expect(component.processFilter.lastModifiedTo.toISOString()).toEqual(date.toISOString());
done();
});
const lastModifiedToControl = component.editProcessFilterForm.get('lastModifiedTo');
lastModifiedToControl.setValue(date);
date.set({
hour: 23,
minute: 59,
second: 59
component.lastModifiedTo.clearValidators();
component.lastModifiedTo.setValue(new Date());
expect(component.lastModifiedTo.valid).toBe(true);
expect(component.editProcessFilterForm.valid).toBe(true);
});
it('should set the correct lastModifiedFrom date', (done) => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'lastModified'];
const processFilterIdChange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
const date = startOfDay(new Date());
component.filterChange.subscribe(() => {
expect(component.processFilter.lastModifiedFrom.toISOString()).toEqual(date.toISOString());
done();
});
component.lastModifiedFrom.clearValidators();
component.lastModifiedFrom.setValue(new Date());
expect(component.lastModifiedFrom.valid).toBe(true);
expect(component.editProcessFilterForm.valid).toBe(true);
});
it('should validate lastModifiedTo date input', async () => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'lastModified'];
const processFilterIdChange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
await fixture.whenStable();
component.onDateChanged('20/03/2023', { key: 'lastModifiedTo' } as any );
expect(component.lastModifiedTo.value).toEqual(new Date('2023-03-20'));
expect(component.lastModifiedTo.valid).toBeTrue();
component.onDateChanged('invalid date', { key: 'lastModifiedTo' } as any);
expect(isValid(component.lastModifiedTo.value)).toBeFalse();
expect(component.lastModifiedTo.valid).toBeFalse();
});
it('should validate lastModifiedFrom date input', async () => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'lastModified'];
const processFilterIdChange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
await fixture.whenStable();
component.onDateChanged('20/03/2023', { key: 'lastModifiedFrom' } as any );
expect(component.lastModifiedFrom.value).toEqual(new Date('2023-03-20'));
expect(component.lastModifiedFrom.valid).toBeTrue();
component.onDateChanged('invalid date', { key: 'lastModifiedFrom' } as any);
expect(isValid(component.lastModifiedFrom.value)).toBeFalse();
expect(component.lastModifiedFrom.valid).toBeFalse();
});
it('should update lastModifiedTo from input', async () => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'lastModified'];
const processFilterIdChange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
await fixture.whenStable();
const dateInput = nativeElement.querySelector<HTMLInputElement>(`[data-automation-id="adf-cloud-edit-process-property-lastModifiedTo"]`);
expect(dateInput).not.toBeNull();
dateInput.value = '20/03/2023';
dateInput.dispatchEvent(new Event('keyup'));
expect(component.lastModifiedTo.value).toEqual(new Date('2023-03-20'));
expect(component.lastModifiedTo.valid).toBeTrue();
});
it('should update lastModifiedFrom from input', async () => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'lastModified'];
const processFilterIdChange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
await fixture.whenStable();
const dateInput = nativeElement.querySelector<HTMLInputElement>(`[data-automation-id="adf-cloud-edit-process-property-lastModifiedFrom"]`);
expect(dateInput).not.toBeNull();
dateInput.value = '20/03/2023';
dateInput.dispatchEvent(new Event('keyup'));
expect(component.lastModifiedFrom.value).toEqual(new Date('2023-03-20'));
expect(component.lastModifiedFrom.valid).toBeTrue();
});
it('should fail validating lastModifiedFrom from input', async () => {
component.appName = 'fake';
component.filterProperties = ['appName', 'processInstanceId', 'priority', 'lastModified'];
const processFilterIdChange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ id: processFilterIdChange });
fixture.detectChanges();
await fixture.whenStable();
const dateInput = nativeElement.querySelector<HTMLInputElement>(`[data-automation-id="adf-cloud-edit-process-property-lastModifiedFrom"]`);
expect(dateInput).not.toBeNull();
dateInput.value = 'invalid';
dateInput.dispatchEvent(new Event('keyup'));
expect(isValid(component.lastModifiedFrom.value)).toBeFalse();
expect(component.lastModifiedFrom.valid).toBeFalse();
});
it('should set date range filter type when range is selected', (done) => {
@@ -1014,8 +1079,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
component.filterChange.subscribe(() => {
const completedDateTypeControl = component.editProcessFilterForm.get('completedDateType');
expect(completedDateTypeControl.value).toEqual(DateCloudFilterType.RANGE);
expect(component.completedDateType.value).toEqual(DateCloudFilterType.RANGE);
done();
});
@@ -1023,8 +1087,8 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
const dateFilter = {
startDate: moment().startOf('day').toISOString(true),
endDate: moment().endOf('day').toISOString(true)
startDate: startOfDay(new Date()).toISOString(),
endDate: endOfDay(new Date()).toISOString()
};
component.onDateRangeFilterChanged(dateFilter, {
@@ -1057,8 +1121,7 @@ describe('EditProcessFilterCloudComponent', () => {
done();
});
const startedDateTypeControl = component.editProcessFilterForm.get('completedDateType');
startedDateTypeControl.setValue(DateCloudFilterType.TODAY);
component.completedDateType.setValue(DateCloudFilterType.TODAY);
});
it('should update form on date range value is updated', (done) => {
@@ -1069,8 +1132,8 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
const dateFilter = {
startDate: moment().startOf('day').toISOString(true),
endDate: moment().endOf('day').toISOString(true)
startDate: startOfDay(new Date()).toISOString(),
endDate: endOfDay(new Date()).toISOString()
};
component.filterChange.subscribe(() => {
@@ -1079,8 +1142,7 @@ describe('EditProcessFilterCloudComponent', () => {
done();
});
const startedDateTypeControl = component.editProcessFilterForm.get('completedDateType');
startedDateTypeControl.setValue(DateCloudFilterType.RANGE);
component.completedDateType.setValue(DateCloudFilterType.RANGE);
component.onDateRangeFilterChanged(dateFilter, {
key: 'completedDateRange',
@@ -1095,60 +1157,44 @@ describe('EditProcessFilterCloudComponent', () => {
});
});
it('should call restore default filters service on deletion of last filter', (done) => {
it('should call restore default filters service on deletion of last filter', async () => {
component.toggleFilterActions = true;
const deleteFilterSpy = spyOn(service, 'deleteFilter').and.returnValue(of([]));
const restoreFiltersSpy = spyOn(component, 'restoreDefaultProcessFilters').and.returnValue(of([]));
const deleteSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
deleteButton.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(deleteFilterSpy).toHaveBeenCalled();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(deleteSpy).toHaveBeenCalled();
expect(restoreFiltersSpy).toHaveBeenCalled();
done();
});
await clickExpansionPanel();
clickPropertyStatus();
await clickDeleteButton();
});
expect(deleteFilterSpy).toHaveBeenCalled();
fixture.detectChanges();
await fixture.whenStable();
expect(deleteSpy).toHaveBeenCalled();
expect(restoreFiltersSpy).toHaveBeenCalled();
});
it('should not call restore default filters service on deletion first filter', (done) => {
it('should not call restore default filters service on deletion first filter', async () => {
component.toggleFilterActions = true;
const deleteFilterSpy = spyOn(service, 'deleteFilter').and.returnValue(of([new ProcessFilterCloudModel({ name: 'mock-filter-name' })]));
const restoreFiltersSpy = spyOn(component, 'restoreDefaultProcessFilters').and.returnValue(of([]));
const deleteSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
deleteButton.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(deleteFilterSpy).toHaveBeenCalled();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(deleteSpy).toHaveBeenCalled();
expect(restoreFiltersSpy).not.toHaveBeenCalled();
done();
});
await clickExpansionPanel();
clickPropertyStatus();
});
fixture.detectChanges();
await clickDeleteButton();
expect(deleteFilterSpy).toHaveBeenCalled();
fixture.detectChanges();
await fixture.whenStable();
expect(deleteSpy).toHaveBeenCalled();
expect(restoreFiltersSpy).not.toHaveBeenCalled();
});
it('should build initiator as object array', () => {

88
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts
View File

@@ -16,12 +16,11 @@
*/
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, AbstractControl } from '@angular/forms';
import { FormBuilder, AbstractControl, FormGroup, FormControl } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { debounceTime, filter, takeUntil, finalize, switchMap, tap } from 'rxjs/operators';
import { Subject, Observable, Subscription } from 'rxjs';
import moment, { Moment } from 'moment';
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
import {
ProcessFilterCloudModel,
@@ -30,13 +29,14 @@ import {
ProcessFilterOptions,
ProcessSortFilterProperty
} from '../models/process-filter-cloud.model';
import { TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { DateFnsUtils, TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud.component';
import { ProcessCloudService } from '../../services/process-cloud.service';
import { DateCloudFilterType, DateRangeFilter } from '../../../models/date-cloud-filter.model';
import { IdentityUserModel } from '../../../people/models/identity-user.model';
import { Environment } from '../../../common/interface/environment.interface';
import { endOfDay, isValid, startOfDay } from 'date-fns';
export const PROCESS_FILTER_ACTION_SAVE = 'save';
export const PROCESS_FILTER_ACTION_SAVE_AS = 'saveAs';
@@ -52,6 +52,19 @@ export interface DropdownOption {
label: string;
}
interface ProcessFilterFormProps {
appName?: FormControl<string>;
appVersion?: FormControl<number | number[]>;
processDefinitionName?: FormControl<string>;
lastModifiedFrom?: FormControl<Date>;
lastModifiedTo?: FormControl<Date>;
status?: FormControl<string>;
order?: FormControl<string>;
sort?: FormControl<string>;
completedDateType?: FormControl<DateCloudFilterType>;
[x: string]: FormControl<unknown>;
}
@Component({
selector: 'adf-cloud-edit-process-filter',
templateUrl: './edit-process-filter-cloud.component.html',
@@ -165,7 +178,7 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
value: ''
};
processDefinitionNames: any[] = [];
editProcessFilterForm: UntypedFormGroup;
editProcessFilterForm: FormGroup<ProcessFilterFormProps>;
processFilterProperties: ProcessFilterProperties[] = [];
processFilterActions: ProcessFilterAction[] = [];
toggleFilterActions: boolean = false;
@@ -177,9 +190,9 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
private filterChangeSub: Subscription;
constructor(
private formBuilder: UntypedFormBuilder,
private formBuilder: FormBuilder,
public dialog: MatDialog,
private dateAdapter: DateAdapter<Moment>,
private dateAdapter: DateAdapter<Date>,
private userPreferencesService: UserPreferencesService,
private translateService: TranslationService,
private processFilterCloudService: ProcessFilterCloudService,
@@ -222,6 +235,18 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
return properties.reduce((result, current) => Object.assign(result, current), {});
}
get lastModifiedFrom(): AbstractControl<Date> {
return this.editProcessFilterForm.get('lastModifiedFrom');
}
get lastModifiedTo(): AbstractControl<Date> {
return this.editProcessFilterForm.get('lastModifiedTo');
}
get completedDateType(): AbstractControl<DateCloudFilterType> {
return this.editProcessFilterForm.get('completedDateType');
}
private getAttributesControlConfig(property: ProcessFilterProperties) {
return Object.values(property.attributes).reduce((result, key) => {
result[key] = property.value[key];
@@ -258,7 +283,8 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
filter(() => this.isFormValid()),
takeUntil(this.onDestroy$)
)
.subscribe((formValues: ProcessFilterCloudModel) => {
.subscribe((formValues: Partial<ProcessFilterCloudModel>) => {
this.setLastModifiedFromFilter(formValues);
this.setLastModifiedToFilter(formValues);
const newValue = new ProcessFilterCloudModel(Object.assign({}, this.processFilter, formValues));
@@ -363,14 +389,21 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
return this.editProcessFilterForm.get(property.key);
}
onDateChanged(newDateValue: Moment, dateProperty: ProcessFilterProperties) {
onDateChanged(newDateValue: Date | string, dateProperty: ProcessFilterProperties) {
if (newDateValue) {
const controller = this.getPropertyController(dateProperty);
if (newDateValue.isValid()) {
controller.setValue(newDateValue);
let date = newDateValue;
if (typeof newDateValue === 'string') {
date = DateFnsUtils.parseDate(newDateValue, 'dd/MM/yyyy');
}
if (isValid(date)) {
controller.setValue(date);
controller.setErrors(null);
} else {
controller.setValue(date);
controller.setErrors({ invalid: true });
}
}
@@ -484,7 +517,7 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
});
dialogRef.afterClosed().subscribe((result) => {
if (result && result.action === ProcessFilterDialogCloudComponent.ACTION_SAVE) {
const filterId = Math.random().toString(36).substr(2, 9);
const filterId = Math.random().toString(36).substring(2, 9);
const filterKey = this.getSanitizeFilterName(result.name);
const newFilter = {
name: result.name,
@@ -561,15 +594,15 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
: false;
}
private setLastModifiedToFilter(formValues: ProcessFilterCloudModel) {
if (formValues.lastModifiedTo && Date.parse(formValues.lastModifiedTo.toString())) {
const lastModifiedToFilterValue = moment(formValues.lastModifiedTo);
lastModifiedToFilterValue.set({
hour: 23,
minute: 59,
second: 59
});
formValues.lastModifiedTo = lastModifiedToFilterValue.toDate();
private setLastModifiedToFilter(formValues: Partial<ProcessFilterCloudModel>) {
if (isValid(formValues.lastModifiedTo)) {
formValues.lastModifiedTo = endOfDay(formValues.lastModifiedTo);
}
}
private setLastModifiedFromFilter(formValues: Partial<ProcessFilterCloudModel>) {
if (isValid(formValues.lastModifiedFrom)) {
formValues.lastModifiedFrom = startOfDay(formValues.lastModifiedFrom);
}
}
@@ -604,29 +637,18 @@ export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDes
}
private createLastModifiedProperty(filterModel: ProcessFilterCloudModel): ProcessFilterProperties[] {
let lastModifiedFrom;
let lastModifiedTo;
if (filterModel.lastModifiedFrom) {
lastModifiedFrom = moment(filterModel.lastModifiedFrom);
}
if (filterModel.lastModifiedTo) {
lastModifiedTo = moment(filterModel.lastModifiedTo);
}
return [
{
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.LAST_MODIFIED_DATE_FORM',
type: 'date',
key: 'lastModifiedFrom',
value: lastModifiedFrom
value: filterModel.lastModifiedFrom
},
{
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.LAST_MODIFIED_TO',
type: 'date',
key: 'lastModifiedTo',
value: lastModifiedTo
value: filterModel.lastModifiedTo
}
];
}

2
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
View File

@@ -59,7 +59,7 @@
[attr.data-automation-id]="taskFilterProperty.key">
<mat-label>{{taskFilterProperty.label | translate}}</mat-label>
<input matInput
(keyup)="onDateChanged($any($event).srcElement.value, taskFilterProperty)"
(keyup)="onDateChanged($any($event).target.value, taskFilterProperty)"
(dateChange)="onDateChanged($event.value, taskFilterProperty)"
[matDatepicker]="dateController"
placeholder="{{taskFilterProperty.label | translate}}"

81
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { OnChanges, SimpleChanges, OnInit, OnDestroy, Directive, Input, Output, EventEmitter } from '@angular/core';
import { OnChanges, SimpleChanges, OnInit, OnDestroy, Directive, Input, Output, EventEmitter, inject } from '@angular/core';
import { AssignmentType, FilterOptions, TaskFilterAction, TaskFilterProperties, TaskStatusFilter } from '../../models/filter-cloud.model';
import { TaskCloudService } from './../../../services/task-cloud.service';
import { AppsProcessCloudService } from './../../../../app/services/apps-process-cloud.service';
@@ -40,21 +40,22 @@ export interface DropdownOption {
label: string;
}
const ACTION_SAVE = 'save';
const ACTION_SAVE_AS = 'saveAs';
const ACTION_DELETE = 'delete';
const APP_RUNNING_STATUS = 'RUNNING';
const APPLICATION_NAME = 'appName';
const PROCESS_DEFINITION_NAME = 'processDefinitionName';
const LAST_MODIFIED_PROPERTY = 'lastModified';
const DATE_FORMAT = 'DD/MM/YYYY';
const DEFAULT_ACTIONS = [ACTION_SAVE, ACTION_SAVE_AS, ACTION_DELETE];
const SORT_PROPERTY = 'sort';
const ORDER_PROPERTY = 'order';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnChanges, OnDestroy {
public static ACTION_SAVE = 'save';
public static ACTION_SAVE_AS = 'saveAs';
public static ACTION_DELETE = 'delete';
public static APP_RUNNING_STATUS: string = 'RUNNING';
public static APPLICATION_NAME: string = 'appName';
public static PROCESS_DEFINITION_NAME: string = 'processDefinitionName';
public static LAST_MODIFIED: string = 'lastModified';
public static SORT: string = 'sort';
public static ORDER: string = 'order';
public static DEFAULT_ACTIONS = ['save', 'saveAs', 'delete'];
public static FORMAT_DATE: string = 'DD/MM/YYYY';
public static ACTIONS_DISABLED_BY_DEFAULT = [BaseEditTaskFilterCloudComponent.ACTION_SAVE, BaseEditTaskFilterCloudComponent.ACTION_DELETE];
public static ACTIONS_DISABLED_BY_DEFAULT = [ACTION_SAVE, ACTION_DELETE];
/** (required) Name of the app. */
@Input()
@@ -94,7 +95,7 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
/** List of task filter actions. */
@Input()
actions: string[] = BaseEditTaskFilterCloudComponent.DEFAULT_ACTIONS;
actions: string[] = [...DEFAULT_ACTIONS];
/** List of sort properties to display. */
@Input()
@@ -135,15 +136,13 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
protected onDestroy$ = new Subject<boolean>();
isLoading: boolean = false;
constructor(
protected formBuilder: UntypedFormBuilder,
protected dateAdapter: DateAdapter<Moment>,
protected userPreferencesService: UserPreferencesService,
protected appsProcessCloudService: AppsProcessCloudService,
protected taskCloudService: TaskCloudService,
protected dialog: MatDialog,
protected translateService: TranslationService
) {}
protected translateService = inject(TranslationService);
protected taskCloudService = inject(TaskCloudService);
protected userPreferencesService = inject(UserPreferencesService);
protected appsProcessCloudService = inject(AppsProcessCloudService);
protected dialog = inject(MatDialog);
protected formBuilder = inject(UntypedFormBuilder);
protected dateAdapter = inject<DateAdapter<Moment>>(DateAdapter);
ngOnInit() {
this.userPreferencesService
@@ -167,17 +166,17 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
createFilterActions(): TaskFilterAction[] {
return [
{
actionType: BaseEditTaskFilterCloudComponent.ACTION_SAVE,
actionType: ACTION_SAVE,
icon: 'adf:save',
tooltip: 'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE'
},
{
actionType: BaseEditTaskFilterCloudComponent.ACTION_SAVE_AS,
actionType: ACTION_SAVE_AS,
icon: 'adf:save-as',
tooltip: 'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE_AS'
},
{
actionType: BaseEditTaskFilterCloudComponent.ACTION_DELETE,
actionType: ACTION_DELETE,
icon: 'delete',
tooltip: 'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.DELETE'
}
@@ -185,13 +184,13 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
}
hasFormChanged(action: TaskFilterAction): boolean {
if (action.actionType === BaseEditTaskFilterCloudComponent.ACTION_SAVE) {
if (action.actionType === ACTION_SAVE) {
return !this.formHasBeenChanged;
}
if (action.actionType === BaseEditTaskFilterCloudComponent.ACTION_SAVE_AS) {
if (action.actionType === ACTION_SAVE_AS) {
return !this.formHasBeenChanged;
}
if (action.actionType === BaseEditTaskFilterCloudComponent.ACTION_DELETE) {
if (action.actionType === ACTION_DELETE) {
return false;
}
@@ -231,18 +230,18 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
}
executeFilterActions(action: TaskFilterAction): void {
if (action.actionType === BaseEditTaskFilterCloudComponent.ACTION_SAVE) {
if (action.actionType === ACTION_SAVE) {
this.save(action);
} else if (action.actionType === BaseEditTaskFilterCloudComponent.ACTION_SAVE_AS) {
} else if (action.actionType === ACTION_SAVE_AS) {
this.saveAs(action);
} else if (action.actionType === BaseEditTaskFilterCloudComponent.ACTION_DELETE) {
} else if (action.actionType === ACTION_DELETE) {
this.delete(action);
}
}
getRunningApplications() {
this.appsProcessCloudService
.getDeployedApplicationsByStatus(BaseEditTaskFilterCloudComponent.APP_RUNNING_STATUS, this.role)
.getDeployedApplicationsByStatus(APP_RUNNING_STATUS, this.role)
.subscribe((applications) => {
if (applications && applications.length > 0) {
applications.map((application) => {
@@ -268,7 +267,7 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
checkMandatoryActions(): void {
if (this.actions === undefined || this.actions.length === 0) {
this.actions = BaseEditTaskFilterCloudComponent.DEFAULT_ACTIONS;
this.actions = [...DEFAULT_ACTIONS];
}
}
@@ -284,9 +283,9 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
return this.editTaskFilterForm.get(property.key);
}
onDateChanged(newDateValue: any, dateProperty: TaskFilterProperties) {
onDateChanged(newDateValue: string | Moment, dateProperty: TaskFilterProperties) {
if (newDateValue) {
const momentDate = moment(newDateValue, BaseEditTaskFilterCloudComponent.FORMAT_DATE, true);
const momentDate = moment(newDateValue, DATE_FORMAT, true);
const controller = this.getPropertyController(dateProperty);
if (momentDate.isValid()) {
@@ -363,7 +362,7 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
}
hasLastModifiedProperty(): boolean {
return this.filterProperties.indexOf(BaseEditTaskFilterCloudComponent.LAST_MODIFIED) >= 0;
return this.filterProperties.indexOf(LAST_MODIFIED_PROPERTY) >= 0;
}
get createSortProperties(): FilterOptions[] {
@@ -386,12 +385,12 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
}
hasSortProperty(): boolean {
return this.filterProperties.indexOf(BaseEditTaskFilterCloudComponent.SORT) >= 0;
return this.filterProperties.indexOf(SORT_PROPERTY) >= 0;
}
removeOrderProperty(filteredProperties: TaskFilterProperties[]): TaskFilterProperties[] {
if (filteredProperties?.length > 0) {
return filteredProperties.filter((property) => property.key !== BaseEditTaskFilterCloudComponent.ORDER);
return filteredProperties.filter((property) => property.key !== ORDER_PROPERTY);
}
return [];
}
@@ -399,11 +398,11 @@ export abstract class BaseEditTaskFilterCloudComponent<T> implements OnInit, OnC
createAndFilterProperties() {
this.checkMandatoryFilterProperties();
if (this.checkForProperty(BaseEditTaskFilterCloudComponent.APPLICATION_NAME)) {
if (this.checkForProperty(APPLICATION_NAME)) {
this.applicationNames = [];
this.getRunningApplications();
}
if (this.checkForProperty(BaseEditTaskFilterCloudComponent.PROCESS_DEFINITION_NAME)) {
if (this.checkForProperty(PROCESS_DEFINITION_NAME)) {
this.processDefinitionNames = [];
this.getProcessDefinitions();
}

24
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.ts
View File

@@ -15,18 +15,10 @@
* limitations under the License.
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { UntypedFormBuilder } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { Component, ViewEncapsulation, inject } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Moment } from 'moment';
import { TaskFilterProperties, TaskFilterAction, ServiceTaskFilterCloudModel } from '../../models/filter-cloud.model';
import { TranslationService, UserPreferencesService } from '@alfresco/adf-core';
import { AppsProcessCloudService } from '../../../../app/services/apps-process-cloud.service';
import { TaskCloudService } from '../../../services/task-cloud.service';
import { ServiceTaskFilterCloudService } from '../../services/service-task-filter-cloud.service';
import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-task-filter-cloud.component';
@@ -37,16 +29,10 @@ import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-ta
encapsulation: ViewEncapsulation.None
})
export class EditServiceTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent<ServiceTaskFilterCloudModel> {
constructor(
formBuilder: UntypedFormBuilder,
dialog: MatDialog,
translateService: TranslationService,
private serviceTaskFilterCloudService: ServiceTaskFilterCloudService,
dateAdapter: DateAdapter<Moment>,
userPreferencesService: UserPreferencesService,
appsProcessCloudService: AppsProcessCloudService,
taskCloudService: TaskCloudService) {
super(formBuilder, dateAdapter, userPreferencesService, appsProcessCloudService, taskCloudService, dialog, translateService);
private serviceTaskFilterCloudService = inject(ServiceTaskFilterCloudService);
constructor() {
super();
}
assignNewFilter(model: ServiceTaskFilterCloudModel) {

232
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.spec.ts
View File

@@ -32,7 +32,6 @@ import { TaskFilterCloudService } from '../../services/task-filter-cloud.service
import { TaskCloudService } from '../../../services/task-cloud.service';
import { fakeFilter } from '../../mock/task-filters-cloud.mock';
import { AbstractControl } from '@angular/forms';
import moment from 'moment';
import { TranslateModule } from '@ngx-translate/core';
import { DateCloudFilterType } from '../../../../models/date-cloud-filter.model';
import { AssignmentType, TaskFilterCloudModel, TaskStatusFilter } from '../../models/filter-cloud.model';
@@ -55,12 +54,14 @@ import { mockFoodUsers } from '../../../../people/mock/people-cloud.mock';
import { mockFoodGroups } from '../../../../group/mock/group-cloud.mock';
import { SimpleChanges } from '@angular/core';
import { TaskFilterDialogCloudComponent } from '../task-filter-dialog/task-filter-dialog-cloud.component';
import { set } from 'date-fns';
describe('EditTaskFilterCloudComponent', () => {
let component: EditTaskFilterCloudComponent;
let service: TaskFilterCloudService;
let appsService: AppsProcessCloudService;
let fixture: ComponentFixture<EditTaskFilterCloudComponent>;
let nativeElement: HTMLElement;
let dialog: MatDialog;
let alfrescoApiService: AlfrescoApiService;
let getTaskFilterSpy: jasmine.Spy;
@@ -84,6 +85,7 @@ describe('EditTaskFilterCloudComponent', () => {
});
fixture = TestBed.createComponent(EditTaskFilterCloudComponent);
component = fixture.componentInstance;
nativeElement = fixture.debugElement.nativeElement;
service = TestBed.inject(TaskFilterCloudService);
appsService = TestBed.inject(AppsProcessCloudService);
taskService = TestBed.inject(TaskCloudService);
@@ -101,6 +103,14 @@ describe('EditTaskFilterCloudComponent', () => {
afterEach(() => fixture.destroy());
const clickExpansionPanel = async () => {
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
await fixture.whenStable();
};
it('should fetch task filter by taskId', async () => {
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
@@ -222,8 +232,8 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
const title = nativeElement.querySelector<HTMLElement>('#adf-edit-task-filter-title-id');
const subTitle = nativeElement.querySelector<HTMLElement>('#adf-edit-task-filter-sub-title-id');
expect(title.innerText).toEqual('FakeInvolvedTasks');
expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
});
@@ -235,7 +245,7 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
const title = nativeElement.querySelector<HTMLElement>('#adf-edit-task-filter-title-id');
expect(title).toBeNull();
});
@@ -245,9 +255,9 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
const title = nativeElement.querySelector<HTMLElement>('#adf-edit-task-filter-title-id');
const subTitle = nativeElement.querySelector<HTMLElement>('#adf-edit-task-filter-sub-title-id');
const matSpinnerElement = nativeElement.querySelector<HTMLElement>('.adf-cloud-edit-task-filter-loading-margin');
expect(matSpinnerElement).toBeNull();
expect(title.innerText).toEqual('FakeInvolvedTasks');
@@ -261,7 +271,7 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
const matSpinnerElement = nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
expect(matSpinnerElement).toBeDefined();
});
@@ -296,15 +306,11 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
expect(saveButton.disabled).toBe(true);
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(deleteButton.disabled).toBe(true);
});
@@ -313,15 +319,11 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
expect(saveButton.disabled).toBe(true);
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(deleteButton.disabled).toBe(false);
});
@@ -330,20 +332,20 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editTaskFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
fixture.detectChanges();
expect(saveButton.disabled).toBe(false);
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
@@ -353,13 +355,9 @@ describe('EditTaskFilterCloudComponent', () => {
it('should disable save button if the filter is not changed for custom filter', async () => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
expect(saveButton.disabled).toBe(true);
});
});
@@ -371,25 +369,17 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
expect(saveButton.disabled).toEqual(true);
});
it('should disable saveAs button if the process filter is not changed for custom filter', async () => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
expect(saveButton.disabled).toEqual(true);
});
@@ -400,20 +390,20 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editTaskFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
fixture.detectChanges();
expect(saveButton.disabled).toEqual(false);
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
@@ -424,20 +414,20 @@ describe('EditTaskFilterCloudComponent', () => {
it('should enable saveAs button if the filter values are changed for custom filter', (done) => {
component.toggleFilterActions = true;
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
component.editTaskFilterForm.valueChanges
.pipe(debounceTime(500))
.subscribe(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
fixture.detectChanges();
expect(saveButton.disabled).toEqual(false);
done();
});
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
@@ -451,31 +441,25 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-status"]');
const assigneeElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-assignee"]');
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-order"]');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-status"]');
const assigneeElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-assignee"]');
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"]');
const orderElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-order"]');
expect(assigneeElement).toBeDefined();
expect(stateElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.STATUS.CREATED');
expect(sortElement.textContent.trim()).toBe('id');
expect(orderElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.DIRECTION.ASCENDING');
});
it('should display all the statuses that are defined in the task filter', () => {
it('should display all the statuses that are defined in the task filter', async () => {
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-status"]');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-status"]');
stateElement.click();
fixture.detectChanges();
await fixture.whenStable();
const statusOptions = fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-edit-task-property-options-status"]'));
@@ -489,10 +473,9 @@ describe('EditTaskFilterCloudComponent', () => {
it('should display sort drop down', async () => {
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
await clickExpansionPanel();
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -504,10 +487,9 @@ describe('EditTaskFilterCloudComponent', () => {
it('should display order drop down', async () => {
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-order"]');
await clickExpansionPanel();
const orderElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-order"]');
orderElement.click();
fixture.detectChanges();
@@ -572,7 +554,7 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const peopleCloudComponent = fixture.debugElement.nativeElement.querySelector('adf-cloud-people');
const peopleCloudComponent = nativeElement.querySelector<HTMLElement>('adf-cloud-people');
expect(peopleCloudComponent).toBeTruthy();
});
@@ -624,7 +606,7 @@ describe('EditTaskFilterCloudComponent', () => {
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-dueDateRange"] .mat-select-trigger');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-process-property-dueDateRange"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
@@ -717,7 +699,7 @@ describe('EditTaskFilterCloudComponent', () => {
component.filterProperties = ['assignment'];
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
const assignmentComponent = fixture.debugElement.nativeElement.querySelector('adf-cloud-task-assignment-filter');
const assignmentComponent = nativeElement.querySelector<HTMLElement>('adf-cloud-task-assignment-filter');
expect(assignmentComponent).toBeTruthy();
});
@@ -822,10 +804,8 @@ describe('EditTaskFilterCloudComponent', () => {
it('should display default sort properties', async () => {
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
await clickExpansionPanel();
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -849,10 +829,8 @@ describe('EditTaskFilterCloudComponent', () => {
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
await clickExpansionPanel();
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -870,10 +848,8 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
component.sortProperties = [];
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
await clickExpansionPanel();
const sortElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"]');
sortElement.click();
fixture.detectChanges();
@@ -892,15 +868,11 @@ describe('EditTaskFilterCloudComponent', () => {
component.toggleFilterActions = true;
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const saveAsButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(component.taskFilterActions.map(action => action.actionType)).toEqual(['save', 'saveAs', 'delete']);
expect(component.taskFilterActions.length).toBe(3);
expect(saveButton.disabled).toBe(true);
@@ -917,18 +889,14 @@ describe('EditTaskFilterCloudComponent', () => {
component.toggleFilterActions = true;
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
await clickExpansionPanel();
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
expect(component.taskFilterActions.map(action => action.actionType)).toEqual(['save']);
expect(component.taskFilterActions.length).toBe(1);
expect(saveButton.disabled).toBeTruthy();
const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const saveAsButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(saveAsButton).toBeFalsy();
expect(deleteButton).toBeFalsy();
});
@@ -939,18 +907,19 @@ describe('EditTaskFilterCloudComponent', () => {
component.ngOnChanges({ id: mockTaskFilterIdChange });
fixture.detectChanges();
const lastModifiedToControl: AbstractControl = component.editTaskFilterForm.get('lastModifiedTo');
lastModifiedToControl.setValue(new Date().toISOString());
const lastModifiedToFilter = moment(lastModifiedToControl.value);
lastModifiedToFilter.set({
hour: 23,
minute: 59,
second: 59
});
const date = new Date();
const lastModifiedToControl = component.editTaskFilterForm.get('lastModifiedTo');
lastModifiedToControl.setValue(date.toISOString());
const lastModifiedToFilter = set(date, {
hours: 23,
minutes: 59,
seconds: 59
}).toISOString();
component.filterChange.subscribe(() => {
if (component.changedTaskFilter instanceof TaskFilterCloudModel) {
expect(component.changedTaskFilter.lastModifiedTo).toEqual(lastModifiedToFilter.toISOString(true));
expect(component.changedTaskFilter.lastModifiedTo).toEqual(lastModifiedToFilter);
}
done();
});
@@ -971,11 +940,11 @@ describe('EditTaskFilterCloudComponent', () => {
spyOn(service, 'updateFilter').and.returnValue(of([new TaskFilterCloudModel({ name: 'mock-filter-name' })]));
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = nativeElement.querySelector<HTMLElement>('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
tick();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
tick();
@@ -984,7 +953,7 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
tick(550);
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-save"]');
saveButton.dispatchEvent(new Event('click'));
fixture.detectChanges();
tick();
@@ -996,16 +965,14 @@ describe('EditTaskFilterCloudComponent', () => {
it('should emit delete event and delete the filter on click of delete button', async () => {
spyOn(service, 'deleteFilter').and.returnValue(of(null));
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
await clickExpansionPanel();
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
await fixture.whenStable();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(deleteButton.getAttribute('disabled')).toBeNull();
deleteButton.click();
expect(service.deleteFilter).toHaveBeenCalled();
@@ -1015,12 +982,9 @@ describe('EditTaskFilterCloudComponent', () => {
it('should emit saveAs event and add filter on click saveAs button', async () => {
spyOn(service, 'addFilter').and.returnValue(of(null));
fixture.detectChanges();
await clickExpansionPanel();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
@@ -1029,7 +993,7 @@ describe('EditTaskFilterCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
const saveButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-saveAs"]');
saveButton.dispatchEvent(new Event('click'));
fixture.detectChanges();
afterClosedSubject.next({
@@ -1048,16 +1012,14 @@ describe('EditTaskFilterCloudComponent', () => {
spyOn(service, 'deleteFilter').and.returnValue(of([]));
const restoreDefaultFiltersSpy = spyOn(component, 'restoreDefaultTaskFilters').and.returnValue(of([]));
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
await clickExpansionPanel();
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
await fixture.whenStable();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(deleteButton.disabled).toBe(false);
deleteButton.click();
expect(service.deleteFilter).toHaveBeenCalled();
@@ -1069,16 +1031,14 @@ describe('EditTaskFilterCloudComponent', () => {
spyOn(service, 'deleteFilter').and.returnValue(of([new TaskFilterCloudModel({ name: 'mock-filter-name' })]));
const restoreDefaultFiltersSpy = spyOn(component, 'restoreDefaultTaskFilters').and.returnValue(of([]));
fixture.detectChanges();
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
await clickExpansionPanel();
const stateElement = nativeElement.querySelector<HTMLElement>('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
await fixture.whenStable();
const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
const deleteButton = nativeElement.querySelector<HTMLButtonElement>('[data-automation-id="adf-filter-action-delete"]');
expect(deleteButton.disabled).toBe(false);
deleteButton.click();
expect(service.deleteFilter).toHaveBeenCalled();

41
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.ts
View File

@@ -15,21 +15,14 @@
* limitations under the License.
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { UntypedFormBuilder } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog';
import { Component, ViewEncapsulation, inject } from '@angular/core';
import { takeUntil, map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import moment, { Moment } from 'moment';
import { TaskFilterCloudModel, TaskFilterProperties, TaskFilterAction, TaskStatusFilter } from '../../models/filter-cloud.model';
import { TaskFilterCloudService } from '../../services/task-filter-cloud.service';
import { TranslationService, UserPreferencesService } from '@alfresco/adf-core';
import { AppsProcessCloudService } from '../../../../app/services/apps-process-cloud.service';
import { DateCloudFilterType } from '../../../../models/date-cloud-filter.model';
import { TaskCloudService } from '../../../services/task-cloud.service';
import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-task-filter-cloud.component';
import { set } from 'date-fns';
@Component({
selector: 'adf-cloud-edit-task-filter',
@@ -38,16 +31,10 @@ import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-ta
encapsulation: ViewEncapsulation.None
})
export class EditTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent<TaskFilterCloudModel> {
constructor(
formBuilder: UntypedFormBuilder,
dialog: MatDialog,
translateService: TranslationService,
private taskFilterCloudService: TaskFilterCloudService,
dateAdapter: DateAdapter<Moment>,
userPreferencesService: UserPreferencesService,
appsProcessCloudService: AppsProcessCloudService,
taskCloudService: TaskCloudService) {
super(formBuilder, dateAdapter, userPreferencesService, appsProcessCloudService, taskCloudService, dialog, translateService);
private taskFilterCloudService = inject(TaskFilterCloudService);
constructor() {
super();
}
assignNewFilter(model: TaskFilterCloudModel) {
@@ -88,13 +75,15 @@ export class EditTaskFilterCloudComponent extends BaseEditTaskFilterCloudCompone
private setLastModifiedToFilter(formValues: TaskFilterCloudModel) {
if (formValues.lastModifiedTo && Date.parse(formValues.lastModifiedTo.toString())) {
const lastModifiedToFilterValue = moment(formValues.lastModifiedTo);
lastModifiedToFilterValue.set({
hour: 23,
minute: 59,
second: 59
});
formValues.lastModifiedTo = lastModifiedToFilterValue.toISOString(true);
const lastModifiedToFilterValue = set(
new Date(formValues.lastModifiedTo),
{
hours: 23,
minutes: 59,
seconds: 59
}
);
formValues.lastModifiedTo = lastModifiedToFilterValue.toISOString();
}
}