inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-8247] Fixed empty context menu for DataTable row (#9999)

Browse Source 
* [ACS-8247] fixed empty context menu of datatable row

* [ACS-8247] replace selector on attribute
This commit is contained in:
Mykyta Maliarchuk 2024-08-06 09:42:16 +02:00 committed by GitHub
parent cc6e679f76
commit c9b8059b47
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@ -182,7 +182,12 @@
</mat-menu>
</div>
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single">
<label *ngIf="multiselect"
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
(click)="onCheckboxLabelClick(row, $event)"
[for]="'select-file-' + idx"
class="adf-datatable-cell adf-datatable-checkbox adf-datatable-checkbox-single"
tabindex="0">
<mat-checkbox
[id]="'select-file-' + idx"
[class.adf-datatable-checkbox-selected]="row.isSelected"
@ -191,6 +196,7 @@
[attr.aria-checked]="row.isSelected"
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
role="checkbox"
data-adf-datatable-row-checkbox
(change)="onCheckboxChange(row, $event)"
class="adf-checkbox-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}

4
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@ -151,6 +151,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
&:last-child {
border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
}
label {
cursor: inherit;
}
}
}

42
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@ -923,6 +923,48 @@ describe('DataTable', () => {
expect(rows[1].isSelected).toBe(true);
});
it('should call onRowClick when checkbox label clicked and target is not checkbox', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }, { name: '2' }],
[new ObjectDataColumn({ key: 'name', sortable: false }), new ObjectDataColumn({ key: 'other', sortable: false })]
);
const rows = dataTable.data.getRows();
const event = new MouseEvent('click');
Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => null} });
spyOn(dataTable, 'onRowClick');
dataTable.onCheckboxLabelClick(rows[0], event);
expect(dataTable.onRowClick).toHaveBeenCalledWith(rows[0], event);
});
it('should not call onRowClick when checkbox label clicked and target is checkbox', () => {
const data = new ObjectDataTableAdapter([{}, {}], []);
const rows = data.getRows();
const event = new MouseEvent('click');
Object.defineProperty(event, 'target', {
value: {
getAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox' ? 'data-adf-datatable-row-checkbox' : null,
hasAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox',
closest: () => null
}
});
spyOn(dataTable, 'onRowClick');
dataTable.onCheckboxLabelClick(rows[0], event);
expect(dataTable.onRowClick).not.toHaveBeenCalled();
});
it('should not call onRowClick when checkbox label clicked and target is inside checkbox', () => {
const data = new ObjectDataTableAdapter([{}, {}], []);
const rows = data.getRows();
const event = new MouseEvent('click');
Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => 'element'} });
spyOn(dataTable, 'onRowClick');
dataTable.onCheckboxLabelClick(rows[0], event);
expect(dataTable.onRowClick).not.toHaveBeenCalled();
});
it('should require multiselect option to toggle row state', () => {
const data = new ObjectDataTableAdapter([{}, {}, {}], []);
const rows = data.getRows();

7
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@ -712,6 +712,13 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
}
onCheckboxLabelClick(row: DataRow, event: MouseEvent) {
const target = event.target as HTMLElement;
if (!(target.hasAttribute('data-adf-datatable-row-checkbox') || target.closest('[data-adf-datatable-row-checkbox]'))) {
this.onRowClick(row, event);
}
}
onCheckboxChange(row: DataRow, event: MatCheckboxChange) {
const newValue = event.checked;