inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add possible future configurability display mode document list and datatable (#2998)

Browse Source
This commit is contained in:
Eugenio Romano
2018-02-26 03:04:19 +00:00
committed by GitHub
parent 76cf4f178e
commit 97a10bde78
10 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -1,9 +1,9 @@
<div
*ngIf="data" class="full-width adf-data-table-card"
[class.adf-data-table-card]="cardview"
[class.adf-data-table]="!cardview">
*ngIf="data" class="full-width"
[class.adf-data-table-card]="display === 'gallery'"
[class.adf-data-table]="display === 'list'">
<div *ngIf="showHeader && !loading" class="adf-datatable-header">
<div class="adf-datatable-row" *ngIf="!cardview">
<div class="adf-datatable-row" *ngIf="display === 'list'">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
<span class="sr-only">Actions</span>
@@ -31,7 +31,7 @@
<span class="sr-only">Actions</span>
</div>
</div>
<mat-form-field *ngIf="cardview">
<mat-form-field *ngIf="display === 'gallery'">
<mat-select [value]="getSortingKey()">
<mat-option *ngFor="let col of getSortableColumns()"
[value]="col.key"
@@ -174,8 +174,8 @@
</div>
<div *ngIf="data.getRows().length === 0"
[class.adf-datatable-row]="!cardview"
[class.adf-data-table-card-empty]="cardview">
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-empty]="display === 'gallery'">
<div class="adf-no-content-container adf-datatable-table-cell"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="noContentTemplate"
@@ -187,8 +187,8 @@
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
[class.adf-datatable-row]="!cardview"
[class.adf-data-table-card-permissions]="cardview">
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-permissions]="display === 'gallery'">
class="adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-table-cell">
<ng-template *ngIf="noPermissionTemplate"
@@ -198,8 +198,8 @@
</div>
</div>
<div *ngIf="loading"
[class.adf-datatable-row]="!cardview"
[class.adf-data-table-card-loading]="cardview">
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-loading]="display === 'gallery'">
<div class="adf-datatable-table-cell"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="loadingTemplate"

4
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -60,7 +60,7 @@ describe('DataTable', () => {
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.cardview = true;
dataTable.display = 'gallery';
dataTable.ngOnChanges({
data: new SimpleChange(null, newData, false)
});
@@ -80,7 +80,7 @@ describe('DataTable', () => {
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.cardview = false;
dataTable.ngOnChanges({
data: new SimpleChange(null, newData, false)
});

9
lib/core/datatable/components/datatable/datatable.component.ts
View File

@@ -38,6 +38,11 @@ import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/buffer';
import 'rxjs/add/operator/filter';
export enum DisplayMode {
List = 'list',
Gallery = 'gallery'
}
@Component({
selector: 'adf-datatable',
styleUrls: ['./datatable.component.scss'],
@@ -53,9 +58,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
@Input()
data: DataTableAdapter;
/* Enable the cardview mode */
/* change the display mode of the table list or gallery */
@Input()
cardview: boolean = false;
display: string = DisplayMode.List;
/* The rows that the datatable will show */
@Input()