Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: conditionally hide/disable additional actions #297

Merged
merged 2 commits into from
Jun 28, 2024
Merged

feat: conditionally hide/disable additional actions #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b53ca2a
feat: implement conditional additionalActions for data table
Jun 27, 2024
9453e03
feat: implement conditional additionalActions for data list grid
bastianjakobi Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,17 +125,19 @@
></button>
</ng-container>
<ng-container *ngFor="let action of additionalActions">
<button
*ocxIfPermission="action.permission"
pButton
class="p-button-rounded p-button-text"
[ngClass]="action.classes"
[icon]="action.icon || ''"
(click)="action.callback(item)"
[title]="action.labelKey ? (action.labelKey | translate) : ''"
[attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
[disabled]="action.disabled"
></button>
<ng-container *ngIf="(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))">
<button
*ocxIfPermission="action.permission"
pButton
class="p-button-rounded p-button-text"
[ngClass]="action.classes"
[icon]="action.icon || ''"
(click)="action.callback(item)"
[title]="action.labelKey ? (action.labelKey | translate) : ''"
[attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
[disabled]="action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))"
></button>
</ng-container>
</ng-container>
</div>
</div>
Expand Down
102 changes: 102 additions & 0 deletions ...angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
3 changes: 2 additions & 1 deletion libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
}))
)
Expand Down
4 changes: 3 additions & 1 deletion libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
></button>
</ng-container>
<ng-container *ngFor="let action of additionalActions">
<ng-container *ngIf="(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))">
<button
*ocxIfPermission="action.permission"
pButton
Expand All @@ -58,9 +59,10 @@
(click)="action.callback(rowObject)"
[title]="action.labelKey ? (action.labelKey | translate) : ''"
[attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
[disabled]="action.disabled"
[disabled]="action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))"
></button>
</ng-container>
</ng-container>
</div>
</td>
</ng-container>
Expand Down
86 changes: 86 additions & 0 deletions libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 2 additions & 0 deletions libs/angular-accelerator/src/lib/model/data-action.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,7 @@ export interface DataAction {
permission: string
classes?: string[]
disabled?: boolean
actionVisibleField?: string
actionEnabledField?: string
callback: (data: any) => void
}
Loading