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

[ACS-7462] cleanup deprecated api for DataTable and DocumentList (#9500)

Browse Source 
* refactor: cleanup gallery mode from DataTable/DocumentList

* refactor: cleanup gallery mode from DataTable/DocumentList

* refactor: cleanup gallery mode from DataTable/DocumentList [ci:force]

* refactor: remove unused api [ci:force]

* refactor: remove unused api [ci:force]

* refactor: update and fix documentation [ci:force]

* refactor: restore thumbnails, docs fixes [ci:force]

* fix package lock
This commit is contained in:
Denys Vuika
2024-04-09 13:13:57 -04:00
committed by GitHub
parent 8b591876b6
commit 135b3b4b51
16 changed files with 210 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell/src/app/components/files/files.component.html
View File

@@ -99,7 +99,6 @@
[allowDropFiles]="allowDropFiles" [allowDropFiles]="allowDropFiles"
[selectionMode]="selectionMode" [selectionMode]="selectionMode"
[multiselect]="multiselect" [multiselect]="multiselect"
[display]="displayMode"
[node]="nodeResult" [node]="nodeResult"
[includeFields]="includeFields" [includeFields]="includeFields"
[sorting]="sorting" [sorting]="sorting"

18
demo-shell/src/app/components/files/files.component.ts
View File

@@ -31,14 +31,7 @@ import {
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
import { NodeEntry, NodePaging, Pagination, Node, SearchEntry } from '@alfresco/js-api'; import { NodeEntry, NodePaging, Pagination, Node, SearchEntry } from '@alfresco/js-api';
import { import { NotificationService, UserPreferencesService, PaginationComponent, ShowHeaderMode, FormRenderingService } from '@alfresco/adf-core';
NotificationService,
UserPreferencesService,
PaginationComponent,
DisplayMode,
ShowHeaderMode,
FormRenderingService
} from '@alfresco/adf-core';
import { import {
ContentService, ContentService,
FolderCreatedEvent, FolderCreatedEvent,
@@ -74,7 +67,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
showViewer = false; showViewer = false;
showVersions = false; showVersions = false;
allowDropFiles = true; allowDropFiles = true;
displayMode = DisplayMode.List;
includeFields = ['isFavorite', 'isLocked', 'aspectNames', 'definition']; includeFields = ['isFavorite', 'isLocked', 'aspectNames', 'definition'];
selectionModes = [ selectionModes = [
@@ -221,10 +213,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
if (params['id'] && this.currentFolderId !== params['id']) { if (params['id'] && this.currentFolderId !== params['id']) {
this.currentFolderId = params['id']; this.currentFolderId = params['id'];
} }
if (params['mode'] && params['mode'] === DisplayMode.Gallery) {
this.displayMode = DisplayMode.Gallery;
}
}); });
} }
@@ -312,7 +300,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
} }
onFolderChange($event) { onFolderChange($event) {
this.router.navigate([this.navigationRoute, $event.value.id, 'display', this.displayMode]); this.router.navigate([this.navigationRoute, $event.value.id]);
} }
handlePermissionError(event: any) { handlePermissionError(event: any) {
@@ -507,7 +495,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
if (this.currentFolderId === '-my-') { if (this.currentFolderId === '-my-') {
this.router.navigate([this.navigationRoute, '']); this.router.navigate([this.navigationRoute, '']);
} else { } else {
this.router.navigate([this.navigationRoute, this.currentFolderId, 'display', this.displayMode]); this.router.navigate([this.navigationRoute, this.currentFolderId]);
} }
this.documentList.reload(); this.documentList.reload();
} }

17
docs/content-services/components/document-list.component.md
View File

@@ -66,7 +66,6 @@ Displays the documents from a repository.
| contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". | | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
| contextMenuActions | `boolean` | false | Toggles context menus for each row | | contextMenuActions | `boolean` | false | Toggles context menus for each row |
| currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources | | currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
| display | `string` | DisplayMode.List | Change the display mode of the table. Can be "list" or "gallery". |
| emptyFolderImageUrl | `string` | | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' | | emptyFolderImageUrl | `string` | | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
| filterValue | `any` | | Initial value for filter. | | filterValue | `any` | | Initial value for filter. |
| headerFilters | `boolean` | false | Toggles the header filters mode. | | headerFilters | `boolean` | false | Toggles the header filters mode. |
@@ -175,22 +174,6 @@ You can use `ngIf` directives to provide conditional visibility support for the
</data-column> </data-column>
``` ```
### Card view
The Document List has an option to display items as "cards" instead of the
standard view:
![card-view](../../docassets/images/document-list-card-view.png)
Set the `[display]` property to "gallery" to enable card view mode:
```html
<adf-document-list
[currentFolderId]="'-my-'"
[display]="'gallery'">
</adf-document-list>
```
### Pagination strategy ### Pagination strategy
The Document List by default supports 2 types of pagination: [Pagination component](../../core/components/pagination.component.md) and [Infinite pagination component](../../core/components/infinite-pagination.component.md) The Document List by default supports 2 types of pagination: [Pagination component](../../core/components/pagination.component.md) and [Infinite pagination component](../../core/components/infinite-pagination.component.md)

300
docs/core/components/datatable.component.md
View File

@@ -26,7 +26,6 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
- [Supplying data for the table](#supplying-data-for-the-table) - [Supplying data for the table](#supplying-data-for-the-table)
- [Customizing columns](#customizing-columns) - [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events) - [DataTable DOM Events](#datatable-dom-events)
- [Card view](#card-view)
- [Using events](#using-events) - [Using events](#using-events)
- [Customizing the component's styles](#customizing-the-components-styles) - [Customizing the component's styles](#customizing-the-components-styles)
- [Resolver Function](#resolver-function) - [Resolver Function](#resolver-function)
@@ -306,7 +305,7 @@ export class FilesComponent implements OnInit {
You can add [Data column component](data-column.component.md) instances to define columns for thetable as described in the usage examples and the [Customizing columns](#customizing-columns) section. You can add [Data column component](data-column.component.md) instances to define columns for thetable as described in the usage examples and the [Customizing columns](#customizing-columns) section.
```html ```html
<adf-datatable ...> <adf-datatable>
<data-column> <data-column>
<!--Add your custom empty template here--> <!--Add your custom empty template here-->
<ng-template> <ng-template>
@@ -321,7 +320,7 @@ You can also supply a `<adf-no-content-template>` or an
[Empty list component](empty-list.component.md) sub-component to show when the table is empty: [Empty list component](empty-list.component.md) sub-component to show when the table is empty:
```html ```html
<adf-datatable ...> <adf-datatable>
<adf-no-content-template> <adf-no-content-template>
<!--Add your custom empty template here--> <!--Add your custom empty template here-->
<ng-template> <ng-template>
@@ -332,12 +331,12 @@ You can also supply a `<adf-no-content-template>` or an
``` ```
```html ```html
<adf-datatable ...> <adf-datatable>
<adf-empty-list> <adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header> <adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body> <adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer> <adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content> <ng-content></ng-content>
</adf-empty-list> </adf-empty-list>
</adf-datatable> </adf-datatable>
``` ```
@@ -346,7 +345,7 @@ Another useful transclusion is the `<adf-loading-content-template>`, which is sh
while the data for the table is loading: while the data for the table is loading:
```html ```html
<adf-datatable ...> <adf-datatable>
<adf-loading-content-template> <adf-loading-content-template>
<ng-template> <ng-template>
<!--Add your custom loading template here--> <!--Add your custom loading template here-->
@@ -360,10 +359,13 @@ while the data for the table is loading:
</adf-datatable> </adf-datatable>
``` ```
```js ```ts
class MyComponent {
isLoading(): boolean { isLoading(): boolean {
//your custom logic to identify if you are in a loading state // custom logic to identify if you are in a loading state
return false;
} }
}
``` ```
You can also show main menu for datatable using `<adf-main-menu-datatable-template>` You can also show main menu for datatable using `<adf-main-menu-datatable-template>`
@@ -387,12 +389,12 @@ Provided template receives `let-mainMenuTrigger`, so you can programaticaly work
For convenience, you can use `<adf-datatable-column-selector>` which will allow you to change column visibility. For convenience, you can use `<adf-datatable-column-selector>` which will allow you to change column visibility.
\###Styling transcluded content ### Styling transcluded content
When adding your custom templates you can style them as you like. However, for an out of the box experience, if you want to apply datatable styles to your column you will need to follow this structure: When adding your custom templates you can style them as you like. However, for an out of the box experience, if you want to apply datatable styles to your column you will need to follow this structure:
```html ```html
<adf-datatable ...> <adf-datatable>
<data-column> <data-column>
<!--Add your custom empty template here--> <!--Add your custom empty template here-->
<ng-template> <ng-template>
@@ -411,51 +413,50 @@ If you follow these structure you will be able to apply classes like `.adf-ellip
Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>` Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
together in the same datatable. together in the same datatable.
Learm more about styling your datatable: [Customizing the component's styles](#customizing-the-components-styles) Learn more about styling your datatable: [Customizing the component's styles](#customizing-the-components-styles)
## Class members ## Class members
### Properties ### Properties
| Name | Type | Default value | Description | | Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- | |--------------------------|-------------------------------------------------------------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| actions | `boolean` | false | Toggles the data actions column. | | actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". | | actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| actionsVisibleOnHover | `boolean` | false | Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open. | | actionsVisibleOnHover | `boolean` | false | Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open. |
| allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use [facet widget](../../../lib/content-services/src/lib/search/models/facet-widget.interface.ts) search for filtering. | | allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use [facet widget](../../../lib/content-services/src/lib/search/models/facet-widget.interface.ts) search for filtering. |
| blurOnResize | `boolean` | true | Toggles blur when columns of the datatable are being resized. | | blurOnResize | `boolean` | true | Toggles blur when columns of the datatable are being resized. |
| columns | `any[]` | \[] | The columns that the datatable will show. | | columns | `any[]` | \[] | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. | | contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table | | data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | DisplayMode.List | Selects the display mode of the table. Can be "list" or "gallery". | | fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. | | isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. |
| isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. | | loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). | | mainTableAction | `boolean` | true | Toggles main data table action column. |
| mainTableAction | `boolean` | true | Toggles main data table action column. | | multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. | | noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. |
| noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. | | resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects see the docs to learn how to configure a resolverFn. |
| resolverFn | `Function` | null | Custom resolver function which is used to parse dynamic column objects see the docs to learn how to configure a resolverFn. | | rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? |
| rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? | | rowStyle | `Function` | | The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples. |
| rowStyle | `Function` | | The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples. | | rowStyleClass | `string` | "" | The CSS class to apply to every row. |
| rowStyleClass | `string` | "" | The CSS class to apply to every row. | | rows | `any[]` | \[] | The rows that the datatable will show. |
| 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. |
| 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. | | showHeader | `ShowHeaderMode` | | Toggles the header. |
| showHeader | `ShowHeaderMode` | | Toggles the header. | | showMainDatatableActions | `boolean` | false | Toggles the main datatable action. |
| showMainDatatableActions | `boolean` | false | Toggles the main datatable action. | | sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
| sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] | | stickyHeader | `boolean` | false | Toggles the sticky header mode. |
| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
### Events ### Events
| Name | Type | Description | | Name | Type | Description |
| ---- | ---- | ----------- | |---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|
| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. | | columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column order is changed. |
| columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. | | columnsWidthChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/src/lib/datatable/data/data-column.model.ts)`<>[]>` | Emitted when the column width is changed. |
| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. | | executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/src/lib/datatable/components/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. | | rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. | | rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/src/lib/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. | | showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. | | showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/src/lib/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
## Details ## Details
@@ -477,27 +478,29 @@ for more information.
Below are the DOM events emitted by the DataTable component. Below are the DOM events emitted by the DataTable component.
These events bubble up the component tree and can be handled by any parent component. These events bubble up the component tree and can be handled by any parent component.
| Name | Description | | Name | Description |
| ---- | ----------- | |-----------------|------------------------------------------------------|
| row-click | Raised when user clicks a row | | row-click | Raised when user clicks a row |
| row-dblclick | Raised when user double-clicks a row | | row-dblclick | Raised when user double-clicks a row |
| row-select | Raised after user selects a row | | row-select | Raised after user selects a row |
| row-unselect | Raised after user unselects a row | | row-unselect | Raised after user unselects a row |
| row-keyup | Raised on the 'keyup' event for the focused row. | | row-keyup | Raised on the 'keyup' event for the focused row. |
| sorting-changed | Raised after user clicks the sortable column header. | | sorting-changed | Raised after user clicks the sortable column header. |
| header-dragover | Raised when dragging content over the header. | | header-dragover | Raised when dragging content over the header. |
| header-drop | Raised when data is dropped on the column header. | | header-drop | Raised when data is dropped on the column header. |
| cell-dragover | Raised when dragging data over the cell. | | cell-dragover | Raised when dragging data over the cell. |
| cell-drop | Raised when data is dropped on the column cell. | | cell-drop | Raised when data is dropped on the column cell. |
#### Sorting-changed #### Sorting-changed
sorting-changed event contains sorting-changed event contains
```ts ```ts
direction: "asc" {
key: "timestamp" direction: "asc"
sortingKey: "" key: "timestamp"
sortingKey: ""
}
``` ```
#### Drop Events #### Drop Events
@@ -540,16 +543,18 @@ Given that DataTable raises bubbling DOM events, you can handle drop behavior fr
Where the implementation of the handlers can look like following: Where the implementation of the handlers can look like following:
```ts ```ts
onDragOver(event: CustomEvent) { class MyComponent {
// always needed for custom drop handlers (!) onDragOver(event: CustomEvent) {
event.preventDefault(); // always needed for custom drop handlers (!)
} event.preventDefault();
}
onDrop(event: DataTableDropEvent) { onDrop(event: DataTableDropEvent) {
event.preventDefault(); event.preventDefault();
const { column, row, target } = event.detail; const { column, row, target } = event.detail;
// do something with the details // do something with the details
}
} }
``` ```
@@ -564,26 +569,15 @@ onDrop(event: DataTableDropEvent) {
``` ```
```ts ```ts
onRowClick(event) { class MyComponent {
console.log(event); onRowClick(event) {
console.log(event);
}
} }
``` ```
![](../../docassets/images/datatable-dom-events.png) ![](../../docassets/images/datatable-dom-events.png)
### Card view
Set the `display` property to "gallery" to enable Card View mode:
```html
<adf-datatable
[data]="data"
[display]="'gallery'">
</adf-datatable
```
![card-view](../../docassets/images/document-list-card-view.png)
### Using events ### Using events
#### row-keyup DOM event #### row-keyup DOM event
@@ -592,7 +586,7 @@ Emitted on the 'keyup' event for the focused row.
This is an instance of `CustomEvent` with the `details` property containing the following object: This is an instance of `CustomEvent` with the `details` property containing the following object:
```ts ```text
row: DataRow, row: DataRow,
keyboardEvent: KeyboardEvent, keyboardEvent: KeyboardEvent,
sender: any sender: any
@@ -604,7 +598,7 @@ Emitted when the user clicks a row.
Event properties: Event properties:
```ts ```text
sender: any // DataTable instance sender: any // DataTable instance
value: DataRow, // row clicked value: DataRow, // row clicked
event: Event // original HTML DOM event event: Event // original HTML DOM event
@@ -613,8 +607,10 @@ event: Event // original HTML DOM event
Handler example: Handler example:
```ts ```ts
onRowClicked(event: DataRowEvent) { class MyComponent {
console.log(event.value); onRowClicked(event: DataRowEvent) {
console.log(event.value);
}
} }
``` ```
@@ -626,7 +622,7 @@ Emitted when the user double-clicks a row.
Event properties: Event properties:
```ts ```text
sender: any // DataTable instance sender: any // DataTable instance
value: DataRow, // row clicked value: DataRow, // row clicked
event: Event // original HTML DOM event event: Event // original HTML DOM event
@@ -635,8 +631,10 @@ event: Event // original HTML DOM event
Handler example: Handler example:
```ts ```ts
onRowDblClicked(event: DataRowEvent) { class MyComponent {
console.log(event.value); onRowDblClicked(event: DataRowEvent) {
console.log(event.value);
}
} }
``` ```
@@ -651,7 +649,7 @@ You can provide all necessary content via the handler.
Event properties: Event properties:
```ts ```text
value: { value: {
row: DataRow, row: DataRow,
col: DataColumn, col: DataColumn,
@@ -662,11 +660,13 @@ value: {
Handler example: Handler example:
```ts ```ts
onShowRowContextMenu(event: DataCellEvent) { class MyComponent {
event.value.actions = [ onShowRowContextMenu(event: DataCellEvent) {
{ ... }, event.value.actions = [
{ ... } { /*...*/ },
] { /*...*/ }
]
}
} }
``` ```
@@ -684,7 +684,7 @@ Requires the `actions` property to be set to `true`.
Event properties: Event properties:
```ts ```text
value: { value: {
row: DataRow, row: DataRow,
action: any action: any
@@ -719,21 +719,23 @@ corresponding menu item.
```ts ```ts
import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core'; import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
onShowRowActionsMenu(event: DataCellEvent) { class MyComponent {
let myAction = { onShowRowActionsMenu(event: DataCellEvent) {
title: 'Hello' let myAction = {
// your custom metadata needed for onExecuteRowAction title: 'Hello'
}; // your custom metadata needed for onExecuteRowAction
event.value.actions = [ };
myAction event.value.actions = [
]; myAction
} ];
}
onExecuteRowAction(event: DataRowActionEvent) { onExecuteRowAction(event: DataRowActionEvent) {
let args = event.value; let args = event.value;
console.log(args.row); console.log(args.row);
console.log(args.action); console.log(args.action);
window.alert(`My custom action: ${args.action.title}`); window.alert(`My custom action: ${args.action.title}`);
}
} }
``` ```
@@ -756,19 +758,19 @@ sections.
#### Truncated text #### Truncated text
By default, the content of the cells is wrapped so you can see all the data inside, as shown below: By default, the content of the cells is wrapped, so you can see all the data inside, as shown below:
![](../../docassets/images/datatable-wrapped-text.png) ![](../../docassets/images/datatable-wrapped-text.png)
However, you can also truncate the text within these cells using the `adf-ellipsis-cell` class in the desired column: However, you can also truncate the text within these cells using the `adf-ellipsis-cell` class in the desired column:
```js ```json
{ {
type: 'text', "type": "text",
key: 'createdOn', "key": "createdOn",
title: 'Created On', "title": "Created On",
sortable: true, "sortable": true,
cssClass: 'adf-ellipsis-cell' "cssClass": "adf-ellipsis-cell"
} }
``` ```
@@ -791,12 +793,12 @@ widths according to your needs:
As mentioned before, all cells initially have the same width. You can prevent cells from As mentioned before, all cells initially have the same width. You can prevent cells from
growing by using the `adf-no-grow-cell` class. growing by using the `adf-no-grow-cell` class.
```js ```json
{ {
type: 'date', "type": "date",
key: 'created', "key": "created",
title: 'Created On', "title": "Created On",
cssClass: 'adf-ellipsis-cell adf-no-grow-cell' "cssClass": "adf-ellipsis-cell adf-no-grow-cell"
} }
``` ```
@@ -808,7 +810,7 @@ Note that this class is compatible with `adf-ellipsis-cell` and for that reason
You can combine the CSS classes described above to customize the table as needed: You can combine the CSS classes described above to customize the table as needed:
```js ```text
{ {
type: 'text', type: 'text',
key: 'name', key: 'name',
@@ -865,39 +867,41 @@ It helps to parse the complex object in the data table.
Assume we want to merge two properties and show them in a text format Assume we want to merge two properties and show them in a text format
```json ```json
{ {
name: 'I am using custom resolver', "name": "I am using custom resolver",
users: [ "users": [
{ {
firstName: 'Captain', "firstName": "Captain",
lastName: 'America' "lastName": "America"
}, },
{ {
firstName: 'John', "firstName": "John",
lastName: 'Wick' "lastName": "Wick"
} }
], ],
status: [ "status": [
'I am here to save the world.. By world means AMERICA', "I am here to save the world.. By world means AMERICA",
'That nobody is John Wick…' "That nobody is John Wick…"
] ]
} }
``` ```
here is the sample resolver which merge the users property and status and it will show in one column here is the sample resolver which merge the users property and status and it will show in one column
```javascript ```ts
class MyComponent {
resolver(row: DataRow, col: DataColumn): any { resolver(row: DataRow, col: DataColumn): any {
const value = row.getValue(col.key); const value = row.getValue(col.key);
// Desired parsing logic // Desired parsing logic
if (col.key === 'status') { if (col.key === 'status') {
const users = row.getValue('users'); const users = row.getValue('users');
return (value || []).map((status, index) => `name - ${users[index].firstName} ${users[index].lastName} status: ${status}` ).toString(); return (value || []).map((status, index) => `name - ${users[index].firstName} ${users[index].lastName} status: ${status}`).toString();
} }
return value; return value;
} }
}
``` ```
```html ```html
@@ -919,9 +923,11 @@ here is the sample resolver which merge the users property and status and it wil
You can define the tooltip format for cells of type date using a configuration in `app.config.json`: You can define the tooltip format for cells of type date using a configuration in `app.config.json`:
```json ```json
"dateValues": { {
"defaultTooltipDateFormat": "medium" "dateValues": {
} "defaultTooltipDateFormat": "medium"
}
}
``` ```
## See also ## See also

BIN
docs/docassets/images/document-list-card-view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 51 KiB

22
lib/content-services/src/lib/breadcrumb/navigable-component.interface.ts
View File

@@ -1,22 +0,0 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Node } from '@alfresco/js-api';
export interface NavigableComponentInterface {
navigateTo(node: Node | string);
}

1
lib/content-services/src/lib/breadcrumb/public-api.ts
View File

@@ -17,6 +17,5 @@
export * from './breadcrumb.component'; export * from './breadcrumb.component';
export * from './dropdown-breadcrumb.component'; export * from './dropdown-breadcrumb.component';
export * from './navigable-component.interface';
export * from './breadcrumb.module'; export * from './breadcrumb.module';

1
lib/content-services/src/lib/document-list/components/document-list.component.html
View File

@@ -10,7 +10,6 @@
[rowStyleClass]="rowStyleClass" [rowStyleClass]="rowStyleClass"
[showMainDatatableActions]="true" [showMainDatatableActions]="true"
[loading]="loading" [loading]="loading"
[display]="display"
[noPermission]="noPermission" [noPermission]="noPermission"
[showHeader]="showHeader" [showHeader]="showHeader"
[rowMenuCacheEnabled]="false" [rowMenuCacheEnabled]="false"

17
lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
View File

@@ -364,23 +364,6 @@ describe('DocumentList', () => {
expect(documentList.resetSelection).toHaveBeenCalled(); expect(documentList.resetSelection).toHaveBeenCalled();
}); });
it('should use the cardview style if cardview is true', () => {
documentList.display = 'gallery';
fixture.detectChanges();
expect(element.querySelector('.adf-datatable-card')).toBeDefined();
});
it('should use the base document list style if cardview is false', () => {
documentList.display = 'list';
fixture.detectChanges();
expect(element.querySelector('.adf-datatable-card')).toBe(null);
expect(element.querySelector('.adf-datatable')).toBeDefined();
});
it('should reset selection upon reload', () => { it('should reset selection upon reload', () => {
documentList.currentFolderId = 'id-folder'; documentList.currentFolderId = 'id-folder';
spyOn(documentList, 'resetSelection').and.callThrough(); spyOn(documentList, 'resetSelection').and.callThrough();

11
lib/content-services/src/lib/document-list/components/document-list.component.ts
View File

@@ -41,7 +41,6 @@ import {
DataRowActionEvent, DataRowActionEvent,
DataSorting, DataSorting,
DataTableComponent, DataTableComponent,
DisplayMode,
ShowHeaderMode, ShowHeaderMode,
PaginatedComponent, PaginatedComponent,
AppConfigService, AppConfigService,
@@ -61,7 +60,6 @@ import {
DataColumn DataColumn
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
import { NodesApiService } from '../../common/services/nodes-api.service'; import { NodesApiService } from '../../common/services/nodes-api.service';
import { Node, NodeEntry, NodePaging, NodesApi, Pagination } from '@alfresco/js-api'; import { Node, NodeEntry, NodePaging, NodesApi, Pagination } from '@alfresco/js-api';
import { Subject, BehaviorSubject, of } from 'rxjs'; import { Subject, BehaviorSubject, of } from 'rxjs';
import { ShareDataRow } from './../data/share-data-row.model'; import { ShareDataRow } from './../data/share-data-row.model';
@@ -70,7 +68,6 @@ import { presetsDefaultModel } from '../models/preset.model';
import { ContentActionModel } from './../models/content-action.model'; import { ContentActionModel } from './../models/content-action.model';
import { PermissionStyleModel } from './../models/permissions-style.model'; import { PermissionStyleModel } from './../models/permissions-style.model';
import { NodeEntityEvent, NodeEntryEvent } from './node.event'; import { NodeEntityEvent, NodeEntryEvent } from './node.event';
import { NavigableComponentInterface } from '../../breadcrumb/navigable-component.interface';
import { FilterSearch } from './../../search/models/filter-search.interface'; import { FilterSearch } from './../../search/models/filter-search.interface';
import { RowFilter } from '../data/row-filter.model'; import { RowFilter } from '../data/row-filter.model';
import { DocumentListService } from '../services/document-list.service'; import { DocumentListService } from '../services/document-list.service';
@@ -97,7 +94,7 @@ const BYTES_TO_MB_CONVERSION_VALUE = 1048576;
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
host: { class: 'adf-document-list' } host: { class: 'adf-document-list' }
}) })
export class DocumentListComponent extends DataTableSchema implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent, NavigableComponentInterface { export class DocumentListComponent extends DataTableSchema implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent {
static SINGLE_CLICK_NAVIGATION: string = 'click'; static SINGLE_CLICK_NAVIGATION: string = 'click';
static DOUBLE_CLICK_NAVIGATION: string = 'dblclick'; static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
@@ -133,10 +130,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
@Input() @Input()
where: string; where: string;
/** Change the display mode of the table. Can be "list" or "gallery". */
@Input()
display: string = DisplayMode.List;
/** /**
* Define a set of CSS styles to apply depending on the permission * Define a set of CSS styles to apply depending on the permission
* of the user on that node. See the Permission Style model * of the user on that node. See the Permission Style model
@@ -479,7 +472,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
return defaultSorting; return defaultSorting;
} }
isMobile(): boolean { isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
} }
@@ -976,7 +968,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
return canNavigateFolder; return canNavigateFolder;
} }
private onDataReady(nodePaging: NodePaging) { private onDataReady(nodePaging: NodePaging) {
this.ready.emit(nodePaging); this.ready.emit(nodePaging);
this.pagination.next(nodePaging.list.pagination); this.pagination.next(nodePaging.list.pagination);

32
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -1,8 +1,7 @@
<div <div
role="grid" role="grid"
*ngIf="data" class="adf-full-width" *ngIf="data"
[class.adf-datatable-card]="display === 'gallery'" class="adf-full-width adf-datatable-list"
[class.adf-datatable-list]="display === 'list'"
[class.adf-sticky-header]="isStickyHeaderEnabled()" [class.adf-sticky-header]="isStickyHeaderEnabled()"
[class.adf-datatable--empty]="(isEmpty() && !isHeaderVisible()) || loading" [class.adf-datatable--empty]="(isEmpty() && !isHeaderVisible()) || loading"
[class.adf-datatable--empty--header-visible]="isEmpty() && isHeaderVisible()"> [class.adf-datatable--empty--header-visible]="isEmpty() && isHeaderVisible()">
@@ -14,7 +13,6 @@
data-automation-id="datatable-row-header" data-automation-id="datatable-row-header"
[disabled]="!isHeaderVisible()" [disabled]="!isHeaderVisible()"
class="adf-datatable-row" class="adf-datatable-row"
*ngIf="display === 'list'"
role="row"> role="row">
<!-- Actions (left) --> <!-- Actions (left) -->
@@ -143,17 +141,6 @@
</div> </div>
</adf-datatable-row> </adf-datatable-row>
<mat-form-field *ngIf="display === 'gallery' && isHeaderVisible()">
<mat-select [value]="getSortingKey()" [attr.data-automation-id]="'grid-view-sorting'">
<mat-option *ngFor="let col of getSortableColumns()"
[value]="col.key"
[attr.data-automation-id]="'grid-view-sorting-'+col.title"
(click)="onColumnHeaderClick(col, $event)"
(keyup.enter)="onColumnHeaderClick(col, $event)">
{{ col.title | translate}}
</mat-option>
</mat-select>
</mat-form-field>
</div> </div>
<div <div
@@ -382,10 +369,7 @@
</ng-container> </ng-container>
</div> </div>
</adf-datatable-row> </adf-datatable-row>
<div *ngIf="isEmpty()" <div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
role="row"
[class.adf-datatable-row]="display === 'list'"
[class.adf-datatable-card-empty]="display === 'gallery'">
<div class="adf-no-content-container adf-datatable-cell" role="gridcell"> <div class="adf-no-content-container adf-datatable-cell" role="gridcell">
<ng-template *ngIf="noContentTemplate" <ng-template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]" ngFor [ngForOf]="[data]"
@@ -394,14 +378,10 @@
<ng-content select="adf-empty-list"></ng-content> <ng-content select="adf-empty-list"></ng-content>
</div> </div>
</div> </div>
<div *ngFor="let row of fakeRows"
class="adf-datatable-row adf-datatable-row-empty-card">
</div>
</ng-container> </ng-container>
<div *ngIf="!loading && noPermission" <div *ngIf="!loading && noPermission"
role="row" role="row"
[class.adf-datatable-row]="display === 'list'" class="adf-datatable-row adf-no-permission__row">
class="adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell"> <div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noPermissionTemplate" <ng-template *ngIf="noPermissionTemplate"
ngFor [ngForOf]="[data]" ngFor [ngForOf]="[data]"
@@ -409,9 +389,7 @@
</ng-template> </ng-template>
</div> </div>
</div> </div>
<div *ngIf="loading" <div *ngIf="loading" class="adf-datatable-row">
[class.adf-datatable-row]="display === 'list'"
[class.adf-datatable-card-loading]="display === 'gallery'">
<div class="adf-no-content-container adf-datatable-cell"> <div class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="loadingTemplate" <ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]" ngFor [ngForOf]="[data]"

138
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@@ -51,143 +51,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
} }
} }
.adf-datatable-card {
border: 1px solid var(--adf-theme-foreground-divider-color);
.adf-datatable-body {
flex-flow: row wrap;
display: flex;
width: 100%;
justify-content: space-evenly;
align-content: flex-start;
align-items: flex-start;
.adf-datatable-row {
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 24%;
width: 288px;
max-width: 288px;
min-width: 288px;
height: 200px;
overflow: hidden;
margin: 6px;
padding: 15px;
@include mat.elevation-transition;
@include mat.overridable-elevation(2);
}
.adf-datatable-row.adf-datatable-row-empty-card {
height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.adf-is-selected {
background: var(--adf-theme-primary-100);
padding-bottom: 31px;
}
.adf-datatable-card-loading {
width: 100%;
min-height: 250px;
.adf-datatable-cell {
height: 240px;
}
}
.adf-datatable-card-empty {
width: 100%;
min-height: 380px;
.adf-datatable-cell {
height: 370px;
}
}
.adf-datatable-cell--image {
margin-left: 8px;
}
.adf-datatable-cell {
text-align: left;
flex: 0 1 24%;
height: 136px;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
outline: none;
&::before {
margin-left: 10px;
text-align: left;
content: attr(title);
color: var(--adf-theme-foreground-text-color-054);
float: left;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.adf-datatable-cell-value {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
.adf-datatable__actions-cell.adf-datatable-actions-menu {
position: absolute;
height: 42px;
width: 42px;
right: 0;
top: 4px;
}
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
display: none;
}
.adf-image-table-cell {
margin: 8px;
padding: 4px;
overflow: visible;
border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
.adf-datatable-cell-container {
float: left;
width: 42px;
}
&::after {
margin: 2px;
content: attr(filename);
float: left;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.adf-datatable-checkbox {
margin: 8px;
}
}
.adf-datatable-header {
margin-right: 18px;
float: right;
}
}
.adf-datatable-list { .adf-datatable-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -673,7 +536,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
.adf-drop-header-cell-placeholder { .adf-drop-header-cell-placeholder {
display: flex; display: flex;
flex: 1; flex: 1;
flex-grow: 1;
background: var(--adf-theme-background-hover-color); background: var(--adf-theme-background-hover-color);
border: dotted 1px rgba(0, 0, 0, 0.25); border: dotted 1px rgba(0, 0, 0, 0.25);
min-height: 55px; min-height: 55px;

46
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -183,20 +183,6 @@ describe('DataTable', () => {
expect(dataTable.data.setColumns).toHaveBeenCalled(); expect(dataTable.data.setColumns).toHaveBeenCalled();
})); }));
it('should use the cardview style if cardview is true', () => {
const newData = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
dataTable.display = 'gallery';
dataTable.ngOnChanges({
data: new SimpleChange(null, newData, false)
});
fixture.detectChanges();
expect(element.querySelector('.adf-datatable-card')).not.toBeNull();
expect(element.querySelector('.adf-datatable')).toBeNull();
});
it('should use the cardview style if cardview is false', () => { it('should use the cardview style if cardview is false', () => {
const newData = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]); const newData = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
@@ -299,22 +285,28 @@ describe('DataTable', () => {
it('should sortPredicate from CdkDropList return true if column is enabled', () => { it('should sortPredicate from CdkDropList return true if column is enabled', () => {
const dropList = getDropList(); const dropList = getDropList();
spyOn(dropList, 'getSortedItems').and.returnValue([{ spyOn(dropList, 'getSortedItems').and.returnValue([
disabled: true {
}, { disabled: true
disabled: false },
}] as CdkDrag[]); {
disabled: false
}
] as CdkDrag[]);
expect(dropList.sortPredicate(1, undefined, dropList)).toBeTrue(); expect(dropList.sortPredicate(1, undefined, dropList)).toBeTrue();
}); });
it('should sortPredicate from CdkDropList return false if column is disabled', () => { it('should sortPredicate from CdkDropList return false if column is disabled', () => {
const dropList = getDropList(); const dropList = getDropList();
spyOn(dropList, 'getSortedItems').and.returnValue([{ spyOn(dropList, 'getSortedItems').and.returnValue([
disabled: true {
}, { disabled: true
disabled: true },
}] as CdkDrag[]); {
disabled: true
}
] as CdkDrag[]);
expect(dropList.sortPredicate(1, undefined, dropList)).toBeFalse(); expect(dropList.sortPredicate(1, undefined, dropList)).toBeFalse();
}); });
@@ -955,12 +947,6 @@ describe('DataTable', () => {
expect(dataTable.asIconValue(row, column)).toBe(null); expect(dataTable.asIconValue(row, column)).toBe(null);
}); });
it('should parse icon values to a valid i18n key', () => {
expect(dataTable.iconAltTextKey('custom')).toBe('ICONS.custom');
expect(dataTable.iconAltTextKey('/path/to/custom')).toBe('ICONS.custom');
expect(dataTable.iconAltTextKey('/path/to/custom.svg')).toBe('ICONS.custom');
});
it('should require column and direction to evaluate sorting state', () => { it('should require column and direction to evaluate sorting state', () => {
expect(dataTable.isColumnSorted(null, null)).toBeFalsy(); expect(dataTable.isColumnSorted(null, null)).toBeFalsy();
expect(dataTable.isColumnSorted({} as DataColumn, null)).toBeFalsy(); expect(dataTable.isColumnSorted({} as DataColumn, null)).toBeFalsy();

41
lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts
View File

@@ -29,13 +29,7 @@ export default {
title: 'Core/Datatable/Datatable', title: 'Core/Datatable/Datatable',
decorators: [ decorators: [
moduleMetadata({ moduleMetadata({
imports: [ imports: [CoreStoryModule, DataTableModule, MatProgressSpinnerModule, BrowserAnimationsModule, RouterTestingModule]
CoreStoryModule,
DataTableModule,
MatProgressSpinnerModule,
BrowserAnimationsModule,
RouterTestingModule
]
}) })
], ],
argTypes: { argTypes: {
@@ -136,9 +130,7 @@ export default {
sorting: { sorting: {
control: 'object', control: 'object',
defaultValue: ['id', 'asc'], defaultValue: ['id', 'asc'],
description: 'A string array.\n\n' + description: 'A string array.\n\n' + 'First element describes the key to sort by.\n\n' + 'Second element describes the sorting order.',
'First element describes the key to sort by.\n\n' +
'Second element describes the sorting order.',
table: { table: {
type: { summary: 'any[]' }, type: { summary: 'any[]' },
defaultValue: { summary: '[]' } defaultValue: { summary: '[]' }
@@ -149,11 +141,27 @@ export default {
description: 'The columns that the datatable will show.', description: 'The columns that the datatable will show.',
defaultValue: [ defaultValue: [
{ type: 'text', key: 'id', title: 'Id', sortable: true }, { type: 'text', key: 'id', title: 'Id', sortable: true },
{ type: 'text', key: 'textCol', title: 'Text Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', copyContent: true }, {
type: 'text',
key: 'textCol',
title: 'Text Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
copyContent: true
},
{ type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'image', key: 'imageCol', title: 'Image Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'icon', key: 'iconCol', title: 'Icon Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'date', key: 'dateCol', title: 'Date Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'date', key: 'dateCol', title: 'Date Time Ago Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell', dateConfig: { format: 'timeAgo' } }, {
type: 'date',
key: 'dateCol',
title: 'Date Time Ago Column',
sortable: true,
draggable: true,
cssClass: 'adf-ellipsis-cell',
dateConfig: { format: 'timeAgo' }
},
{ type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'fileSize', key: 'fileSizeCol', title: 'File Size Column', sortable: true, draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'location', format: '/files', key: 'locationCol', title: 'Location Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' }, { type: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
@@ -257,7 +265,8 @@ export default {
}, },
rowStyle: { rowStyle: {
control: 'object', control: 'object',
description: 'The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples.', description:
'The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples.',
table: { table: {
category: 'Custom Row Styles', category: 'Custom Row Styles',
type: { summary: '{ [key: string]: any }' } type: { summary: '{ [key: string]: any }' }
@@ -365,9 +374,8 @@ export default {
} }
} as Meta<DataTableComponent>; } as Meta<DataTableComponent>;
const insertContentToTemplate = (content: string): string => ( const insertContentToTemplate = (content: string): string =>
`<adf-datatable `<adf-datatable
[display]=display
[rows]=rows [rows]=rows
[sorting]=sorting [sorting]=sorting
[columns]=columns [columns]=columns
@@ -392,8 +400,7 @@ const insertContentToTemplate = (content: string): string => (
(columnOrderChanged)=columnOrderChanged($event) (columnOrderChanged)=columnOrderChanged($event)
> >
${content} ${content}
</adf-datatable>` </adf-datatable>`;
);
export const defaultDatatable: Story<DataTableComponent> = (args: DataTableComponent) => ({ export const defaultDatatable: Story<DataTableComponent> = (args: DataTableComponent) => ({
props: args, props: args,

62
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@@ -62,12 +62,6 @@ import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { ResizeEvent } from '../../directives/resizable/types'; import { ResizeEvent } from '../../directives/resizable/types';
// eslint-disable-next-line no-shadow
export enum DisplayMode {
List = 'list',
Gallery = 'gallery'
}
// eslint-disable-next-line no-shadow // eslint-disable-next-line no-shadow
export enum ShowHeaderMode { export enum ShowHeaderMode {
Never = 'never', Never = 'never',
@@ -95,10 +89,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Input() @Input()
data: DataTableAdapter; data: DataTableAdapter;
/** Selects the display mode of the table. Can be "list" or "gallery". */
@Input()
display: string = DisplayMode.List;
/** The rows that the datatable will show. */ /** The rows that the datatable will show. */
@Input() @Input()
rows: any[] = []; rows: any[] = [];
@@ -241,8 +231,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
/** /**
* Flag that indicates if the datatable should be blurred when resizing. * Flag that indicates if the datatable should be blurred when resizing.
*/ */
@Input() @Input()
blurOnResize = true; blurOnResize = true;
headerFilterTemplate: TemplateRef<any>; headerFilterTemplate: TemplateRef<any>;
noContentTemplate: TemplateRef<any>; noContentTemplate: TemplateRef<any>;
@@ -259,9 +249,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
hoveredHeaderColumnIndex = -1; hoveredHeaderColumnIndex = -1;
resizingColumnIndex = -1; resizingColumnIndex = -1;
/** This array of fake rows fix the flex layout for the gallery view */
fakeRows = [];
private keyManager: FocusKeyManager<DataTableRowComponent>; private keyManager: FocusKeyManager<DataTableRowComponent>;
private clickObserver: Observer<DataRowEvent>; private clickObserver: Observer<DataRowEvent>;
private click$: Observable<DataRowEvent>; private click$: Observable<DataRowEvent>;
@@ -299,7 +286,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}) })
); );
} }
this.datatableLayoutFix();
this.setTableSchema(); this.setTableSchema();
} }
@@ -347,10 +333,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
if (this.isPropertyChanged(changes['sorting'])) { if (this.isPropertyChanged(changes['sorting'])) {
this.setTableSorting(changes['sorting'].currentValue); this.setTableSorting(changes['sorting'].currentValue);
} }
if (this.isPropertyChanged(changes['display'])) {
this.datatableLayoutFix();
}
} }
isColumnSortActive(column: DataColumn): boolean { isColumnSortActive(column: DataColumn): boolean {
@@ -514,7 +496,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
} }
if (row) { if (row) {
const rowIndex = this.data.getRows().indexOf(row) + (this.isHeaderListVisible() ? 1 : 0); const rowIndex = this.data.getRows().indexOf(row) + (this.isHeaderVisible() ? 1 : 0);
this.keyManager.setActiveItem(rowIndex); this.keyManager.setActiveItem(rowIndex);
const dataRowEvent = new DataRowEvent(row, mouseEvent, this); const dataRowEvent = new DataRowEvent(row, mouseEvent, this);
@@ -528,10 +510,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
} }
} }
private isHeaderListVisible(): boolean {
return this.isHeaderVisible() && this.display === DisplayMode.List;
}
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) { private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
if (this.data) { if (this.data) {
if (this.isSingleSelectionMode()) { if (this.isSingleSelectionMode()) {
@@ -726,10 +704,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
return null; return null;
} }
iconAltTextKey(value: string): string {
return value ? 'ICONS.' + value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '') : '';
}
isColumnSorted(col: DataColumn, direction: string): boolean { isColumnSorted(col: DataColumn, direction: string): boolean {
if (col && direction) { if (col && direction) {
const sorting = this.data.getSorting(); const sorting = this.data.getSorting();
@@ -779,10 +753,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
return row.isDropTarget === true; return row.isDropTarget === true;
} }
hasSelectionMode(): boolean {
return this.isSingleSelectionMode() || this.isMultiSelectionMode();
}
isSingleSelectionMode(): boolean { isSingleSelectionMode(): boolean {
return this.selectionMode && this.selectionMode.toLowerCase() === 'single'; return this.selectionMode && this.selectionMode.toLowerCase() === 'single';
} }
@@ -811,14 +781,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
} }
} }
getSortingKey(): string | null {
if (this.data.getSorting()) {
return this.data.getSorting().key;
}
return null;
}
selectRow(row: DataRow, value: boolean) { selectRow(row: DataRow, value: boolean) {
if (row) { if (row) {
row.isSelected = value; row.isSelected = value;
@@ -909,18 +871,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
} }
} }
private datatableLayoutFix() {
const maxGalleryRows = 25;
if (this.display === 'gallery') {
for (let i = 0; i < maxGalleryRows; i++) {
this.fakeRows.push('');
}
} else {
this.fakeRows = [];
}
}
getNameColumnValue() { getNameColumnValue() {
return this.data.getColumns().find((el: any) => el.key.includes('name')); return this.data.getColumns().find((el: any) => el.key.includes('name'));
} }
@@ -1005,10 +955,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
} }
private isSortingEqual(col: DataColumn, direction: string, sorting: DataSorting): boolean { private isSortingEqual(col: DataColumn, direction: string, sorting: DataSorting): boolean {
return sorting && return sorting && (sorting.key === col.key || sorting.key === col.sortingKey) && sorting.direction?.toLocaleLowerCase() === direction;
(sorting.key === col.key || sorting.key === col.sortingKey) && }
sorting.direction?.toLocaleLowerCase() === direction;
};
get isResizing(): boolean { get isResizing(): boolean {
return this.resizingColumnIndex >= 0; return this.resizingColumnIndex >= 0;

3
package-lock.json generated
View File

@@ -161,7 +161,8 @@
}, },
"lib/eslint-angular": { "lib/eslint-angular": {
"name": "@alfresco/eslint-plugin-eslint-angular", "name": "@alfresco/eslint-plugin-eslint-angular",
"version": "6.7.1", "version": "6.8.0",
"dev": true,
"license": "Apache-2.0" "license": "Apache-2.0"
}, },
"node_modules/@aashutoshrathi/word-wrap": { "node_modules/@aashutoshrathi/word-wrap": {