mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ADF-2322] Card view datatable and documentlist (#2968)
* move table in style * Enable the cardview mode * add button in demo shell to change view add missing translation terms toolbar * missing comma * add example in demo shell * style loading and images * border card container * document list tests * test check class and input * test fix * fix test process services * more documentation * rirpristinate base pacakge integgration * remove test color
This commit is contained in:
Eugenio Romano
@@ -1,187 +1,212 @@
|
||||
<table
|
||||
*ngIf="data"
|
||||
class="full-width adf-data-table">
|
||||
|
||||
<thead *ngIf="showHeader">
|
||||
<tr>
|
||||
<!-- Actions (left) -->
|
||||
<th *ngIf="actions && actionsPosition === 'left'" class="actions-column">
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
<!-- Columns -->
|
||||
<th *ngIf="multiselect">
|
||||
<mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></mat-checkbox>
|
||||
</th>
|
||||
<th class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
|
||||
*ngFor="let col of data.getColumns()"
|
||||
[class.sortable]="col.sortable"
|
||||
[attr.data-automation-id]="'auto_id_' + col.key"
|
||||
[class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
|
||||
[class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
|
||||
(click)="onColumnHeaderClick(col)"
|
||||
(keyup.enter)="onColumnHeaderClick(col)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="{{ col.title | translate }}">
|
||||
<span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
|
||||
<span *ngIf="col.title">{{ col.title | translate}}</span>
|
||||
</th>
|
||||
<!-- Actions (right) -->
|
||||
<th *ngIf="actions && actionsPosition === 'right'" class="actions-column">
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<ng-container *ngIf="!loading && !noPermission">
|
||||
<tr *ngFor="let row of data.getRows(); let idx = index"
|
||||
role="button"
|
||||
[class.is-selected]="row.isSelected"
|
||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
|
||||
[ngStyle]="rowStyle"
|
||||
[ngClass]="getRowStyle(row)"
|
||||
(keyup)="onRowKeyUp(row, $event)">
|
||||
|
||||
<div
|
||||
*ngIf="data" class="full-width adf-data-table-card"
|
||||
[class.adf-data-table-card]="cardview"
|
||||
[class.adf-data-table]="!cardview">
|
||||
<div *ngIf="showHeader && !loading" class="adf-datatable-header">
|
||||
<div class="adf-datatable-row" *ngIf="!cardview">
|
||||
<!-- Actions (left) -->
|
||||
<td *ngIf="actions && actionsPosition === 'left'">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"
|
||||
[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>
|
||||
<div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
|
||||
<span class="sr-only">Actions</span>
|
||||
</div>
|
||||
<!-- Columns -->
|
||||
<div *ngIf="multiselect" class="adf-datatable-table-cell-header">
|
||||
<mat-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></mat-checkbox>
|
||||
</div>
|
||||
<div class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-table-cell-header"
|
||||
*ngFor="let col of data.getColumns()"
|
||||
[class.sortable]="col.sortable"
|
||||
[attr.data-automation-id]="'auto_id_' + col.key"
|
||||
[class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
|
||||
[class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
|
||||
(click)="onColumnHeaderClick(col)"
|
||||
(keyup.enter)="onColumnHeaderClick(col)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="{{ col.title | translate }}">
|
||||
<span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
|
||||
<span *ngIf="col.title">{{ col.title | translate}}</span>
|
||||
</div>
|
||||
<!-- Actions (right) -->
|
||||
<div *ngIf="actions && actionsPosition === 'right'" class="actions-column adf-datatable-table-cell-header">
|
||||
<span class="sr-only">Actions</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-form-field *ngIf="cardview">
|
||||
<mat-select [value]="getSortingKey()">
|
||||
<mat-option *ngFor="let col of data.getColumns()"
|
||||
[value]="col.key"
|
||||
(click)="onColumnHeaderClick(col)"
|
||||
(keyup.enter)="onColumnHeaderClick(col)">
|
||||
{{ col.title | translate}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="adf-datatable-body">
|
||||
<ng-container *ngIf="!loading && !noPermission">
|
||||
<div *ngFor="let row of data.getRows(); let idx = index"
|
||||
class="adf-datatable-row"
|
||||
role="button"
|
||||
[class.is-selected]="row.isSelected"
|
||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
|
||||
[ngStyle]="rowStyle"
|
||||
[ngClass]="getRowStyle(row)"
|
||||
(keyup)="onRowKeyUp(row, $event)">
|
||||
|
||||
<!-- Actions (left) -->
|
||||
<div *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-table-cell">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"
|
||||
[attr.id]="'action_menu_left_' + idx"
|
||||
[attr.data-automation-id]="'action_menu_' + idx">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
<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>
|
||||
|
||||
<td *ngIf="multiselect">
|
||||
<mat-checkbox
|
||||
[checked]="row.isSelected"
|
||||
(change)="onCheckboxChange(row, $event)">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
<td *ngFor="let col of data.getColumns()"
|
||||
class="adf-data-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
|
||||
tabindex="0"
|
||||
(click)="onRowClick(row, $event)"
|
||||
[context-menu]="getContextMenuActions(row, col)"
|
||||
[context-menu-enabled]="contextMenu">
|
||||
<div *ngIf="!col.template" class="cell-container">
|
||||
<ng-container [ngSwitch]="col.type">
|
||||
<div *ngSwitchCase="'image'" class="cell-value">
|
||||
<mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
|
||||
<mat-icon *ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected" >
|
||||
</mat-icon>
|
||||
<div *ngIf="multiselect" class="adf-datatable-table-cell adf-datatable-table-checkbox">
|
||||
<mat-checkbox
|
||||
[checked]="row.isSelected"
|
||||
(change)="onCheckboxChange(row, $event)">
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div *ngFor="let col of data.getColumns()"
|
||||
class="adf-data-table-cell adf-datatable-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
|
||||
[attr.title]="col.title | translate"
|
||||
[attr.filename]="getFilename(row)"
|
||||
tabindex="0"
|
||||
(click)="onRowClick(row, $event)"
|
||||
[context-menu]="getContextMenuActions(row, col)"
|
||||
[context-menu-enabled]="contextMenu">
|
||||
<div *ngIf="!col.template" class="cell-container">
|
||||
<ng-container [ngSwitch]="col.type">
|
||||
<div *ngSwitchCase="'image'" class="cell-value">
|
||||
<mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
|
||||
<mat-icon class="adf-datatable-selected"
|
||||
*ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected">
|
||||
</mat-icon>
|
||||
|
||||
<img *ngIf="!isIconValue(row, col) && !row.isSelected"
|
||||
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
|
||||
src="{{ data.getValue(row, col) }}"
|
||||
(error)="onImageLoadingError($event)">
|
||||
</div>
|
||||
<div *ngSwitchCase="'icon'" class="cell-value">
|
||||
<span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
|
||||
<mat-icon>{{ data.getValue(row, col) }}</mat-icon>
|
||||
</div>
|
||||
<div *ngSwitchCase="'date'" class="cell-value"
|
||||
[attr.data-automation-id]="'date_' + data.getValue(row, col)">
|
||||
<adf-date-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-date-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'location'" class="cell-value"
|
||||
[attr.data-automation-id]="'location' + data.getValue(row, col)">
|
||||
<adf-location-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-location-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'fileSize'" class="cell-value"
|
||||
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
|
||||
<adf-filesize-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-filesize-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'text'" class="cell-value"
|
||||
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
|
||||
<adf-datatable-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-datatable-cell>
|
||||
</div>
|
||||
<span *ngSwitchDefault class="cell-value">
|
||||
<img *ngIf="!isIconValue(row, col) && !row.isSelected"
|
||||
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
|
||||
src="{{ data.getValue(row, col) }}"
|
||||
(error)="onImageLoadingError($event)">
|
||||
</div>
|
||||
<div *ngSwitchCase="'icon'" class="cell-value">
|
||||
<span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
|
||||
<mat-icon>{{ data.getValue(row, col) }}</mat-icon>
|
||||
</div>
|
||||
<div *ngSwitchCase="'date'" class="cell-value"
|
||||
[attr.data-automation-id]="'date_' + data.getValue(row, col)">
|
||||
<adf-date-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-date-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'location'" class="cell-value"
|
||||
[attr.data-automation-id]="'location' + data.getValue(row, col)">
|
||||
<adf-location-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-location-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'fileSize'" class="cell-value"
|
||||
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
|
||||
<adf-filesize-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-filesize-cell>
|
||||
</div>
|
||||
<div *ngSwitchCase="'text'" class="cell-value"
|
||||
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
|
||||
<adf-datatable-cell
|
||||
[data]="data"
|
||||
[column]="col"
|
||||
[row]="row"
|
||||
[tooltip]="getCellTooltip(row, col)">
|
||||
</adf-datatable-cell>
|
||||
</div>
|
||||
<span *ngSwitchDefault class="cell-value">
|
||||
<!-- empty cell for unknown column type -->
|
||||
</span>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="col.template" class="cell-container">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="col.template"
|
||||
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="col.template" class="cell-container">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="col.template"
|
||||
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
|
||||
</ng-container>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Actions (right) -->
|
||||
<td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"
|
||||
[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>
|
||||
<!-- Actions (right) -->
|
||||
<div *ngIf="actions && actionsPosition === 'right'"
|
||||
class="adf-datatable-table-cell alfresco-datatable__actions-cell">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"
|
||||
[attr.id]="'action_menu_right_' + idx"
|
||||
[attr.data-automation-id]="'action_menu_' + idx">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
<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>
|
||||
|
||||
</tr>
|
||||
<tr *ngIf="data.getRows().length === 0">
|
||||
<td class="adf-no-content-container"
|
||||
[attr.colspan]="1 + data.getColumns().length">
|
||||
<ng-template *ngIf="noContentTemplate"
|
||||
</div>
|
||||
<div *ngIf="data.getRows().length === 0"
|
||||
[class.adf-datatable-row]="!cardview"
|
||||
[class.adf-data-table-card-empty]="cardview">
|
||||
<div class="adf-no-content-container adf-datatable-table-cell"
|
||||
[attr.colspan]="1 + data.getColumns().length">
|
||||
<ng-template *ngIf="noContentTemplate"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="noContentTemplate">
|
||||
</ng-template>
|
||||
<ng-content select="adf-empty-list"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div *ngIf="!loading && noPermission"
|
||||
[class.adf-datatable-row]="!cardview"
|
||||
[class.adf-data-table-card-permissions]="cardview">
|
||||
class="adf-no-permission__row">
|
||||
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-table-cell">
|
||||
<ng-template *ngIf="noPermissionTemplate"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="noContentTemplate">
|
||||
[ngForTemplate]="noPermissionTemplate">
|
||||
</ng-template>
|
||||
<ng-content select="adf-empty-list"></ng-content>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<tr *ngIf="!loading && noPermission" class="adf-no-permission__row">
|
||||
<td class="adf-no-permission__cell">
|
||||
<ng-template *ngIf="noPermissionTemplate"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="noPermissionTemplate">
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="loading">
|
||||
<td class="adf-loading-content-container"
|
||||
[attr.colspan]="1 + data.getColumns().length">
|
||||
<ng-template *ngIf="loadingTemplate"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="loadingTemplate">
|
||||
</ng-template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="loading"
|
||||
[class.adf-datatable-row]="!cardview"
|
||||
[class.adf-data-table-card-loading]="cardview">
|
||||
<div class="adf-datatable-table-cell"
|
||||
[attr.colspan]="1 + data.getColumns().length">
|
||||
<ng-template *ngIf="loadingTemplate"
|
||||
ngFor [ngForOf]="[data]"
|
||||
[ngForTemplate]="loadingTemplate">
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user