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

Revert "[ACS-7381][ADF] Break DataTable dependency on Material Module (#9657)" (#9866)

Browse Source 
This reverts commit f27d62585b.
This commit is contained in:
Maurizio Vitale
2024-06-25 13:53:14 +01:00
committed by GitHub
parent fb275d94c0
commit f9aadde4bf
82 changed files with 1260 additions and 1400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.html
View File

@@ -1,11 +1,10 @@
<ng-container *ngIf="value$ | async as amount">
<span [title]="amount">
{{
amount | currency:
(currencyConfig?.code || defaultCurrencyConfig.code):
(currencyConfig?.display || defaultCurrencyConfig.display):
(currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):
(currencyConfig?.locale || defaultCurrencyConfig.locale)
{{ amount | currency:
(currencyConfig?.code || defaultCurrencyConfig.code):
(currencyConfig?.display || defaultCurrencyConfig.display):
(currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):
(currencyConfig?.locale || defaultCurrencyConfig.locale)
}}
</span>
</ng-container>

19
lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.spec.ts
View File

@@ -15,13 +15,13 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AmountCellComponent } from './amount-cell.component';
import { CurrencyConfig } from '../../data/data-column.model';
import { BehaviorSubject } from 'rxjs';
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePL from '@angular/common/locales/pl';
import { LOCALE_ID } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BehaviorSubject } from 'rxjs';
import { CurrencyConfig } from '../../data/data-column.model';
import { AmountCellComponent } from './amount-cell.component';
describe('AmountCellComponent', () => {
let component: AmountCellComponent;
@@ -58,14 +58,7 @@ describe('AmountCellComponent', () => {
});
it('should render currency value with custom currency code', () => {
renderAndCheckCurrencyValue(
{
code: 'MY CUSTOM CURRENCY',
display: 'symbol'
},
123.45,
'MY CUSTOM CURRENCY123.45'
);
renderAndCheckCurrencyValue({ code: 'MY CUSTOM CURRENCY', display: 'symbol' }, 123.45, 'MY CUSTOM CURRENCY123.45');
});
it('should render currency value with custom display code', () => {

10
lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.ts
View File

@@ -15,15 +15,15 @@
* limitations under the License.
*/
import { AsyncPipe, CurrencyPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, DEFAULT_CURRENCY_CODE, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { CurrencyConfig } from '../../data/data-column.model';
import { ChangeDetectionStrategy, Component, ViewEncapsulation, Input, OnInit, DEFAULT_CURRENCY_CODE, inject } from '@angular/core';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { CurrencyConfig } from '../../data/data-column.model';
import { CommonModule } from '@angular/common';
@Component({
selector: 'adf-amount-cell',
standalone: true,
imports: [AsyncPipe, CurrencyPipe, NgIf],
imports: [CommonModule],
selector: 'adf-amount-cell',
templateUrl: './amount-cell.component.html',
host: { class: 'adf-datatable-content-cell' },
encapsulation: ViewEncapsulation.None,

4
lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.spec.ts
View File

@@ -16,9 +16,9 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { BooleanCellComponent } from './boolean-cell.component';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
describe('BooleanCellComponent', () => {
let component: BooleanCellComponent;

9
lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.ts
View File

@@ -15,15 +15,15 @@
* limitations under the License.
*/
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
import { BooleanPipe } from '../../../pipes';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { CommonModule } from '@angular/common';
import { BooleanPipe } from '../../../pipes/boolean.pipe';
@Component({
selector: 'adf-boolean-cell',
standalone: true,
imports: [AsyncPipe, BooleanPipe, NgIf],
imports: [CommonModule, BooleanPipe],
selector: 'adf-boolean-cell',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container *ngIf="value$ | async | adfBoolean as value">
@@ -36,6 +36,7 @@ import { DataTableCellComponent } from '../datatable-cell/datatable-cell.compone
host: { class: 'adf-datatable-content-cell' }
})
export class BooleanCellComponent extends DataTableCellComponent implements OnInit {
ngOnInit() {
super.ngOnInit();
}

69
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html
View File

@@ -1,17 +1,21 @@
<div class="adf-columns-selector"
data-automation-id="adf-columns-selector"
tabindex="0"
role="button"
(keyup.enter)="$event.stopPropagation()"
(click)="$event.stopPropagation();">
<div
class="adf-columns-selector"
data-automation-id="adf-columns-selector"
tabindex="0"
role="button"
(keyup.enter)="$event.stopPropagation()"
(click)="$event.stopPropagation();"
>
<div class="adf-columns-selector-header">
<span class="adf-columns-selector-header-label">
{{ 'ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS' | translate }}
{{"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS" | translate}}
</span>
<button data-automation-id="adf-columns-selector-close-button"
mat-icon-button
(click)="closeMenu()">
<button
data-automation-id="adf-columns-selector-close-button"
mat-icon-button
(click)="closeMenu()"
>
<mat-icon>close</mat-icon>
</button>
</div>
@@ -19,28 +23,32 @@
<mat-divider class="adf-columns-selector-divider"></mat-divider>
<div class="adf-columns-selector-search-input-container">
<mat-icon class="adf-columns-selector-search-input-icon">
<mat-icon
class="adf-columns-selector-search-input-icon">
search
</mat-icon>
<input [formControl]="searchInputControl"
class="adf-columns-selector-search-input"
data-automation-id="adf-columns-selector-search-input"
type="text"
[placeholder]="'ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH' | translate">
<input
[formControl]="searchInputControl"
class="adf-columns-selector-search-input"
data-automation-id="adf-columns-selector-search-input"
type="text"
[placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
</div>
<div class="adf-columns-selector-list-container">
<ng-container *ngFor="let column of columnItems">
<div *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
class="adf-columns-selector-list-item">
<mat-checkbox color="primary"
class="adf-columns-selector-column-checkbox"
[attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
[checked]="!column.isHidden"
[disabled]="isCheckboxDisabled(column)"
(change)="changeColumnVisibility(column)">
<div class="adf-columns-selector-list-content">{{ translatedTitle }}</div>
<div
*ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
class="adf-columns-selector-list-item">
<mat-checkbox
color="primary"
class="adf-columns-selector-column-checkbox"
[attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
[checked]="!column.isHidden"
[disabled]="isCheckboxDisabled(column)"
(change)="changeColumnVisibility(column)">
<div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
</mat-checkbox>
</div>
</ng-container>
@@ -49,11 +57,12 @@
<mat-divider class="adf-columns-selector-divider"></mat-divider>
<div class="adf-columns-selector-footer">
<button mat-flat-button
data-automation-id="adf-columns-selector-apply-button"
color="primary"
(click)="apply()">
{{ 'ADF-DATATABLE.COLUMNS_SELECTOR.APPLY' | translate }}
<button
mat-flat-button
data-automation-id="adf-columns-selector-apply-button"
color="primary"
(click)="apply()">
{{"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY" | translate}}
</button>
</div>
</div>

19
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts
View File

@@ -15,16 +15,16 @@
* limitations under the License.
*/
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
import { MatMenuTrigger } from '@angular/material/menu';
import { By } from '@angular/platform-browser';
import { Observable, Subject } from 'rxjs';
import { CoreTestingModule } from '../../../testing';
import { DataColumn } from '../../data/data-column.model';
import { ColumnsSelectorComponent } from './columns-selector.component';
import { DataColumn } from '../../data/data-column.model';
import { Observable, Subject } from 'rxjs';
import { MatMenuTrigger } from '@angular/material/menu';
import { CoreTestingModule } from '../../../testing';
import { By } from '@angular/platform-browser';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
describe('ColumnsSelectorComponent', () => {
let fixture: ComponentFixture<ColumnsSelectorComponent>;
@@ -40,7 +40,8 @@ describe('ColumnsSelectorComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, ColumnsSelectorComponent]
imports: [CoreTestingModule],
declarations: [ColumnsSelectorComponent]
}).compileComponents();
fixture = TestBed.createComponent(ColumnsSelectorComponent);

47
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts
View File

@@ -15,36 +15,16 @@
* limitations under the License.
*/
import { NgForOf, NgIf } from '@angular/common';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { UntypedFormControl } from '@angular/forms';
import { MatMenuTrigger } from '@angular/material/menu';
import { TranslateModule } from '@ngx-translate/core';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { FilterStringPipe } from '../../../pipes';
import { DataColumn } from '../../data/data-column.model';
@Component({
selector: 'adf-datatable-column-selector',
standalone: true,
templateUrl: './columns-selector.component.html',
styleUrls: ['./columns-selector.component.scss'],
imports: [
MatButtonModule,
TranslateModule,
MatIconModule,
MatDividerModule,
ReactiveFormsModule,
MatCheckboxModule,
NgIf,
NgForOf,
FilterStringPipe
],
encapsulation: ViewEncapsulation.None
})
export class ColumnsSelectorComponent implements OnInit, OnDestroy {
@@ -69,16 +49,23 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
searchQuery = '';
ngOnInit(): void {
this.mainMenuTrigger.menuOpened.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
const columns = this.columns.map((column) => ({ ...column }));
this.mainMenuTrigger.menuOpened.pipe(
takeUntil(this.onDestroy$)
).subscribe(() => {
const columns = this.columns.map(column => ({...column}));
this.columnItems = this.columnsSorting ? this.sortColumns(columns) : columns;
});
this.mainMenuTrigger.menuClosed.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
this.mainMenuTrigger.menuClosed.pipe(
takeUntil(this.onDestroy$)
).subscribe(() => {
this.searchInputControl.setValue('');
});
this.searchInputControl.valueChanges.pipe(debounceTime(300), takeUntil(this.onDestroy$)).subscribe((searchQuery) => {
this.searchInputControl.valueChanges.pipe(
debounceTime(300),
takeUntil(this.onDestroy$)
).subscribe((searchQuery) => {
this.searchQuery = searchQuery;
});
}
@@ -102,16 +89,12 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
}
isCheckboxDisabled(column: DataColumn): boolean {
return (
this.maxColumnsVisible &&
column.isHidden &&
this.maxColumnsVisible === this.columnItems.filter((dataColumn) => !dataColumn.isHidden).length
);
return this.maxColumnsVisible && column.isHidden && this.maxColumnsVisible === this.columnItems.filter(dataColumn => !dataColumn.isHidden).length;
}
private sortColumns(columns: DataColumn[]): DataColumn[] {
const shownColumns = columns.filter((column) => !column.isHidden);
const hiddenColumns = columns.filter((column) => column.isHidden);
const shownColumns = columns.filter(column => !column.isHidden);
const hiddenColumns = columns.filter(column => column.isHidden);
return [...shownColumns, ...hiddenColumns];
}

16
lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.html
View File

@@ -1,16 +0,0 @@
<ng-container>
<span *ngIf="copyContent; else defaultCell"
adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
[clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
[attr.aria-label]="value$ | async"
[title]="tooltip"
class="adf-datatable-cell-value">
{{ value$ | async }}
</span>
</ng-container>
<ng-template #defaultCell>
<span [title]="tooltip"
class="adf-datatable-cell-value">
{{ value$ | async }}
</span>
</ng-template>

12
lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts
View File

@@ -16,12 +16,12 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { DataRow } from '../../data/data-row.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { DataTableService } from '../../services/datatable.service';
import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
import { DataTableCellComponent } from './datatable-cell.component';
import { DataRow } from '../../data/data-row.model';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { DataTableService } from '../../services/datatable.service';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
describe('DataTableCellComponent', () => {
let component: DataTableCellComponent;
@@ -51,7 +51,7 @@ describe('DataTableCellComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [DataTableCellComponent],
declarations: [DataTableCellComponent],
providers: [DataTableService]
});

27
lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts
View File

@@ -15,23 +15,34 @@
* limitations under the License.
*/
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ClipboardModule } from '../../../clipboard';
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation, OnDestroy, inject } from '@angular/core';
import { DataColumn } from '../../data/data-column.model';
import { DataRow } from '../../data/data-row.model';
import { DataTableAdapter } from '../../data/datatable-adapter';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { DataTableService } from '../../services/datatable.service';
@Component({
selector: 'adf-datatable-cell',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './datatable-cell.component.html',
template: `
<ng-container>
<span
*ngIf="copyContent; else defaultCell"
adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
[clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
[attr.aria-label]="value$ | async"
[title]="tooltip"
class="adf-datatable-cell-value"
>{{ value$ | async }}</span
>
</ng-container>
<ng-template #defaultCell>
<span [title]="tooltip" class="adf-datatable-cell-value">{{ value$ | async }}</span>
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
imports: [ClipboardModule, AsyncPipe, NgIf],
host: { class: 'adf-datatable-content-cell' }
})
export class DataTableCellComponent implements OnInit, OnDestroy {

12
lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.spec.ts
View File

@@ -15,9 +15,9 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataRow } from '../../data/data-row.model';
import { DataTableRowComponent } from './datatable-row.component';
import { DataRow } from '../../data/data-row.model';
import { TestBed, ComponentFixture } from '@angular/core/testing';
describe('DataTableRowComponent', () => {
let fixture: ComponentFixture<DataTableRowComponent>;
@@ -31,7 +31,7 @@ describe('DataTableRowComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [DataTableRowComponent]
declarations: [DataTableRowComponent]
});
fixture = TestBed.createComponent(DataTableRowComponent);
@@ -51,14 +51,16 @@ describe('DataTableRowComponent', () => {
component.row = row;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected')).not.toBe(true);
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected'))
.not.toBe(true);
});
it('should not have select class when row data is null', () => {
row.isSelected = false;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected')).not.toBe(true);
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected'))
.not.toBe(true);
});
it('should set aria selected to true when row is selected', () => {

18
lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.ts
View File

@@ -15,13 +15,21 @@
* limitations under the License.
*/
import {
Component,
ViewEncapsulation,
ElementRef,
Input,
HostBinding,
HostListener,
Output,
EventEmitter
} from '@angular/core';
import { FocusableOption } from '@angular/cdk/a11y';
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
import { DataRow } from '../../data/data-row.model';
@Component({
selector: 'adf-datatable-row',
standalone: true,
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
host: {
@@ -49,13 +57,13 @@ export class DataTableRowComponent implements FocusableOption {
@HostBinding('attr.aria-selected')
get isAriaSelected(): boolean {
if (!this.row) {
return false;
return false;
}
return this.row.isSelected;
}
@HostBinding('attr.aria-label')
get ariaLabel(): string | null {
get ariaLabel(): string|null {
if (!this.row) {
return null;
}
@@ -67,7 +75,7 @@ export class DataTableRowComponent implements FocusableOption {
}
@HostBinding('attr.tabindex')
get tabindex(): number | null {
get tabindex(): number|null {
return this.disabled ? null : 0;
}

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

@@ -1,412 +1,406 @@
<div *ngIf="data"
role="table"
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()">
<thead *ngIf="isHeaderVisible()"
class="adf-datatable-header"
[ngClass]="{ 'adf-sr-only': !isHeaderVisible() }">
<adf-datatable-row cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListSortPredicate]="filterDisabledColumns"
data-automation-id="datatable-row-header"
[disabled]="!isHeaderVisible()"
class="adf-datatable-row">
<div
role="grid"
*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()">
<div *ngIf="isHeaderVisible()" class="adf-datatable-header" role="rowgroup" [ngClass]="{ 'adf-sr-only': !isHeaderVisible() }">
<adf-datatable-row
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListSortPredicate]="filterDisabledColumns"
data-automation-id="datatable-row-header"
[disabled]="!isHeaderVisible()"
class="adf-datatable-row"
role="row">
<!-- Actions (left) -->
<th *ngIf="actions && actionsPosition === 'left'"
class="adf-actions-column adf-datatable-cell-header"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate">
</th>
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header">
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</div>
<!-- Columns -->
<th *ngIf="multiselect"
class="adf-datatable-cell-header adf-datatable-checkbox">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate"
[checked]="isSelectAllChecked"
(change)="onSelectAllClick($event)"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate"
[matTooltip]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate">
</mat-checkbox>
</th>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
</div>
<th class="adf-datatable-cell--{{ col.type || 'text' }} {{ col.cssClass }} adf-datatable-cell-header adf-datatable-cell-data"
*ngFor="
let col of (data.getColumns() | filterOutEvery:'isHidden':true);
let columnIndex = index
let lastColumn = last"
[attr.data-automation-id]="'auto_id_' + col.key"
[ngClass]="{
'adf-sortable': col.sortable,
'adf-datatable__cursor--pointer': !isResizing,
'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}"
[ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}"
[attr.aria-label]="col.title | translate"
(click)="onColumnHeaderClick(col, $event)"
(keyup.enter)="onColumnHeaderClick(col, $event)"
[attr.tabindex]="isHeaderVisible() ? 0 : null"
[attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
cdkDrag
cdkDragLockAxis="x"
[cdkDragPreviewClass]="'adf-drag-preview'"
(cdkDragStarted)="isDraggingHeaderColumn = true"
(cdkDragDropped)="onDropHeaderColumn($event)"
[cdkDragDisabled]="!col.draggable"
(mouseenter)="hoveredHeaderColumnIndex = columnIndex"
(mouseleave)="hoveredHeaderColumnIndex = -1"
adf-drop-zone
dropTarget="header"
[dropColumn]="col">
<div
class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
*ngFor="
let col of (data.getColumns() | filterOutEvery:'isHidden':true);
let columnIndex = index
let lastColumn = last"
[attr.data-automation-id]="'auto_id_' + col.key"
[ngClass]="{
'adf-sortable': col.sortable,
'adf-datatable__cursor--pointer': !isResizing,
'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}"
[ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}"
[attr.aria-label]="col.title | translate"
(click)="onColumnHeaderClick(col, $event)"
(keyup.enter)="onColumnHeaderClick(col, $event)"
role="columnheader"
[attr.tabindex]="isHeaderVisible() ? 0 : null"
[attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
cdkDrag
cdkDragLockAxis="x"
(cdkDragStarted)="isDraggingHeaderColumn = true"
(cdkDragDropped)="onDropHeaderColumn($event)"
[cdkDragDisabled]="!col.draggable"
(mouseenter)="hoveredHeaderColumnIndex = columnIndex"
(mouseleave)="hoveredHeaderColumnIndex = -1"
adf-drop-zone dropTarget="header" [dropColumn]="col">
<div adf-resizable
#resizableElement="adf-resizable"
[coverPadding]="10"
(resizing)="onResizing($event, columnIndex)"
(resizeStart)="resizingColumnIndex = columnIndex"
(resizeEnd)="onResizingEnd()"
[attr.data-automation-id]="'auto_header_content_id_' + col.key"
class="adf-datatable-cell-header-content"
[ngClass]="{ 'adf-datatable-cell-header-content--hovered':
hoveredHeaderColumnIndex === columnIndex &&
!isDraggingHeaderColumn &&
!isResizing && col.sortable}">
<ng-container *ngIf="!col.header">
<span *ngIf="col.title"
[matTooltip]="col.title | translate"
class="adf-datatable-cell-value">{{ col.title | translate }}</span>
<div
adf-resizable
#resizableElement="adf-resizable"
[coverPadding]="10"
(resizing)="onResizing($event, columnIndex)"
(resizeStart)="resizingColumnIndex = columnIndex"
(resizeEnd)="onResizingEnd()"
[attr.data-automation-id]="'auto_header_content_id_' + col.key"
class="adf-datatable-cell-header-content"
[ngClass]="{ 'adf-datatable-cell-header-content--hovered':
hoveredHeaderColumnIndex === columnIndex &&
!isDraggingHeaderColumn &&
!isResizing && col.sortable}"
>
<ng-container *ngIf="!col.header">
<span *ngIf="col.title" matTooltip="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
<span *ngIf="col.title && col.sortable && isDraggingHeaderColumn"
class="adf-sr-only"
aria-live="polite">
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
<span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
</span>
<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate" [attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"></span>
</ng-container>
<div *ngIf="col.header" class="adf-datatable-cell-value">
<ng-template [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
</div>
<span
[class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
[class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')">
</span>
<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate"
[attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"></span>
</ng-container>
<ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
<div *ngIf="col.header" class="adf-datatable-cell-value">
<ng-template [ngTemplateOutlet]="col.header"
[ngTemplateOutletContext]="{ $implicit: col }"></ng-template>
<span
*ngIf="col.draggable"
cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
>
<adf-icon
*ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
value="adf:drag_indicator"
[attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-'+col.key">
</adf-icon>
</span>
</div>
<span [class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
[class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')"></span>
<ng-template *ngIf="allowFiltering"
[ngTemplateOutlet]="headerFilterTemplate"
[ngTemplateOutletContext]="{ $implicit: col }"></ng-template>
<span *ngIf="col.draggable"
cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }">
<adf-icon *ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
value="adf:drag_indicator"
[attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-' + col.key">
</adf-icon>
</span>
<div
*ngIf="isResizingEnabled && col.resizable && !lastColumn"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
adf-resize-handle
tabindex="0"
role="button"
(click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement">
<div class="adf-datatable__resize-handle--divider"></div>
</div>
<div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>
</div>
<div *ngIf="isResizingEnabled && col.resizable && !lastColumn"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
adf-resize-handle
role="separator"
(click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement">
<div class="adf-datatable__resize-handle--divider"></div>
</div>
<div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>
</th>
<!-- Header actions (right) -->
<th *ngIf="(actions && actionsPosition === 'right') || (mainActionTemplate && showMainDatatableActions)"
class="adf-actions-column adf-datatable-actions-menu adf-datatable-cell-header adf-datatable__actions-cell">
<ng-container *ngIf="mainActionTemplate">
<button data-automation-id="adf-datatable-main-menu-button"
[matTooltip]="'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate"
[attr.aria-label]="'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate"
<!-- Header actions (right) -->
<div
*ngIf="(actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions)"
class="adf-actions-column adf-datatable-actions-menu adf-datatable-cell-header adf-datatable__actions-cell"
>
<ng-container *ngIf="mainActionTemplate">
<button
data-automation-id="adf-datatable-main-menu-button"
matTooltip="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
mat-icon-button
#mainMenuTrigger="matMenuTrigger"
(keydown.enter)="mainMenuTrigger.openMenu()"
[matMenuTriggerFor]="mainMenu">
<mat-icon>view_week_outline</mat-icon>
</button>
<mat-menu #mainMenu>
<ng-container [ngTemplateOutlet]="mainActionTemplate"
[ngTemplateOutletContext]="{ $implicit: mainMenuTrigger }">
</ng-container>
</mat-menu>
</ng-container>
</th>
</adf-datatable-row>
</thead>
<tbody class="adf-datatable-body"
[ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing) }">
<ng-container *ngIf="!loading && !noPermission">
<adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
[row]="row"
(select)="onEnterKeyPressed(row, $event)"
(keyup)="onRowKeyUp(row, $event)"
(keydown)="onRowEnterKeyDown(row, $event)"
[adf-upload]="rowAllowsDrop(row)"
[adf-upload-data]="row"
[ngStyle]="rowStyle"
[ngClass]="getRowStyle(row)"
[attr.data-automation-id]="'datatable-row-' + idx"
(contextmenu)="markRowAsContextMenuSource(row)">
<!-- Actions (left) -->
<td *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-cell">
<button mat-icon-button
[matMenuTriggerFor]="menu"
#actionsMenuTrigger="matMenuTrigger"
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_left_' + idx"
[attr.data-automation-id]="'action_menu_' + idx">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item
*ngFor="let action of getRowActions(row)"
[attr.data-automation-id]="action.title"
[disabled]="action.disabled"
(click)="onExecuteRowAction(row, action)">
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
<span>{{ action.title | translate }}</span>
<mat-icon>view_week_outline</mat-icon>
</button>
</mat-menu>
</td>
<td *ngIf="multiselect"
class="adf-datatable-cell adf-datatable-checkbox">
<mat-checkbox [id]="'select-file-' + idx"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
(change)="onCheckboxChange(row, $event)"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
[matTooltip]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate">
</mat-checkbox>
</td>
<td *ngFor="
let col of (data.getColumns() | filterOutEvery:'isHidden':true),
let lastColumn = last;"
class="adf-datatable-cell adf-datatable-cell--{{ col.type || 'text' }} {{ col.cssClass }} adf-datatable-cell-data"
[attr.title]="col.title | translate"
[attr.data-automation-id]="getAutomationValue(row)"
[attr.aria-selected]="row.isSelected"
[attr.aria-label]="col.title ? (col.title | translate) : null"
(click)="onRowClick(row, $event)"
tabindex="0"
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
[adf-context-menu]="getContextMenuActions(row, col)"
[adf-context-menu-enabled]="contextMenu"
adf-drop-zone
dropTarget="cell"
[dropColumn]="col"
[dropRow]="row"
[ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}">
<div *ngIf="!col.template" class="adf-datatable-cell-container">
<ng-container [ngSwitch]="data.getColumnType(row, col)">
<div *ngSwitchCase="'image'" class="adf-cell-value">
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
</mat-icon>
<ng-template #no_iconvalue>
<mat-icon class="adf-datatable-selected"
*ngIf="row.isSelected && !multiselect; else no_selected_row"
svgIcon="selected">
</mat-icon>
<ng-template #no_selected_row>
<img class="adf-datatable-center-img-ie"
[attr.aria-label]="(data.getValue(row, col) | fileType) === 'disable' ?
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
}"
[attr.alt]="(data.getValue(row, col) | fileType) === 'disable' ?
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
}"
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event, row)">
</ng-template>
</ng-template>
</div>
<div *ngSwitchCase="'icon'" class="adf-cell-value">
<adf-icon-cell [data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-icon-cell>
</div>
<div *ngSwitchCase="'date'" class="adf-cell-value adf-cell-date"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
<adf-date-cell class="adf-datatable-center-date-column-ie"
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)"
[dateConfig]="col.dateConfig">
</adf-date-cell>
</div>
<div *ngSwitchCase="'location'"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'location' + data.getValue(row, col, resolverFn)">
<adf-location-cell [data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-location-cell>
</div>
<div *ngSwitchCase="'fileSize'"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col, resolverFn)">
<adf-filesize-cell class="adf-datatable-center-size-column-ie"
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-filesize-cell>
</div>
<div *ngSwitchCase="'text'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'text_' + data.getValue(row, col, resolverFn)">
<adf-datatable-cell [copyContent]="col.copyContent"
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-datatable-cell>
</div>
<div *ngSwitchCase="'boolean'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'boolean_' + data.getValue(row, col, resolverFn)">
<adf-boolean-cell [data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-boolean-cell>
</div>
<div *ngSwitchCase="'json'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1">
<adf-json-cell [editable]="col.editable"
[data]="data"
[column]="col"
[resolverFn]="resolverFn"
[row]="row">
</adf-json-cell>
</div>
<div *ngSwitchCase="'amount'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'amount_' + data.getValue(row, col, resolverFn)">
<adf-amount-cell [data]="data"
[column]="col"
[resolverFn]="resolverFn"
[row]="row"
[currencyConfig]="col.currencyConfig">
</adf-amount-cell>
</div>
<div *ngSwitchCase="'number'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'number_' + data.getValue(row, col, resolverFn)">
<adf-number-cell [data]="data"
[column]="col"
[resolverFn]="resolverFn"
[row]="row"
[decimalConfig]="col.decimalConfig">
</adf-number-cell>
</div>
<span *ngSwitchDefault class="adf-cell-value">
<!-- empty cell for unknown column type -->
</span>
</ng-container>
</div>
<div *ngIf="col.template" class="adf-datatable-cell-container">
<div class="adf-cell-value"
[attr.tabindex]="col.focus ? 0 : null">
<ng-container [ngTemplateOutlet]="col.template"
[ngTemplateOutletContext]="{
$implicit: { data, row, col },
value: data.getValue(row, col, resolverFn)
}">
<mat-menu #mainMenu>
<ng-container
[ngTemplateOutlet]="mainActionTemplate"
[ngTemplateOutletContext]="{
$implicit: mainMenuTrigger
}">
</ng-container>
</div>
</div>
</td>
</mat-menu>
<span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</ng-container>
</div>
<!-- Row actions (right) -->
<td *ngIf="(actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions)"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
</adf-datatable-row>
</div>
<ng-container *ngIf="(actions && actionsPosition === 'right')">
<button mat-icon-button
[matMenuTriggerFor]="menu"
#actionsMenuTrigger="matMenuTrigger"
<div
class="adf-datatable-body"
[ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing) }"
role="rowgroup">
<ng-container *ngIf="!loading && !noPermission">
<adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
[row]="row"
(select)="onEnterKeyPressed(row, $event)"
(keyup)="onRowKeyUp(row, $event)"
(keydown)="onRowEnterKeyDown(row, $event)"
[adf-upload]="rowAllowsDrop(row)"
[adf-upload-data]="row"
[ngStyle]="rowStyle"
[ngClass]="getRowStyle(row)"
[attr.data-automation-id]="'datatable-row-' + idx"
(contextmenu)="markRowAsContextMenuSource(row)">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_right_' + idx"
[attr.data-automation-id]="'action_menu_' + idx"
(keydown.enter)="actionsMenuTrigger.openMenu()">
[attr.id]="'action_menu_left_' + idx"
[attr.data-automation-id]="'action_menu_' + idx">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let action of getRowActions(row)"
[attr.data-automation-id]="action.title"
[attr.aria-label]="action.title | translate"
[disabled]="action.disabled"
(click)="onExecuteRowAction(row, action)">
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
<span>{{ action.title | translate }}</span>
</button>
</mat-menu>
</ng-container>
</td>
</adf-datatable-row>
<tr *ngIf="isEmpty()" class="adf-datatable-row">
<td class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noContentTemplate"
</div>
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox">
<mat-checkbox
[id]="'select-file-' + idx"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
role="checkbox"
(change)="onCheckboxChange(row, $event)"
class="adf-checkbox-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
</mat-checkbox>
</label>
<div *ngFor="
let col of (data.getColumns() | filterOutEvery:'isHidden':true),
let lastColumn = last;"
role="gridcell"
class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
[attr.title]="col.title | translate"
[attr.data-automation-id]="getAutomationValue(row)"
[attr.aria-selected]="row.isSelected"
[attr.aria-label]="col.title ? (col.title | translate) : null"
(click)="onRowClick(row, $event)"
tabindex="0"
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
[adf-context-menu]="getContextMenuActions(row, col)"
[adf-context-menu-enabled]="contextMenu"
adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row"
[ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}">
<div *ngIf="!col.template" class="adf-datatable-cell-container">
<ng-container [ngSwitch]="data.getColumnType(row, col)">
<div *ngSwitchCase="'image'" class="adf-cell-value">
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
</mat-icon>
<ng-template #no_iconvalue>
<mat-icon class="adf-datatable-selected"
*ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected">
</mat-icon>
<ng-template #no_selected_row>
<img class="adf-datatable-center-img-ie"
[attr.aria-label]="(data.getValue(row, col) | fileType) === 'disable' ?
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
}"
[attr.alt]="(data.getValue(row, col) | fileType) === 'disable' ?
('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
}"
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event, row)">
</ng-template>
</ng-template>
</div>
<div *ngSwitchCase="'icon'" class="adf-cell-value">
<adf-icon-cell
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-icon-cell>
</div>
<div *ngSwitchCase="'date'" class="adf-cell-value adf-cell-date" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'date_' + (data.getValue(row, col, resolverFn) | adfLocalizedDate: 'medium') ">
<adf-date-cell class="adf-datatable-center-date-column-ie"
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)"
[dateConfig]="col.dateConfig">
</adf-date-cell>
</div>
<div *ngSwitchCase="'location'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'location' + data.getValue(row, col, resolverFn)">
<adf-location-cell
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-location-cell>
</div>
<div *ngSwitchCase="'fileSize'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col, resolverFn)">
<adf-filesize-cell class="adf-datatable-center-size-column-ie"
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-filesize-cell>
</div>
<div *ngSwitchCase="'text'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'text_' + data.getValue(row, col, resolverFn)">
<adf-datatable-cell
[copyContent]="col.copyContent"
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-datatable-cell>
</div>
<div *ngSwitchCase="'boolean'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'boolean_' + data.getValue(row, col, resolverFn)">
<adf-boolean-cell
[data]="data"
[column]="col"
[row]="row"
[resolverFn]="resolverFn"
[tooltip]="getCellTooltip(row, col)">
</adf-boolean-cell>
</div>
<div *ngSwitchCase="'json'" [attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1" class="adf-cell-value">
<adf-json-cell
[editable]="col.editable"
[data]="data"
[column]="col"
[resolverFn]="resolverFn"
[row]="row">
</adf-json-cell>
</div>
<div *ngSwitchCase="'amount'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'amount_' + data.getValue(row, col, resolverFn)">
<adf-amount-cell
[data]="data"
[column]="col"
[resolverFn]="resolverFn"
[row]="row"
[currencyConfig]="col.currencyConfig">
</adf-amount-cell>
</div>
<div *ngSwitchCase="'number'"
class="adf-cell-value"
[attr.tabindex]="data.getValue(row, col, resolverFn)? 0 : -1"
[attr.data-automation-id]="'number_' + data.getValue(row, col, resolverFn)">
<adf-number-cell
[data]="data"
[column]="col"
[resolverFn]="resolverFn"
[row]="row"
[decimalConfig]="col.decimalConfig">
</adf-number-cell>
</div>
<span *ngSwitchDefault class="adf-cell-value">
<!-- empty cell for unknown column type -->
</span>
</ng-container>
</div>
<div *ngIf="col.template" class="adf-datatable-cell-container">
<div class="adf-cell-value" [attr.tabindex]="col.focus ? 0 : null">
<ng-container
[ngTemplateOutlet]="col.template"
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col, resolverFn) }">
</ng-container>
</div>
</div>
</div>
<!-- Row actions (right) -->
<div *ngIf="
(actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions)"
role="gridcell"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
<ng-container *ngIf="(actions && actionsPosition === 'right')">
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_right_' + idx"
[attr.data-automation-id]="'action_menu_' + idx"
(keydown.enter)="actionsMenuTrigger.openMenu()">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let action of getRowActions(row)"
[attr.data-automation-id]="action.title"
[attr.aria-label]="action.title | translate"
[disabled]="action.disabled"
(click)="onExecuteRowAction(row, action)">
<mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
<span>{{ action.title | translate }}</span>
</button>
</mat-menu>
</ng-container>
</div>
</adf-datatable-row>
<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]"
[ngForTemplate]="noContentTemplate">
</ng-template>
<ng-content select="adf-empty-list"></ng-content>
</div>
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
role="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]"
[ngForTemplate]="noContentTemplate">
[ngForTemplate]="noPermissionTemplate">
</ng-template>
<ng-content select="adf-empty-list"></ng-content>
</td>
</tr>
</ng-container>
<tr *ngIf="!loading && noPermission"
class="adf-datatable-row adf-no-permission__row">
<td class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="noPermissionTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="noPermissionTemplate">
</ng-template>
</td>
</tr>
<tr *ngIf="loading" class="adf-datatable-row">
<td class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="loadingTemplate">
</ng-template>
</td>
</tr>
</tbody>
</div>
</div>
<div *ngIf="loading" class="adf-datatable-row">
<div class="adf-no-content-container adf-datatable-cell">
<ng-template *ngIf="loadingTemplate"
ngFor [ngForOf]="[data]"
[ngForTemplate]="loadingTemplate">
</ng-template>
</div>
</div>
</div>
</div>

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

@@ -283,11 +283,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
padding-right: 15px;
}
.adf-datatable-checkbox {
display: flex;
justify-content: center;
}
.adf-cell-value {
display: flex;
min-height: inherit;
@@ -438,13 +433,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
/* mobile phone */
@media all and (width <= 768px) {
@media all and (max-width: 768px) {
.adf-desktop-only.adf-ellipsis-cell {
display: none;
}
}
@media (width <= 768px) {
@media (max-device-width: 768px) {
.adf-desktop-only.adf-ellipsis-cell {
display: none;
}
@@ -500,6 +495,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
right: -3px;
}
&.adf-datatable-checkbox {
display: flex;
align-items: center;
}
.adf-datatable-cell-header-content {
display: flex;
flex-grow: 1;
@@ -557,12 +557,26 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
}
.adf-datatable-cell-header.adf-drag-preview {
border-radius: 6px;
background-color: var(--theme-background-color);
.cdk-drag-preview {
&.adf-datatable-cell-header {
border-radius: 6px;
background-color: var(--theme-background-color);
@include mat.elevation-transition;
@include mat.elevation(4);
@include mat.elevation-transition;
@include mat.elevation(4);
}
}
/* [Accessibility] Material checkbox labels */
.adf-checkbox-sr-only .mat-checkbox-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.adf-sticky-header {
@@ -606,7 +620,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
align-items: center;
height: inherit;
.adf-datatable-body[role='rowgroup'] {
.adf-datatable-body[role="rowgroup"] {
.adf-datatable-row {
height: 100%;
background-color: var(--adf-theme-background-card-color);
@@ -646,7 +660,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
}
@media screen and (width <= 380px) {
@media screen and (max-width: 380px) {
.adf-datatable-header {
max-height: 50%;
}

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

@@ -15,37 +15,34 @@
* limitations under the License.
*/
import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { Component, NO_ERRORS_SCHEMA, QueryList, SimpleChange, TemplateRef, ViewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
import { By } from '@angular/platform-browser';
import { take } from 'rxjs/operators';
import { domSanitizerMock } from '../../../mock/dom-sanitizer-mock';
import { matIconRegistryMock } from '../../../mock/mat-icon-registry-mock';
import { CoreTestingModule } from '../../../testing';
import { DataColumnComponent, DataColumnListComponent } from '../../data-column';
import { DataColumn } from '../../data/data-column.model';
import { DataRow } from '../../data/data-row.model';
import { DataSorting } from '../../data/data-sorting.model';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
import { DataTableComponent, ShowHeaderMode } from './datatable.component';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { DataColumnListComponent } from '../../data-column/data-column-list.component';
import { DataColumnComponent } from '../../data-column/data-column.component';
import { domSanitizerMock } from '../../../mock/dom-sanitizer-mock';
import { matIconRegistryMock } from '../../../mock/mat-icon-registry-mock';
import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import { take } from 'rxjs/operators';
import { By } from '@angular/platform-browser';
import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
@Component({
selector: 'adf-custom-column-template-component',
template: ` <ng-template #tmplRef></ng-template>`
})
@Component({ selector: 'adf-custom-column-template-component', template: ` <ng-template #tmplRef></ng-template> ` })
class CustomColumnTemplateComponent {
@ViewChild('tmplRef', { static: true }) templateRef: TemplateRef<any>;
}
@Component({
selector: 'adf-custom-column-header-component',
template: ` <ng-template #tmplRef> CUSTOM HEADER</ng-template>`
template: ` <ng-template #tmplRef> CUSTOM HEADER </ng-template> `
})
class CustomColumnHeaderComponent {
@ViewChild('tmplRef', { static: true }) templateRef: TemplateRef<any>;
@@ -317,12 +314,7 @@ describe('DataTable', () => {
});
it('should emit "sorting-changed" DOM event', (done) => {
const column = new ObjectDataColumn({
key: 'name',
sortable: true,
direction: 'asc',
sortingKey: 'displayName'
});
const column = new ObjectDataColumn({ key: 'name', sortable: true, direction: 'asc', sortingKey: 'displayName' });
dataTable.data = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [column]);
dataTable.data.setSorting(new DataSorting('name', 'desc'));
@@ -526,15 +518,7 @@ describe('DataTable', () => {
it('should unselect the row with [multiple] selection mode and modifier key', (done) => {
dataTable.selectionMode = 'multiple';
dataTable.data = new ObjectDataTableAdapter(
[
{
name: '1',
isSelected: true
}
],
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.data = new ObjectDataTableAdapter([{ name: '1', isSelected: true }], [new ObjectDataColumn({ key: 'name' })]);
const rows = dataTable.data.getRows();
rows[0].isSelected = true;
@@ -547,7 +531,8 @@ describe('DataTable', () => {
dataTable.onRowClick(rows[0], {
metaKey: true,
preventDefault: () => {}
preventDefault: () => {},
composedPath: () => []
} as any);
});
@@ -588,16 +573,7 @@ describe('DataTable', () => {
it('should select multiple rows with [multiple] selection mode and modifier key', (done) => {
dataTable.selectionMode = 'multiple';
dataTable.data = new ObjectDataTableAdapter(
[
{
name: '1',
isSelected: true
},
{ name: '2' }
],
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.data = new ObjectDataTableAdapter([{ name: '1', isSelected: true }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
const rows = dataTable.data.getRows();
rows[0].isSelected = true;
@@ -762,13 +738,7 @@ describe('DataTable', () => {
it('should not sort upon clicking non-sortable column header', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }, { name: '2' }],
[
new ObjectDataColumn({ key: 'name', sortable: false }),
new ObjectDataColumn({
key: 'other',
sortable: true
})
]
[new ObjectDataColumn({ key: 'name', sortable: false }), new ObjectDataColumn({ key: 'other', sortable: true })]
);
fixture.detectChanges();
dataTable.ngAfterViewInit();
@@ -783,15 +753,7 @@ describe('DataTable', () => {
});
it('should set sorting upon column header clicked', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }],
[
new ObjectDataColumn({
key: 'column_1',
sortable: true
})
]
);
dataTable.data = new ObjectDataTableAdapter([{ name: '1' }], [new ObjectDataColumn({ key: 'column_1', sortable: true })]);
fixture.detectChanges();
dataTable.ngAfterViewInit();
const adapter = dataTable.data;
@@ -806,15 +768,7 @@ describe('DataTable', () => {
});
it('should invert sorting upon column header clicked', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }],
[
new ObjectDataColumn({
key: 'column_1',
sortable: true
})
]
);
dataTable.data = new ObjectDataTableAdapter([{ name: '1' }], [new ObjectDataColumn({ key: 'column_1', sortable: true })]);
fixture.detectChanges();
dataTable.ngAfterViewInit();
@@ -841,13 +795,7 @@ describe('DataTable', () => {
it('should indicate column that has sorting applied', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }, { name: '2' }],
[
new ObjectDataColumn({ key: 'name', sortable: true }),
new ObjectDataColumn({
key: 'other',
sortable: true
})
]
[new ObjectDataColumn({ key: 'name', sortable: true }), new ObjectDataColumn({ key: 'other', sortable: true })]
);
fixture.detectChanges();
dataTable.ngAfterViewInit();
@@ -865,13 +813,7 @@ describe('DataTable', () => {
it('should return false for columns that have no sorting', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }, { name: '2' }],
[
new ObjectDataColumn({ key: 'name', sortable: false }),
new ObjectDataColumn({
key: 'other',
sortable: false
})
]
[new ObjectDataColumn({ key: 'name', sortable: false }), new ObjectDataColumn({ key: 'other', sortable: false })]
);
const [col1, col2] = dataTable.getSortableColumns();
@@ -920,13 +862,7 @@ describe('DataTable', () => {
it('should have indeterminate state for "select all" when at least 1 row is selected or not all rows', () => {
dataTable.data = new ObjectDataTableAdapter(
[{ name: '1' }, { name: '2' }],
[
new ObjectDataColumn({ key: 'name', sortable: false }),
new ObjectDataColumn({
key: 'other',
sortable: false
})
]
[new ObjectDataColumn({ key: 'name', sortable: false }), new ObjectDataColumn({ key: 'other', sortable: false })]
);
const rows = dataTable.data.getRows();
@@ -999,7 +935,7 @@ describe('DataTable', () => {
const column = {} as DataColumn;
const row: any = {
getValue: () => 'https://www.google.com'
getValue: () => 'http://www.google.com'
};
expect(dataTable.isIconValue(row, column)).toBeFalsy();
@@ -1019,7 +955,7 @@ describe('DataTable', () => {
const column = {} as DataColumn;
const row: any = {
getValue: () => 'https://www.google.com'
getValue: () => 'http://www.google.com'
};
expect(dataTable.asIconValue(row, column)).toBe(null);
@@ -1216,14 +1152,7 @@ describe('DataTable', () => {
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' }
],
[
new ObjectDataColumn({ key: 'id', title: 'ID' }),
new ObjectDataColumn({
key: 'name',
title: 'Name',
header: customHeader
})
]
[new ObjectDataColumn({ key: 'id', title: 'ID' }), new ObjectDataColumn({ key: 'name', title: 'Name', header: customHeader })]
);
fixture.detectChanges();
@@ -1280,7 +1209,7 @@ describe('DataTable', () => {
dataTable.resetSelection();
const rowClickPromise = dataTable.rowClick.pipe(take(1)).toPromise();
const rowElement = fixture.debugElement.query(By.css(`[data-automation-id="datatable-row-0"] > td`)).nativeElement as HTMLElement;
const rowElement = fixture.debugElement.query(By.css(`[data-automation-id="datatable-row-0"] > div`)).nativeElement as HTMLElement;
rowElement.dispatchEvent(new MouseEvent('click'));
fixture.detectChanges();
await rowClickPromise;
@@ -1291,7 +1220,7 @@ describe('DataTable', () => {
dataTable.resetSelection();
const cellClickPromise = dataTable.rowClick.pipe(take(1)).toPromise();
const cellElement = fixture.debugElement.query(By.css(`[data-automation-id="datatable-row-1"] > td`)).nativeElement as HTMLElement;
const cellElement = fixture.debugElement.query(By.css(`[data-automation-id="datatable-row-1"] > div`)).nativeElement as HTMLElement;
cellElement.dispatchEvent(new MouseEvent('click', { bubbles: true }));
fixture.detectChanges();
await cellClickPromise;
@@ -1410,19 +1339,19 @@ describe('Accesibility', () => {
});
fixture.detectChanges();
const datatable = element.querySelector('.adf-datatable-list').attributes;
const header = element.querySelector('.adf-datatable-list .adf-datatable-header');
const headerCell = element.querySelector('.adf-datatable-cell-header');
const body = element.querySelector('.adf-datatable-body');
const row = element.querySelector('.adf-datatable-body .adf-datatable-row');
const cell = element.querySelector('.adf-datatable-body .adf-datatable-cell');
const datatableAttributes = element.querySelector('.adf-datatable-list').attributes;
const datatableHeaderAttributes = element.querySelector('.adf-datatable-list .adf-datatable-header').attributes;
const datatableHeaderCellAttributes = element.querySelector('.adf-datatable-cell-header').attributes;
const datatableBodyAttributes = element.querySelector('.adf-datatable-body').attributes;
const datatableBodyRowAttributes = element.querySelector('.adf-datatable-body .adf-datatable-row').attributes;
const datatableBodyCellAttributes = element.querySelector('.adf-datatable-body .adf-datatable-cell').attributes;
expect(datatable.getNamedItem('role').value).toEqual('table');
expect(header.tagName).toEqual('THEAD');
expect(headerCell.tagName).toEqual('TH');
expect(body.tagName).toEqual('TBODY');
expect(row.tagName).toEqual('ADF-DATATABLE-ROW');
expect(cell.tagName).toEqual('TD');
expect(datatableAttributes.getNamedItem('role').value).toEqual('grid');
expect(datatableHeaderAttributes.getNamedItem('role').value).toEqual('rowgroup');
expect(datatableHeaderCellAttributes.getNamedItem('role').value).toEqual('columnheader');
expect(datatableBodyAttributes.getNamedItem('role').value).toEqual('rowgroup');
expect(datatableBodyRowAttributes.getNamedItem('role').value).toEqual('row');
expect(datatableBodyCellAttributes.getNamedItem('role').value).toEqual('gridcell');
});
describe('aria-sort', () => {
@@ -1551,16 +1480,7 @@ describe('Accesibility', () => {
dataTable.showHeader = ShowHeaderMode.Never;
const dataRows = [{ name: 'name1' }];
dataTable.data = new ObjectDataTableAdapter(
[],
[
new ObjectDataColumn({
key: 'name',
template: columnCustomTemplate,
focus: false
})
]
);
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: false })]);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
@@ -1577,16 +1497,7 @@ describe('Accesibility', () => {
dataTable.showHeader = ShowHeaderMode.Never;
const dataRows = [{ name: 'name1' }];
dataTable.data = new ObjectDataTableAdapter(
[],
[
new ObjectDataColumn({
key: 'name',
template: columnCustomTemplate,
focus: true
})
]
);
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: true })]);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)

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

@@ -15,14 +15,14 @@
* limitations under the License.
*/
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CoreStoryModule } from '../../../testing/core.story.module';
import { DataTableModule } from '../../datatable.module';
import { mockPathInfos } from '../mocks/datatable.mock';
import { DataTableComponent } from './datatable.component';
import { DataTableModule } from '../../datatable.module';
import { RouterTestingModule } from '@angular/router/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { mockPathInfos } from '../mocks/datatable.mock';
export default {
component: DataTableComponent,
@@ -150,22 +150,9 @@ export default {
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: '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',
@@ -175,43 +162,11 @@ export default {
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'
},
{
type: 'amount',
key: 'amountCol',
title: 'Amount Column',
draggable: true,
cssClass: 'adf-ellipsis-cell'
},
{
type: 'number',
key: 'numberCol',
title: 'Number Column',
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: 'boolean', key: 'booleanCol', title: 'Boolean Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'amount', key: 'amountCol', title: 'Amount Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'number', key: 'numberCol', title: 'Number Column', draggable: true, cssClass: 'adf-ellipsis-cell' },
{ type: 'json', key: 'jsonCol', title: 'JSON Column', draggable: true, cssClass: 'adf-ellipsis-cell' }
],
table: {

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

@@ -17,9 +17,6 @@
/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
import { FocusKeyManager } from '@angular/cdk/a11y';
import { CdkDrag, CdkDragDrop, CdkDropList, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import {
AfterContentInit,
AfterViewInit,
@@ -42,45 +39,28 @@ import {
ViewChildren,
ViewEncapsulation
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DomSanitizer } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatMenuTrigger } from '@angular/material/menu';
import { Observable, Observer, Subscription } from 'rxjs';
import { buffer, debounceTime, filter, map, share } from 'rxjs/operators';
import { ContextMenuModule } from '../../../context-menu';
import { DirectiveModule } from '../../../directives';
import { IconComponent } from '../../../icon';
import { FileTypePipe, FilterOutArrayObjectsByPropPipe, LocalizedDatePipe } from '../../../pipes';
import { DataColumnListComponent } from '../../data-column';
import { DataColumnListComponent } from '../../data-column/data-column-list.component';
import { DataColumn } from '../../data/data-column.model';
import { DataRowEvent } from '../../data/data-row-event.model';
import { DataRow } from '../../data/data-row.model';
import { DataSorting } from '../../data/data-sorting.model';
import { DataTableAdapter } from '../../data/datatable-adapter';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { DataTableRowComponent } from '../datatable-row/datatable-row.component';
import { ObjectDataRow } from '../../data/object-datarow.model';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { DropZoneDirective } from '../../directives/drop-zone.directive';
import { ResizableModule } from '../../directives/resizable/resizable.module';
import { ResizeEvent } from '../../directives/resizable/types';
import { AmountCellComponent } from '../amount-cell/amount-cell.component';
import { BooleanCellComponent } from '../boolean-cell/boolean-cell.component';
import { DataCellEvent } from '../data-cell.event';
import { DataRowActionEvent } from '../data-row-action.event';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { DataTableRowComponent } from '../datatable-row/datatable-row.component';
import { DateCellComponent } from '../date-cell/date-cell.component';
import { FileSizeCellComponent } from '../filesize-cell/filesize-cell.component';
import { IconCellComponent } from '../icon-cell/icon-cell.component';
import { JsonCellComponent } from '../json-cell/json-cell.component';
import { LocationCellComponent } from '../location-cell/location-cell.component';
import { NumberCellComponent } from '../number-cell/number-cell.component';
import { buffer, debounceTime, filter, map, share } from 'rxjs/operators';
import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
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 ShowHeaderMode {
@@ -91,40 +71,9 @@ export enum ShowHeaderMode {
@Component({
selector: 'adf-datatable',
standalone: true,
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.scss'],
encapsulation: ViewEncapsulation.None,
imports: [
CommonModule,
DragDropModule,
DataTableRowComponent,
TranslateModule,
MatCheckboxModule,
ResizableModule,
DropZoneDirective,
MatTooltipModule,
MatMenuModule,
MatIconModule,
MatButtonModule,
MatFormFieldModule,
MatSelectModule,
DirectiveModule,
ContextMenuModule,
IconCellComponent,
DateCellComponent,
LocationCellComponent,
FileSizeCellComponent,
DataTableCellComponent,
BooleanCellComponent,
JsonCellComponent,
AmountCellComponent,
NumberCellComponent,
LocalizedDatePipe,
FilterOutArrayObjectsByPropPipe,
FileTypePipe,
IconComponent
],
host: { class: 'adf-datatable' }
})
export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, DoCheck, OnDestroy, AfterViewInit {

12
lib/core/src/lib/datatable/components/date-cell/date-cell.component.html
View File

@@ -1,12 +1,14 @@
<ng-container *ngIf="value$ | async as date">
<span [title]="tooltip | adfLocalizedDate: config.tooltipFormat: config.locale"
class="adf-datatable-cell-value"
*ngIf="config.format === 'timeAgo'; else standard_date">
<span
[title]="tooltip | adfLocalizedDate: config.tooltipFormat: config.locale"
class="adf-datatable-cell-value"
*ngIf="config.format === 'timeAgo'; else standard_date">
{{ date | adfTimeAgo: config.locale }}
</span>
<ng-template #standard_date>
<span class="adf-datatable-cell-value"
[title]="tooltip | adfLocalizedDate: config.tooltipFormat: config.locale">
<span
class="adf-datatable-cell-value"
[title]="tooltip | adfLocalizedDate: config.tooltipFormat: config.locale">
{{ date | adfLocalizedDate: config.format: config.locale }}
</span>
</ng-template>

20
lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts
View File

@@ -15,16 +15,16 @@
* limitations under the License.
*/
import { registerLocaleData } from '@angular/common';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import localePL from '@angular/common/locales/pl';
import { LOCALE_ID } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DateCellComponent } from './date-cell.component';
import { DataColumn, DateConfig } from '../../data/data-column.model';
import { BehaviorSubject } from 'rxjs';
import { AppConfigService } from '../../../app-config';
import { CoreTestingModule } from '../../../testing';
import { DataColumn, DateConfig } from '../../data/data-column.model';
import { DateCellComponent } from './date-cell.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TranslateModule } from '@ngx-translate/core';
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePL from '@angular/common/locales/pl';
let component: DateCellComponent;
let appConfigService: AppConfigService;
@@ -62,7 +62,11 @@ const checkDisplayedTooltip = (expectedTooltip: string) => {
const configureTestingModule = (providers: any[]) => {
TestBed.configureTestingModule({
imports: [CoreTestingModule, DateCellComponent, HttpClientTestingModule],
imports: [
DateCellComponent,
HttpClientTestingModule,
TranslateModule.forRoot()
],
providers
});
fixture = TestBed.createComponent(DateCellComponent);

11
lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
View File

@@ -15,12 +15,12 @@
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { AppConfigService } from '../../../app-config';
import { LocalizedDatePipe, TimeAgoPipe } from '../../../pipes';
import { DateConfig } from '../../data/data-column.model';
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { AppConfigService } from '../../../app-config/app-config.service';
import { DateConfig } from '../../data/data-column.model';
import { CommonModule } from '@angular/common';
import { LocalizedDatePipe, TimeAgoPipe } from '../../../pipes';
@Component({
standalone: true,
@@ -32,6 +32,7 @@ import { DataTableCellComponent } from '../datatable-cell/datatable-cell.compone
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DateCellComponent extends DataTableCellComponent implements OnInit {
@Input()
dateConfig: DateConfig;

2
lib/core/src/lib/datatable/components/empty-list/empty-list.component.spec.ts
View File

@@ -16,8 +16,8 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../../testing';
import { EmptyListComponent } from './empty-list.component';
import { CoreTestingModule } from '../../../testing/core.testing.module';
describe('EmptyListComponentComponent', () => {
let fixture: ComponentFixture<EmptyListComponent>;

21
lib/core/src/lib/datatable/components/empty-list/empty-list.component.ts
View File

@@ -19,27 +19,12 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-empty-list',
standalone: true,
styleUrls: ['./empty-list.component.scss'],
templateUrl: './empty-list.component.html',
encapsulation: ViewEncapsulation.None
})
export class EmptyListComponent {}
@Directive({
selector: '[adf-empty-list-header]',
standalone: true
})
export class EmptyListHeaderDirective {}
@Directive({
selector: '[adf-empty-list-body]',
standalone: true
})
export class EmptyListBodyDirective {}
@Directive({
selector: '[adf-empty-list-footer]',
standalone: true
})
export class EmptyListFooterDirective {}
@Directive({ selector: '[adf-empty-list-header]' }) export class EmptyListHeaderDirective {}
@Directive({ selector: '[adf-empty-list-body]' }) export class EmptyListBodyDirective {}
@Directive({ selector: '[adf-empty-list-footer]' }) export class EmptyListFooterDirective {}

5
lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts
View File

@@ -15,24 +15,21 @@
* limitations under the License.
*/
import { AsyncPipe, NgIf } from '@angular/common';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FileSizePipe } from '../../../pipes';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
@Component({
selector: 'adf-filesize-cell',
standalone: true,
template: `
<ng-container *ngIf="value$ | async | adfFileSize as fileSize">
<span [title]="tooltip">{{ fileSize }}</span>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
imports: [NgIf, AsyncPipe, FileSizePipe],
host: { class: 'adf-filesize-cell' }
})
export class FileSizeCellComponent extends DataTableCellComponent implements OnInit {
ngOnInit(): void {
super.ngOnInit();
}

10
lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.spec.ts
View File

@@ -15,14 +15,14 @@
* limitations under the License.
*/
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatIconHarness } from '@angular/material/icon/testing';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { IconCellComponent } from './icon-cell.component';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatIconHarness } from '@angular/material/icon/testing';
describe('IconCellComponent', () => {
let component: IconCellComponent;

2
lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.ts
View File

@@ -18,8 +18,8 @@
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { takeUntil } from 'rxjs/operators';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { takeUntil } from 'rxjs/operators';
@Component({
standalone: true,

7
lib/core/src/lib/datatable/components/json-cell/json-cell.component.html
View File

@@ -1,7 +0,0 @@
<ng-container *ngIf="value$ | async as value; else editEmpty">
<button mat-button color="primary" (click)="view()">json</button>
</ng-container>
<ng-template #editEmpty>
<button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
</ng-template>

10
lib/core/src/lib/datatable/components/json-cell/json-cell.component.spec.ts
View File

@@ -15,14 +15,14 @@
* limitations under the License.
*/
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
import { CoreTestingModule } from '../../../testing';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { JsonCellComponent } from './json-cell.component';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
describe('JsonCellComponent', () => {
let loader: HarnessLoader;

20
lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts
View File

@@ -15,21 +15,25 @@
* limitations under the License.
*/
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs';
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { MatDialog } from '@angular/material/dialog';
import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs/edit-json/edit-json.dialog';
@Component({
selector: 'adf-json-cell',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './json-cell.component.html',
template: `
<ng-container *ngIf="value$ | async as value; else editEmpty">
<button mat-button color="primary" (click)="view()">json</button>
</ng-container>
<ng-template #editEmpty>
<button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
</ng-template>
`,
styleUrls: ['./json-cell.component.scss'],
encapsulation: ViewEncapsulation.None,
imports: [AsyncPipe, MatButtonModule, NgIf],
host: { class: 'adf-datatable-content-cell' }
})
export class JsonCellComponent extends DataTableCellComponent implements OnInit {

20
lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts
View File

@@ -16,10 +16,10 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../../testing';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
import { LocationCellComponent } from './location-cell.component';
import { CoreTestingModule } from '../../../testing/core.testing.module';
describe('LocationCellComponent', () => {
let component: LocationCellComponent;
@@ -30,7 +30,10 @@ describe('LocationCellComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [LocationCellComponent, CoreTestingModule]
imports: [
LocationCellComponent,
CoreTestingModule
]
});
fixture = TestBed.createComponent(LocationCellComponent);
component = fixture.componentInstance;
@@ -49,9 +52,12 @@ describe('LocationCellComponent', () => {
}
};
columnData = { format: '/files', type: 'location', key: 'path' };
columnData = { format: '/files', type: 'location', key: 'path'};
dataTableAdapter = new ObjectDataTableAdapter([rowData], [new ObjectDataColumn(columnData)]);
dataTableAdapter = new ObjectDataTableAdapter(
[rowData],
[ new ObjectDataColumn(columnData) ]
);
component.link = [];
component.column = dataTableAdapter.getColumns()[0];
@@ -72,7 +78,7 @@ describe('LocationCellComponent', () => {
it('should set router link', () => {
fixture.detectChanges();
expect(component.link).toEqual([columnData.format, rowData.path.elements[2].id]);
expect(component.link).toEqual([ columnData.format , rowData.path.elements[2].id ]);
});
it('should NOT set router link when format NOT provided', () => {
@@ -93,7 +99,7 @@ describe('LocationCellComponent', () => {
expect(value).toBe('');
done();
});
});
});
it('should not setup cell when path is missing required properties', (done) => {
rowData.path = { someProp: '' };

8
lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts
View File

@@ -15,15 +15,15 @@
* limitations under the License.
*/
import { PathInfo } from '@alfresco/js-api';
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { AsyncPipe } from '@angular/common';
import { RouterModule } from '@angular/router';
import { PathInfo } from '@alfresco/js-api';
@Component({
imports: [AsyncPipe, RouterModule],
standalone: true,
imports: [AsyncPipe, RouterModule],
selector: 'adf-location-cell',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `

8
lib/core/src/lib/datatable/components/mocks/datatable.mock.ts
View File

@@ -22,12 +22,11 @@ export const mockCarsData: any = [
{
car_id: 1,
car_name: 'Fiat 126p (Process)',
car_price: 599.0,
car_price: 599.00,
fuel_consumption: 5.25789,
is_available: 'false',
production_start: '1972-04-23',
description:
'The Fiat 126 (Type 126) is a four-passenger, rear-engine, city car manufactured and marketed by Fiat over a twenty-eight year production run from 1972 until 2000, over a single generation.',
description: 'The Fiat 126 (Type 126) is a four-passenger, rear-engine, city car manufactured and marketed by Fiat over a twenty-eight year production run from 1972 until 2000, over a single generation.',
icon: 'airport_shuttle',
wikipedia_link: 'https://en.wikipedia.org/wiki/Fiat_126'
},
@@ -49,8 +48,7 @@ export const mockCarsData: any = [
fuel_consumption: 6,
is_available: 'true',
production_start: '1998-06-25T12:25:20',
description:
'The Audi A3 is a subcompact executive/small family car (C-segment) manufactured and marketed by the German automaker Audi AG since September 1996, currently in its fourth generation.',
description: 'The Audi A3 is a subcompact executive/small family car (C-segment) manufactured and marketed by the German automaker Audi AG since September 1996, currently in its fourth generation.',
icon: 'directions_car',
wikipedia_link: 'https://en.wikipedia.org/wiki/Audi_A3'
}

7
lib/core/src/lib/datatable/components/number-cell/number-cell.component.html
View File

@@ -1,9 +1,8 @@
<ng-container *ngIf="value$ | async as number">
<span [title]="number">
{{
number | number:
(decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo):
(decimalConfig?.locale || defaultDecimalConfig.locale)
{{ number | number:
(decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo):
(decimalConfig?.locale || defaultDecimalConfig.locale)
}}
</span>
</ng-container>

10
lib/core/src/lib/datatable/components/number-cell/number-cell.component.spec.ts
View File

@@ -15,13 +15,13 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NumberCellComponent } from './number-cell.component';
import { DecimalConfig } from '../../data/data-column.model';
import { BehaviorSubject } from 'rxjs';
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePL from '@angular/common/locales/pl';
import { LOCALE_ID } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BehaviorSubject } from 'rxjs';
import { DecimalConfig } from '../../data/data-column.model';
import { NumberCellComponent } from './number-cell.component';
describe('NumberCellComponent', () => {
let component: NumberCellComponent;

15
lib/core/src/lib/datatable/components/number-cell/number-cell.component.ts
View File

@@ -15,14 +15,20 @@
* limitations under the License.
*/
import { AsyncPipe, DecimalPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { DecimalConfig } from '../../data/data-column.model';
import {
ChangeDetectionStrategy,
Component,
ViewEncapsulation,
Input,
OnInit
} from '@angular/core';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { DecimalConfig } from '../../data/data-column.model';
import { CommonModule } from '@angular/common';
@Component({
imports: [AsyncPipe, DecimalPipe, NgIf],
standalone: true,
imports: [CommonModule],
selector: 'adf-number-cell',
templateUrl: './number-cell.component.html',
host: { class: 'adf-datatable-content-cell' },
@@ -30,6 +36,7 @@ import { DataTableCellComponent } from '../datatable-cell/datatable-cell.compone
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NumberCellComponent extends DataTableCellComponent implements OnInit {
@Input()
decimalConfig: DecimalConfig;

2
lib/core/src/lib/datatable/data-column/data-column-header.component.ts
View File

@@ -22,10 +22,10 @@ import { DataColumnComponent } from './data-column.component';
@Component({
selector: 'adf-data-column-header',
standalone: true,
template: ''
})
export class DateColumnHeaderComponent implements AfterContentInit {
@ContentChild(TemplateRef)
public header: TemplateRef<any>;

5
lib/core/src/lib/datatable/data-column/data-column-list.component.ts
View File

@@ -15,16 +15,17 @@
* limitations under the License.
*/
/* eslint-disable @angular-eslint/component-selector */
/* eslint-disable @angular-eslint/component-selector */
import { Component, ContentChildren, QueryList } from '@angular/core';
import { DataColumnComponent } from './data-column.component';
@Component({
selector: 'data-columns',
standalone: true,
template: ''
})
export class DataColumnListComponent {
@ContentChildren(DataColumnComponent) columns: QueryList<DataColumnComponent>;
}

4
lib/core/src/lib/datatable/data-column/data-column.component.spec.ts
View File

@@ -15,9 +15,9 @@
* limitations under the License.
*/
import { TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../testing';
import { DataColumnComponent } from './data-column.component';
import { CoreTestingModule } from '../../testing/core.testing.module';
import { TestBed } from '@angular/core/testing';
describe('DataColumnListComponent', () => {
beforeEach(() => {

67
lib/core/src/lib/datatable/data-column/data-column.component.stories.ts
View File

@@ -15,25 +15,30 @@
* limitations under the License.
*/
import { RouterTestingModule } from '@angular/router/testing';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import * as mockData from '../../mock/data-column.mock';
import { CoreStoryModule } from '../../testing/core.story.module';
import { DataTableModule } from '../datatable.module';
import { DataRow } from '../index';
import { DataColumnComponent } from './data-column.component';
import { DataTableModule } from '../datatable.module';
import { CoreStoryModule } from '../../testing/core.story.module';
import * as mockData from '../../mock/data-column.mock';
import { RouterTestingModule } from '@angular/router/testing';
import { DataRow } from '../index';
export default {
component: DataColumnComponent,
title: 'Core/Data Column/Data Column',
decorators: [
moduleMetadata({
imports: [CoreStoryModule, DataTableModule, RouterTestingModule]
imports: [
CoreStoryModule,
DataTableModule,
RouterTestingModule
]
})
],
argTypes: {
copyContent: {
description: 'Enables/disables a Clipboard directive to allow copying of cell contents.',
description:
'Enables/disables a Clipboard directive to allow copying of cell contents.',
control: { type: 'boolean' },
defaultValue: false,
table: {
@@ -44,7 +49,8 @@ export default {
}
},
cssClass: {
description: 'Additional CSS class to be applied to column (header and cells).',
description:
'Additional CSS class to be applied to column (header and cells).',
control: { type: 'text' },
defaultValue: '',
table: {
@@ -55,7 +61,8 @@ export default {
}
},
customData: {
description: 'You can specify any custom data which can be used by any specific feature',
description:
'You can specify any custom data which can be used by any specific feature',
control: { disable: true },
table: {
category: 'Component Inputs',
@@ -120,7 +127,8 @@ export default {
}
},
format: {
description: 'Used for location type. Setups root path for router navigation.',
description:
'Used for location type. Setups root path for router navigation.',
control: { type: 'text', disable: true },
table: {
category: 'Component Inputs',
@@ -167,7 +175,8 @@ export default {
}
},
key: {
description: 'Data source key. Can be either a column/property key like title or a property path like `createdBy.name`.',
description:
'Data source key. Can be either a column/property key like title or a property path like `createdBy.name`.',
control: { type: 'text', disable: false },
table: {
category: 'Component Inputs',
@@ -177,7 +186,8 @@ export default {
}
},
sortable: {
description: 'Toggles ability to sort by this column, for example by clicking the column header.',
description:
'Toggles ability to sort by this column, for example by clicking the column header.',
control: { type: 'boolean' },
defaultValue: true,
table: {
@@ -191,7 +201,8 @@ export default {
}
},
sortingKey: {
description: 'When using server side sorting the column used by the api call where the sorting will be performed',
description:
'When using server side sorting the column used by the api call where the sorting will be performed',
control: { disable: true },
table: {
category: 'Component Inputs',
@@ -230,7 +241,18 @@ export default {
description:
'Value type for the column. Possible settings are: `text`, `icon`, `image`, `date`, `fileSize`, `location`, `boolean`, `amount`, `number` and `json`.',
control: { type: 'select', disable: false },
options: ['text', 'icon', 'image', 'date', 'fileSize', 'location', 'boolean', 'amount', 'number', 'json'],
options: [
'text',
'icon',
'image',
'date',
'fileSize',
'location',
'boolean',
'amount',
'number',
'json'
],
table: {
category: 'Component Inputs',
type: {
@@ -243,7 +265,8 @@ export default {
defaultValue: 'text'
},
currencyConfig: {
description: `The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
description:
`The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
control: { type: 'object', disable: true },
table: {
category: 'Component Inputs',
@@ -262,7 +285,8 @@ export default {
}
},
decimalConfig: {
description: `The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
description:
`The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
control: { type: 'object', disable: true },
table: {
category: 'Component Inputs',
@@ -279,7 +303,8 @@ export default {
}
},
dateConfig: {
description: `The dateConfig input allows you to configure date formatting and localization for a component.`,
description:
`The dateConfig input allows you to configure date formatting and localization for a component.`,
control: { type: 'object', disable: true },
table: {
category: 'Component Inputs',
@@ -309,7 +334,8 @@ export default {
}
} as Meta;
const formatCustomTooltip = (row: DataRow): string => (row ? 'This is ' + row.getValue('firstname') : null);
const formatCustomTooltip = (row: DataRow): string =>
row ? 'This is ' + row.getValue('firstname') : null;
const template: Story<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
props: args,
@@ -427,8 +453,8 @@ fileSizeColumn.args = {
export const locationColumn: Story = template.bind({});
locationColumn.argTypes = {
copyContent: { control: { disable: true } },
format: { control: { disable: false } },
sortable: { control: { disable: true } }
format: { control: { disable: false }},
sortable: { control: { disable: true }}
};
locationColumn.args = {
rows: mockData.locationColumnRows,
@@ -488,3 +514,4 @@ numberColumn.args = {
type: 'number',
title: 'Number Column'
};

8
lib/core/src/lib/datatable/data-column/data-column.component.ts
View File

@@ -15,18 +15,18 @@
* limitations under the License.
*/
/* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
/* eslint-disable @angular-eslint/component-selector, @angular-eslint/no-input-rename */
import { DataColumnType } from '@alfresco/adf-extensions';
import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
import { DataColumnType } from '@alfresco/adf-extensions';
import { CurrencyConfig, DateConfig, DecimalConfig } from '../data/data-column.model';
@Component({
selector: 'data-column',
standalone: true,
template: ''
})
export class DataColumnComponent implements OnInit {
/** Id of the Column */
@Input()
id: string = '';
@@ -91,7 +91,7 @@ export class DataColumnComponent implements OnInit {
@Input('class')
cssClass: string;
/** Enables/disables a Clipboard directive to allow copying of cell contents. */
/** Enables/disables a Clipboard directive to allow copying of cell contents. */
@Input()
copyContent: boolean;

19
lib/core/src/lib/datatable/data-column/data-column.module.ts
View File

@@ -15,13 +15,26 @@
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DateColumnHeaderComponent } from './data-column-header.component';
import { DataColumnListComponent } from './data-column-list.component';
import { DataColumnComponent } from './data-column.component';
import { DateColumnHeaderComponent } from './data-column-header.component';
@NgModule({
imports: [DataColumnComponent, DataColumnListComponent, DateColumnHeaderComponent],
exports: [DataColumnComponent, DataColumnListComponent, DateColumnHeaderComponent]
imports: [
CommonModule
],
declarations: [
DataColumnComponent,
DataColumnListComponent,
DateColumnHeaderComponent
],
exports: [
DataColumnComponent,
DataColumnListComponent,
DateColumnHeaderComponent
]
})
export class DataColumnModule {}

2
lib/core/src/lib/datatable/data/data-column.model.ts
View File

@@ -17,8 +17,8 @@
/* eslint-disable id-blacklist */
import { DataColumnType } from '@alfresco/adf-extensions';
import { TemplateRef } from '@angular/core';
import { DataColumnType } from '@alfresco/adf-extensions';
export interface DataColumn<T = unknown> {
id?: string;

7
lib/core/src/lib/datatable/data/data-sorting.model.ts
View File

@@ -16,5 +16,10 @@
*/
export class DataSorting {
constructor(public key?: string, public direction?: string, public options?: Intl.CollatorOptions) {}
constructor(
public key?: string,
public direction?: string,
public options?: Intl.CollatorOptions
) {
}
}

6
lib/core/src/lib/datatable/data/data-table.schema.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { ContentChild, Directive, Input } from '@angular/core';
import { ContentChild, Input, Directive } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { AppConfigService } from '../../app-config';
import { DataColumnListComponent } from '../data-column';
import { AppConfigService } from '../../app-config/app-config.service';
import { DataColumnListComponent } from '../data-column/data-column-list.component';
import { DataColumn } from './data-column.model';
import { ObjectDataColumn } from './object-datacolumn.model';

11
lib/core/src/lib/datatable/data/datatable-adapter.ts
View File

@@ -15,31 +15,22 @@
* limitations under the License.
*/
import { Subject } from 'rxjs';
import { DataColumn } from './data-column.model';
import { DataRow } from './data-row.model';
import { DataSorting } from './data-sorting.model';
import { Subject } from 'rxjs';
export interface DataTableAdapter {
rowsChanged?: Subject<Array<DataRow>>;
selectedRow: DataRow;
getRows(): Array<DataRow>;
setRows(rows: Array<DataRow>): void;
getColumns(): Array<DataColumn>;
setColumns(columns: Array<DataColumn>): void;
getValue(row: DataRow, col: DataColumn, resolverFn?: (_row: DataRow, _col: DataColumn) => any): any;
getColumnType(row: DataRow, col: DataColumn): string;
getSorting(): DataSorting;
setSorting(sorting: DataSorting): void;
sort(key?: string, direction?: string): void;
}

4
lib/core/src/lib/datatable/data/object-datacolumn.model.ts
View File

@@ -15,9 +15,9 @@
* limitations under the License.
*/
import { DataColumnType } from '@alfresco/adf-extensions';
import { TemplateRef } from '@angular/core';
import { CurrencyConfig, DataColumn, DateConfig, DecimalConfig } from './data-column.model';
import { DataColumnType } from '@alfresco/adf-extensions';
import { CurrencyConfig, DataColumn, DecimalConfig, DateConfig } from './data-column.model';
// Simple implementation of the DataColumn interface.
export class ObjectDataColumn<T = unknown> implements DataColumn<T> {

4
lib/core/src/lib/datatable/data/object-datarow.model.ts
View File

@@ -15,15 +15,17 @@
* limitations under the License.
*/
import { ObjectUtils } from '../../common';
import { ObjectUtils } from '../../common/utils';
import { DataRow } from './data-row.model';
// Simple implementation of the DataRow interface.
export class ObjectDataRow implements DataRow {
constructor(private obj: any, public isSelected: boolean = false) {
if (!obj) {
throw new Error('Object source not found');
}
}
getValue(key: string): any {

66
lib/core/src/lib/datatable/data/object-datatable-adapter.spec.ts
View File

@@ -18,11 +18,12 @@
import { DataColumn } from './data-column.model';
import { DataRow } from './data-row.model';
import { DataSorting } from './data-sorting.model';
import { ObjectDataColumn } from './object-datacolumn.model';
import { ObjectDataRow } from './object-datarow.model';
import { ObjectDataTableAdapter } from './object-datatable-adapter';
import { ObjectDataRow } from './object-datarow.model';
import { ObjectDataColumn } from './object-datacolumn.model';
describe('ObjectDataTableAdapter', () => {
it('should init with empty row collection', () => {
const adapter = new ObjectDataTableAdapter(null, []);
expect(adapter.getRows()).toBeDefined();
@@ -45,7 +46,10 @@ describe('ObjectDataTableAdapter', () => {
});
it('should map columns without rows', () => {
const adapter = new ObjectDataTableAdapter(null, [{} as DataColumn, {} as DataColumn]);
const adapter = new ObjectDataTableAdapter(null, [
{} as DataColumn,
{} as DataColumn
]);
const columns = adapter.getColumns();
expect(columns.length).toBe(2);
@@ -95,7 +99,7 @@ describe('ObjectDataTableAdapter', () => {
it('should apply new columns array', () => {
const adapter = new ObjectDataTableAdapter([], []);
const columns = [{}, {}] as DataColumn[];
const columns = [{},{}] as DataColumn[];
adapter.setColumns(columns);
expect(adapter.getColumns()).toBe(columns);
@@ -112,7 +116,10 @@ describe('ObjectDataTableAdapter', () => {
});
it('should reset columns by null value', () => {
const adapter = new ObjectDataTableAdapter([], [{} as DataColumn, {} as DataColumn]);
const adapter = new ObjectDataTableAdapter([], [
{} as DataColumn,
{} as DataColumn
]);
expect(adapter.getColumns()).toBeDefined();
expect(adapter.getColumns().length).toBe(2);
@@ -181,7 +188,9 @@ describe('ObjectDataTableAdapter', () => {
{ id: 2, name: 'abs' },
{ id: 1, name: 'xyz' }
],
[new ObjectDataColumn({ key: 'id', sortable: true })]
[
new ObjectDataColumn({ key: 'id', sortable: true })
]
);
const rows = adapter.getRows();
@@ -190,16 +199,10 @@ describe('ObjectDataTableAdapter', () => {
});
it('should take first sortable column by default', () => {
const adapter = new ObjectDataTableAdapter(
[],
[
{ key: 'icon' } as DataColumn,
new ObjectDataColumn({
key: 'id',
sortable: true
})
]
);
const adapter = new ObjectDataTableAdapter([], [
{ key: 'icon' } as DataColumn,
new ObjectDataColumn({ key: 'id', sortable: true })
]);
expect(adapter.getSorting()).toEqual(
jasmine.objectContaining({
@@ -218,7 +221,10 @@ describe('ObjectDataTableAdapter', () => {
{ id: 1, created: new Date(2016, 7, 6, 15, 7, 2) },
{ id: 2, created: new Date(2016, 7, 6, 15, 7, 1) }
],
[{ key: 'id' } as DataColumn, { key: 'created' } as DataColumn]
[
{ key: 'id' } as DataColumn,
{ key: 'created' } as DataColumn
]
);
adapter.setSorting(new DataSorting('created', 'asc', { numeric: true }));
@@ -229,7 +235,11 @@ describe('ObjectDataTableAdapter', () => {
});
it('should sort by numbers', () => {
const adapter = new ObjectDataTableAdapter([{ id: 123 }, { id: 38 }, { id: 50 }], [{ key: 'id' } as DataColumn]);
const adapter = new ObjectDataTableAdapter([
{ id: 123 },
{ id: 38 },
{ id: 50 }
],[{key: 'id'} as DataColumn]);
adapter.setSorting(new DataSorting('id', 'asc', { numeric: true }));
@@ -245,7 +255,10 @@ describe('ObjectDataTableAdapter', () => {
{ id: 2, name: 'abs' },
{ id: 1, name: 'xyz' }
],
[new ObjectDataColumn({ key: 'id' }), new ObjectDataColumn({ key: 'name' })]
[
new ObjectDataColumn({ key: 'id' }),
new ObjectDataColumn({ key: 'name' })
]
);
expect(adapter.getSorting()).toBeUndefined();
@@ -257,7 +270,9 @@ describe('ObjectDataTableAdapter', () => {
{ id: 2, name: 'abs' },
{ id: 1, name: 'xyz' }
],
[new ObjectDataColumn({ key: 'id', sortable: true })]
[
new ObjectDataColumn({ key: 'id', sortable: true })
]
);
adapter.setSorting(new DataSorting('id', 'asc', { numeric: true }));
@@ -301,6 +316,7 @@ describe('ObjectDataTableAdapter', () => {
});
describe('ObjectDataRow', () => {
it('should require object source', () => {
expect(() => new ObjectDataRow(null)).toThrowError('Object source not found');
});
@@ -319,10 +335,10 @@ describe('ObjectDataRow', () => {
it('should get nested property value', () => {
const row = new ObjectDataRow({
name: {
firstName: 'John',
lastName: 'Doe'
}
name: {
firstName: 'John',
lastName: 'Doe'
}
});
expect(row.getValue('name.lastName')).toBe('Doe');
@@ -354,7 +370,7 @@ describe('ObjectDataRow', () => {
});
it('should generateSchema generate a schema from data', () => {
const data = [
const data = [
{ id: 2, name: 'abs' },
{ id: 1, name: 'xyz' }
];

6
lib/core/src/lib/datatable/data/object-datatable-adapter.ts
View File

@@ -15,13 +15,13 @@
* limitations under the License.
*/
import { Subject } from 'rxjs';
import { DataColumn } from './data-column.model';
import { DataRow } from './data-row.model';
import { ObjectDataRow } from './object-datarow.model';
import { ObjectDataColumn } from './object-datacolumn.model';
import { DataSorting } from './data-sorting.model';
import { DataTableAdapter } from './datatable-adapter';
import { ObjectDataColumn } from './object-datacolumn.model';
import { ObjectDataRow } from './object-datarow.model';
import { Subject } from 'rxjs';
// Simple implementation of the DataTableAdapter interface.
export class ObjectDataTableAdapter implements DataTableAdapter {

92
lib/core/src/lib/datatable/datatable.module.ts
View File

@@ -15,50 +15,85 @@
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { LocalizedDatePipe } from '../pipes';
import { AmountCellComponent } from './components/amount-cell/amount-cell.component';
import { BooleanCellComponent } from './components/boolean-cell/boolean-cell.component';
import { ColumnsSelectorComponent } from './components/columns-selector/columns-selector.component';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { ContextMenuModule } from '../context-menu/context-menu.module';
import { PipeModule } from '../pipes/pipe.module';
import { DirectiveModule } from '../directives/directive.module';
import { DataTableCellComponent } from './components/datatable-cell/datatable-cell.component';
import { DataTableRowComponent } from './components/datatable-row/datatable-row.component';
import { DataTableComponent } from './components/datatable/datatable.component';
import { DateCellComponent } from './components/date-cell/date-cell.component';
import {
EmptyListBodyDirective,
import { ColumnsSelectorComponent } from './components/columns-selector/columns-selector.component';
import { EmptyListBodyDirective,
EmptyListComponent,
EmptyListFooterDirective,
EmptyListHeaderDirective
} from './components/empty-list/empty-list.component';
EmptyListHeaderDirective } from './components/empty-list/empty-list.component';
import { FileSizeCellComponent } from './components/filesize-cell/filesize-cell.component';
import { IconCellComponent } from './components/icon-cell/icon-cell.component';
import { JsonCellComponent } from './components/json-cell/json-cell.component';
import { LocationCellComponent } from './components/location-cell/location-cell.component';
import { NumberCellComponent } from './components/number-cell/number-cell.component';
import { DataColumnComponent, DataColumnListComponent, DateColumnHeaderComponent } from './data-column';
import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
import { NoContentTemplateDirective } from './directives/no-content-template.directive';
import { NoPermissionTemplateDirective } from './directives/no-permission-template.directive';
import { HeaderFilterTemplateDirective } from './directives/header-filter-template.directive';
import { CustomEmptyContentTemplateDirective } from './directives/custom-empty-content-template.directive';
import { CustomLoadingContentTemplateDirective } from './directives/custom-loading-template.directive';
import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
import { DropZoneDirective } from './directives/drop-zone.directive';
import { HeaderFilterTemplateDirective } from './directives/header-filter-template.directive';
import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
import { MainMenuDataTableTemplateDirective } from './directives/main-data-table-action-template.directive';
import { NoContentTemplateDirective } from './directives/no-content-template.directive';
import { NoPermissionTemplateDirective } from './directives/no-permission-template.directive';
import { JsonCellComponent } from './components/json-cell/json-cell.component';
import { ClipboardModule } from '../clipboard/clipboard.module';
import { DropZoneDirective } from './directives/drop-zone.directive';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { IconModule } from '../icon/icon.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataColumnComponent, DataColumnListComponent, DateColumnHeaderComponent } from './data-column';
import { ResizableModule } from './directives/resizable/resizable.module';
import { DataColumnModule } from './data-column/data-column.module';
import { BooleanCellComponent } from './components/boolean-cell/boolean-cell.component';
import { AmountCellComponent } from './components/amount-cell/amount-cell.component';
import { NumberCellComponent } from './components/number-cell/number-cell.component';
import { LocalizedDatePipe } from '../pipes';
import { IconCellComponent } from './components/icon-cell/icon-cell.component';
@NgModule({
imports: [
RouterModule,
MaterialModule,
CommonModule,
TranslateModule,
ContextMenuModule,
PipeModule,
DirectiveModule,
ClipboardModule,
DragDropModule,
IconModule,
FormsModule,
ReactiveFormsModule,
ResizableModule,
DataColumnModule,
BooleanCellComponent,
AmountCellComponent,
NumberCellComponent,
LocationCellComponent,
DateCellComponent,
LocalizedDatePipe,
IconCellComponent
],
declarations: [
DataTableComponent,
EmptyListComponent,
EmptyListHeaderDirective,
EmptyListBodyDirective,
EmptyListFooterDirective,
DataTableCellComponent,
DataTableRowComponent,
DataColumnComponent,
DataColumnListComponent,
DateColumnHeaderComponent,
ColumnsSelectorComponent,
EmptyListComponent,
FileSizeCellComponent,
JsonCellComponent,
DropZoneDirective,
ColumnsSelectorComponent,
NoContentTemplateDirective,
NoPermissionTemplateDirective,
LoadingContentTemplateDirective,
@@ -67,16 +102,7 @@ import { NoPermissionTemplateDirective } from './directives/no-permission-templa
CustomLoadingContentTemplateDirective,
CustomNoPermissionTemplateDirective,
MainMenuDataTableTemplateDirective,
BooleanCellComponent,
AmountCellComponent,
NumberCellComponent,
LocationCellComponent,
DateCellComponent,
LocalizedDatePipe,
IconCellComponent,
EmptyListHeaderDirective,
EmptyListBodyDirective,
EmptyListFooterDirective
DropZoneDirective
],
exports: [
DataTableComponent,

9
lib/core/src/lib/datatable/directives/custom-empty-content-template.directive.ts
View File

@@ -17,8 +17,13 @@
import { Directive } from '@angular/core';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0.
* The empty-folder-content selector will be deprecated as it has been replace by
* adf-custom-empty-content-template.
*/
@Directive({
selector: 'adf-custom-empty-content-template',
standalone: true
selector: 'adf-custom-empty-content-template, empty-folder-content'
})
export class CustomEmptyContentTemplateDirective {}

3
lib/core/src/lib/datatable/directives/custom-loading-template.directive.ts
View File

@@ -18,7 +18,6 @@
import { Directive } from '@angular/core';
@Directive({
selector: 'adf-custom-loading-content-template',
standalone: true
selector: 'adf-custom-loading-content-template'
})
export class CustomLoadingContentTemplateDirective {}

8
lib/core/src/lib/datatable/directives/custom-no-permission-template.directive.ts
View File

@@ -17,8 +17,12 @@
import { Directive } from '@angular/core';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0.
* The no-permission-content selector will be deprecated as it has been replace by
* adf-custom-no-permission-template.
*/
@Directive({
selector: 'adf-custom-no-permission-template',
standalone: true
selector: 'adf-custom-no-permission-template, no-permission-content'
})
export class CustomNoPermissionTemplateDirective {}

7
lib/core/src/lib/datatable/directives/drop-zone.directive.ts
View File

@@ -15,13 +15,12 @@
* limitations under the License.
*/
import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
import { DataColumn } from '../data/data-column.model';
import { Directive, Input, ElementRef, NgZone, OnInit, OnDestroy } from '@angular/core';
import { DataRow } from '../data/data-row.model';
import { DataColumn } from '../data/data-column.model';
@Directive({
selector: '[adf-drop-zone]',
standalone: true
selector: '[adf-drop-zone]'
})
export class DropZoneDirective implements OnInit, OnDestroy {
private element: HTMLElement;

4
lib/core/src/lib/datatable/directives/header-filter-template.directive.spec.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../testing';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { HeaderFilterTemplateDirective } from './header-filter-template.directive';
import { CoreTestingModule } from '../../testing/core.testing.module';
describe('HeaderFilterTemplateDirective', () => {
let fixture: ComponentFixture<DataTableComponent>;

7
lib/core/src/lib/datatable/directives/header-filter-template.directive.ts
View File

@@ -19,14 +19,15 @@ import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular
import { DataTableComponent } from '../components/datatable/datatable.component';
@Directive({
selector: 'adf-header-filter-template',
standalone: true
selector: 'adf-header-filter-template'
})
export class HeaderFilterTemplateDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private dataTable: DataTableComponent) {}
constructor(private dataTable: DataTableComponent) {
}
ngAfterContentInit() {
if (this.dataTable) {

4
lib/core/src/lib/datatable/directives/loading-template.directive.spec.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../testing';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { LoadingContentTemplateDirective } from './loading-template.directive';
import { CoreTestingModule } from '../../testing/core.testing.module';
describe('LoadingContentTemplateDirective', () => {
let fixture: ComponentFixture<DataTableComponent>;

11
lib/core/src/lib/datatable/directives/loading-template.directive.ts
View File

@@ -18,19 +18,24 @@
import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular/core';
import { DataTableComponent } from '../components/datatable/datatable.component';
/**
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'adf-loading-content-template',
standalone: true
selector: 'adf-loading-content-template, loading-content-template'
})
export class LoadingContentTemplateDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private dataTable: DataTableComponent) {}
constructor(private dataTable: DataTableComponent) {
}
ngAfterContentInit() {
if (this.dataTable) {
this.dataTable.loadingTemplate = this.template;
}
}
}

6
lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.spec.ts
View File

@@ -15,10 +15,12 @@
* limitations under the License.
*/
import { DataTableComponent, MainMenuDataTableTemplateDirective } from '@alfresco/adf-core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { MainMenuDataTableTemplateDirective } from './main-data-table-action-template.directive';
describe('MainMenuDataTableTemplateDirective', () => {
let fixture: ComponentFixture<DataTableComponent>;
let dataTable: DataTableComponent;
let directive: MainMenuDataTableTemplateDirective;

4
lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.ts
View File

@@ -19,10 +19,10 @@ import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular
import { DataTableComponent } from '../components/datatable/datatable.component';
@Directive({
selector: 'adf-main-menu-datatable-template',
standalone: true
selector: 'adf-main-menu-datatable-template'
})
export class MainMenuDataTableTemplateDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;

4
lib/core/src/lib/datatable/directives/no-content-template.directive.spec.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../testing';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { NoContentTemplateDirective } from './no-content-template.directive';
import { CoreTestingModule } from '../../testing/core.testing.module';
describe('NoContentTemplateDirective', () => {
let fixture: ComponentFixture<DataTableComponent>;

7
lib/core/src/lib/datatable/directives/no-content-template.directive.ts
View File

@@ -22,14 +22,15 @@ import { DataTableComponent } from '../components/datatable/datatable.component'
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'adf-no-content-template',
standalone: true
selector: 'adf-no-content-template, no-content-template'
})
export class NoContentTemplateDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private dataTable: DataTableComponent) {}
constructor(private dataTable: DataTableComponent) {
}
ngAfterContentInit() {
if (this.dataTable) {

4
lib/core/src/lib/datatable/directives/no-permission-template.directive.spec.ts
View File

@@ -15,10 +15,10 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule } from '../../testing';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DataTableComponent } from '../components/datatable/datatable.component';
import { NoPermissionTemplateDirective } from './no-permission-template.directive';
import { CoreTestingModule } from '../../testing/core.testing.module';
describe('NoPermissionTemplateDirective', () => {
let fixture: ComponentFixture<DataTableComponent>;

7
lib/core/src/lib/datatable/directives/no-permission-template.directive.ts
View File

@@ -22,14 +22,15 @@ import { DataTableComponent } from '../components/datatable/datatable.component'
* Directive selectors without adf- prefix will be deprecated on 3.0.0
*/
@Directive({
selector: 'adf-no-permission-template',
standalone: true
selector: 'adf-no-permission-template, no-permission-template'
})
export class NoPermissionTemplateDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
constructor(private dataTable: DataTableComponent) {}
constructor(private dataTable: DataTableComponent) {
}
ngAfterContentInit() {
if (this.dataTable) {

38
lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License.
*/
import { ElementRef, NgZone, Renderer2 } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { ElementRef, NgZone, Renderer2 } from '@angular/core';
import { ResizableDirective } from './resizable.directive';
describe('ResizableDirective', () => {
@@ -54,7 +54,7 @@ describe('ResizableDirective', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ResizableDirective],
declarations: [ResizableDirective],
providers: [
{ provide: Renderer2, useValue: rendererMock },
{ provide: ElementRef, useValue: elementRefMock }
@@ -103,15 +103,7 @@ describe('ResizableDirective', () => {
directive.mousedown.next({ ...mouseDownEvent, resize: true });
expect(directive.resizeStart.emit).toHaveBeenCalledWith({
rectangle: {
top: 0,
left: 0,
bottom: 0,
right: 0,
width: 0
}
});
expect(directive.resizeStart.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 0, width: 0 } });
});
it('should unset cursor on mouseup', () => {
@@ -133,9 +125,7 @@ describe('ResizableDirective', () => {
directive.mousedown.next({ ...mouseDownEvent, resize: true });
directive.mouseup.next(mouseUpEvent);
expect(directive.resizeEnd.emit).toHaveBeenCalledWith({
rectangle: { top: 0, left: 0, right: 0, width: 150, height: 0, bottom: 0, scrollTop: 0, scrollLeft: 0 }
});
expect(directive.resizeEnd.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, right: 0, width: 150, height: 0, bottom: 0, scrollTop: 0, scrollLeft: 0 } });
});
it('should emit resizing on mousemove', () => {
@@ -147,15 +137,7 @@ describe('ResizableDirective', () => {
directive.mousedown.next({ ...mouseDownEvent, resize: true });
directive.mousemove.next(mouseMoveEvent);
expect(directive.resizing.emit).toHaveBeenCalledWith({
rectangle: {
top: 0,
left: 0,
bottom: 0,
right: 120,
width: 120
}
});
expect(directive.resizing.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 120, width: 120 } });
});
it('should emit resizing on mousemove considering cover padding', () => {
@@ -169,14 +151,6 @@ describe('ResizableDirective', () => {
directive.mousedown.next({ ...mouseDownEvent, resize: true });
directive.mousemove.next(mouseMoveEvent);
expect(directive.resizing.emit).toHaveBeenCalledWith({
rectangle: {
top: 0,
left: 0,
bottom: 0,
right: 130,
width: 130
}
});
expect(directive.resizing.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 130, width: 130 } });
});
});

9
lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts
View File

@@ -15,14 +15,13 @@
* limitations under the License.
*/
import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core';
import { merge, Observable, Observer, Subject } from 'rxjs';
import { filter, map, mergeMap, pairwise, share, take, takeUntil } from 'rxjs/operators';
import { BoundingRectangle, ICoordinateX, IResizeMouseEvent, ResizeEvent } from './types';
import { Subject, Observable, Observer, merge } from 'rxjs';
import { BoundingRectangle, ResizeEvent, IResizeMouseEvent, ICoordinateX } from './types';
import { map, take, share, filter, pairwise, mergeMap, takeUntil } from 'rxjs/operators';
import { OnInit, Output, NgZone, OnDestroy, Directive, Renderer2, ElementRef, EventEmitter, Input } from '@angular/core';
@Directive({
selector: '[adf-resizable]',
standalone: true,
exportAs: 'adf-resizable'
})
export class ResizableDirective implements OnInit, OnDestroy {

4
lib/core/src/lib/datatable/directives/resizable/resizable.module.ts
View File

@@ -20,7 +20,7 @@ import { ResizableDirective } from './resizable.directive';
import { ResizeHandleDirective } from './resize-handle.directive';
@NgModule({
imports: [ResizableDirective, ResizeHandleDirective],
exports: [ResizableDirective, ResizeHandleDirective]
declarations: [ResizableDirective, ResizeHandleDirective],
exports: [ResizableDirective, ResizeHandleDirective]
})
export class ResizableModule {}

8
lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License.
*/
import { ElementRef, NgZone, Renderer2 } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { ElementRef, NgZone, Renderer2 } from '@angular/core';
import { ResizeHandleDirective } from './resize-handle.directive';
describe('ResizeHandleDirective', () => {
@@ -30,14 +30,12 @@ describe('ResizeHandleDirective', () => {
};
const elementRefMock = {
nativeElement: {
dispatchEvent: () => {}
}
nativeElement: { dispatchEvent: () => { } }
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ResizeHandleDirective],
declarations: [ResizeHandleDirective],
providers: [
{ provide: Renderer2, useValue: rendererMock },
{ provide: ElementRef, useValue: elementRefMock }

5
lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts
View File

@@ -15,13 +15,12 @@
* limitations under the License.
*/
import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Subject } from 'rxjs';
import { ResizableDirective } from './resizable.directive';
import { Input, OnInit, Directive, Renderer2, ElementRef, OnDestroy, NgZone } from '@angular/core';
@Directive({
selector: '[adf-resize-handle]',
standalone: true
selector: '[adf-resize-handle]'
})
export class ResizeHandleDirective implements OnInit, OnDestroy {
/**

1
lib/core/src/lib/datatable/public-api.ts
View File

@@ -52,5 +52,6 @@ export * from './directives/main-data-table-action-template.directive';
export * from './services/datatable.service';
export * from './datatable.module';
export * from './data-column';