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

AAE-28655 Fix for datatable not scrolling back up after paginations ()

Browse Source 
* AAE-28655 Fix for datatable not scrolling back up after paginations
This commit is contained in:
Alex Molodyh 2025-02-06 13:04:37 -08:00 committed by GitHub
parent e5281e7ff0
commit 265c8e8a56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 73 additions and 29 deletions
lib/core/src/lib/datatable/components/datatable
datatable.component.htmldatatable.component.spec.ts

64
lib/core/src/lib/datatable/components/datatable/datatable.component.html

@ -174,12 +174,13 @@
</div>
<div
*ngIf="!loading; else loadingRowTemplate"
class="adf-datatable-body"
[ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }"
cdkDropList
[cdkDropListDisabled]="!enableDragRows"
role="rowgroup">
<ng-container *ngIf="!loading && !noPermission">
<ng-container *ngIf="!noPermission; else noPermissionsRowTemplate">
<adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
cdkDrag
[cdkDragDisabled]="!enableDragRows"
@ -200,8 +201,8 @@
(contextmenu)="markRowAsContextMenuSource(row)">
<!-- Drag button -->
<div *ngIf="enableDragRows"
role="gridcell"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
role="gridcell"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
<button mat-icon-button
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
<mat-icon>drag_indicator</mat-icon>
@ -229,11 +230,11 @@
</div>
<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">
(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"
[disabled]="!row?.isSelectable"
@ -273,7 +274,7 @@
</mat-icon>
<ng-template #no_iconvalue>
<mat-icon class="adf-datatable-selected"
*ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected" />
*ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected" />
<ng-template #no_selected_row>
<img class="adf-datatable-center-img-ie"
[attr.aria-label]="(data.getValue(row, col) | fileType) === 'disable' ?
@ -317,7 +318,7 @@
</div>
<div *ngSwitchCase="'location'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'location' + data.getValue(row, col, resolverFn)">
[attr.data-automation-id]="'location' + data.getValue(row, col, resolverFn)">
<adf-location-cell
[data]="data"
[column]="col"
@ -326,7 +327,7 @@
[tooltip]="getCellTooltip(row, col)" />
</div>
<div *ngSwitchCase="'fileSize'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col, resolverFn)">
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col, resolverFn)">
<adf-filesize-cell class="adf-datatable-center-size-column-ie"
[data]="data"
[column]="col"
@ -335,7 +336,7 @@
[tooltip]="getCellTooltip(row, col)" />
</div>
<div *ngSwitchCase="'text'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'text_' + data.getValue(row, col, resolverFn)">
[attr.data-automation-id]="'text_' + data.getValue(row, col, resolverFn)">
<adf-datatable-cell
[copyContent]="col.copyContent"
[data]="data"
@ -345,7 +346,7 @@
[tooltip]="getCellTooltip(row, col)" />
</div>
<div *ngSwitchCase="'boolean'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'boolean_' + data.getValue(row, col, resolverFn)">
[attr.data-automation-id]="'boolean_' + data.getValue(row, col, resolverFn)">
<adf-boolean-cell
[data]="data"
[column]="col"
@ -402,9 +403,9 @@
!showProvidedActions &&
((actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions))"
role="gridcell"
tabindex="0"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
role="gridcell"
tabindex="0"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
<ng-container *ngIf="(actions && actionsPosition === 'right')">
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
@ -432,24 +433,29 @@
<div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
<div class="adf-no-content-container adf-datatable-cell" role="gridcell">
<ng-template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noContentTemplate">
ngFor [ngForOf]="[data]"
[ngForTemplate]="noContentTemplate">
</ng-template>
<ng-content select="adf-empty-list"></ng-content>
</div>
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
role="row"
class="adf-datatable-row adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noPermissionTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noPermissionTemplate">
</ng-template>
<ng-template #noPermissionsRowTemplate>
<div
role="row"
class="adf-datatable-row adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noPermissionTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noPermissionTemplate">
</ng-template>
</div>
</div>
</div>
<div *ngIf="loading" class="adf-datatable-row">
</ng-template>
</div>
<ng-template #loadingRowTemplate>
<div class="adf-datatable-row">
<div class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]"
@ -457,5 +463,5 @@
</ng-template>
</div>
</div>
</div>
</ng-template>
</div>

38
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@ -1468,6 +1468,44 @@ describe('DataTable', () => {
expect(await testingUtils.checkIfMatCheckboxesHaveClass('adf-datatable-hover-only')).toBeTrue();
});
});
it('should scroll back to the top when new data is set', async () => {
const columnDefinitions = [
{
type: 'text',
key: 'id',
title: ''
},
{
type: 'text',
key: 'name',
title: 'Name'
}
] as DataColumn[];
const initialRows = Array.from({ length: 20 }, (_, i) => ({ id: `${i + 1}`, name: `Row ${i + 1}` }));
const nextRows = Array.from({ length: 20 }, (_, i) => ({ id: `${i + 21}`, name: `Row ${i + 21}` }));
// Load first 20 records
dataTable.data = new ObjectDataTableAdapter(initialRows, columnDefinitions);
fixture.detectChanges();
// Check that scroll body height > 0
const scrollBody = fixture.nativeElement.querySelector('.adf-datatable-body');
expect(scrollBody.scrollHeight).toBeGreaterThan(0);
// Scroll to bottom
scrollBody.scrollTop = scrollBody.scrollHeight;
scrollBody.dispatchEvent(new Event('scroll'));
fixture.detectChanges();
// Set new records
dataTable.data = new ObjectDataTableAdapter(nextRows, columnDefinitions);
fixture.detectChanges();
// Verify new records are loaded and first record is at top
expect(scrollBody.scrollTop).toBe(0);
expect(testingUtils.getInnerTextByDataAutomationId('text_Row 21')).toContain('Row 21');
});
});
describe('Accesibility', () => {