From 47ec01555ad6fa2de9ec0783a749857323ce1447 Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Mon, 14 Oct 2019 15:28:24 +0100 Subject: [PATCH] [ADF-4893] Fix visibility condition in datatable action menu (#5088) * [ADF-4893] Fix visibility condition in datatable action menu * Add filtering for when menu cache is disabled * Fix unit test and improve code * Fix linting * Fix linting * Add missing return type --- .../cloud/shared/cloud-settings.component.ts | 6 +-- .../datatable/datatable.component.spec.ts | 52 ++++++++++++------- .../datatable/datatable.component.ts | 8 ++- 3 files changed, 42 insertions(+), 24 deletions(-) diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts index faa96c6c56..0fb63d17ae 100644 --- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts +++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts @@ -69,13 +69,13 @@ export class CloudSettingsComponent implements OnInit, OnDestroy { setCurrentSettings(settings) { if (settings) { this.multiselect = settings.multiselect; - this.actionMenu = this.actionMenu; - this.contextMenu = this.contextMenu; - this.actions = this.actions; this.testingMode = settings.testingMode; this.selectionMode = settings.selectionMode; this.taskDetailsRedirection = settings.taskDetailsRedirection; this.processDetailsRedirection = settings.processDetailsRedirection; + this.actionMenu = settings.actionMenu; + this.contextMenu = settings.contextMenu; + this.actions = settings.actions; } } diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index e75ebdd72e..532959af0b 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts @@ -554,6 +554,20 @@ describe('DataTable', () => { expect(actions.length).toBe(4); }); + it('should show only visible actions', () => { + const unfilteredActions = [ + { title: 'action1', name: 'view1', visible: true }, + { title: 'action2', name: 'view2', visible: false }, + { title: 'action3', name: 'view3', visible: null }, + { title: 'action4', name: 'view4' } + ]; + + const actions = dataTable.getVisibleActions(unfilteredActions); + expect(actions.length).toBe(2); + expect(actions[0].title).toBe('action1'); + expect(actions[1].title).toBe('action4'); + }); + it('should initialize default adapter', () => { const table = new DataTableComponent(null, null); expect(table.data).toBeUndefined(); @@ -591,8 +605,8 @@ describe('DataTable', () => { dataTable.onRowClick(row, null); setTimeout(() => { - dataTable.onRowClick(row, null); - } + dataTable.onRowClick(row, null); + } , 240); }); @@ -609,9 +623,9 @@ describe('DataTable', () => { dataTable.onRowClick(row, null); setTimeout(() => { - dataTable.onRowClick(row, null); - dataTable.onRowClick(row, null); - } + dataTable.onRowClick(row, null); + dataTable.onRowClick(row, null); + } , 240); }); @@ -632,8 +646,8 @@ describe('DataTable', () => { dataTable.onRowClick(row, null); setTimeout(() => { - dataTable.onRowClick(row, null); - } + dataTable.onRowClick(row, null); + } , 260); }); @@ -752,14 +766,14 @@ describe('DataTable', () => { it('should indicate column that has sorting applied', () => { dataTable.data = new ObjectDataTableAdapter( - [ { name: '1' }, { name: '2' } ], + [{ name: '1' }, { name: '2' }], [ new ObjectDataColumn({ key: 'name', sortable: true }), - new ObjectDataColumn({ key: 'other', sortable: true }) + new ObjectDataColumn({ key: 'other', sortable: true }) ] ); - const [col1, col2] = dataTable.getSortableColumns(); + const [col1, col2] = dataTable.getSortableColumns(); dataTable.onColumnHeaderClick(col2); @@ -769,14 +783,14 @@ describe('DataTable', () => { it('should return false for columns that have no sorting', () => { dataTable.data = new ObjectDataTableAdapter( - [ { name: '1' }, { name: '2' } ], + [{ name: '1' }, { name: '2' }], [ new ObjectDataColumn({ key: 'name', sortable: false }), - new ObjectDataColumn({ key: 'other', sortable: false }) + new ObjectDataColumn({ key: 'other', sortable: false }) ] ); - const [col1, col2] = dataTable.getSortableColumns(); + const [col1, col2] = dataTable.getSortableColumns(); expect(dataTable.isColumnSortActive(col1)).toBe(false); expect(dataTable.isColumnSortActive(col2)).toBe(false); @@ -796,7 +810,7 @@ describe('DataTable', () => { dataTable.data = data; dataTable.multiselect = true; dataTable.ngAfterContentInit(); - dataTable.onSelectAllClick( {checked: true }); + dataTable.onSelectAllClick( { checked: true }); expect(dataTable.selection.every((entry) => entry.isSelected)); @@ -814,13 +828,13 @@ describe('DataTable', () => { dataTable.multiselect = true; dataTable.ngAfterContentInit(); - dataTable.onSelectAllClick( {checked: true }); + dataTable.onSelectAllClick( { checked: true }); expect(dataTable.isSelectAllChecked).toBe(true); for (let i = 0; i < rows.length; i++) { expect(rows[i].isSelected).toBe(true); } - dataTable.onSelectAllClick( {checked: false }); + dataTable.onSelectAllClick( { checked: false }); expect(dataTable.isSelectAllChecked).toBe(false); for (let i = 0; i < rows.length; i++) { expect(rows[i].isSelected).toBe(false); @@ -831,7 +845,7 @@ describe('DataTable', () => { dataTable.multiselect = true; dataTable.ngOnChanges({ 'data': new SimpleChange('123', {}, true) }); - dataTable.onSelectAllClick( {checked: true }); + dataTable.onSelectAllClick( { checked: true }); expect(dataTable.isSelectAllChecked).toBe(true); }); @@ -843,7 +857,7 @@ describe('DataTable', () => { dataTable.multiselect = false; dataTable.ngAfterContentInit(); - dataTable.onSelectAllClick( {checked: true }); + dataTable.onSelectAllClick( { checked: true }); expect(dataTable.isSelectAllChecked).toBe(true); for (let i = 0; i < rows.length; i++) { expect(rows[i].isSelected).toBe(false); @@ -1139,7 +1153,7 @@ describe('Accesibility', () => { let column: DataColumn; beforeEach(() => { - column = new ObjectDataColumn({ key: 'key' }); + column = new ObjectDataColumn({ key: 'key' }); }); it('should return correct translation key when no sort is applied', () => { diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 3babb26b7f..6d9dac1ab9 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -568,12 +568,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck, const event = new DataCellEvent(row, col, []); this.showRowActionsMenu.emit(event); if (!this.rowMenuCacheEnabled) { - return event.value.actions; + return this.getVisibleActions(event.value.actions); } this.rowMenuCache[id] = event.value.actions; } - return this.rowMenuCache[id]; + return this.getVisibleActions(this.rowMenuCache[id]); + } + + getVisibleActions(actions: any[]): any[] { + return actions.filter((action) => action.visible || action.visible === undefined); } onExecuteRowAction(row: DataRow, action: any) {