diff --git a/demo-shell/src/app/components/datatable/datatable.component.html b/demo-shell/src/app/components/datatable/datatable.component.html index f143ffde1c..1d633ccd30 100644 --- a/demo-shell/src/app/components/datatable/datatable.component.html +++ b/demo-shell/src/app/components/datatable/datatable.component.html @@ -20,6 +20,7 @@ [actions]="true" [resolverFn]="resolver" rowStyleClass="custom-row-style" + [showMainDatatableActions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)"> diff --git a/lib/core/datatable/components/columns-selector/columns-selector.component.spec.ts b/lib/core/datatable/components/columns-selector/columns-selector.component.spec.ts index a42fc77d28..ffdc543f91 100644 --- a/lib/core/datatable/components/columns-selector/columns-selector.component.spec.ts +++ b/lib/core/datatable/components/columns-selector/columns-selector.component.spec.ts @@ -114,11 +114,15 @@ describe('ColumnsSelectorComponent', () => { const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness); - expect(checkboxes.length).toBe(4); - expect(await checkboxes[0].getLabelText()).toBe(inputColumns[0].title); - expect(await checkboxes[1].getLabelText()).toBe(inputColumns[1].title); - expect(await checkboxes[2].getLabelText()).toBe(inputColumns[2].title); - expect(await checkboxes[3].getLabelText()).toBe(inputColumns[4].title); + const inputColumnsWithTitle = inputColumns.filter(column => !!column.title); + expect(checkboxes.length).toBe(inputColumnsWithTitle.length); + + for await (const checkbox of checkboxes) { + const checkboxLabel = await checkbox.getLabelText(); + + const inputColumn = inputColumnsWithTitle.find(inputColumnWithTitle => inputColumnWithTitle.title === checkboxLabel); + expect(inputColumn).toBeTruthy('Should have all columns with title'); + } }); it('should filter columns by search text', fakeAsync(async () => { @@ -143,9 +147,13 @@ describe('ColumnsSelectorComponent', () => { fixture.detectChanges(); const firstColumnCheckbox = await loader.getHarness(MatCheckboxHarness); - await firstColumnCheckbox.toggle(); + const checkBoxName = await firstColumnCheckbox.getLabelText(); - expect(component.columnItems[0].isHidden).toBe(true); + let toggledColumnItem = component.columnItems.find(item => item.title === checkBoxName); + expect(toggledColumnItem.isHidden).toBeFalsy(); + + await firstColumnCheckbox.toggle(); + expect(toggledColumnItem.isHidden).toBe(true); }); it('should set proper default state for checkboxes', async () => { @@ -159,4 +167,30 @@ describe('ColumnsSelectorComponent', () => { expect(await checkboxes[2].isChecked()).toBe(true); expect(await checkboxes[3].isChecked()).toBe(false); }); + + it('should show hidden columns at the end of the list', async () => { + const hiddenDataColumn: DataColumn = { + id: 'hiddenDataColumn', + title: 'hiddenDataColumn', + key: 'hiddenDataColumn', + type: 'text', + isHidden: true + }; + + const shownDataColumn: DataColumn = { + id: 'shownDataColumn', + title: 'shownDataColumn', + key: 'shownDataColumn', + type: 'text' + }; + + component.columns = [hiddenDataColumn, shownDataColumn]; + menuOpenedTrigger.next(); + fixture.detectChanges(); + + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness); + + expect(await checkboxes[0].getLabelText()).toBe(shownDataColumn.title); + expect(await checkboxes[1].getLabelText()).toBe(hiddenDataColumn.title); + }); }); diff --git a/lib/core/datatable/components/columns-selector/columns-selector.component.ts b/lib/core/datatable/components/columns-selector/columns-selector.component.ts index 251527985d..0e1c368efe 100644 --- a/lib/core/datatable/components/columns-selector/columns-selector.component.ts +++ b/lib/core/datatable/components/columns-selector/columns-selector.component.ts @@ -46,7 +46,8 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy { this.mainMenuTrigger.menuOpened.pipe( takeUntil(this.onDestroy$) ).subscribe(() => { - this.columnItems = this.columns.map(column => ({...column})); + const columns = this.columns.map(column => ({...column})); + this.columnItems = this.sortColumns(columns); }); this.mainMenuTrigger.menuClosed.pipe( @@ -80,4 +81,11 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy { this.submitColumnsVisibility.emit(this.columnItems); this.closeMenu(); } + + private sortColumns(columns: DataColumn[]): DataColumn[] { + const shownColumns = columns.filter(column => !column.isHidden); + const hiddenColumns = columns.filter(column => column.isHidden); + + return [...shownColumns, ...hiddenColumns]; + } } diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html index 2c042abb21..2edadb9b8a 100644 --- a/lib/core/datatable/components/datatable/datatable.component.html +++ b/lib/core/datatable/components/datatable/datatable.component.html @@ -97,11 +97,13 @@
-
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index dc45e39595..689e882a2a 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -112,6 +112,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, @Input() actions: boolean = false; + /** Toggles the main datatable action. */ + @Input() + showMainDatatableActions: boolean = false; + /** Position of the actions dropdown menu. Can be "left" or "right". */ @Input() actionsPosition: string = 'right'; // left|right diff --git a/lib/core/datatable/data/data-table.schema.ts b/lib/core/datatable/data/data-table.schema.ts index bdae7d78de..7def0d458d 100644 --- a/lib/core/datatable/data/data-table.schema.ts +++ b/lib/core/datatable/data/data-table.schema.ts @@ -38,8 +38,7 @@ export abstract class DataTableSchema { protected columnsOrder: string[] | undefined; protected columnsOrderedByKey: string = 'id'; - protected hiddenColumns: string[] | undefined; - protected hiddenColumnsKey: string = 'id'; + protected columnsVisibility: { [columnId: string]: boolean } | undefined; private layoutPresets = {}; @@ -133,14 +132,13 @@ export abstract class DataTableSchema { } private setHiddenColumns(columns: DataColumn[]): DataColumn[] { - if (this.hiddenColumns) { + if (this.columnsVisibility) { return columns.map(column => { - const columnShouldBeHidden = this.hiddenColumns.includes(column[this.hiddenColumnsKey]); + const isColumnVisible = this.columnsVisibility[column.id]; - return { - ...column, - isHidden: columnShouldBeHidden - }; + return isColumnVisible === undefined ? + column : + { ...column, isHidden: !isColumnVisible }; }); } diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html index 9776c10c82..654cd2ecb0 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html @@ -9,6 +9,7 @@ [actions]="showActions" [actionsPosition]="actionsPosition" [contextMenu]="showContextMenu" + [showMainDatatableActions]="showMainDatatableActions" (showRowActionsMenu)="onShowRowActionsMenu($event)" (showRowContextMenu)="onShowRowContextMenu($event)" (executeRowAction)="onExecuteRowAction($event)" @@ -39,4 +40,14 @@ + + + + + + + diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts index de1c31883a..87b05d92cd 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts @@ -19,6 +19,8 @@ import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { AppConfigService, + ColumnsSelectorComponent, + DataColumn, DataRowEvent, ObjectDataRow, setupTestBed @@ -225,6 +227,64 @@ describe('ProcessListCloudComponent', () => { fixture.detectChanges(); }); + it('should not shown columns selector by default', () => { + spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList)); + + const appName = new SimpleChange(null, 'FAKE-APP-NAME', true); + component.ngOnChanges({ appName }); + + fixture.detectChanges(); + + const mainMenuButton = fixture.debugElement.query(By.css('[data-automation-id="adf-datatable-main-menu-button"]')); + expect(mainMenuButton).toBeFalsy(); + }); + + it('should shown columns selector', () => { + component.showMainDatatableActions = true; + spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList)); + + const appName = new SimpleChange(null, 'FAKE-APP-NAME', true); + component.ngOnChanges({ appName }); + + fixture.detectChanges(); + + const mainMenuButton = fixture.debugElement.query(By.css('[data-automation-id="adf-datatable-main-menu-button"]')); + expect(mainMenuButton).toBeTruthy(); + }); + + it('should hide columns on applying new columns visibility through columns selector', () => { + component.showMainDatatableActions = true; + fixture.detectChanges(); + + spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList)); + + const appName = new SimpleChange(null, 'FAKE-APP-NAME', true); + component.ngOnChanges({ appName }); + + fixture.detectChanges(); + + const mainMenuButton = fixture.debugElement.query(By.css('[data-automation-id="adf-datatable-main-menu-button"]')); + mainMenuButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + + const columnSelectorMenu = fixture.debugElement.query(By.css('adf-datatable-column-selector')); + expect(columnSelectorMenu).toBeTruthy(); + + const newColumns = (component.columns as DataColumn[]).map((column, index) => ({ + ...column, + isHidden: index !== 0 // only first one is shown + })); + + const columnsSelectorInstance = columnSelectorMenu.componentInstance as ColumnsSelectorComponent; + expect(columnsSelectorInstance.columns).toBe(component.columns, 'should use columns as input'); + + columnSelectorMenu.triggerEventHandler('submitColumnsVisibility', newColumns); + fixture.detectChanges(); + + const displayedColumns = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header')); + expect(displayedColumns.length).toBe(2, 'only column with isHidden set to false and action column should be shown'); + }); + it('should reload tasks when reload() is called', (done) => { component.appName = 'fake'; spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList)); diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts index 341968a057..425dcbc5df 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts @@ -159,6 +159,10 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan @Input() showContextMenu: boolean = false; + /** Toggle main datatable actions. */ + @Input() + showMainDatatableActions: boolean = false; + /** Emitted when a row in the process list is clicked. */ @Output() rowClick: EventEmitter = new EventEmitter(); @@ -223,14 +227,22 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan map((preferences => { const preferencesList = preferences?.list?.entries ?? []; const columnsOrder = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnOrder); + const columnsVisibility = preferencesList.find(preference => preference.entry.key === ProcessListCloudPreferences.columnsVisibility); return { - columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined + columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined, + columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : undefined }; })) ) - .subscribe(({ columnsOrder }) => { - this.columnsOrder = columnsOrder; + .subscribe(({ columnsOrder, columnsVisibility }) => { + if (columnsVisibility) { + this.columnsVisibility = columnsVisibility; + } + + if (columnsOrder) { + this.columnsOrder = columnsOrder; + } this.createDatatableSchema(); }); @@ -326,12 +338,33 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan } onColumnOrderChanged(columnsWithNewOrder: DataColumn[]): void { + this.columnsOrder = columnsWithNewOrder.map(column => column.id); + if (this.appName) { - const newColumnsOrder = columnsWithNewOrder.map(column => column.id); this.cloudPreferenceService.updatePreference( this.appName, ProcessListCloudPreferences.columnOrder, - newColumnsOrder + this.columnsOrder + ); + } + } + + onColumnsVisibilityChange(columns: DataColumn[]): void { + this.columnsVisibility = columns.reduce((visibleColumnsMap, column) => { + if (column.isHidden !== undefined) { + visibleColumnsMap[column.id] = !column.isHidden; + } + + return visibleColumnsMap; + }, {}); + + this.createColumns(); + + if (this.appName) { + this.cloudPreferenceService.updatePreference( + this.appName, + ProcessListCloudPreferences.columnsVisibility, + this.columnsVisibility ); } } diff --git a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts index dd3de35da5..e712415415 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preferences.ts @@ -1,4 +1,5 @@ // eslint-disable-next-line no-shadow export enum ProcessListCloudPreferences { - columnOrder = 'processes-cloud-list-columns-order' + columnOrder = 'processes-cloud-list-columns-order', + columnsVisibility = 'processes-cloud-columns-visibility' } diff --git a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preset.model.ts b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preset.model.ts index ae3f1d72b5..78ea8c1e8a 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preset.model.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-preset.model.ts @@ -18,12 +18,14 @@ export const processCloudPresetsDefaultModel = { default: [ { + id: 'id', key: 'name', type: 'text', title: 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.NAME', sortable: true }, { + id: 'startDate', key: 'startDate', type: 'date', title: 'ADF_CLOUD_PROCESS_LIST.PROPERTIES.START_DATE', diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html index d7064950df..013ae9e3a8 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html @@ -12,6 +12,7 @@ [actionsPosition]="actionsPosition" [contextMenu]="showContextMenu" [resolverFn]="boundReplacePriorityValues" + [showMainDatatableActions]="showMainDatatableActions" (showRowActionsMenu)="onShowRowActionsMenu($event)" (showRowContextMenu)="onShowRowContextMenu($event)" (executeRowAction)="onExecuteRowAction($event)" @@ -40,5 +41,15 @@ + + + + + + + diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts index 69cac13d68..bc12ef7478 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts @@ -76,6 +76,10 @@ export abstract class BaseTaskListCloudComponent extends DataTableSchema impleme @Input() showContextMenu: boolean = false; + /** Toggles main datatable actions. */ + @Input() + showMainDatatableActions: boolean = false; + /** Emitted before the context menu is displayed for a row. */ @Output() showRowContextMenu = new EventEmitter(); @@ -160,11 +164,23 @@ export abstract class BaseTaskListCloudComponent extends DataTableSchema impleme take(1), map((preferences => { const preferencesList = preferences?.list?.entries ?? []; - const searchedPreferences = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnOrder); - return searchedPreferences ? JSON.parse(searchedPreferences.entry.value) : null; + const columnsOrder = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnOrder); + const columnsVisibility = preferencesList.find(preference => preference.entry.key === TasksListCloudPreferences.columnsVisibility); + + return { + columnsOrder: columnsOrder ? JSON.parse(columnsOrder.entry.value) : undefined, + columnsVisibility: columnsVisibility ? JSON.parse(columnsVisibility.entry.value) : undefined + }; })) - ).subscribe(columnsOrder => { - this.columnsOrder = columnsOrder; + ).subscribe(({ columnsOrder, columnsVisibility }) => { + if (columnsOrder) { + this.columnsOrder = columnsOrder; + } + + if (columnsVisibility) { + this.columnsVisibility = columnsVisibility; + } + this.createDatatableSchema(); } ); @@ -261,6 +277,26 @@ export abstract class BaseTaskListCloudComponent extends DataTableSchema impleme } } + onColumnsVisibilityChange(columns: DataColumn[]): void { + this.columnsVisibility = columns.reduce((visibleColumnsMap, column) => { + if (column.isHidden !== undefined) { + visibleColumnsMap[column.id] = !column.isHidden; + } + + return visibleColumnsMap; + }, {}); + + this.createColumns(); + + if (this.appName) { + this.cloudPreferenceService.updatePreference( + this.appName, + TasksListCloudPreferences.columnsVisibility, + this.columnsVisibility + ); + } + } + setSorting(sortDetail) { const sorting = sortDetail ? { orderBy: sortDetail.key, diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts index a00fa36077..91a586397f 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts @@ -18,7 +18,7 @@ import { Component, SimpleChange, ViewChild } from '@angular/core'; import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { AppConfigService, setupTestBed, DataRowEvent, ObjectDataRow, EcmUserModel } from '@alfresco/adf-core'; +import { AppConfigService, setupTestBed, DataRowEvent, ObjectDataRow, EcmUserModel, DataColumn, ColumnsSelectorComponent } from '@alfresco/adf-core'; import { TaskListCloudService } from '../services/task-list-cloud.service'; import { TaskListCloudComponent } from './task-list-cloud.component'; import { fakeGlobalTask, fakeCustomSchema } from '../mock/fake-task-response.mock'; @@ -34,9 +34,9 @@ import { TASK_LIST_CLOUD_TOKEN } from '../../../services/cloud-token.service'; template: ` - - - + + +
{{getFullName(entry.row?.obj?.startedBy)}}
 @@ -193,6 +193,37 @@ describe('TaskListCloudComponent', () => { expect(component.columns).toEqual(fakeCustomSchema); }); + it('should hide columns on applying new columns visibility through columns selector', () => { + component.showMainDatatableActions = true; + spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTask)); + + const appName = new SimpleChange(null, 'FAKE-APP-NAME', true); + component.ngOnChanges({ appName }); + + fixture.detectChanges(); + + const mainMenuButton = fixture.debugElement.query(By.css('[data-automation-id="adf-datatable-main-menu-button"]')); + mainMenuButton.triggerEventHandler('click', {}); + fixture.detectChanges(); + + const columnSelectorMenu = fixture.debugElement.query(By.css('adf-datatable-column-selector')); + expect(columnSelectorMenu).toBeTruthy(); + + const columnsSelectorInstance = columnSelectorMenu.componentInstance as ColumnsSelectorComponent; + expect(columnsSelectorInstance.columns).toBe(component.columns, 'should pass columns as input'); + + const newColumns = (component.columns as DataColumn[]).map((column, index) => ({ + ...column, + isHidden: index !== 0 // only first one is shown + })); + + columnSelectorMenu.triggerEventHandler('submitColumnsVisibility', newColumns); + fixture.detectChanges(); + + const displayedColumns = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header')); + expect(displayedColumns.length).toBe(2, 'only column with isHidden set to false and action column should be shown'); + }); + it('should fetch custom schemaColumn when the input presetColumn is defined', () => { component.presetColumn = 'fakeCustomSchema'; fixture.detectChanges(); diff --git a/lib/process-services-cloud/src/lib/task/task-list/models/task-preset-cloud.model.ts b/lib/process-services-cloud/src/lib/task/task-list/models/task-preset-cloud.model.ts index 40881830b8..acb44eb7ec 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/models/task-preset-cloud.model.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/models/task-preset-cloud.model.ts @@ -18,12 +18,14 @@ export const taskPresetsCloudDefaultModel = { default: [ { + id: 'name', key: 'name', type: 'text', title: 'ADF_CLOUD_TASK_LIST.PROPERTIES.NAME', sortable: true }, { + id: 'created', key: 'created', type: 'text', title: 'ADF_CLOUD_TASK_LIST.PROPERTIES.CREATED', @@ -31,6 +33,7 @@ export const taskPresetsCloudDefaultModel = { sortable: true }, { + id: 'assignee', key: 'assignee', type: 'text', title: 'ADF_CLOUD_TASK_LIST.PROPERTIES.ASSIGNEE', diff --git a/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts b/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts index 1153870ae3..8fdf8a537c 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/models/tasks-cloud-preferences.ts @@ -1,4 +1,5 @@ // eslint-disable-next-line no-shadow export enum TasksListCloudPreferences { - columnOrder = 'tasks-list-cloud-columns-order' + columnOrder = 'tasks-list-cloud-columns-order', + columnsVisibility = 'tasks-list-cloud-columns-visibility' }