[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:
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

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]"

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;

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([{
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();

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,

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[] = [];
@@ -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;