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

[ADF-3039] Task List - Enanchement (#3404)

Browse Source 
* * Created DataColumnSchemaAssembler component to get column schema from html and app.config.json
* Removed column related  method  from tasklist.

* * Removed data property from the tasklist component
* Using rows input property instead of data input property of the datatable

* *  Renamed  DataColumnSchemaAssembler to DataTableSchema
* Refactored DataTableSchema component

* * Changed schem property into an  input schemaColumns property  in dataTable component

* * Added selectFirstRow input property to select a first row of datatable
* Removed unnecessary method from tasklist component

* * Added test case for the recent changes
* Added mock object for the tasklist spec

* * Added testcases for recent changes in the datatable component

* * Updated datatable and tasklist document for the recent changes

* * Refactored process-service and task list component
* Updated datatable document.

* [ADF-3039] Task List - Enanchement
* Changed schemaColumn name to columns
* Updated datatable documentation.
*  data input Annotated  with @deprecated in the tasklist component

* * Added an sorting input to the datatable.
* Updated datatable and tasklist documentation
* Added method to get current sorting order.

* * After rebasing

* * Revert  sorting changes

* * After rebase

* * fixed conflicts

* * Fixed failing testcase after rebased.
This commit is contained in:
siva kumar
2018-06-01 14:09:09 +05:30
committed by Maurizio Vitale
parent 2f12f518ef
commit d4f57b8786
12 changed files with 546 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
docs/core/datatable.component.md
View File

@@ -80,7 +80,72 @@ export class DataTableDemo {
}
```
You can also use HTML-based schema declaration like shown below:
### Setting the rows and column schema
You can set rows and columns to the ObjectDataTableAdapter like shown below:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
// columns
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'full-width',
sortable: true
}
]
);
}
}
```
```html
<adf-datatable
[data]="data">
</adf-datatable>
```
You can also set rows and HTML-based schema declaration like shown below:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
[]
);
}
}
```
```html
<adf-datatable [data]="data">
@@ -94,37 +159,96 @@ You can also use HTML-based schema declaration like shown below:
</adf-datatable>
```
You can also set rows to the ObjectDataTableAdapter and set columns as an input like shown below :
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
schema: any;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{
id: 1,
name: 'Name 1',
createdBy : { name: 'user'},
createdOn: 123,
icon: 'http://example.com/img.png'
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
[]
);
// columns
this.schema =
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
id: 2,
name: 'Name 2',
createdBy : { name: 'user 2'},
createdOn: 123,
icon: 'http://example.com/img.png'
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
]
);
];
}
}
```
```html
<adf-datatable
[data]="data"
[columns]="schema">
</adf-datatable>
```
You can also set rows and columns through inputs as shown below :
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
rows: any;
schema: any;
constructor() {
// data
this.rows =
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
];
// columns
this.schema =
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
];
}
}
```
```html
<adf-datatable
[rows]="rows"
[columns]="schema">
</adf-datatable>
```
## Class members
### Properties
@@ -134,6 +258,7 @@ export class DataTableDemo {
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
| columns | `any[]` | `[]` | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | [`DisplayMode`](../../lib/core/datatable/components/datatable/datatable.component.ts).List | Selects the display mode of the table. Can be "list" or "gallery". |
@@ -145,8 +270,8 @@ export class DataTableDemo {
| rowStyleClass | `string` | "" | The CSS class to apply to every row. |
| rows | `any[]` | \[] | The rows that the datatable will show. |
| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| selectFirstRow | `boolean` | `true` | Toggles the first row selection. |
| showHeader | `boolean` | true | Toggles the header. |
| sorting | `any[]` | `[]` | Define the sorting order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
### Events

40
docs/process-services/task-list.component.md
View File

@@ -44,7 +44,7 @@ Renders a list containing all the tasks matched by the parameters specified.
| -- | -- | -- | -- |
| appId | `number` | | The id of the app. |
| assignment | `string` | | The assignment of the process. Possible values are: "assignee" (the current user is the assignee), candidate (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value(the current user is involved). |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source object that represents the number and the type of the columns that you want to show. |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source object that represents the number and the type of the columns that you want to show. **Deprecated:** in 2.4.0 |
| landingTaskId | `string` | | Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected. |
| multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| name | `string` | | Name of the tasklist. |
@@ -54,7 +54,7 @@ Renders a list containing all the tasks matched by the parameters specified.
| processInstanceId | `string` | | The Instance Id of the process. |
| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| size | `number` | [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of tasks to fetch. Default value: 25. |
| sort | `string` | | Define the sort order of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| sort | `string` | | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| state | `string` | | Current state of the process. Possible values are: `completed`, `active`. |
### Events
@@ -73,41 +73,7 @@ renders details of any chosen instance.
### Setting the column schema
You can pass a [DataTableAdapter instance](../core/datatable-adapter.interface.md)
to set a column schema for the tasklist as shown below :
```ts
let data = new ObjectDataTableAdapter(
// Row data
[
{ id: 1, name: 'Name 1' },
{ id: 2, name: 'Name 2' }
],
// Column schema
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
]
);
```
```html
<adf-tasklist
[data]="'data'">
</adf-tasklist>
```
Alternatively, you can use an HTML-based schema declaration:
You can use an HTML-based schema declaration to set a column schema for the tasklist as shown below :
```html
<adf-tasklist ...>