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"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[display]="displayMode"
[node]="nodeResult"
[includeFields]="includeFields"
[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 { ActivatedRoute, Params, Router } from '@angular/router';
import { NodeEntry, NodePaging, Pagination, Node, SearchEntry } from '@alfresco/js-api';
import {
NotificationService,
UserPreferencesService,
PaginationComponent,
DisplayMode,
ShowHeaderMode,
FormRenderingService
} from '@alfresco/adf-core';
import { NotificationService, UserPreferencesService, PaginationComponent, ShowHeaderMode, FormRenderingService } from '@alfresco/adf-core';
import {
ContentService,
FolderCreatedEvent,
@@ -74,7 +67,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
showViewer = false;
showVersions = false;
allowDropFiles = true;
displayMode = DisplayMode.List;
includeFields = ['isFavorite', 'isLocked', 'aspectNames', 'definition'];
selectionModes = [
@@ -221,10 +213,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
if (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) {
this.router.navigate([this.navigationRoute, $event.value.id, 'display', this.displayMode]);
this.router.navigate([this.navigationRoute, $event.value.id]);
}
handlePermissionError(event: any) {
@@ -507,7 +495,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
if (this.currentFolderId === '-my-') {
this.router.navigate([this.navigationRoute, '']);
} else {
this.router.navigate([this.navigationRoute, this.currentFolderId, 'display', this.displayMode]);
this.router.navigate([this.navigationRoute, this.currentFolderId]);
}
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". |
| 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 |
| 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' |
| filterValue | `any` | | Initial value for filter. |
| 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>
```
### 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
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)

122
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)
- [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events)
- [Card view](#card-view)
- [Using events](#using-events)
- [Customizing the component's styles](#customizing-the-components-styles)
- [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.
```html
<adf-datatable ...>
<adf-datatable>
<data-column>
<!--Add your custom empty template here-->
<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:
```html
<adf-datatable ...>
<adf-datatable>
<adf-no-content-template>
<!--Add your custom empty template here-->
<ng-template>
@@ -332,12 +331,12 @@ You can also supply a `<adf-no-content-template>` or an
```
```html
<adf-datatable ...>
<adf-datatable>
<adf-empty-list>
<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-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
<ng-content></ng-content>
</adf-empty-list>
</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:
```html
<adf-datatable ...>
<adf-datatable>
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
@@ -360,9 +359,12 @@ while the data for the table is loading:
</adf-datatable>
```
```js
```ts
class MyComponent {
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;
}
}
```
@@ -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.
\###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:
```html
<adf-datatable ...>
<adf-datatable>
<data-column>
<!--Add your custom empty template here-->
<ng-template>
@@ -411,14 +413,14 @@ 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>`
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
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
|--------------------------|-------------------------------------------------------------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| actions | `boolean` | false | Toggles the data actions column. |
| 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. |
@@ -427,7 +429,6 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
| columns | `any[]` | \[] | The columns that the datatable will show. |
| 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 |
| 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. |
| 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). |
@@ -448,7 +449,7 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
### Events
| 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. |
| 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. |
@@ -478,7 +479,7 @@ 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.
| Name | Description |
| ---- | ----------- |
|-----------------|------------------------------------------------------|
| row-click | Raised when user clicks a row |
| row-dblclick | Raised when user double-clicks a row |
| row-select | Raised after user selects a row |
@@ -495,9 +496,11 @@ These events bubble up the component tree and can be handled by any parent compo
sorting-changed event contains
```ts
{
direction: "asc"
key: "timestamp"
sortingKey: ""
}
```
#### Drop Events
@@ -540,6 +543,7 @@ Given that DataTable raises bubbling DOM events, you can handle drop behavior fr
Where the implementation of the handlers can look like following:
```ts
class MyComponent {
onDragOver(event: CustomEvent) {
// always needed for custom drop handlers (!)
event.preventDefault();
@@ -551,6 +555,7 @@ onDrop(event: DataTableDropEvent) {
const { column, row, target } = event.detail;
// do something with the details
}
}
```
#### Example
@@ -564,26 +569,15 @@ onDrop(event: DataTableDropEvent) {
```
```ts
class MyComponent {
onRowClick(event) {
console.log(event);
}
}
```
![](../../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
#### 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:
```ts
```text
row: DataRow,
keyboardEvent: KeyboardEvent,
sender: any
@@ -604,7 +598,7 @@ Emitted when the user clicks a row.
Event properties:
```ts
```text
sender: any // DataTable instance
value: DataRow, // row clicked
event: Event // original HTML DOM event
@@ -613,9 +607,11 @@ event: Event // original HTML DOM event
Handler example:
```ts
class MyComponent {
onRowClicked(event: DataRowEvent) {
console.log(event.value);
}
}
```
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
@@ -626,7 +622,7 @@ Emitted when the user double-clicks a row.
Event properties:
```ts
```text
sender: any // DataTable instance
value: DataRow, // row clicked
event: Event // original HTML DOM event
@@ -635,9 +631,11 @@ event: Event // original HTML DOM event
Handler example:
```ts
class MyComponent {
onRowDblClicked(event: DataRowEvent) {
console.log(event.value);
}
}
```
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
@@ -651,7 +649,7 @@ You can provide all necessary content via the handler.
Event properties:
```ts
```text
value: {
row: DataRow,
col: DataColumn,
@@ -662,12 +660,14 @@ value: {
Handler example:
```ts
class MyComponent {
onShowRowContextMenu(event: DataCellEvent) {
event.value.actions = [
{ ... },
{ ... }
{ /*...*/ },
{ /*...*/ }
]
}
}
```
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
@@ -684,7 +684,7 @@ Requires the `actions` property to be set to `true`.
Event properties:
```ts
```text
value: {
row: DataRow,
action: any
@@ -719,6 +719,7 @@ corresponding menu item.
```ts
import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
class MyComponent {
onShowRowActionsMenu(event: DataCellEvent) {
let myAction = {
title: 'Hello'
@@ -735,6 +736,7 @@ onExecuteRowAction(event: DataRowActionEvent) {
console.log(args.action);
window.alert(`My custom action: ${args.action.title}`);
}
}
```
![](../../docassets/images/datatable-actions-ui.png)
@@ -756,19 +758,19 @@ sections.
#### 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)
However, you can also truncate the text within these cells using the `adf-ellipsis-cell` class in the desired column:
```js
```json
{
type: 'text',
key: 'createdOn',
title: 'Created On',
sortable: true,
cssClass: 'adf-ellipsis-cell'
"type": "text",
"key": "createdOn",
"title": "Created On",
"sortable": true,
"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
growing by using the `adf-no-grow-cell` class.
```js
```json
{
type: 'date',
key: 'created',
title: 'Created On',
cssClass: 'adf-ellipsis-cell adf-no-grow-cell'
"type": "date",
"key": "created",
"title": "Created On",
"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:
```js
```text
{
type: 'text',
key: 'name',
@@ -866,27 +868,28 @@ Assume we want to merge two properties and show them in a text format
```json
{
name: 'I am using custom resolver',
users: [
"name": "I am using custom resolver",
"users": [
{
firstName: 'Captain',
lastName: 'America'
"firstName": "Captain",
"lastName": "America"
},
{
firstName: 'John',
lastName: 'Wick'
"firstName": "John",
"lastName": "Wick"
}
],
status: [
'I am here to save the world.. By world means AMERICA',
'That nobody is John Wick…'
"status": [
"I am here to save the world.. By world means AMERICA",
"That nobody is John Wick…"
]
}
```
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 {
const value = row.getValue(col.key);
@@ -898,6 +901,7 @@ here is the sample resolver which merge the users property and status and it wil
return value;
}
}
```
```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`:
```json
{
"dateValues": {
"defaultTooltipDateFormat": "medium"
}
}
```
## 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 './dropdown-breadcrumb.component';
export * from './navigable-component.interface';
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"
[showMainDatatableActions]="true"
[loading]="loading"
[display]="display"
[noPermission]="noPermission"
[showHeader]="showHeader"
[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();
});
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', () => {
documentList.currentFolderId = 'id-folder';
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,
DataSorting,
DataTableComponent,
DisplayMode,
ShowHeaderMode,
PaginatedComponent,
AppConfigService,
@@ -61,7 +60,6 @@ import {
DataColumn
} from '@alfresco/adf-core';
import { NodesApiService } from '../../common/services/nodes-api.service';
import { Node, NodeEntry, NodePaging, NodesApi, Pagination } from '@alfresco/js-api';
import { Subject, BehaviorSubject, of } from 'rxjs';
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 { PermissionStyleModel } from './../models/permissions-style.model';
import { NodeEntityEvent, NodeEntryEvent } from './node.event';
import { NavigableComponentInterface } from '../../breadcrumb/navigable-component.interface';
import { FilterSearch } from './../../search/models/filter-search.interface';
import { RowFilter } from '../data/row-filter.model';
import { DocumentListService } from '../services/document-list.service';
@@ -97,7 +94,7 @@ const BYTES_TO_MB_CONVERSION_VALUE = 1048576;
encapsulation: ViewEncapsulation.None,
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 DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
@@ -133,10 +130,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
@Input()
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
* 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;
}
isMobile(): boolean {
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;
}
private onDataReady(nodePaging: NodePaging) {
this.ready.emit(nodePaging);
this.pagination.next(nodePaging.list.pagination);

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

@@ -1,8 +1,7 @@
<div
role="grid"
*ngIf="data" class="adf-full-width"
[class.adf-datatable-card]="display === 'gallery'"
[class.adf-datatable-list]="display === 'list'"
*ngIf="data"
class="adf-full-width adf-datatable-list"
[class.adf-sticky-header]="isStickyHeaderEnabled()"
[class.adf-datatable--empty]="(isEmpty() && !isHeaderVisible()) || loading"
[class.adf-datatable--empty--header-visible]="isEmpty() && isHeaderVisible()">
@@ -14,7 +13,6 @@
data-automation-id="datatable-row-header"
[disabled]="!isHeaderVisible()"
class="adf-datatable-row"
*ngIf="display === 'list'"
role="row">
<!-- Actions (left) -->
@@ -143,17 +141,6 @@
</div>
</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
@@ -382,10 +369,7 @@
</ng-container>
</div>
</adf-datatable-row>
<div *ngIf="isEmpty()"
role="row"
[class.adf-datatable-row]="display === 'list'"
[class.adf-datatable-card-empty]="display === 'gallery'">
<div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
<div class="adf-no-content-container adf-datatable-cell" role="gridcell">
<ng-template *ngIf="noContentTemplate"
ngFor [ngForOf]="[data]"
@@ -394,14 +378,10 @@
<ng-content select="adf-empty-list"></ng-content>
</div>
</div>
<div *ngFor="let row of fakeRows"
class="adf-datatable-row adf-datatable-row-empty-card">
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
role="row"
[class.adf-datatable-row]="display === 'list'"
class="adf-no-permission__row">
class="adf-datatable-row adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noPermissionTemplate"
ngFor [ngForOf]="[data]"
@@ -409,9 +389,7 @@
</ng-template>
</div>
</div>
<div *ngIf="loading"
[class.adf-datatable-row]="display === 'list'"
[class.adf-datatable-card-loading]="display === 'gallery'">
<div *ngIf="loading" class="adf-datatable-row">
<div class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="loadingTemplate"
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 {
display: flex;
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 {
display: flex;
flex: 1;
flex-grow: 1;
background: var(--adf-theme-background-hover-color);
border: dotted 1px rgba(0, 0, 0, 0.25);
min-height: 55px;

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

@@ -183,20 +183,6 @@ describe('DataTable', () => {
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', () => {
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', () => {
const dropList = getDropList();
spyOn(dropList, 'getSortedItems').and.returnValue([{
spyOn(dropList, 'getSortedItems').and.returnValue([
{
disabled: true
}, {
},
{
disabled: false
}] as CdkDrag[]);
}
] as CdkDrag[]);
expect(dropList.sortPredicate(1, undefined, dropList)).toBeTrue();
});
it('should sortPredicate from CdkDropList return false if column is disabled', () => {
const dropList = getDropList();
spyOn(dropList, 'getSortedItems').and.returnValue([{
spyOn(dropList, 'getSortedItems').and.returnValue([
{
disabled: true
}, {
},
{
disabled: true
}] as CdkDrag[]);
}
] as CdkDrag[]);
expect(dropList.sortPredicate(1, undefined, dropList)).toBeFalse();
});
@@ -955,12 +947,6 @@ describe('DataTable', () => {
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', () => {
expect(dataTable.isColumnSorted(null, 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',
decorators: [
moduleMetadata({
imports: [
CoreStoryModule,
DataTableModule,
MatProgressSpinnerModule,
BrowserAnimationsModule,
RouterTestingModule
]
imports: [CoreStoryModule, DataTableModule, MatProgressSpinnerModule, BrowserAnimationsModule, RouterTestingModule]
})
],
argTypes: {
@@ -136,9 +130,7 @@ export default {
sorting: {
control: 'object',
defaultValue: ['id', 'asc'],
description: 'A string array.\n\n' +
'First element describes the key to sort by.\n\n' +
'Second element describes the sorting order.',
description: 'A string array.\n\n' + 'First element describes the key to sort by.\n\n' + 'Second element describes the sorting order.',
table: {
type: { summary: 'any[]' },
defaultValue: { summary: '[]' }
@@ -149,11 +141,27 @@ export default {
description: 'The columns that the datatable will show.',
defaultValue: [
{ 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: '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 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: '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' },
@@ -257,7 +265,8 @@ export default {
},
rowStyle: {
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: {
category: 'Custom Row Styles',
type: { summary: '{ [key: string]: any }' }
@@ -365,9 +374,8 @@ export default {
}
} as Meta<DataTableComponent>;
const insertContentToTemplate = (content: string): string => (
const insertContentToTemplate = (content: string): string =>
`<adf-datatable
[display]=display
[rows]=rows
[sorting]=sorting
[columns]=columns
@@ -392,8 +400,7 @@ const insertContentToTemplate = (content: string): string => (
(columnOrderChanged)=columnOrderChanged($event)
>
${content}
</adf-datatable>`
);
</adf-datatable>`;
export const defaultDatatable: Story<DataTableComponent> = (args: DataTableComponent) => ({
props: args,

58
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 { ResizeEvent } from '../../directives/resizable/types';
// eslint-disable-next-line no-shadow
export enum DisplayMode {
List = 'list',
Gallery = 'gallery'
}
// eslint-disable-next-line no-shadow
export enum ShowHeaderMode {
Never = 'never',
@@ -95,10 +89,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Input()
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. */
@Input()
rows: any[] = [];
@@ -259,9 +249,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
hoveredHeaderColumnIndex = -1;
resizingColumnIndex = -1;
/** This array of fake rows fix the flex layout for the gallery view */
fakeRows = [];
private keyManager: FocusKeyManager<DataTableRowComponent>;
private clickObserver: Observer<DataRowEvent>;
private click$: Observable<DataRowEvent>;
@@ -299,7 +286,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
})
);
}
this.datatableLayoutFix();
this.setTableSchema();
}
@@ -347,10 +333,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
if (this.isPropertyChanged(changes['sorting'])) {
this.setTableSorting(changes['sorting'].currentValue);
}
if (this.isPropertyChanged(changes['display'])) {
this.datatableLayoutFix();
}
}
isColumnSortActive(column: DataColumn): boolean {
@@ -514,7 +496,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
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);
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) {
if (this.data) {
if (this.isSingleSelectionMode()) {
@@ -726,10 +704,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
return null;
}
iconAltTextKey(value: string): string {
return value ? 'ICONS.' + value.substring(value.lastIndexOf('/') + 1).replace(/\.[a-z]+/, '') : '';
}
isColumnSorted(col: DataColumn, direction: string): boolean {
if (col && direction) {
const sorting = this.data.getSorting();
@@ -779,10 +753,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
return row.isDropTarget === true;
}
hasSelectionMode(): boolean {
return this.isSingleSelectionMode() || this.isMultiSelectionMode();
}
isSingleSelectionMode(): boolean {
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) {
if (row) {
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() {
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 {
return sorting &&
(sorting.key === col.key || sorting.key === col.sortingKey) &&
sorting.direction?.toLocaleLowerCase() === direction;
};
return sorting && (sorting.key === col.key || sorting.key === col.sortingKey) && sorting.direction?.toLocaleLowerCase() === direction;
}
get isResizing(): boolean {
return this.resizingColumnIndex >= 0;

3
package-lock.json generated
View File

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