From b53ca2a5d32a8e9d60fa279709e7a55fcdd487e8 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Thu, 27 Jun 2024 14:10:39 +0200 Subject: [PATCH 1/2] feat: implement conditional additionalActions for data table --- .../data-table/data-table.component.html | 4 +- .../data-table.component.stories.ts | 86 +++++++++++++++++++ .../src/lib/model/data-action.ts | 2 + 3 files changed, 91 insertions(+), 1 deletion(-) diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html index bf282994..45951450 100644 --- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html +++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html @@ -49,6 +49,7 @@ > + + diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts index ee0fe570..67d26ad7 100644 --- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts @@ -269,4 +269,90 @@ export const WithConditionallyHiddenActionButtons = { }, } +export const WithAdditionalActions = { + argTypes: { + deleteTableRow: { action: 'deleteTableRow' }, + editTableRow: { action: 'deleteTableRow' }, + viewTableRow: { action: 'deleteTableRow' }, + }, + render: Template, + args: { + ...defaultComponentArgs, + deleteTableRow: ($event: any) => console.log('Delete table row ', $event), + editTableRow: ($event: any) => console.log('Edit table row ', $event), + viewTableRow: ($event: any) => console.log('View table row ', $event), + deleteActionVisibleField: 'available', + editActionVisibleField: 'available', + deletePermission: 'TEST_MGMT#TEST_DELETE', + editPermission: 'TEST_MGMT#TEST_EDIT', + viewPermission: 'TEST_MGMT#TEST_VIEW', + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW' + } + ] + }, +} + +export const WithConditionallyEnabledAdditionalActions = { + argTypes: { + deleteTableRow: { action: 'deleteTableRow' }, + editTableRow: { action: 'deleteTableRow' }, + viewTableRow: { action: 'deleteTableRow' }, + }, + render: Template, + args: { + ...defaultComponentArgs, + deleteTableRow: ($event: any) => console.log('Delete table row ', $event), + editTableRow: ($event: any) => console.log('Edit table row ', $event), + viewTableRow: ($event: any) => console.log('View table row ', $event), + deleteActionVisibleField: 'available', + editActionVisibleField: 'available', + deletePermission: 'TEST_MGMT#TEST_DELETE', + editPermission: 'TEST_MGMT#TEST_EDIT', + viewPermission: 'TEST_MGMT#TEST_VIEW', + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW', + actionEnabledField: 'available', + } + ] + }, +} + +export const WithConditionallyVisibleAdditionalActions = { + argTypes: { + deleteTableRow: { action: 'deleteTableRow' }, + editTableRow: { action: 'deleteTableRow' }, + viewTableRow: { action: 'deleteTableRow' }, + }, + render: Template, + args: { + ...defaultComponentArgs, + deleteTableRow: ($event: any) => console.log('Delete table row ', $event), + editTableRow: ($event: any) => console.log('Edit table row ', $event), + viewTableRow: ($event: any) => console.log('View table row ', $event), + deleteActionVisibleField: 'available', + editActionVisibleField: 'available', + deletePermission: 'TEST_MGMT#TEST_DELETE', + editPermission: 'TEST_MGMT#TEST_EDIT', + viewPermission: 'TEST_MGMT#TEST_VIEW', + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW', + actionVisibleField: 'available', + } + ] + }, +} + export default DataTableComponentSBConfig diff --git a/libs/angular-accelerator/src/lib/model/data-action.ts b/libs/angular-accelerator/src/lib/model/data-action.ts index 8c36260b..c5d1419f 100644 --- a/libs/angular-accelerator/src/lib/model/data-action.ts +++ b/libs/angular-accelerator/src/lib/model/data-action.ts @@ -5,5 +5,7 @@ export interface DataAction { permission: string classes?: string[] disabled?: boolean + actionVisibleField?: string + actionEnabledField?: string callback: (data: any) => void } From 9453e03185745d5914fd8dae7695274e50c60859 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi Date: Fri, 28 Jun 2024 10:31:03 +0200 Subject: [PATCH 2/2] feat: implement conditional additionalActions for data list grid --- .../data-list-grid.component.html | 24 +++-- .../data-list-grid.component.stories.ts | 102 ++++++++++++++++++ .../data-list-grid.component.ts | 3 +- 3 files changed, 117 insertions(+), 12 deletions(-) diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html index a6789c2c..2fc668f3 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html @@ -125,17 +125,19 @@ > - + + + diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts index b1293388..5b6182a6 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts @@ -104,6 +104,56 @@ export const ListWithConditionallyHiddenActionButtons = { }, } +export const ListWithAdditionalActions = { + argTypes: defaultArgTypes, + render: Template, + args: { + ...defaultComponentArgs, + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW' + } + ] + }, +} + +export const ListWithConditionallyEnabledAdditionalActions = { + argTypes: defaultArgTypes, + render: Template, + args: { + ...defaultComponentArgs, + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW', + actionEnabledField: 'available' + } + ] + }, +} + +export const ListWithConditionallyVisibleAdditionalActions = { + argTypes: defaultArgTypes, + render: Template, + args: { + ...defaultComponentArgs, + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW', + actionVisibleField: 'available' + } + ] + }, +} + export const GridWithMockData = { render: Template, argTypes: defaultArgTypes, @@ -145,4 +195,56 @@ export const GridWithConditionallyHiddenActionButtons = { }, } +export const GridWithAdditionalActions = { + argTypes: defaultArgTypes, + render: Template, + args: { + ...defaultComponentArgs, + layout: 'grid', + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW' + } + ] + }, +} + +export const GridWithConditionallyEnabledAdditionalActions = { + argTypes: defaultArgTypes, + render: Template, + args: { + ...defaultComponentArgs, + layout: 'grid', + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW', + actionEnabledField: 'available' + } + ] + }, +} + +export const GridWithConditionallyVisibleAdditionalActions = { + argTypes: defaultArgTypes, + render: Template, + args: { + ...defaultComponentArgs, + layout: 'grid', + additionalActions: [ + { + id: '1', + labelKey: 'Additional 1', + icon: 'pi pi-plus', + permission: 'TEST_MGMT#TEST_VIEW', + actionVisibleField: 'available' + } + ] + }, +} export default DataListGridComponentSBConfig diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts index 03a0420f..3a0a830f 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts @@ -319,7 +319,8 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe label: translations[a.labelKey || ''], icon: a.icon, styleClass: (a.classes || []).join(' '), - disabled: a.disabled, + disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(this.selectedItem, a.actionEnabledField)), + visible: !a.actionVisibleField || this.fieldIsTruthy(this.selectedItem, a.actionVisibleField), command: () => a.callback(this.selectedItem), })) )