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

#82 data adapter api improvements

Browse Source
This commit is contained in:
Denys Vuika 2016-05-20 10:36:08 +01:00
parent e528ad8f9b
commit 27692bb6b7
5 changed files with 80 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo-shell-ng2/app/components/datatable/datatable-demo.component.html
View File

@ -1,3 +1,10 @@
<div class="p-10">
<alfresco-datatable [data]="data"></alfresco-datatable>
</div>
<div class="p-10">
<button
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
(click)="addRow()">
Add row
</button>
</div>

37
demo-shell-ng2/app/components/datatable/datatable-demo.component.ts
View File

@ -19,7 +19,9 @@ import { Component } from 'angular2/core';
import { AlfrescoPipeTranslate } from 'ng2-alfresco-core/services';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
ObjectDataTableAdapter, DataSorting
ObjectDataTableAdapter,
DataSorting,
ObjectDataRow
} from 'ng2-alfresco-datatable/ng2-alfresco-datatable';
declare let __moduleName: string;
@ -34,20 +36,19 @@ declare let __moduleName: string;
export class DataTableDemoComponent {
data: ObjectDataTableAdapter;
private _imageUrl: string = 'http://placehold.it/140x100';
private _createdBy: any = {
name: 'Denys Vuika',
email: 'denys.vuika@alfresco.com'
};
constructor() {
let imageUrl = 'http://placehold.it/140x100';
let createdBy = {
name: 'Denys Vuika',
email: 'denys.vuika@alfresco.com'
};
this.data = new ObjectDataTableAdapter(
[
{id: 1, name: 'Name 1', createdBy: createdBy, icon: 'material-icons://folder_open'},
{id: 2, name: 'Name 2', createdBy: createdBy, icon: 'material-icons://accessibility'},
{id: 3, name: 'Name 3', createdBy: createdBy, icon: 'material-icons://alarm'},
{id: 4, name: 'Image 1', createdBy: createdBy, icon: imageUrl}
{id: 1, name: 'Name 1', createdBy: this._createdBy, icon: 'material-icons://folder_open'},
{id: 2, name: 'Name 2', createdBy: this._createdBy, icon: 'material-icons://accessibility'},
{id: 3, name: 'Name 3', createdBy: this._createdBy, icon: 'material-icons://alarm'},
{id: 4, name: 'Image 1', createdBy: this._createdBy, icon: this._imageUrl}
],
[
{type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail'},
@ -59,4 +60,16 @@ export class DataTableDemoComponent {
this.data.setSorting(new DataSorting('name', 'asc'));
}
addRow() {
let id = this.data.getRows().length + 1;
let row = new ObjectDataRow({
id: id,
name: 'Name ' + id,
icon: 'material-icons://extension',
createdBy: this._createdBy
});
this.data.getRows().push(row);
this.data.sort();
}
}

6
ng2-components/ng2-alfresco-datatable/src/components/datatable.component.html
View File

@ -3,7 +3,7 @@
<tr>
<!-- Columns -->
<th class="mdl-data-table__cell--non-numeric {{col.cssClass}}"
*ngFor="#col of data.columns"
*ngFor="#col of data.getColumns()"
[class.column-header]="col.title"
[class.mdl-data-table__header--sorted-ascending]="isColumnSorted(col, 'asc')"
[class.mdl-data-table__header--sorted-descending]="isColumnSorted(col, 'desc')"
@ -20,9 +20,9 @@
<tbody>
<!-- todo: special 'navigate parent row' support -->
<tr *ngFor="#row of data.rows; #idx = index">
<tr *ngFor="#row of data.getRows(); #idx = index">
<td *ngFor="#col of data.columns" [ngSwitch]="col.type"
<td *ngFor="#col of data.getColumns()" [ngSwitch]="col.type"
class="mdl-data-table__cell--non-numeric data-cell {{col.cssClass}}"
(click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)">
<div *ngSwitchWhen="'image'">

18
ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
View File

@ -17,12 +17,12 @@
export interface DataTableAdapter {
rows: DataRow[];
columns: DataColumn[];
getRows(): Array<DataRow>;
getColumns(): Array<DataColumn>;
getValue(row: DataRow, col: DataColumn): any;
getSorting(): DataSorting;
setSorting(sorting: DataSorting): void;
sort(key?: string, direction?: string): void;
}
export interface DataRow {
@ -33,15 +33,15 @@ export interface DataRow {
export interface DataColumn {
key: string;
type: string; // text|image
sortable: boolean;
title: string;
srTitle: string;
cssClass: string;
sortable?: boolean;
title?: string;
srTitle?: string;
cssClass?: string;
}
export class DataSorting {
constructor(
public key: string,
public direction: string) {
public key?: string,
public direction?: string) {
}
}

53
ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
View File

@ -26,25 +26,33 @@ import {
export class ObjectDataTableAdapter implements DataTableAdapter {
private _sorting;
rows: DataRow[];
columns: DataColumn[];
private _rows: DataRow[];
private _columns: DataColumn[];
constructor(data: any[], schema: DataColumn[]) {
this.rows = [];
this._rows = [];
this._columns = [];
if (data && data.length > 0) {
this.rows = data.map(item => {
this._rows = data.map(item => {
return new ObjectDataRow(item);
});
this.columns = schema.map(item => {
this._columns = schema.map(item => {
return new ObjectDataColumn(item);
});
}
}
getRows(): Array<DataRow> {
return this._rows;
}
getColumns(): Array<DataColumn> {
return this._columns;
}
getValue(row: DataRow, col: DataColumn): any {
return row.getValue(col.key);
}
@ -54,26 +62,37 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
}
getColumnByKey(key: string) {
let columns = this.columns.filter(col => col.key === key);
let columns = this._columns.filter(col => col.key === key);
return columns.length > 0 ? columns[0] : null;
}
setSorting(sorting: DataSorting): void {
this._sorting = sorting;
this.rows.sort((a: DataRow, b: DataRow) => {
let left = a.getValue(sorting.key).toString();
let right = b.getValue(sorting.key).toString();
if (sorting && sorting.key) {
this._rows.sort((a: DataRow, b: DataRow) => {
let left = a.getValue(sorting.key).toString();
let right = b.getValue(sorting.key).toString();
return sorting.direction === 'asc'
? left.localeCompare(right)
: right.localeCompare(left);
});
return sorting.direction === 'asc'
? left.localeCompare(right)
: right.localeCompare(left);
});
}
}
sort(key?: string, direction?: string): void {
let sorting = this._sorting || new DataSorting();
if (key) {
sorting.key = key;
sorting.direction = direction || 'asc';
}
this.setSorting(sorting);
}
}
// Simple implementation of the DataRow interface.
class ObjectDataRow implements DataRow {
export class ObjectDataRow implements DataRow {
constructor(
private obj: any) {
}
@ -115,7 +134,7 @@ class ObjectDataRow implements DataRow {
}
// Simple implementation of the DataColumn interface.
class ObjectDataColumn implements DataColumn {
export class ObjectDataColumn implements DataColumn {
key: string;
type: string; // text|image
@ -124,7 +143,7 @@ class ObjectDataColumn implements DataColumn {
srTitle: string;
cssClass: string;
constructor(private obj: any) {
constructor(obj: any) {
this.key = obj.key;
this.type = obj.type;
this.sortable = obj.sortable;