support for column definitions in html (#1705)

* support for column definitions in html

- provides generic support for html-based column definitions for
datatable-like controls

* html column definitions for Task List component

* html column definitions for Document List component

* update code and documentation
This commit is contained in:
Denys Vuika
2017-03-13 11:05:52 +00:00
committed by Mario Romano
parent 5b5916bfb1
commit 57557a991e
17 changed files with 340 additions and 118 deletions

View File

@@ -38,7 +38,15 @@
[data]="dataTasks"
[landingTaskId]="currentTaskId"
(rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
#activititasklist></activiti-tasklist>
#activititasklist>
<!-- Custom column definition demo -->
<!--
<data-columns>
<data-column key="name" title="NAME" class="full-width name-column"></data-column>
<data-column key="created" title="Created" class="hidden"></data-column>
</data-columns>
-->
</activiti-tasklist>
</div>
<div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
<activiti-task-details #activitidetails

View File

@@ -101,13 +101,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
private apiService: AlfrescoApiService,
private formRenderingService: FormRenderingService,
private formService: FormService) {
this.dataTasks = new ObjectDataTableAdapter(
[],
[
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true}
]
);
this.dataTasks = new ObjectDataTableAdapter();
this.dataTasks.setSorting(new DataSorting('created', 'desc'));
this.dataProcesses = new ObjectDataTableAdapter(

View File

@@ -5,6 +5,16 @@
[actions]="true"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)">
<!-- HTML column definition demo -->
<!--
<data-columns>
<data-column type="image" key="icon" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
-->
</alfresco-datatable>
</div>
<div class="p-10">

View File

@@ -21,12 +21,11 @@
(error)="onNavigationError($event)"
(success)="resetError()"
(preview)="showFile($event)">
<content-columns>
<content-column key="$thumbnail" type="image"></content-column>
<content-column
<data-columns>
<data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
sortable="true"
class="full-width ellipsis-cell">
<!-- Example of using custom column template -->
<!--
@@ -34,31 +33,28 @@
<span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
</template>
-->
</content-column>
<content-column
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
sortable="true"
class="full-width ellipsis-cell">
<template let-entry="$implicit">
<alfresco-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
</template>
</content-column>
<content-column
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
sortable="true"
class="desktop-only">
</content-column>
<content-column
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
key="createdAt"
type="date"
format="medium"
sortable="true"
class="desktop-only">
</content-column>
</content-columns>
</data-column>
</data-columns>
<content-actions>
<!-- folder actions -->