mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3773] Filter definition in a component APS2 (#4016)
* * Genearated EditTaskFilterCloudComponent * * Added unit tests to the editTaskFiltercomponent * Added unit tests to the taskFilterDialog * Added id selector * * Added translation keys to the editTaskFilter component* Added translation keys related to the editTask in the en.json file* Changed FilterRepresentationModel to TaskFilterCloudRepresentationModel* Refactored editTaskFilterComponent* Created a deleteFilter method in the taskService * * Refactored editTaskFilterComponent * * used new editTaskFilterCloud component in the demo shell * * Refactored editTaskFilter component* Updated unit tests * Refresh the filters after the action Reset the values after the EditComponentChanges Improve the code * * Added translate keys in demo shell for edittaskDialog component * Modified translate keys for editTaskFilterCLoud component * * Added documentation to the editTaskFilter component.* Fixed a typo.* Fixed Failing Test cases. * Added a EditTaskFilterCloud png * rebase to dev fix bugs and improve integration * * Fixed tsLint css error * * Fixed tslint css error * Fixed one unit test * Move the concern of save delete saveAs into the component fix integration with Demo shell fix bugs * * Updated unit test to the recent changes * * Updated editTaskFIlter doc * Added unit tests to the taskFIlterDialog component * * Updated editTaskFIlter doc* Added unit tests to the taskFIlterDialog component * * Merged task filter models to a single model * * Updated tests with new taskfilter model * * Updated documentation for new taskfilter model * * Used new taskfilter model in the demo * * Improved filter selection method * * Removed unnecessory tanslate keys from demo shell * Modified filterCloudModel * fixed unit tests to the recent changes * * Improved change handling for filter properties * * Improved unit tests
This commit is contained in:
siva kumar
committed by
Eugenio Romano
Eugenio Romano
parent
f649b231cd
commit
6f526c3862
@@ -22,5 +22,24 @@
|
||||
"DATE": "Date format DD/MM/YYYY",
|
||||
"MAXIMUM_LENGTH": "Length exceeded, {{characters}} characters max."
|
||||
}
|
||||
},
|
||||
"ADF_CLOUD_EDIT_TASK_FILTER": {
|
||||
"TITLE": "Customize your filter",
|
||||
"TOOL_TIP": {
|
||||
"SAVE": "Save filter",
|
||||
"SAVE_AS": "Save filter as",
|
||||
"DELETE": "Delete filter"
|
||||
},
|
||||
"LABEL": {
|
||||
"STATUS": "Status",
|
||||
"ASSIGNMENT": "Assignment",
|
||||
"COLUMN": "Column",
|
||||
"DIRECTION": "Direction"
|
||||
},
|
||||
"DIALOG": {
|
||||
"TITLE": "Save filter as",
|
||||
"SAVE": "SAVE",
|
||||
"CANCEL": "CANCEL"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
MatChipsModule, MatDatepickerModule, MatDialogModule, MatGridListModule, MatIconModule,
|
||||
MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
|
||||
MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
|
||||
MatTooltipModule, MatMenuModule
|
||||
MatTooltipModule, MatMenuModule, MatExpansionModule
|
||||
} from '@angular/material';
|
||||
|
||||
export function modules() {
|
||||
@@ -30,7 +30,7 @@ export function modules() {
|
||||
MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
|
||||
MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
|
||||
MatTabsModule, MatProgressSpinnerModule, MatNativeDateModule, MatRippleModule, MatTooltipModule,
|
||||
MatChipsModule, MatMenuModule
|
||||
MatChipsModule, MatMenuModule, MatExpansionModule
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -14,9 +14,15 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export class QueryModel {
|
||||
processDefinitionId: string;
|
||||
|
||||
export class TaskFilterCloudModel {
|
||||
id: string;
|
||||
name: string;
|
||||
key: string;
|
||||
icon: string;
|
||||
index: number;
|
||||
appName: string;
|
||||
processDefinitionId: string;
|
||||
state: string;
|
||||
sort: string;
|
||||
assignment: string;
|
||||
@@ -24,6 +30,11 @@ export class QueryModel {
|
||||
|
||||
constructor(obj?: any) {
|
||||
if (obj) {
|
||||
this.id = obj.id || Math.random().toString(36).substr(2, 9);
|
||||
this.name = obj.name || null;
|
||||
this.key = obj.key || null;
|
||||
this.icon = obj.icon || null;
|
||||
this.index = obj.index || null;
|
||||
this.appName = obj.appName || null;
|
||||
this.processDefinitionId = obj.processDefinitionId || null;
|
||||
this.state = obj.state || null;
|
||||
@@ -33,39 +44,8 @@ export class QueryModel {
|
||||
}
|
||||
}
|
||||
}
|
||||
export class TaskFilterCloudRepresentationModel {
|
||||
|
||||
export interface FilterActionType {
|
||||
actionType: string;
|
||||
id: string;
|
||||
name: string;
|
||||
key: string;
|
||||
icon: string;
|
||||
query: QueryModel;
|
||||
|
||||
constructor(obj?: any) {
|
||||
if (obj) {
|
||||
this.id = obj.id;
|
||||
this.name = obj.name;
|
||||
this.key = obj.key;
|
||||
this.icon = obj.icon;
|
||||
this.query = new QueryModel(obj.query);
|
||||
}
|
||||
}
|
||||
|
||||
hasFilter() {
|
||||
return !!this.query;
|
||||
}
|
||||
}
|
||||
export class FilterParamsModel {
|
||||
id?: string;
|
||||
name?: string;
|
||||
key?: string;
|
||||
index?: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
if (obj) {
|
||||
this.id = obj.id || null;
|
||||
this.name = obj.name || null;
|
||||
this.key = obj.key || null;
|
||||
this.index = obj.index;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,5 +16,7 @@
|
||||
*/
|
||||
|
||||
export * from './task-filters-cloud/task-filters-cloud.component';
|
||||
export * from './task-filters-cloud/edit-task-filter-cloud.component';
|
||||
export * from './models/filter-cloud.model';
|
||||
export * from './services/task-filter-cloud.service';
|
||||
export * from './task-cloud.module';
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
import { StorageService, JwtHelperService } from '@alfresco/adf-core';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { TaskFilterCloudRepresentationModel, QueryModel } from '../models/filter-cloud.model';
|
||||
import { TaskFilterCloudModel } from '../models/filter-cloud.model';
|
||||
|
||||
@Injectable()
|
||||
export class TaskFilterCloudService {
|
||||
@@ -31,7 +31,7 @@ export class TaskFilterCloudService {
|
||||
* @param appName Name of the target app
|
||||
* @returns Observable of default filters just created
|
||||
*/
|
||||
public createDefaultFilters(appName: string): Observable<TaskFilterCloudRepresentationModel[]> {
|
||||
public createDefaultFilters(appName: string): Observable<TaskFilterCloudModel[]> {
|
||||
let myTasksFilter = this.getMyTasksFilterInstance(appName);
|
||||
this.addFilter(myTasksFilter);
|
||||
|
||||
@@ -46,7 +46,7 @@ export class TaskFilterCloudService {
|
||||
* @param appName Name of the target app
|
||||
* @returns Observable of task filter details
|
||||
*/
|
||||
getTaskListFilters(appName?: string): Observable<TaskFilterCloudRepresentationModel[]> {
|
||||
getTaskListFilters(appName?: string): Observable<TaskFilterCloudModel[]> {
|
||||
const username = this.getUsername();
|
||||
let key = `task-filters-${appName}-${username}`;
|
||||
const filters = JSON.parse(this.storage.getItem(key) || '[]');
|
||||
@@ -56,14 +56,22 @@ export class TaskFilterCloudService {
|
||||
});
|
||||
}
|
||||
|
||||
getTaskFilterById(appName: string, id: string): TaskFilterCloudModel {
|
||||
const username = this.getUsername();
|
||||
let key = `task-filters-${appName}-${username}`;
|
||||
let filters = [];
|
||||
filters = JSON.parse(this.storage.getItem(key)) || [];
|
||||
return filters.filter((filterTmp: TaskFilterCloudModel) => id === filterTmp.id)[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a new task filter
|
||||
* @param filter The new filter to add
|
||||
* @returns Details of task filter just added
|
||||
*/
|
||||
addFilter(filter: TaskFilterCloudRepresentationModel): Observable<TaskFilterCloudRepresentationModel> {
|
||||
addFilter(filter: TaskFilterCloudModel): Observable<TaskFilterCloudModel> {
|
||||
const username = this.getUsername();
|
||||
const key = `task-filters-${filter.query.appName}-${username}`;
|
||||
const key = `task-filters-${filter.appName}-${username}`;
|
||||
let filters = JSON.parse(this.storage.getItem(key) || '[]');
|
||||
|
||||
filters.push(filter);
|
||||
@@ -76,6 +84,35 @@ export class TaskFilterCloudService {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update task filter
|
||||
* @param filter The new filter to update
|
||||
*/
|
||||
updateFilter(filter: TaskFilterCloudModel) {
|
||||
const username = this.getUsername();
|
||||
const key = `task-filters-${filter.appName}-${username}`;
|
||||
if (key) {
|
||||
let filters = JSON.parse(this.storage.getItem(key) || '[]');
|
||||
let itemIndex = filters.findIndex((flt: TaskFilterCloudModel) => flt.id === filter.id);
|
||||
filters[itemIndex] = filter;
|
||||
this.storage.setItem(key, JSON.stringify(filters));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete task filter
|
||||
* @param filter The new filter to delete
|
||||
*/
|
||||
deleteFilter(filter: TaskFilterCloudModel) {
|
||||
const username = this.getUsername();
|
||||
const key = `task-filters-${filter.appName}-${username}`;
|
||||
if (key) {
|
||||
let filters = JSON.parse(this.storage.getItem(key) || '[]');
|
||||
filters = filters.filter((item) => item.id !== filter.id);
|
||||
this.storage.setItem(key, JSON.stringify(filters));
|
||||
}
|
||||
}
|
||||
|
||||
getUsername(): string {
|
||||
return this.getValueFromToken<string>('preferred_username');
|
||||
}
|
||||
@@ -95,22 +132,17 @@ export class TaskFilterCloudService {
|
||||
* @param appName Name of the target app
|
||||
* @returns The newly created filter
|
||||
*/
|
||||
getMyTasksFilterInstance(appName: string): TaskFilterCloudRepresentationModel {
|
||||
getMyTasksFilterInstance(appName: string): TaskFilterCloudModel {
|
||||
const username = this.getUsername();
|
||||
return new TaskFilterCloudRepresentationModel({
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
return new TaskFilterCloudModel({
|
||||
name: 'ADF_CLOUD_TASK_FILTERS.MY_TASKS',
|
||||
key: 'my-tasks',
|
||||
icon: 'inbox',
|
||||
query: new QueryModel(
|
||||
{
|
||||
appName: appName,
|
||||
state: 'ASSIGNED',
|
||||
assignment: username,
|
||||
sort: 'id',
|
||||
order: 'ASC'
|
||||
}
|
||||
)
|
||||
appName: appName,
|
||||
state: 'ASSIGNED',
|
||||
assignment: username,
|
||||
sort: 'id',
|
||||
order: 'ASC'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -119,21 +151,16 @@ export class TaskFilterCloudService {
|
||||
* @param appName Name of the target app
|
||||
* @returns The newly created filter
|
||||
*/
|
||||
getCompletedTasksFilterInstance(appName: string): TaskFilterCloudRepresentationModel {
|
||||
return new TaskFilterCloudRepresentationModel({
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
getCompletedTasksFilterInstance(appName: string): TaskFilterCloudModel {
|
||||
return new TaskFilterCloudModel({
|
||||
name: 'ADF_CLOUD_TASK_FILTERS.COMPLETED_TASKS',
|
||||
key: 'completed-tasks',
|
||||
icon: 'done',
|
||||
query: new QueryModel(
|
||||
{
|
||||
appName: appName,
|
||||
state: 'COMPLETED',
|
||||
assignment: '',
|
||||
sort: 'id',
|
||||
order: 'ASC'
|
||||
}
|
||||
)
|
||||
appName: appName,
|
||||
state: 'COMPLETED',
|
||||
assignment: '',
|
||||
sort: 'id',
|
||||
order: 'ASC'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,17 +16,24 @@
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { TaskFiltersCloudComponent } from './task-filters-cloud/task-filters-cloud.component';
|
||||
import { MaterialModule } from '../material.module';
|
||||
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
|
||||
import { TranslateLoaderService, LogService, StorageService } from '@alfresco/adf-core';
|
||||
import { TaskFilterCloudService } from './services/task-filter-cloud.service';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { EditTaskFilterCloudComponent } from './task-filters-cloud/edit-task-filter-cloud.component';
|
||||
import { TaskFilterDialogCloudComponent } from './task-filters-cloud/task-filter-dialog-cloud.component';
|
||||
@NgModule({
|
||||
imports: [
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
FlexLayoutModule,
|
||||
TranslateModule.forRoot({
|
||||
loader: {
|
||||
provide: TranslateLoader,
|
||||
@@ -35,9 +42,11 @@ import { HttpClientModule } from '@angular/common/http';
|
||||
}),
|
||||
MaterialModule
|
||||
],
|
||||
declarations: [TaskFiltersCloudComponent],
|
||||
|
||||
exports: [TaskFiltersCloudComponent],
|
||||
providers: [TaskFilterCloudService, LogService, StorageService]
|
||||
declarations: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent, TaskFilterDialogCloudComponent],
|
||||
exports: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent],
|
||||
providers: [TaskFilterCloudService, LogService, StorageService],
|
||||
entryComponents: [
|
||||
TaskFilterDialogCloudComponent
|
||||
]
|
||||
})
|
||||
export class TaskCloudModule { }
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
<mat-accordion *ngIf="taskFilter">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header id="adf-edit-task-filter-expansion-header">
|
||||
<mat-panel-title id="adf-edit-task-filter-title-id">{{taskFilter.name | translate}}</mat-panel-title>
|
||||
<mat-panel-description id="adf-edit-task-filter-sub-title-id">
|
||||
{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<form [formGroup]="editTaskFilterForm">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutGap="10px">
|
||||
<mat-form-field [floatLabel]="'auto'" fxFlex>
|
||||
<mat-select placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STATUS' | translate}}" formControlName="state" id="adf-task-filter-state-id">
|
||||
<mat-option *ngFor="let state of status" [value]="state.value">
|
||||
{{ state.label }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field [floatLabel]="'auto'" fxFlex>
|
||||
<input matInput
|
||||
formControlName="assignment"
|
||||
type="text"
|
||||
id="adf-task-filter-assignment-id"
|
||||
placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.ASSIGNMENT' | translate}}"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="false" [floatLabel]="'auto'" fxFlex>
|
||||
<input matInput
|
||||
formControlName="appName"
|
||||
type="text"
|
||||
id="adf-task-filter-appname-id"
|
||||
placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.APP_NAME' | translate}}"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field *ngIf="false" [floatLabel]="'auto'" fxFlex>
|
||||
<input matInput
|
||||
formControlName="processDefinitionId"
|
||||
type="text"
|
||||
id="adf-task-filter-process-definition-id"
|
||||
placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PROCESS_DEF_ID' | translate}}"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field [floatLabel]="'auto'" fxFlex>
|
||||
<mat-select placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.COLUMN' | translate}}" formControlName="sort" id="adf-task-filter-sort-id">
|
||||
<mat-option *ngFor="let column of columns" [value]="column.key">
|
||||
{{ column.label }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field [floatLabel]="'auto'" fxFlex>
|
||||
<mat-select placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DIRECTION' | translate}}" formControlName="order" id="adf-task-filter-order-id">
|
||||
<mat-option *ngFor="let direction of directions" [value]="direction">
|
||||
{{ direction }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE' | translate}}" id="adf-save-id" [disabled]="!formHasBeenChanged" (click)="onSave()">
|
||||
<mat-icon>save</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE_AS' | translate}}" id="adf-save-as-id" [disabled]="!formHasBeenChanged" (click)="onSaveAs()">
|
||||
<mat-icon>unarchive</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.DELETE' | translate}}" id="adf-delete-id" (click)="onDelete()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
@@ -0,0 +1,286 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { SimpleChange } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
import { setupTestBed } from '@alfresco/adf-core';
|
||||
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
|
||||
import { TaskFilterCloudModel } from '../models/filter-cloud.model';
|
||||
import { TaskCloudModule } from './../task-cloud.module';
|
||||
import { EditTaskFilterCloudComponent } from './edit-task-filter-cloud.component';
|
||||
import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { of } from 'rxjs';
|
||||
import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
|
||||
|
||||
describe('EditTaskFilterCloudComponent', () => {
|
||||
let component: EditTaskFilterCloudComponent;
|
||||
let service: TaskFilterCloudService;
|
||||
let fixture: ComponentFixture<EditTaskFilterCloudComponent>;
|
||||
let dialog: MatDialog;
|
||||
|
||||
let fakeFilter = new TaskFilterCloudModel({
|
||||
name: 'FakeInvolvedTasks',
|
||||
icon: 'adjust',
|
||||
id: 10,
|
||||
state: 'CREATED',
|
||||
appName: 'app-name',
|
||||
processDefinitionId: 'process-def-id',
|
||||
assignment: 'fake-involved',
|
||||
order: 'ASC',
|
||||
sort: 'id'
|
||||
});
|
||||
|
||||
setupTestBed({
|
||||
imports: [ProcessServiceCloudTestingModule, TaskCloudModule],
|
||||
providers: [MatDialog]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditTaskFilterCloudComponent);
|
||||
component = fixture.componentInstance;
|
||||
service = TestBed.get(TaskFilterCloudService);
|
||||
dialog = TestBed.get(MatDialog);
|
||||
spyOn(dialog, 'open').and.returnValue({ afterClosed() { return of({
|
||||
action: TaskFilterDialogCloudComponent.ACTION_SAVE,
|
||||
icon: 'icon',
|
||||
name: 'fake-name'
|
||||
}); }});
|
||||
spyOn(service, 'getTaskFilterById').and.returnValue(fakeFilter);
|
||||
});
|
||||
|
||||
it('should create EditTaskFilterCloudComponent', () => {
|
||||
expect(component instanceof EditTaskFilterCloudComponent).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should fetch task filter by taskId', async(() => {
|
||||
let change = new SimpleChange(undefined, '10', true);
|
||||
component.ngOnChanges({ 'id': change });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(component.taskFilter.name).toEqual('FakeInvolvedTasks');
|
||||
expect(component.taskFilter.icon).toEqual('adjust');
|
||||
expect(component.taskFilter.state).toEqual('CREATED');
|
||||
expect(component.taskFilter.order).toEqual('ASC');
|
||||
expect(component.taskFilter.sort).toEqual('id');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display filter name as title', () => {
|
||||
let change = new SimpleChange(undefined, '10', true);
|
||||
component.ngOnChanges({ 'id': change });
|
||||
fixture.detectChanges();
|
||||
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');
|
||||
expect(title).toBeDefined();
|
||||
expect(subTitle).toBeDefined();
|
||||
expect(title.innerText).toEqual('FakeInvolvedTasks');
|
||||
expect(subTitle.innerText).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
|
||||
});
|
||||
|
||||
describe('EditTaskFilter form', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
let change = new SimpleChange(undefined, '10', true);
|
||||
component.ngOnChanges({ 'id': change });
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should define editTaskFilter form ', () => {
|
||||
expect(component.editTaskFilterForm).toBeDefined();
|
||||
});
|
||||
|
||||
it('should create editTaskFilter form with given input ', async(() => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const stateController = component.editTaskFilterForm.get('state');
|
||||
const sortController = component.editTaskFilterForm.get('sort');
|
||||
const orderController = component.editTaskFilterForm.get('order');
|
||||
const assignmentController = component.editTaskFilterForm.get('assignment');
|
||||
expect(component.editTaskFilterForm).toBeDefined();
|
||||
expect(stateController).toBeDefined();
|
||||
expect(sortController).toBeDefined();
|
||||
expect(orderController).toBeDefined();
|
||||
expect(assignmentController).toBeDefined();
|
||||
|
||||
expect(stateController.value).toBe('CREATED');
|
||||
expect(sortController.value).toBe('id');
|
||||
expect(orderController.value).toBe('ASC');
|
||||
expect(assignmentController.value).toBe('fake-involved');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should disable save button if the task filter is not changed', async(() => {
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
let saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-id');
|
||||
expect(saveButton.disabled).toBe(true);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should disable saveAs button if the task filter is not changed', async(() => {
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
let saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-as-id');
|
||||
expect(saveButton.disabled).toBe(true);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should enable delete button by default', async(() => {
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
fixture.whenStable().then(() => {
|
||||
let deleteButton = fixture.debugElement.nativeElement.querySelector('#adf-delete-id');
|
||||
expect(deleteButton.disabled).toBe(false);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display current task filter details', async(() => {
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
let stateElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-state-id');
|
||||
let assignmentElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-assignment-id');
|
||||
let sortElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-sort-id');
|
||||
let orderElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-order-id');
|
||||
expect(stateElement).toBeDefined();
|
||||
expect(assignmentElement).toBeDefined();
|
||||
expect(sortElement).toBeDefined();
|
||||
expect(orderElement).toBeDefined();
|
||||
expect(stateElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STATUS');
|
||||
expect(sortElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_TASK_FILTER.LABEL.COLUMN');
|
||||
expect(orderElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DIRECTION');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display state drop down', async(() => {
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
|
||||
stateElement.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const statusOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
|
||||
expect(statusOptions.length).toEqual(7);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display sort drop down', async(() => {
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
const sortElement = fixture.debugElement.query(By.css('#adf-task-filter-sort-id .mat-select-trigger')).nativeElement;
|
||||
sortElement.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
|
||||
expect(sortOptions.length).toEqual(5);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display order drop down', async(() => {
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
const orderElement = fixture.debugElement.query(By.css('#adf-task-filter-order-id .mat-select-trigger')).nativeElement;
|
||||
orderElement.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const orderOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
|
||||
expect(orderOptions.length).toEqual(2);
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('edit filter actions', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
let change = new SimpleChange(undefined, '10', true);
|
||||
component.ngOnChanges({ 'id': change });
|
||||
});
|
||||
|
||||
it('should emit save event and save the filter on click save button', async(() => {
|
||||
const saveFilterSpy = spyOn(service, 'updateFilter').and.returnValue(fakeFilter);
|
||||
let saveSpy: jasmine.Spy = spyOn(component.action, 'emit');
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
|
||||
stateElement.click();
|
||||
fixture.detectChanges();
|
||||
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
|
||||
stateOptions[3].nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-id');
|
||||
saveButton.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(saveFilterSpy).toHaveBeenCalled();
|
||||
expect(saveSpy).toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should emit delete event and delete the filter on click of delete button', async(() => {
|
||||
const deleteFilterSpy = spyOn(service, 'deleteFilter').and.callThrough();
|
||||
let deleteSpy: jasmine.Spy = spyOn(component.action, 'emit');
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
|
||||
stateElement.click();
|
||||
fixture.detectChanges();
|
||||
let deleteButton = fixture.debugElement.nativeElement.querySelector('#adf-delete-id');
|
||||
deleteButton.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(deleteFilterSpy).toHaveBeenCalled();
|
||||
expect(deleteSpy).toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should emit saveAs event and add filter on click saveAs button', async(() => {
|
||||
const saveAsFilterSpy = spyOn(service, 'addFilter').and.callThrough();
|
||||
let saveAsSpy: jasmine.Spy = spyOn(component.action, 'emit');
|
||||
fixture.detectChanges();
|
||||
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
|
||||
expansionPanel.click();
|
||||
const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
|
||||
stateElement.click();
|
||||
fixture.detectChanges();
|
||||
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-as-id');
|
||||
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
|
||||
stateOptions[3].nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
saveButton.click();
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(saveAsFilterSpy).toHaveBeenCalled();
|
||||
expect(saveAsSpy).toHaveBeenCalled();
|
||||
expect(dialog.open).toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,172 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 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 { Component, OnChanges, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
|
||||
import { FormGroup, FormBuilder } from '@angular/forms';
|
||||
import { TaskFilterCloudModel, FilterActionType } from './../models/filter-cloud.model';
|
||||
import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
|
||||
import { TranslationService } from '@alfresco/adf-core';
|
||||
import { debounceTime } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-edit-task-filter',
|
||||
templateUrl: './edit-task-filter-cloud.component.html',
|
||||
styleUrls: ['./edit-task-filter-cloud.component.scss']
|
||||
})
|
||||
export class EditTaskFilterCloudComponent implements OnChanges {
|
||||
|
||||
public static ACTION_SAVE = 'SAVE';
|
||||
public static ACTION_SAVE_AS = 'SAVE_AS';
|
||||
public static ACTION_DELETE = 'DELETE';
|
||||
|
||||
@Input()
|
||||
appName: string;
|
||||
|
||||
@Input()
|
||||
id: string;
|
||||
|
||||
taskFilter: TaskFilterCloudModel;
|
||||
changedTaskFilter: TaskFilterCloudModel;
|
||||
|
||||
/** Emitted when an task filter property changes. */
|
||||
@Output()
|
||||
filterChange: EventEmitter<TaskFilterCloudModel> = new EventEmitter();
|
||||
|
||||
/** Emitted when an filter action occurs i.e Save, SaveAs, Delete. */
|
||||
@Output()
|
||||
action: EventEmitter<FilterActionType> = new EventEmitter();
|
||||
|
||||
columns = [
|
||||
{key: 'id', label: 'ID'},
|
||||
{key: 'name', label: 'NAME'},
|
||||
{key: 'createdDate', label: 'Created Date'},
|
||||
{key: 'priority', label: 'PRIORITY'},
|
||||
{key: 'processDefinitionId', label: 'PROCESS DEFINITION ID'}
|
||||
];
|
||||
|
||||
status = [
|
||||
{label: 'ALL', value: ''},
|
||||
{label: 'CREATED', value: 'CREATED'},
|
||||
{label: 'CANCELLED', value: 'CANCELLED'},
|
||||
{label: 'ASSIGNED', value: 'ASSIGNED'},
|
||||
{label: 'SUSPENDED', value: 'SUSPENDED'},
|
||||
{label: 'COMPLETED', value: 'COMPLETED'},
|
||||
{label: 'DELETED', value: 'DELETED'}
|
||||
];
|
||||
|
||||
directions = ['ASC', 'DESC'];
|
||||
formHasBeenChanged = false;
|
||||
editTaskFilterForm: FormGroup;
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
public dialog: MatDialog,
|
||||
private translateService: TranslationService,
|
||||
private taskFilterCloudService: TaskFilterCloudService) {}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const id = changes['id'];
|
||||
if (id && id.currentValue !== id.previousValue) {
|
||||
this.retrieveTaskFilter();
|
||||
this.buildForm();
|
||||
}
|
||||
}
|
||||
|
||||
buildForm() {
|
||||
this.formHasBeenChanged = false;
|
||||
this.editTaskFilterForm = this.formBuilder.group({
|
||||
state: this.taskFilter.state,
|
||||
appName: this.taskFilter.appName,
|
||||
processDefinitionId: this.taskFilter.processDefinitionId,
|
||||
assignment: this.taskFilter.assignment,
|
||||
sort: this.taskFilter.sort,
|
||||
order: this.taskFilter.order
|
||||
});
|
||||
this.onFilterChange();
|
||||
}
|
||||
|
||||
retrieveTaskFilter() {
|
||||
this.taskFilter = this.taskFilterCloudService.getTaskFilterById(this.appName, this.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check for edit task filter form changes
|
||||
*/
|
||||
onFilterChange() {
|
||||
this.editTaskFilterForm.valueChanges
|
||||
.pipe(debounceTime(300))
|
||||
.subscribe((formValues: TaskFilterCloudModel) => {
|
||||
this.changedTaskFilter = new TaskFilterCloudModel(Object.assign({}, this.taskFilter, formValues));
|
||||
this.formHasBeenChanged = !this.compareFilters(this.changedTaskFilter, this.taskFilter);
|
||||
this.filterChange.emit(this.changedTaskFilter);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if both filters are same
|
||||
*/
|
||||
compareFilters(editedQuery, currentQuery): boolean {
|
||||
return JSON.stringify(editedQuery).toLowerCase() === JSON.stringify(currentQuery).toLowerCase();
|
||||
}
|
||||
|
||||
onSave() {
|
||||
this.taskFilterCloudService.updateFilter(this.changedTaskFilter);
|
||||
this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_SAVE, id: this.changedTaskFilter.id});
|
||||
}
|
||||
|
||||
onDelete() {
|
||||
this.taskFilterCloudService.deleteFilter(this.taskFilter);
|
||||
this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_DELETE, id: this.taskFilter.id});
|
||||
}
|
||||
|
||||
onSaveAs() {
|
||||
const dialogRef = this.dialog.open(TaskFilterDialogCloudComponent, {
|
||||
data: {
|
||||
name: this.translateService.instant(this.taskFilter.name)
|
||||
},
|
||||
height: 'auto',
|
||||
minWidth: '30%'
|
||||
});
|
||||
dialogRef.afterClosed().subscribe( (result) => {
|
||||
if (result && result.action === TaskFilterDialogCloudComponent.ACTION_SAVE) {
|
||||
const filterId = Math.random().toString(36).substr(2, 9);
|
||||
const filterKey = this.getSanitizeFilterName(result.name);
|
||||
const newFilter = {
|
||||
name: result.name,
|
||||
icon: result.icon,
|
||||
id: filterId,
|
||||
key: 'custom-' + filterKey
|
||||
};
|
||||
const filter = Object.assign({}, this.changedTaskFilter, newFilter);
|
||||
this.taskFilterCloudService.addFilter(filter);
|
||||
this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_SAVE_AS, id: filter.id});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getSanitizeFilterName(filterName) {
|
||||
const nameWithHyphen = this.replaceSpaceWithHyphen(filterName.trim());
|
||||
return nameWithHyphen.toLowerCase();
|
||||
}
|
||||
|
||||
replaceSpaceWithHyphen(name) {
|
||||
const regExt = new RegExp(' ', 'g');
|
||||
return name.replace(regExt, '-');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="adf-task-filter-dialog">
|
||||
<span mat-dialog-title id="adf-task-filter-dialog-title">
|
||||
{{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE' | translate}}
|
||||
</span>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="filterForm">
|
||||
<mat-form-field fxFlex [floatLabel]="'auto'">
|
||||
<input matInput placeholder="Filter name" formControlName="name" id="adf-filter-name-id">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions fxLayout="row" fxLayoutAlign="end end">
|
||||
<button mat-button (click)="onSaveClick()" id="adf-save-button-id" [disabled]="!isValid()">
|
||||
{{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.SAVE' | translate}}
|
||||
</button>
|
||||
<button mat-button (click)="onCancelClick()" id="adf-cancel-button-id">
|
||||
{{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.CANCEL' | translate}}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
.adf-task-filter-dialog .mat-card {
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.adf-task-filter-dialog .mat-card-content {
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 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 { ComponentFixture, TestBed, async } from '@angular/core/testing';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
|
||||
import { TaskCloudModule } from '../task-cloud.module';
|
||||
import { setupTestBed } from '@alfresco/adf-core';
|
||||
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
|
||||
|
||||
describe('TaskFilterDialogCloudComponent', () => {
|
||||
let component: TaskFilterDialogCloudComponent;
|
||||
let fixture: ComponentFixture<TaskFilterDialogCloudComponent>;
|
||||
|
||||
const mockDialogRef = {
|
||||
close: jasmine.createSpy('close'),
|
||||
open: jasmine.createSpy('open')
|
||||
};
|
||||
|
||||
const mockDialogData = {
|
||||
data: {name: 'Mock-Title'}
|
||||
};
|
||||
|
||||
setupTestBed({
|
||||
imports: [ProcessServiceCloudTestingModule, TaskCloudModule],
|
||||
providers: [
|
||||
{ provide: MatDialogRef, useValue: mockDialogRef },
|
||||
{ provide: MAT_DIALOG_DATA, useValue: mockDialogData }
|
||||
]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TaskFilterDialogCloudComponent);
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should create TaskFilterDialogCloudComponent', () => {
|
||||
expect(component instanceof TaskFilterDialogCloudComponent).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should get data from MAT_DIALOG_DATA as an input to the dialog', () => {
|
||||
fixture.detectChanges();
|
||||
const mockData = component.data;
|
||||
fixture.detectChanges();
|
||||
expect(mockData).toEqual(mockDialogData);
|
||||
expect(mockData.data.name).toEqual('Mock-Title');
|
||||
});
|
||||
|
||||
it('should display title', () => {
|
||||
fixture.detectChanges();
|
||||
let titleElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-dialog-title');
|
||||
expect(titleElement.textContent).toEqual(' ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE ');
|
||||
});
|
||||
|
||||
it('should enable save button if form is valid', async(() => {
|
||||
fixture.detectChanges();
|
||||
let saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
|
||||
const inputElement = fixture.debugElement.nativeElement.querySelector('#adf-filter-name-id');
|
||||
inputElement.value = 'My custom Name';
|
||||
inputElement.dispatchEvent(new Event('input'));
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
expect(saveButton).toBeDefined();
|
||||
expect(saveButton.disabled).toBeFalsy();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should disable save button if form is not valid', async(() => {
|
||||
fixture.detectChanges();
|
||||
const inputElement = fixture.debugElement.nativeElement.querySelector('#adf-filter-name-id');
|
||||
inputElement.value = '';
|
||||
inputElement.dispatchEvent(new Event('input'));
|
||||
fixture.whenStable().then(() => {
|
||||
let saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
|
||||
fixture.detectChanges();
|
||||
expect(saveButton).toBeDefined();
|
||||
expect(saveButton.disabled).toBe(true);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should able to close dialog on click of save button if form is valid', async(() => {
|
||||
fixture.detectChanges();
|
||||
const inputElement = fixture.debugElement.nativeElement.querySelector('#adf-filter-name-id');
|
||||
inputElement.value = 'My custom Name';
|
||||
inputElement.dispatchEvent(new Event('input'));
|
||||
fixture.whenStable().then(() => {
|
||||
let saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
|
||||
fixture.detectChanges();
|
||||
saveButton.click();
|
||||
expect(saveButton).toBeDefined();
|
||||
expect(saveButton.disabled).toBeFalsy();
|
||||
expect(component.dialogRef.close).toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should able close dialog on click of cancel button', () => {
|
||||
component.data = { data: { name: '' } };
|
||||
let cancelButton = fixture.debugElement.nativeElement.querySelector('#adf-cancel-button-id');
|
||||
fixture.detectChanges();
|
||||
cancelButton.click();
|
||||
expect(cancelButton).toBeDefined();
|
||||
expect(cancelButton.disabled).toBeFalsy();
|
||||
expect(component.dialogRef.close).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 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 { Component, Inject } from '@angular/core';
|
||||
import { OnInit } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
|
||||
import { FormBuilder, FormGroup, AbstractControl, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-task-filter-dialog',
|
||||
templateUrl: './task-filter-dialog-cloud.component.html',
|
||||
styleUrls: ['./task-filter-dialog-cloud.component.scss']
|
||||
})
|
||||
export class TaskFilterDialogCloudComponent implements OnInit {
|
||||
|
||||
public static ACTION_SAVE = 'SAVE';
|
||||
defaultIcon = 'inbox';
|
||||
|
||||
filterForm: FormGroup;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
public dialogRef: MatDialogRef<TaskFilterDialogCloudComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.filterForm = this.fb.group({
|
||||
name: [this.data.name, Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
onSaveClick() {
|
||||
this.dialogRef.close({
|
||||
action: TaskFilterDialogCloudComponent.ACTION_SAVE,
|
||||
icon: this.defaultIcon,
|
||||
name: this.nameController.value
|
||||
});
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
get nameController(): AbstractControl {
|
||||
return this.filterForm.get('name');
|
||||
}
|
||||
|
||||
isValid(): boolean {
|
||||
return this.filterForm.valid;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="menu-container">
|
||||
<mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
|
||||
<mat-list-item (click)="selectFilterAndEmit({id: filter.id})" *ngFor="let filter of filterList"
|
||||
<mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filterList"
|
||||
class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
|
||||
<mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
|
||||
</mat-icon>
|
||||
|
||||
@@ -19,7 +19,7 @@ import { SimpleChange } from '@angular/core';
|
||||
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
|
||||
import { setupTestBed } from '@alfresco/adf-core';
|
||||
import { from, Observable } from 'rxjs';
|
||||
import { TaskFilterCloudRepresentationModel, FilterParamsModel } from '../models/filter-cloud.model';
|
||||
import { TaskFilterCloudModel } from '../models/filter-cloud.model';
|
||||
import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
|
||||
import { TaskFiltersCloudComponent } from './task-filters-cloud.component';
|
||||
import { By } from '@angular/platform-browser';
|
||||
@@ -31,26 +31,29 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
let taskFilterService: TaskFilterCloudService;
|
||||
|
||||
let fakeGlobalFilter = [
|
||||
new TaskFilterCloudRepresentationModel({
|
||||
new TaskFilterCloudModel({
|
||||
name: 'FakeInvolvedTasks',
|
||||
key: 'fake-involved-tasks',
|
||||
icon: 'adjust',
|
||||
id: 10,
|
||||
filter: {state: 'open', assignment: 'fake-involved'}
|
||||
state: 'open',
|
||||
assignment: 'fake-involved'
|
||||
}),
|
||||
new TaskFilterCloudRepresentationModel({
|
||||
name: 'FakeMyTasks1',
|
||||
key: 'fake-my-tast1',
|
||||
icon: 'done',
|
||||
id: 11,
|
||||
filter: {state: 'open', assignment: 'fake-assignee'}
|
||||
new TaskFilterCloudModel({
|
||||
name: 'FakeMyTasks1',
|
||||
key: 'fake-my-tast1',
|
||||
icon: 'done',
|
||||
id: 11,
|
||||
state: 'open',
|
||||
assignment: 'fake-assignee'
|
||||
}),
|
||||
new TaskFilterCloudRepresentationModel({
|
||||
new TaskFilterCloudModel({
|
||||
name: 'FakeMyTasks2',
|
||||
key: 'fake-my-tast2',
|
||||
icon: 'inbox',
|
||||
id: 12,
|
||||
filter: {state: 'open', assignment: 'fake-assignee'}
|
||||
state: 'open',
|
||||
assignment: 'fake-assignee'
|
||||
})
|
||||
];
|
||||
|
||||
@@ -221,7 +224,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
it('should select the task filter based on the input by name param', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
||||
component.filterParam = new FilterParamsModel({ name: 'FakeMyTasks1' });
|
||||
component.filterParam = new TaskFilterCloudModel({ name: 'FakeMyTasks1' });
|
||||
const appName = 'my-app-1';
|
||||
let change = new SimpleChange(null, appName, true);
|
||||
|
||||
@@ -239,7 +242,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
it('should select the default task filter if filter input does not exist', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
||||
component.filterParam = new FilterParamsModel({ name: 'UnexistableFilter' });
|
||||
component.filterParam = new TaskFilterCloudModel({ name: 'UnexistableFilter' });
|
||||
|
||||
const appName = 'my-app-1';
|
||||
let change = new SimpleChange(null, appName, true);
|
||||
@@ -258,7 +261,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
it('should select the task filter based on the input by index param', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
||||
component.filterParam = new FilterParamsModel({ index: 2 });
|
||||
component.filterParam = new TaskFilterCloudModel({ index: 2 });
|
||||
|
||||
const appName = 'my-app-1';
|
||||
let change = new SimpleChange(null, appName, true);
|
||||
@@ -277,7 +280,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
it('should select the task filter based on the input by id param', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
||||
component.filterParam = new FilterParamsModel({ id: 12 });
|
||||
component.filterParam = new TaskFilterCloudModel({ id: 12 });
|
||||
|
||||
const appName = 'my-app-1';
|
||||
let change = new SimpleChange(null, appName, true);
|
||||
@@ -296,7 +299,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
it('should emit an event when a filter is selected', async(() => {
|
||||
spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
|
||||
|
||||
component.filterParam = new FilterParamsModel({ id: 12 });
|
||||
component.filterParam = new TaskFilterCloudModel({ id: 12 });
|
||||
|
||||
const appName = 'my-app-1';
|
||||
let change = new SimpleChange(null, appName, true);
|
||||
@@ -306,7 +309,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
spyOn(component, 'selectFilterAndEmit').and.stub();
|
||||
let filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="fake-my-tast1-filter"]');
|
||||
filterButton.click();
|
||||
expect(component.selectFilterAndEmit).toHaveBeenCalledWith({id: fakeGlobalFilter[1].id});
|
||||
expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]);
|
||||
}));
|
||||
|
||||
it('should reload filters by appName on binding changes', () => {
|
||||
@@ -367,7 +370,7 @@ describe('TaskFiltersCloudComponent', () => {
|
||||
});
|
||||
|
||||
it('should return the current filter after one is selected', () => {
|
||||
let filter = new FilterParamsModel({ name: 'FakeInvolvedTasks' });
|
||||
let filter = new TaskFilterCloudModel({ name: 'FakeInvolvedTasks' });
|
||||
component.filters = fakeGlobalFilter;
|
||||
|
||||
expect(component.currentFilter).toBeUndefined();
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
|
||||
import { TaskFilterCloudRepresentationModel, FilterParamsModel } from '../models/filter-cloud.model';
|
||||
import { TaskFilterCloudModel } from '../models/filter-cloud.model';
|
||||
import { TranslationService } from '@alfresco/adf-core';
|
||||
@Component({
|
||||
selector: 'adf-cloud-task-filters',
|
||||
@@ -35,7 +35,7 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
* (the first one in the list) is selected.
|
||||
*/
|
||||
@Input()
|
||||
filterParam: FilterParamsModel;
|
||||
filterParam: TaskFilterCloudModel;
|
||||
|
||||
/** Toggles display of the filter's icons. */
|
||||
@Input()
|
||||
@@ -43,7 +43,7 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
|
||||
/** Emitted when a filter in the list is clicked. */
|
||||
@Output()
|
||||
filterClick: EventEmitter<TaskFilterCloudRepresentationModel> = new EventEmitter<TaskFilterCloudRepresentationModel>();
|
||||
filterClick: EventEmitter<TaskFilterCloudModel> = new EventEmitter<TaskFilterCloudModel>();
|
||||
|
||||
/** Emitted when the list is loaded. */
|
||||
@Output()
|
||||
@@ -53,11 +53,11 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
@Output()
|
||||
error: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
filters$: Observable<TaskFilterCloudRepresentationModel[]>;
|
||||
filters$: Observable<TaskFilterCloudModel[]>;
|
||||
|
||||
currentFilter: TaskFilterCloudRepresentationModel;
|
||||
currentFilter: TaskFilterCloudModel;
|
||||
|
||||
filters: TaskFilterCloudRepresentationModel [] = [];
|
||||
filters: TaskFilterCloudModel [] = [];
|
||||
|
||||
constructor(private taskFilterCloudService: TaskFilterCloudService, private translationService: TranslationService) {
|
||||
}
|
||||
@@ -79,7 +79,7 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
this.filters$ = this.taskFilterCloudService.getTaskListFilters(appName);
|
||||
|
||||
this.filters$.subscribe(
|
||||
(res: TaskFilterCloudRepresentationModel[]) => {
|
||||
(res: TaskFilterCloudModel[]) => {
|
||||
if (res.length === 0) {
|
||||
this.createFilters(appName);
|
||||
} else {
|
||||
@@ -102,7 +102,7 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
this.filters$ = this.taskFilterCloudService.createDefaultFilters(appName);
|
||||
|
||||
this.filters$.subscribe(
|
||||
(resDefault: TaskFilterCloudRepresentationModel[]) => {
|
||||
(resDefault: TaskFilterCloudModel[]) => {
|
||||
this.resetFilter();
|
||||
this.filters = resDefault;
|
||||
},
|
||||
@@ -112,9 +112,9 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
);
|
||||
}
|
||||
|
||||
public selectFilter(newFilter: FilterParamsModel) {
|
||||
public selectFilter(newFilter: TaskFilterCloudModel) {
|
||||
if (newFilter) {
|
||||
this.currentFilter = this.filters.find( (filter: TaskFilterCloudRepresentationModel, index) =>
|
||||
this.currentFilter = this.filters.find( (filter: TaskFilterCloudModel, index) =>
|
||||
newFilter.index === index ||
|
||||
newFilter.key === filter.key ||
|
||||
newFilter.id === filter.id ||
|
||||
@@ -127,7 +127,7 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
}
|
||||
}
|
||||
|
||||
public selectFilterAndEmit(newFilter: FilterParamsModel) {
|
||||
public selectFilterAndEmit(newFilter: TaskFilterCloudModel) {
|
||||
this.selectFilter(newFilter);
|
||||
this.filterClick.emit(this.currentFilter);
|
||||
}
|
||||
@@ -144,7 +144,7 @@ export class TaskFiltersCloudComponent implements OnChanges {
|
||||
/**
|
||||
* Return the current task
|
||||
*/
|
||||
getCurrentFilter(): TaskFilterCloudRepresentationModel {
|
||||
getCurrentFilter(): TaskFilterCloudModel {
|
||||
return this.currentFilter;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user