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: action buttons have ids #616

Merged
merged 2 commits into from
Nov 22, 2024
Merged

feat: action buttons have ids #616

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
fc6e12d
feat: action buttons have ids based on thier row object
markuczy Nov 22, 2024
caff0ba
fix: fix lint
markuczy Nov 22, 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
5 changes: 5 additions & 0 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 @@ -102,6 +102,7 @@
*ngIf="viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))"
>
<button
id="{{resolveFieldData(item, 'id')}}-viewButton"
type="button"
icon="pi pi-eye"
pButton
Expand All @@ -119,6 +120,7 @@
*ngIf="editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))"
>
<button
id="{{resolveFieldData(item, 'id')}}-editButton"
type="button"
class="p-button-rounded p-button-text mb-1 mr-2 editListItemButton"
icon="pi pi-pencil"
Expand All @@ -136,6 +138,7 @@
*ngIf="deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))"
>
<button
id="{{resolveFieldData(item, 'id')}}-deleteButton"
type="button"
icon="pi pi-trash"
class="p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton"
Expand All @@ -152,6 +155,7 @@
<ng-container *ngFor="let action of inlineListActions$ | async">
<ng-container *ngIf="(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))">
<button
id="{{resolveFieldData(item, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}"
*ocxIfPermission="action.permission"
pButton
class="p-button-rounded p-button-text"
Expand All @@ -162,6 +166,7 @@
tooltipPosition="top"
[attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
[disabled]="action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))"
[attr.name]="'data-list-action-button'"
></button>
</ng-container>
</ng-container>
Expand Down
90 changes: 88 additions & 2 deletions libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ describe('DataListGridComponent', () => {
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'cf9e7d6b-5362-46af-91f8-62f7ef5c6064',
id: '734e21ba-14d7-4565-ba0d-ddd25f807931',
name: 'name 2',
description: '',
status: 'status name 2',
Expand All @@ -123,7 +123,7 @@ describe('DataListGridComponent', () => {
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'cf9e7d6b-5362-46af-91f8-62f7ef5c6064',
id: '02220a5a-b556-4d7a-ac6e-6416911a00f2',
name: 'name 3',
description: '',
status: 'status name 3',
Expand Down Expand Up @@ -485,6 +485,92 @@ describe('DataListGridComponent', () => {
expect(listActions.length).toBe(3)
})
})
describe('Assign ids to list action buttons', () => {
beforeEach(() => {
component.layout = 'list'

component.data = [
{
version: 0,
creationDate: '2023-09-12T09:34:27.184086Z',
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'rowId',
name: 'name 3',
description: '',
status: 'status name 3',
responsible: '',
endDate: '2023-09-15T09:34:24Z',
startDate: '2023-09-14T09:34:22Z',
imagePath: '',
testNumber: '7.1',
ready: false,
},
]
})

it('should assign id to view button', async () => {
component.viewItem.subscribe(() => console.log())
component.viewPermission = 'VIEW'
fixture.detectChanges()
await fixture.whenStable()

expect(component.viewItemObserved).toBe(true)

const tableActions = await listGrid.getActionButtons('list')
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-viewButton')
})

it('should assign id to edit button', async () => {
component.editItem.subscribe(() => console.log())
component.editPermission = 'EDIT'
fixture.detectChanges()
await fixture.whenStable()
expect(component.editItemObserved).toBe(true)

const tableActions = await listGrid.getActionButtons('list')
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-editButton')
})

it('should assign id to delete button', async () => {
component.deleteItem.subscribe(() => console.log())
component.deletePermission = 'DELETE'
fixture.detectChanges()
await fixture.whenStable()
expect(component.deleteItemObserved).toBe(true)

const tableActions = await listGrid.getActionButtons('list')
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-deleteButton')
})

it('should assign id to additional action button', async () => {
component.additionalActions = [
{
permission: 'VIEW',
callback: () => {
console.log('custom action clicked')
},
id: 'actionId',
},
]

fixture.detectChanges()
await fixture.whenStable()

const tableActions = await listGrid.getActionButtons('list')
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-actionIdActionButton')
})
})

const setUpGridActionButtonMockData = async () => {
component.columns = [
...mockColumns,
Expand Down
5 changes: 5 additions & 0 deletions 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 @@ -15,6 +15,7 @@
*ngIf="viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))"
>
<button
id="{{resolveFieldData(rowObject, 'id')}}-viewButton"
*ocxIfPermission="viewPermission"
[disabled]="!!viewActionEnabledField && !fieldIsTruthy(rowObject, viewActionEnabledField)"
pButton
Expand All @@ -30,6 +31,7 @@
*ngIf="editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))"
>
<button
id="{{resolveFieldData(rowObject, 'id')}}-editButton"
*ocxIfPermission="editPermission"
[disabled]="!!editActionEnabledField && !fieldIsTruthy(rowObject, editActionEnabledField)"
pButton
Expand All @@ -45,6 +47,7 @@
*ngIf="deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))"
>
<button
id="{{resolveFieldData(rowObject, 'id')}}-deleteButton"
*ocxIfPermission="deletePermission"
[disabled]="!!deleteActionEnabledField && !fieldIsTruthy(rowObject, deleteActionEnabledField)"
pButton
Expand All @@ -59,6 +62,7 @@
<ng-container *ngFor="let action of inlineActions$ | async">
<ng-container *ngIf="(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))">
<button
id="{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}"
*ocxIfPermission="action.permission"
pButton
class="p-button-rounded p-button-text"
Expand All @@ -68,6 +72,7 @@
[title]="action.labelKey ? (action.labelKey | translate) : ''"
[attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
[disabled]="action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))"
[attr.name]="'data-table-action-button'"
></button>
</ng-container>
</ng-container>
Expand Down
80 changes: 77 additions & 3 deletions libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ describe('DataTableComponent', () => {
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'cf9e7d6b-5362-46af-91f8-62f7ef5c6064',
id: '734e21ba-14d7-4565-ba0d-ddd25f807931',
name: 'name 2',
description: '',
status: 'status name 2',
Expand All @@ -115,7 +115,7 @@ describe('DataTableComponent', () => {
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'cf9e7d6b-5362-46af-91f8-62f7ef5c6064',
id: '02220a5a-b556-4d7a-ac6e-6416911a00f2',
name: 'name 3',
description: '',
status: 'status name 3',
Expand Down Expand Up @@ -454,7 +454,7 @@ describe('DataTableComponent', () => {
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'cf9e7d6b-5362-46af-91f8-62f7ef5c6064',
id: 'bd7962b8-4887-420e-bb27-36978ebf10ab',
name: 'name 3',
description: '',
status: 'status name 3',
Expand Down Expand Up @@ -596,4 +596,78 @@ describe('DataTableComponent', () => {
expect(expectedIcons.length).toBe(0)
})
})

describe('Assign ids to action buttons', () => {
beforeEach(() => {
component.rows = [
{
version: 0,
creationDate: '2023-09-12T09:34:27.184086Z',
creationUser: '',
modificationDate: '2023-09-12T09:34:27.184086Z',
modificationUser: '',
id: 'rowId',
name: 'name 3',
description: '',
status: 'status name 3',
responsible: '',
endDate: '2023-09-15T09:34:24Z',
startDate: '2023-09-14T09:34:22Z',
imagePath: '',
testNumber: '7.1',
ready: false,
},
]
})

it('should assign id to view button', async () => {
component.viewTableRow.subscribe(() => console.log())
component.viewPermission = 'VIEW'
expect(component.viewTableRowObserved).toBe(true)

const tableActions = await dataTable.getActionButtons()
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-viewButton')
})

it('should assign id to edit button', async () => {
component.editTableRow.subscribe(() => console.log())
component.editPermission = 'EDIT'
expect(component.editTableRowObserved).toBe(true)

const tableActions = await dataTable.getActionButtons()
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-editButton')
})

it('should assign id to delete button', async () => {
component.deleteTableRow.subscribe(() => console.log())
component.deletePermission = 'DELETE'
expect(component.deleteTableRowObserved).toBe(true)

const tableActions = await dataTable.getActionButtons()
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-deleteButton')
})

it('should assign id to additional action button', async () => {
component.additionalActions = [
{
permission: 'VIEW',
callback: () => {
console.log('custom action clicked')
},
id: 'actionId',
},
]

const tableActions = await dataTable.getActionButtons()
expect(tableActions.length).toBe(1)

expect(await tableActions[0].getAttribute('id')).toEqual('rowId-actionIdActionButton')
})
})
})
Loading