mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[AAE-28655] Fix for datatable not scrolling back to the top on data change
This commit is contained in:
Alex Molodyh
parent
c92d34f2f8
commit
0b079beb3d
@ -152,277 +152,276 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
*ngIf="!loading && !noPermission"
|
||||||
class="adf-datatable-body"
|
class="adf-datatable-body"
|
||||||
[ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }"
|
[ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }"
|
||||||
cdkDropList
|
cdkDropList
|
||||||
[cdkDropListDisabled]="!enableDragRows"
|
[cdkDropListDisabled]="!enableDragRows"
|
||||||
role="rowgroup">
|
role="rowgroup">
|
||||||
<ng-container *ngIf="!loading && !noPermission">
|
<adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
|
||||||
<adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
|
cdkDrag
|
||||||
cdkDrag
|
[cdkDragDisabled]="!enableDragRows"
|
||||||
[cdkDragDisabled]="!enableDragRows"
|
(cdkDragDropped)="onDragDrop($event)"
|
||||||
(cdkDragDropped)="onDragDrop($event)"
|
(cdkDragStarted)="onDragStart()"
|
||||||
(cdkDragStarted)="onDragStart()"
|
(cdkDragEnded)="onDragEnd()"
|
||||||
(cdkDragEnded)="onDragEnd()"
|
[cdkDragBoundary]="'.adf-datatable-body'"
|
||||||
[cdkDragBoundary]="'.adf-datatable-body'"
|
[row]="row"
|
||||||
[row]="row"
|
(select)="onEnterKeyPressed(row, $event)"
|
||||||
(select)="onEnterKeyPressed(row, $event)"
|
(keyup)="onRowKeyUp(row, $event)"
|
||||||
(keyup)="onRowKeyUp(row, $event)"
|
(keydown)="onRowEnterKeyDown(row, $event)"
|
||||||
(keydown)="onRowEnterKeyDown(row, $event)"
|
[adf-upload]="rowAllowsDrop(row)"
|
||||||
[adf-upload]="rowAllowsDrop(row)"
|
[adf-upload-data]="row"
|
||||||
[adf-upload-data]="row"
|
[ngStyle]="rowStyle"
|
||||||
[ngStyle]="rowStyle"
|
[ngClass]="getRowStyle(row)"
|
||||||
[ngClass]="getRowStyle(row)"
|
[class.adf-datatable-row__dragging]="isDraggingRow"
|
||||||
[class.adf-datatable-row__dragging]="isDraggingRow"
|
[attr.data-automation-id]="'datatable-row-' + idx"
|
||||||
[attr.data-automation-id]="'datatable-row-' + idx"
|
(contextmenu)="markRowAsContextMenuSource(row)">
|
||||||
(contextmenu)="markRowAsContextMenuSource(row)">
|
<!-- Drag button -->
|
||||||
<!-- Drag button -->
|
<div *ngIf="enableDragRows"
|
||||||
<div *ngIf="enableDragRows"
|
role="gridcell"
|
||||||
role="gridcell"
|
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
|
||||||
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
|
<button mat-icon-button
|
||||||
<button mat-icon-button
|
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
|
||||||
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
|
<mat-icon>drag_indicator</mat-icon>
|
||||||
<mat-icon>drag_indicator</mat-icon>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Actions (left) -->
|
<!-- Actions (left) -->
|
||||||
<div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
|
<div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
|
||||||
|
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
|
||||||
|
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
|
||||||
|
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
|
||||||
|
[attr.id]="'action_menu_left_' + idx"
|
||||||
|
[attr.data-automation-id]="'action_menu_' + idx">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
<mat-menu #menu="matMenu">
|
||||||
|
<button mat-menu-item *ngFor="let action of getRowActions(row)"
|
||||||
|
[attr.data-automation-id]="action.title"
|
||||||
|
[disabled]="action.disabled"
|
||||||
|
(click)="onExecuteRowAction(row, action)">
|
||||||
|
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
|
||||||
|
<span>{{ action.title | translate }}</span>
|
||||||
|
</button>
|
||||||
|
</mat-menu>
|
||||||
|
</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">
|
||||||
|
<mat-checkbox
|
||||||
|
[id]="'select-file-' + idx"
|
||||||
|
[disabled]="!row?.isSelectable"
|
||||||
|
[class.adf-datatable-checkbox-selected]="row.isSelected"
|
||||||
|
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
|
||||||
|
[checked]="row.isSelected"
|
||||||
|
[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 }}
|
||||||
|
</mat-checkbox>
|
||||||
|
</label>
|
||||||
|
<div *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
|
||||||
|
role="gridcell"
|
||||||
|
class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
|
||||||
|
[attr.title]="col.title | translate"
|
||||||
|
[attr.data-automation-id]="getAutomationValue(row)"
|
||||||
|
[attr.aria-selected]="row.isSelected"
|
||||||
|
[attr.aria-label]="col.title ? (col.title | translate) : null"
|
||||||
|
(click)="onRowClick(row, $event)"
|
||||||
|
tabindex="0"
|
||||||
|
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
|
||||||
|
[adf-context-menu]="getContextMenuActions(row, col)"
|
||||||
|
[adf-context-menu-enabled]="contextMenu"
|
||||||
|
adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row"
|
||||||
|
[ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}">
|
||||||
|
<div *ngIf="!col.template" class="adf-datatable-cell-container">
|
||||||
|
<ng-container [ngSwitch]="data.getColumnType(row, col)">
|
||||||
|
<div *ngSwitchCase="'image'" class="adf-cell-value">
|
||||||
|
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
|
||||||
|
</mat-icon>
|
||||||
|
<ng-template #no_iconvalue>
|
||||||
|
<mat-icon class="adf-datatable-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' ?
|
||||||
|
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
|
||||||
|
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
|
||||||
|
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
|
||||||
|
}"
|
||||||
|
[attr.alt]="(data.getValue(row, col) | fileType) === 'disable' ?
|
||||||
|
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
|
||||||
|
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
|
||||||
|
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
|
||||||
|
}"
|
||||||
|
src="{{ data.getValue(row, col) }}"
|
||||||
|
(error)="onImageLoadingError($event, row)">
|
||||||
|
</ng-template>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'icon'" class="adf-cell-value">
|
||||||
|
<adf-icon-cell
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[row]="row"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[tooltip]="getCellTooltip(row, col)" />
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'date'" class="adf-cell-value adf-cell-date" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
||||||
|
[attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
|
||||||
|
<adf-date-cell class="adf-datatable-center-date-column-ie"
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[row]="row"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[tooltip]="getCellTooltip(row, col)"
|
||||||
|
[dateConfig]="col.dateConfig" />
|
||||||
|
</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)">
|
||||||
|
<adf-location-cell
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[row]="row"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[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)">
|
||||||
|
<adf-filesize-cell class="adf-datatable-center-size-column-ie"
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[row]="row"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[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)">
|
||||||
|
<adf-datatable-cell
|
||||||
|
[copyContent]="col.copyContent"
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[row]="row"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[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)">
|
||||||
|
<adf-boolean-cell
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[row]="row"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[tooltip]="getCellTooltip(row, col)" />
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'json'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value">
|
||||||
|
<adf-json-cell
|
||||||
|
[editable]="col.editable"
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[row]="row" />
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'amount'"
|
||||||
|
class="adf-cell-value"
|
||||||
|
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
||||||
|
[attr.data-automation-id]="'amount_' + data.getValue(row, col, resolverFn)">
|
||||||
|
<adf-amount-cell
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[row]="row"
|
||||||
|
[currencyConfig]="col.currencyConfig" />
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'number'"
|
||||||
|
class="adf-cell-value"
|
||||||
|
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
||||||
|
[attr.data-automation-id]="'number_' + data.getValue(row, col, resolverFn)">
|
||||||
|
<adf-number-cell
|
||||||
|
[data]="data"
|
||||||
|
[column]="col"
|
||||||
|
[resolverFn]="resolverFn"
|
||||||
|
[row]="row"
|
||||||
|
[decimalConfig]="col.decimalConfig" />
|
||||||
|
</div>
|
||||||
|
<span *ngSwitchDefault class="adf-cell-value">
|
||||||
|
<!-- empty cell for unknown column type -->
|
||||||
|
</span>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="col.template" class="adf-datatable-cell-container">
|
||||||
|
<div class="adf-cell-value" [attr.tabindex]="col.focus ? 0 : null">
|
||||||
|
<ng-container
|
||||||
|
[ngTemplateOutlet]="col.template"
|
||||||
|
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col, resolverFn) }" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row actions (right) -->
|
||||||
|
<div *ngIf="
|
||||||
|
(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">
|
||||||
|
|
||||||
|
<ng-container *ngIf="(actions && actionsPosition === 'right')">
|
||||||
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
|
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
|
||||||
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
|
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
|
||||||
|
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
|
||||||
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
|
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
|
||||||
[attr.id]="'action_menu_left_' + idx"
|
[attr.id]="'action_menu_right_' + idx"
|
||||||
[attr.data-automation-id]="'action_menu_' + idx">
|
[attr.data-automation-id]="'action_menu_' + idx"
|
||||||
|
(keydown.enter)="actionsMenuTrigger.openMenu()">
|
||||||
<mat-icon>more_vert</mat-icon>
|
<mat-icon>more_vert</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<mat-menu #menu="matMenu">
|
<mat-menu #menu="matMenu">
|
||||||
<button mat-menu-item *ngFor="let action of getRowActions(row)"
|
<button mat-menu-item *ngFor="let action of getRowActions(row)"
|
||||||
[attr.data-automation-id]="action.title"
|
[attr.data-automation-id]="action.title"
|
||||||
|
[attr.aria-label]="action.title | translate"
|
||||||
[disabled]="action.disabled"
|
[disabled]="action.disabled"
|
||||||
(click)="onExecuteRowAction(row, action)">
|
(click)="onExecuteRowAction(row, action)">
|
||||||
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
|
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
|
||||||
<span>{{ action.title | translate }}</span>
|
<span>{{ action.title | translate }}</span>
|
||||||
</button>
|
</button>
|
||||||
</mat-menu>
|
</mat-menu>
|
||||||
</div>
|
</ng-container>
|
||||||
|
|
||||||
<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"
|
|
||||||
[disabled]="!row?.isSelectable"
|
|
||||||
[class.adf-datatable-checkbox-selected]="row.isSelected"
|
|
||||||
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
|
|
||||||
[checked]="row.isSelected"
|
|
||||||
[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 }}
|
|
||||||
</mat-checkbox>
|
|
||||||
</label>
|
|
||||||
<div *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
|
|
||||||
role="gridcell"
|
|
||||||
class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
|
|
||||||
[attr.title]="col.title | translate"
|
|
||||||
[attr.data-automation-id]="getAutomationValue(row)"
|
|
||||||
[attr.aria-selected]="row.isSelected"
|
|
||||||
[attr.aria-label]="col.title ? (col.title | translate) : null"
|
|
||||||
(click)="onRowClick(row, $event)"
|
|
||||||
tabindex="0"
|
|
||||||
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
|
|
||||||
[adf-context-menu]="getContextMenuActions(row, col)"
|
|
||||||
[adf-context-menu-enabled]="contextMenu"
|
|
||||||
adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row"
|
|
||||||
[ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}">
|
|
||||||
<div *ngIf="!col.template" class="adf-datatable-cell-container">
|
|
||||||
<ng-container [ngSwitch]="data.getColumnType(row, col)">
|
|
||||||
<div *ngSwitchCase="'image'" class="adf-cell-value">
|
|
||||||
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
|
|
||||||
</mat-icon>
|
|
||||||
<ng-template #no_iconvalue>
|
|
||||||
<mat-icon class="adf-datatable-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' ?
|
|
||||||
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
|
|
||||||
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
|
|
||||||
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
|
|
||||||
}"
|
|
||||||
[attr.alt]="(data.getValue(row, col) | fileType) === 'disable' ?
|
|
||||||
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
|
|
||||||
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
|
|
||||||
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
|
|
||||||
}"
|
|
||||||
src="{{ data.getValue(row, col) }}"
|
|
||||||
(error)="onImageLoadingError($event, row)">
|
|
||||||
</ng-template>
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
<div *ngSwitchCase="'icon'" class="adf-cell-value">
|
|
||||||
<adf-icon-cell
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[row]="row"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[tooltip]="getCellTooltip(row, col)" />
|
|
||||||
</div>
|
|
||||||
<div *ngSwitchCase="'date'" class="adf-cell-value adf-cell-date" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
|
||||||
[attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
|
|
||||||
<adf-date-cell class="adf-datatable-center-date-column-ie"
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[row]="row"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[tooltip]="getCellTooltip(row, col)"
|
|
||||||
[dateConfig]="col.dateConfig" />
|
|
||||||
</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)">
|
|
||||||
<adf-location-cell
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[row]="row"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[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)">
|
|
||||||
<adf-filesize-cell class="adf-datatable-center-size-column-ie"
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[row]="row"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[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)">
|
|
||||||
<adf-datatable-cell
|
|
||||||
[copyContent]="col.copyContent"
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[row]="row"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[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)">
|
|
||||||
<adf-boolean-cell
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[row]="row"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[tooltip]="getCellTooltip(row, col)" />
|
|
||||||
</div>
|
|
||||||
<div *ngSwitchCase="'json'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value">
|
|
||||||
<adf-json-cell
|
|
||||||
[editable]="col.editable"
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[row]="row" />
|
|
||||||
</div>
|
|
||||||
<div *ngSwitchCase="'amount'"
|
|
||||||
class="adf-cell-value"
|
|
||||||
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
|
||||||
[attr.data-automation-id]="'amount_' + data.getValue(row, col, resolverFn)">
|
|
||||||
<adf-amount-cell
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[row]="row"
|
|
||||||
[currencyConfig]="col.currencyConfig" />
|
|
||||||
</div>
|
|
||||||
<div *ngSwitchCase="'number'"
|
|
||||||
class="adf-cell-value"
|
|
||||||
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
|
|
||||||
[attr.data-automation-id]="'number_' + data.getValue(row, col, resolverFn)">
|
|
||||||
<adf-number-cell
|
|
||||||
[data]="data"
|
|
||||||
[column]="col"
|
|
||||||
[resolverFn]="resolverFn"
|
|
||||||
[row]="row"
|
|
||||||
[decimalConfig]="col.decimalConfig" />
|
|
||||||
</div>
|
|
||||||
<span *ngSwitchDefault class="adf-cell-value">
|
|
||||||
<!-- empty cell for unknown column type -->
|
|
||||||
</span>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="col.template" class="adf-datatable-cell-container">
|
|
||||||
<div class="adf-cell-value" [attr.tabindex]="col.focus ? 0 : null">
|
|
||||||
<ng-container
|
|
||||||
[ngTemplateOutlet]="col.template"
|
|
||||||
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col, resolverFn) }" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Row actions (right) -->
|
|
||||||
<div *ngIf="
|
|
||||||
(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">
|
|
||||||
|
|
||||||
<ng-container *ngIf="(actions && actionsPosition === 'right')">
|
|
||||||
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
|
|
||||||
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
|
|
||||||
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
|
|
||||||
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
|
|
||||||
[attr.id]="'action_menu_right_' + idx"
|
|
||||||
[attr.data-automation-id]="'action_menu_' + idx"
|
|
||||||
(keydown.enter)="actionsMenuTrigger.openMenu()">
|
|
||||||
<mat-icon>more_vert</mat-icon>
|
|
||||||
</button>
|
|
||||||
<mat-menu #menu="matMenu">
|
|
||||||
<button mat-menu-item *ngFor="let action of getRowActions(row)"
|
|
||||||
[attr.data-automation-id]="action.title"
|
|
||||||
[attr.aria-label]="action.title | translate"
|
|
||||||
[disabled]="action.disabled"
|
|
||||||
(click)="onExecuteRowAction(row, action)">
|
|
||||||
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
|
|
||||||
<span>{{ action.title | translate }}</span>
|
|
||||||
</button>
|
|
||||||
</mat-menu>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
</adf-datatable-row>
|
|
||||||
<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">
|
|
||||||
</ng-template>
|
|
||||||
<ng-content select="adf-empty-list"></ng-content>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</adf-datatable-row>
|
||||||
<div *ngIf="!loading && noPermission"
|
<div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
|
||||||
role="row"
|
<div class="adf-no-content-container adf-datatable-cell" role="gridcell">
|
||||||
class="adf-datatable-row adf-no-permission__row">
|
<ng-template *ngIf="noContentTemplate"
|
||||||
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
|
ngFor [ngForOf]="[data]"
|
||||||
<ng-template *ngIf="noPermissionTemplate"
|
[ngForTemplate]="noContentTemplate">
|
||||||
ngFor [ngForOf]="[data]"
|
|
||||||
[ngForTemplate]="noPermissionTemplate">
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="loading" class="adf-datatable-row">
|
|
||||||
<div class="adf-no-content-container adf-datatable-cell">
|
|
||||||
<ng-template *ngIf="loadingTemplate"
|
|
||||||
ngFor [ngForOf]="[data]"
|
|
||||||
[ngForTemplate]="loadingTemplate">
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
<ng-content select="adf-empty-list"></ng-content>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="loading" class="adf-datatable-row">
|
||||||
|
<div class="adf-no-content-container adf-datatable-cell">
|
||||||
|
<ng-template *ngIf="loadingTemplate"
|
||||||
|
ngFor [ngForOf]="[data]"
|
||||||
|
[ngForTemplate]="loadingTemplate">
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user