mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-7462] cleanup deprecated api for DataTable and DocumentList (#9500)
* 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:
@@ -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]"
|
||||
|
@@ -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;
|
||||
|
@@ -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([{
|
||||
disabled: true
|
||||
}, {
|
||||
disabled: false
|
||||
}] as CdkDrag[]);
|
||||
spyOn(dropList, 'getSortedItems').and.returnValue([
|
||||
{
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
disabled: false
|
||||
}
|
||||
] 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([{
|
||||
disabled: true
|
||||
}, {
|
||||
disabled: true
|
||||
}] as CdkDrag[]);
|
||||
spyOn(dropList, 'getSortedItems').and.returnValue([
|
||||
{
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
disabled: true
|
||||
}
|
||||
] 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();
|
||||
|
@@ -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,
|
||||
|
@@ -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[] = [];
|
||||
@@ -241,8 +231,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
||||
/**
|
||||
* Flag that indicates if the datatable should be blurred when resizing.
|
||||
*/
|
||||
@Input()
|
||||
blurOnResize = true;
|
||||
@Input()
|
||||
blurOnResize = true;
|
||||
|
||||
headerFilterTemplate: TemplateRef<any>;
|
||||
noContentTemplate: TemplateRef<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;
|
||||
|
Reference in New Issue
Block a user