mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4498] Disable Sticky header on Datatable if header is not visible (#4701)
* [ADF-4498] Disable Sticky header on Datatable if header is not visible * [ADF-4498] Improve flag check
This commit is contained in:
committed by
Eugenio Romano
parent
898e3b5a80
commit
fc9f04c6c6
@@ -3,7 +3,7 @@
|
||||
*ngIf="data" class="adf-full-width"
|
||||
[class.adf-datatable-card]="display === 'gallery'"
|
||||
[class.adf-datatable-list]="display === 'list'"
|
||||
[class.adf-sticky-header]="stickyHeader"
|
||||
[class.adf-sticky-header]="isStickyHeaderEnabled()"
|
||||
[class.adf-datatable--empty]="!isHeaderVisible()">
|
||||
<div *ngIf="showHeader && isHeaderVisible()" class="adf-datatable-header" role="rowgroup">
|
||||
<div class="adf-datatable-row" *ngIf="display === 'list'" role="row">
|
||||
|
@@ -978,6 +978,73 @@ describe('DataTable', () => {
|
||||
|
||||
expect(emitted).toBe(2);
|
||||
});
|
||||
|
||||
it('should enable sticky header if the stickyHeader is set to true and header is visible', () => {
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' },
|
||||
{ name: '3' },
|
||||
{ name: '4' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
|
||||
);
|
||||
|
||||
dataTable.stickyHeader = true;
|
||||
dataTable.loading = false;
|
||||
dataTable.noPermission = false;
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('.adf-sticky-header')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should disable sticky header if component is loading', () => {
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' },
|
||||
{ name: '3' },
|
||||
{ name: '4' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
|
||||
);
|
||||
|
||||
dataTable.stickyHeader = true;
|
||||
dataTable.loading = true;
|
||||
dataTable.noPermission = false;
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('.adf-sticky-header')).toBeNull();
|
||||
});
|
||||
|
||||
it('should disable sticky header if user has no permissions', () => {
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' },
|
||||
{ name: '3' },
|
||||
{ name: '4' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
|
||||
);
|
||||
|
||||
dataTable.stickyHeader = true;
|
||||
dataTable.loading = false;
|
||||
dataTable.noPermission = true;
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('.adf-sticky-header')).toBeNull();
|
||||
});
|
||||
|
||||
it('should disable sticky header if user has no content', () => {
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
[],
|
||||
[new ObjectDataColumn({ key: 'name', title: 'Name' })]
|
||||
);
|
||||
|
||||
dataTable.stickyHeader = true;
|
||||
dataTable.loading = false;
|
||||
dataTable.noPermission = false;
|
||||
fixture.detectChanges();
|
||||
expect(element.querySelector('.adf-sticky-header')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accesibility', () => {
|
||||
|
@@ -645,6 +645,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
||||
return !this.loading && !this.isEmpty() && !this.noPermission;
|
||||
}
|
||||
|
||||
isStickyHeaderEnabled() {
|
||||
return this.stickyHeader && this.isHeaderVisible();
|
||||
}
|
||||
|
||||
private emitRowSelectionEvent(name: string, row: DataRow) {
|
||||
const domEvent = new CustomEvent(name, {
|
||||
detail: {
|
||||
|
Reference in New Issue
Block a user