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

#82 datatable project cleanup

Browse Source 
basic implementation of main features:

- custom data sources
- column types
- sorting by columns
- click events
This commit is contained in:
Denys Vuika
2016-05-19 10:58:15 +01:00
parent faeaf7ad88
commit 2fa8283213
25 changed files with 253 additions and 1929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,72 +1,3 @@
<div class="p-10">
<alfresco-datatable>
<data-columns>
<data-column source="$thumbnail"></data-column>
<data-column
title="{{'DATATABLE.COLUMNS.DISPLAY_NAME' | translate}}"
source="name"
class="full-width name-column">
</data-column>
<data-column
title="{{'DATATABLE.COLUMNS.CREATED_BY' | translate}}"
source="createdByUser.displayName">
</data-column>
<data-column
title="{{'DATATABLE.COLUMNS.CREATED_ON' | translate}}"
source="createdAt">
</data-column>
</data-columns>
<data-actions>
<data-action
target="folder"
type="button"
icon="delete"
handler="system1">
</data-action>
<data-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1">
</data-action>
<data-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)">
</data-action>
<!-- document actions -->
<data-action
target="document"
type="button"
icon="account_circle"
handler="my-handler">
</data-action>
<data-action
target="document"
type="button"
icon="cloud_download"
handler="download">
</data-action>
<data-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</data-action>
<data-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2">
</data-action>
<data-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)">
</data-action>
</data-actions>
</alfresco-datatable>
<alfresco-datatable [data]="data"></alfresco-datatable>
</div>

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

@@ -1,4 +1,4 @@
/**
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
@@ -20,7 +20,7 @@ import {TranslatePipe} from 'ng2-translate/ng2-translate';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
ALFRESCO_DATATABLE_PROVIDERS
ObjectDataTableAdapter, DataSorting
} from 'ng2-alfresco-datatable/ng2-alfresco-datatable';
declare let __moduleName:string;
@@ -30,9 +30,34 @@ declare let __moduleName:string;
selector: 'datatable-demo',
templateUrl: './datatable-demo.component.html',
directives: [ALFRESCO_DATATABLE_DIRECTIVES],
providers: [ALFRESCO_DATATABLE_PROVIDERS],
pipes: [TranslatePipe]
})
export class DataTableDemoComponent {
data: ObjectDataTableAdapter;
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 }
],
[
{ type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
{ type: 'text', key: 'id', title: 'Id', sortable: true},
{ type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
{ type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
]
);
this.data.setSorting(new DataSorting('name', 'asc'));
}
}