mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +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
GitHub
@@ -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>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
@mixin adf-datatable-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
@@ -26,7 +25,148 @@
|
||||
$data-table-cell-top: $data-table-card-padding / 2;
|
||||
$data-table-drag-border: 1px dashed rgb(68, 138, 255);
|
||||
|
||||
.adf-data-table-card {
|
||||
|
||||
border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.sr-only {
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 24%;
|
||||
|
||||
width: 288px !important;
|
||||
max-width: 288px !important;
|
||||
min-width: 288px !important;
|
||||
|
||||
height: 200px !important;
|
||||
|
||||
overflow: hidden !important;
|
||||
margin: 6px;
|
||||
padding: 15px;
|
||||
|
||||
@include mat-elevation-transition;
|
||||
@include mat-overridable-elevation(2);
|
||||
}
|
||||
|
||||
.is-selected {
|
||||
background: mat-color($primary, 100);
|
||||
padding-bottom: 31px;
|
||||
}
|
||||
|
||||
.adf-data-table-card-permission {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
|
||||
.adf-datatable-table-cell {
|
||||
height: 240px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-data-table-card-loading {
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
|
||||
.adf-datatable-table-cell {
|
||||
height: 240px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-data-table-card-empty {
|
||||
width: 100%;
|
||||
min-height: 380px;
|
||||
|
||||
.adf-datatable-table-cell {
|
||||
height: 370px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-table-cell {
|
||||
text-align: left;
|
||||
flex: 0 1 24%;
|
||||
height: 136px !important;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
content: attr(title);
|
||||
color: mat-color($foreground, text, 0.4);
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
.alfresco-datatable__actions-cell {
|
||||
position: absolute;
|
||||
height: 42px !important;
|
||||
width: 42px !important;
|
||||
right: 0px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.image-table-cell {
|
||||
margin: 8px;
|
||||
padding: 4px;
|
||||
overflow: visible;
|
||||
border-bottom-color: mat-color($foreground, divider);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
|
||||
.cell-container {
|
||||
float: left;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin: 2px;
|
||||
content: attr(filename);
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-table-checkbox {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
margin-right: 18px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.adf-data-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: $data-table-dividers;
|
||||
@@ -38,12 +178,36 @@
|
||||
border-collapse: unset;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
padding-bottom: 3px;
|
||||
.adf-datatable-row {
|
||||
display: table-row;
|
||||
vertical-align: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
.adf-datatable-body {
|
||||
display: table-row-group;
|
||||
vertical-align: middle;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.adf-datatable-table-cell {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.adf-datatable-table-cell-header {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.adf-datatable-header {
|
||||
padding-bottom: 3px;
|
||||
display: table-header-group;
|
||||
vertical-align: middle;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.adf-datatable-body {
|
||||
|
||||
.adf-datatable-row {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: $data-table-row-height;
|
||||
@@ -73,7 +237,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
.adf-datatable-table-cell, .adf-datatable-table-cell-header {
|
||||
padding: 0 $data-table-column-padding 12px $data-table-column-padding;
|
||||
text-align: right;
|
||||
|
||||
@@ -93,7 +257,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
.adf-datatable-table-cell {
|
||||
color: mat-color($foreground, text);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
@@ -105,7 +269,7 @@
|
||||
@include no-select;
|
||||
}
|
||||
|
||||
th {
|
||||
.adf-datatable-table-cell-header {
|
||||
@include no-select;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@@ -153,7 +317,7 @@
|
||||
|
||||
.adf-data-table-cell {
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
|
||||
&--text {
|
||||
text-align: left;
|
||||
@@ -182,7 +346,7 @@
|
||||
|
||||
.cell-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,6 +366,7 @@
|
||||
/* Loading folder */
|
||||
.adf-loading-content-container {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
|
||||
@@ -51,6 +51,86 @@ describe('DataTable', () => {
|
||||
element = fixture.debugElement.nativeElement;
|
||||
});
|
||||
|
||||
it('should use the cardview style if cardview is true', () => {
|
||||
let newData = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name' })]
|
||||
);
|
||||
|
||||
dataTable.cardview = true;
|
||||
dataTable.ngOnChanges({
|
||||
data: new SimpleChange(null, newData, false)
|
||||
});
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.querySelector('.adf-data-table-card')).not.toBeNull();
|
||||
expect(element.querySelector('.adf-data-table')).toBeNull();
|
||||
});
|
||||
|
||||
it('should use the cardview style if cardview is false', () => {
|
||||
let newData = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name' })]
|
||||
);
|
||||
|
||||
dataTable.cardview = false;
|
||||
dataTable.ngOnChanges({
|
||||
data: new SimpleChange(null, newData, false)
|
||||
});
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.querySelector('.adf-data-table-card')).toBeNull();
|
||||
expect(element.querySelector('.adf-data-table')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should hide the header if showHeader is false', () => {
|
||||
let newData = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name' })]
|
||||
);
|
||||
|
||||
dataTable.showHeader = false;
|
||||
dataTable.loading = false;
|
||||
dataTable.ngOnChanges({
|
||||
data: new SimpleChange(null, newData, false)
|
||||
});
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.querySelector('.adf-datatable-header')).toBe(null);
|
||||
});
|
||||
|
||||
it('should show the header if showHeader is true', () => {
|
||||
let newData = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name' })]
|
||||
);
|
||||
dataTable.showHeader = true;
|
||||
dataTable.loading = false;
|
||||
|
||||
dataTable.ngOnChanges({
|
||||
data: new SimpleChange(null, newData, false)
|
||||
});
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.querySelector('.adf-datatable-header')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should emit "sorting-changed" DOM event', (done) => {
|
||||
const column = new ObjectDataColumn({ key: 'name', sortable: true, direction: 'asc' });
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
@@ -206,32 +286,40 @@ describe('DataTable', () => {
|
||||
});
|
||||
|
||||
it('should put actions menu to the right by default', () => {
|
||||
dataTable.data = new ObjectDataTableAdapter([], [
|
||||
<DataColumn> {},
|
||||
<DataColumn> {},
|
||||
<DataColumn> {}
|
||||
]);
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' },
|
||||
{ name: '3' },
|
||||
{ name: '4' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name' })]
|
||||
);
|
||||
|
||||
dataTable.actions = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
let headers = element.querySelectorAll('th');
|
||||
expect(headers.length).toBe(4);
|
||||
expect(headers[headers.length - 1].classList.contains('actions-column')).toBeTruthy();
|
||||
let actions = element.querySelectorAll('[id^=action_menu_right]');
|
||||
expect(actions.length).toBe(4);
|
||||
});
|
||||
|
||||
it('should put actions menu to the left', () => {
|
||||
dataTable.data = new ObjectDataTableAdapter([], [
|
||||
<DataColumn> {},
|
||||
<DataColumn> {},
|
||||
<DataColumn> {}
|
||||
]);
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{ name: '1' },
|
||||
{ name: '2' },
|
||||
{ name: '3' },
|
||||
{ name: '4' }
|
||||
],
|
||||
[new ObjectDataColumn({ key: 'name' })]
|
||||
);
|
||||
|
||||
dataTable.actions = true;
|
||||
dataTable.actionsPosition = 'left';
|
||||
fixture.detectChanges();
|
||||
|
||||
let headers = element.querySelectorAll('th');
|
||||
expect(headers.length).toBe(4);
|
||||
expect(headers[0].classList.contains('actions-column')).toBeTruthy();
|
||||
let actions = element.querySelectorAll('[id^=action_menu_left]');
|
||||
expect(actions.length).toBe(4);
|
||||
});
|
||||
|
||||
it('should initialize default adapter', () => {
|
||||
|
||||
@@ -53,6 +53,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
|
||||
@Input()
|
||||
data: DataTableAdapter;
|
||||
|
||||
/* Enable the cardview mode */
|
||||
@Input()
|
||||
cardview: boolean = false;
|
||||
|
||||
/* The rows that the datatable will show */
|
||||
@Input()
|
||||
rows: any[] = [];
|
||||
@@ -483,6 +487,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
|
||||
return `${row.cssClass} ${this.rowStyleClass}`;
|
||||
}
|
||||
|
||||
getFilename(row: DataRow): string {
|
||||
return row.getValue('name');
|
||||
}
|
||||
|
||||
getSortingKey(): string {
|
||||
if (this.data.getSorting()) {
|
||||
return this.data.getSorting().key;
|
||||
}
|
||||
}
|
||||
|
||||
private selectRow(row: DataRow, value: boolean) {
|
||||
if (row) {
|
||||
row.isSelected = value;
|
||||
|
||||
Reference in New Issue
Block a user