diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 9bc4043a8c..f66a7bab96 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -1,24 +1,24 @@
+ id="document-list-container" + class="app-document-list-container"> + [disabled]="disableDragArea" + [acceptedFilesType]="getFileFiltering()" + [rootFolderId]="currentFolderId" + [versioning]="versioning" + [adf-check-allowable-operation]="'create'" + [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []" + (updateFileVersion)="onUploadNewVersion($event)">
- {{ errorMessage }} + {{errorMessage}}
- + @@ -26,223 +26,221 @@
- -
- - - -
+
+ #documentList + class="app-file-list-container" + [permissionsStyle]="permissionsStyle" + [currentFolderId]="currentFolderId" + [contextMenuActions]="true" + [contentActions]="true" + [allowDropFiles]="allowDropFiles" + [selectionMode]="selectionMode" + [multiselect]="multiselect" + [node]="nodeResult" + [includeFields]="includeFields" + [sorting]="sorting" + [sortingMode]="sortingMode" + [showHeader]="showHeader" + [stickyHeader]="stickyHeader" + [headerFilters]="headerFilters" + [filterValue]="paramValues" + (error)="onNavigationError($event)" + (success)="resetError()" + (ready)="emitReadyEvent($event)" + (preview)="showFile($event)" + (folderChange)="onFolderChange($event)" + (permissionError)="handlePermissionError($event)" + (name-click)="documentList.onNodeDblClick($any($event).detail?.node)" + (filterSelection)="onFilterSelected($event)"> - -
-
{{ 'SEARCH.NO_RESULT' | translate }}
-
- - - - - - - - - - -
-
- - + +
+
{{ 'SEARCH.NO_RESULT' | translate }}
+
+ + + + + + + + + + +
+
+ + - - + + - - - - - - - - - + + + + + + + + + - + - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + +
+ (prevPage)="onPrevPage($event)">
- + + [displayCategories]="true"> + [showComments]="true" + [allowDownload]="allowVersionDownload"> @@ -279,37 +277,37 @@
- + Multiselect (with checkboxes)
- + Multiple File Upload
- + Folder upload
- + Custom extensions filter
- + Max size filter
- + Enable versioning
@@ -335,48 +333,48 @@
Upload
- +
- +
+ (permissionEvent)="handlePermissionError($event)">
+ (permissionEvent)="handlePermissionError($event)">
- + Enable upload
@@ -385,9 +383,9 @@

Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items

- + - {{ mode.viewValue }} + {{mode.viewValue}} diff --git a/e2e/content-services/components/viewer-content-services-component.e2e.ts b/e2e/content-services/components/viewer-content-services-component.e2e.ts index c226773b01..e748769b7f 100644 --- a/e2e/content-services/components/viewer-content-services-component.e2e.ts +++ b/e2e/content-services/components/viewer-content-services-component.e2e.ts @@ -15,11 +15,11 @@ * limitations under the License. */ -import { BrowserActions, createApiService, LoginPage, UploadActions, UserModel, UsersActions, ViewerPage } from '@alfresco/adf-testing'; import { browser, by, element, protractor } from 'protractor'; +import { createApiService, BrowserActions, LoginPage, UploadActions, UserModel, UsersActions, ViewerPage } from '@alfresco/adf-testing'; import { ContentServicesPage } from '../../core/pages/content-services.page'; -import { NavigationBarPage } from '../../core/pages/navigation-bar.page'; import { FileModel } from '../../models/ACS/file.model'; +import { NavigationBarPage } from '../../core/pages/navigation-bar.page'; describe('Content Services Viewer', () => { const acsUser = new UserModel(); @@ -362,7 +362,7 @@ describe('Content Services Viewer', () => { }); it('[C269109] Should not be able to open thumbnail panel before the pdf is loaded', async () => { - const fileView = element.all(by.css(`#document-list-container td[data-automation-id="${pdfFile.name}"]`)).first(); + const fileView = element.all(by.css(`#document-list-container div[data-automation-id="${pdfFile.name}"]`)).first(); await BrowserActions.click(fileView); await browser.actions().sendKeys(protractor.Key.ENTER).perform(); diff --git a/e2e/core/pages/content-services.page.ts b/e2e/core/pages/content-services.page.ts index 5273ca0866..135faaec8f 100644 --- a/e2e/core/pages/content-services.page.ts +++ b/e2e/core/pages/content-services.page.ts @@ -271,7 +271,7 @@ export class ContentServicesPage { } async checkLockIsDisplayedForElement(name: string): Promise { - const lockButton = $(`td.adf-datatable-cell[data-automation-id="${name}"] button`); + const lockButton = $(`div.adf-datatable-cell[data-automation-id="${name}"] button`); await BrowserVisibility.waitUntilElementIsVisible(lockButton); } @@ -290,7 +290,7 @@ export class ContentServicesPage { async getAttributeValueForElement(elementName: string, propertyName: string): Promise { const elementSize = $( - `.app-document-list-container td.adf-datatable-cell[data-automation-id="${elementName}"][title="${propertyName}"] span` + `.app-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"][title="${propertyName}"] span` ); return BrowserActions.getText(elementSize); } @@ -306,7 +306,7 @@ export class ContentServicesPage { } async selectFolder(folderName: string): Promise { - const folderSelected = $(`td[data-automation-id="${folderName}"] .adf-datatable-center-img-ie`); + const folderSelected = $(`div[data-automation-id="${folderName}"] .adf-datatable-center-img-ie`); await BrowserVisibility.waitUntilElementIsVisible(folderSelected); await BrowserActions.click(folderSelected); } diff --git a/e2e/core/pages/navigation-bar.page.ts b/e2e/core/pages/navigation-bar.page.ts index 05e6e05280..a2db913768 100644 --- a/e2e/core/pages/navigation-bar.page.ts +++ b/e2e/core/pages/navigation-bar.page.ts @@ -32,7 +32,7 @@ export class NavigationBarPage { async clickNavigationBarItem(title: string, untilElementIsVisible?: ElementFinder): Promise { Logger.log(`clickNavigationBarItem ${title}`); - const menu = this.getMenuItemLocator(title); + const menu = $(`.app-sidenav-link[data-automation-id="${title}"]`); await BrowserActions.closeMenuAndDialogs(); if (untilElementIsVisible) { diff --git a/e2e/process-services/pages/attachment-list.page.ts b/e2e/process-services/pages/attachment-list.page.ts index fcecfc6e82..a9acc00e04 100644 --- a/e2e/process-services/pages/attachment-list.page.ts +++ b/e2e/process-services/pages/attachment-list.page.ts @@ -20,12 +20,13 @@ import * as path from 'path'; import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing'; export class AttachmentListPage { - attachFileButton = $('input[type="file"]'); - buttonMenu = $('button[data-automation-id="action_menu_0"]'); - viewButton = $('button[data-automation-id*="MENU_ACTIONS.VIEW_CONTENT"]'); - removeButton = $('button[data-automation-id*="MENU_ACTIONS.REMOVE_CONTENT"]'); - downloadButton = $('button[data-automation-id*="MENU_ACTIONS.DOWNLOAD_CONTENT"]'); - noContentContainer = $('td[class*="adf-no-content-container"]'); + + attachFileButton = $('input[type=\'file\']'); + buttonMenu = $('button[data-automation-id=\'action_menu_0\']'); + viewButton = $('button[data-automation-id*=\'MENU_ACTIONS.VIEW_CONTENT\']'); + removeButton = $('button[data-automation-id*=\'MENU_ACTIONS.REMOVE_CONTENT\']'); + downloadButton = $('button[data-automation-id*=\'MENU_ACTIONS.DOWNLOAD_CONTENT\']'); + noContentContainer = $('div[class*=\'adf-no-content-container\']'); async checkEmptyAttachmentList(): Promise { await BrowserVisibility.waitUntilElementIsVisible(this.noContentContainer); @@ -38,7 +39,7 @@ export class AttachmentListPage { } async checkFileIsAttached(name: string): Promise { - const fileAttached = $$('td[data-automation-id="' + name + '"]').first(); + const fileAttached = $$('div[data-automation-id="' + name + '"]').first(); await BrowserVisibility.waitUntilElementIsVisible(fileAttached); } @@ -48,7 +49,7 @@ export class AttachmentListPage { async viewFile(name: string): Promise { await BrowserActions.closeMenuAndDialogs(); - await BrowserActions.click($$('td[data-automation-id="' + name + '"]').first()); + await BrowserActions.click($$('div[data-automation-id="' + name + '"]').first()); await BrowserActions.click(this.buttonMenu); await browser.sleep(500); await BrowserActions.click(this.viewButton); @@ -57,7 +58,7 @@ export class AttachmentListPage { async removeFile(name: string): Promise { await BrowserActions.closeMenuAndDialogs(); - await BrowserActions.click($$('td[data-automation-id="' + name + '"]').first()); + await BrowserActions.click($$('div[data-automation-id="' + name + '"]').first()); await BrowserActions.click(this.buttonMenu); await browser.sleep(500); await BrowserActions.click(this.removeButton); @@ -66,7 +67,7 @@ export class AttachmentListPage { async downloadFile(name: string): Promise { await BrowserActions.closeMenuAndDialogs(); - await BrowserActions.click($$('td[data-automation-id="' + name + '"]').first()); + await BrowserActions.click($$('div[data-automation-id="' + name + '"]').first()); await BrowserActions.click(this.buttonMenu); await browser.sleep(500); await BrowserActions.click(this.downloadButton); @@ -74,14 +75,15 @@ export class AttachmentListPage { async doubleClickFile(name: string): Promise { await BrowserActions.closeMenuAndDialogs(); - await BrowserVisibility.waitUntilElementIsVisible($$(`td[data-automation-id="${name}"]`).first()); - const fileAttached = $$(`td[data-automation-id="${name}"]`).first(); + await BrowserVisibility.waitUntilElementIsVisible($$(`div[data-automation-id="${name}"]`).first()); + const fileAttached = $$(`div[data-automation-id="${name}"]`).first(); await BrowserActions.click(fileAttached); await browser.actions().sendKeys(protractor.Key.ENTER).perform(); } async checkFileIsRemoved(name: string): Promise { - const fileAttached = $$(`td[data-automation-id="${name}"]`).first(); + const fileAttached = $$(`div[data-automation-id="${name}"]`).first(); await BrowserVisibility.waitUntilElementIsNotVisible(fileAttached); } + } diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts index 2e16def0a1..9c9e53e3e8 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts +++ b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts @@ -1907,11 +1907,11 @@ describe('DocumentListComponent rendering', () => { const rows = fixture.nativeElement.querySelectorAll('.adf-datatable-body adf-datatable-row'); expect(rows).toBeDefined(); expect(rows.length).toBe(3); - const cell1 = fixture.nativeElement.querySelector('td[title="Name"][data-automation-id="Name 1"]'); + const cell1 = fixture.nativeElement.querySelector('div[title="Name"][data-automation-id="Name 1"]'); expect(cell1.innerText).toBe('Name 1'); - const cell2 = fixture.nativeElement.querySelector('td[title="Name"][data-automation-id="Name 2"]'); + const cell2 = fixture.nativeElement.querySelector('div[title="Name"][data-automation-id="Name 2"]'); expect(cell2.innerText).toBe('Name 2'); - const cell3 = fixture.nativeElement.querySelector('td[title="Id"][data-automation-id="Name 3"]'); + const cell3 = fixture.nativeElement.querySelector('div[title="Id"][data-automation-id="Name 3"]'); expect(cell3.innerText).toBe('3'); }); }); diff --git a/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.html b/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.html index dc40c6c3b4..3b04817cce 100644 --- a/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.html +++ b/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.html @@ -1,11 +1,10 @@ - {{ - 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) }} diff --git a/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.spec.ts b/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.spec.ts index 3be69e7196..93dced07a6 100644 --- a/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.spec.ts @@ -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', () => { diff --git a/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.ts b/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.ts index 76f0a4fe8b..e32e8e84fc 100644 --- a/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.ts +++ b/lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.ts @@ -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, diff --git a/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.spec.ts b/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.spec.ts index b282e92455..7dd4794903 100644 --- a/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.ts b/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.ts index 3ccb59ec05..0441520415 100644 --- a/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.ts +++ b/lib/core/src/lib/datatable/components/boolean-cell/boolean-cell.component.ts @@ -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: ` @@ -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(); } diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html index 074b27d11d..56d4216abc 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html +++ b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html @@ -1,17 +1,21 @@ -
+
- {{ 'ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS' | translate }} + {{"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS" | translate}} -
@@ -19,28 +23,32 @@
- + search - +
-
- -
{{ translatedTitle }}
+
+ +
{{translatedTitle}}
@@ -49,11 +57,12 @@
-
diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts index a0b03dafe1..8fc0f7303a 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts +++ b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts @@ -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; @@ -40,7 +40,8 @@ describe('ColumnsSelectorComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [CoreTestingModule, ColumnsSelectorComponent] + imports: [CoreTestingModule], + declarations: [ColumnsSelectorComponent] }).compileComponents(); fixture = TestBed.createComponent(ColumnsSelectorComponent); diff --git a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts index b3f5316d86..85f24ec852 100644 --- a/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts +++ b/lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts @@ -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]; } diff --git a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.html b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.html deleted file mode 100644 index f46a7b4d39..0000000000 --- a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.html +++ /dev/null @@ -1,16 +0,0 @@ - - - {{ value$ | async }} - - - - - {{ value$ | async }} - - diff --git a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts index 86cb469975..eac3fa24af 100644 --- a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.spec.ts @@ -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] }); diff --git a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts index b279c7ea77..b351a72833 100644 --- a/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts +++ b/lib/core/src/lib/datatable/components/datatable-cell/datatable-cell.component.ts @@ -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: ` + + {{ value$ | async }} + + + {{ value$ | async }} + + `, encapsulation: ViewEncapsulation.None, - imports: [ClipboardModule, AsyncPipe, NgIf], host: { class: 'adf-datatable-content-cell' } }) export class DataTableCellComponent implements OnInit, OnDestroy { diff --git a/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.spec.ts b/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.spec.ts index 1de6ca933c..73c967ca4b 100644 --- a/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.spec.ts @@ -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; @@ -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', () => { diff --git a/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.ts b/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.ts index 0c22329a3d..516c3f53a9 100644 --- a/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.ts +++ b/lib/core/src/lib/datatable/components/datatable-row/datatable-row.component.ts @@ -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: ``, 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; } diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index 8b11738091..b958ebacd1 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -1,412 +1,406 @@ -
- - +
+
+ - - - + +
+ {{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }} +
- - - - - + +
+ {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }} +
- +
-
- - {{ col.title | translate }} +
+ + {{col.title | translate}} - - {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} + + {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} + + + + + +
+ +
+ + - - + -
- + + + +
- - - - - - - - - +
+
+
+
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- {{ asIconValue(row, col) }} - - - - - - - - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- - - - -
-
-
- + + -
-
- + + {{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }} + +
- - + +
- - - - - - - - + + +
+
+ +
+ {{ asIconValue(row, col) }} + + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + + +
+
+
+ + +
+
+
+ + +
+ + + + + + + +
+ +
+
+ + + +
+
+ +
+
+ + [ngForTemplate]="noPermissionTemplate"> - - - - - - - - - - - - - - - - - +
+
+
+
+ + +
+
+
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index a3c4acae8f..db718bb0fc 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss @@ -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%; } diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts index 6f973c9786..700591cf45 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts @@ -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: ` ` -}) +@Component({ selector: 'adf-custom-column-template-component', template: ` ` }) class CustomColumnTemplateComponent { @ViewChild('tmplRef', { static: true }) templateRef: TemplateRef; } - @Component({ selector: 'adf-custom-column-header-component', - template: ` CUSTOM HEADER` + template: ` CUSTOM HEADER ` }) class CustomColumnHeaderComponent { @ViewChild('tmplRef', { static: true }) templateRef: TemplateRef; @@ -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) diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts index 093fef1e80..3924f256c1 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.stories.ts @@ -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: { diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts index 06096b4f68..d1809a3b0b 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts @@ -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 { diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.html b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.html index f54005de83..398963c834 100644 --- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.html +++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.html @@ -1,12 +1,14 @@ - + {{ date | adfTimeAgo: config.locale }} - + {{ date | adfLocalizedDate: config.format: config.locale }} diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts index e3f99df047..9a751f9140 100644 --- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts @@ -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); diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts index 4ce0e60077..a7ac4ce27e 100644 --- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts +++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts @@ -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; diff --git a/lib/core/src/lib/datatable/components/empty-list/empty-list.component.spec.ts b/lib/core/src/lib/datatable/components/empty-list/empty-list.component.spec.ts index 4c51841e22..4c1151c1fd 100644 --- a/lib/core/src/lib/datatable/components/empty-list/empty-list.component.spec.ts +++ b/lib/core/src/lib/datatable/components/empty-list/empty-list.component.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/components/empty-list/empty-list.component.ts b/lib/core/src/lib/datatable/components/empty-list/empty-list.component.ts index 1299db4a41..7bb3e4e89b 100644 --- a/lib/core/src/lib/datatable/components/empty-list/empty-list.component.ts +++ b/lib/core/src/lib/datatable/components/empty-list/empty-list.component.ts @@ -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 {} diff --git a/lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts b/lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts index 257ec4a8d3..cc5e47dae8 100644 --- a/lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts +++ b/lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts @@ -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: ` {{ fileSize }} `, encapsulation: ViewEncapsulation.None, - imports: [NgIf, AsyncPipe, FileSizePipe], host: { class: 'adf-filesize-cell' } }) export class FileSizeCellComponent extends DataTableCellComponent implements OnInit { + ngOnInit(): void { super.ngOnInit(); } diff --git a/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.spec.ts b/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.spec.ts index bcadc01699..d167d39211 100644 --- a/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.ts b/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.ts index 64acab096e..aa21ee3237 100644 --- a/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.ts +++ b/lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.ts @@ -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, diff --git a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.html b/lib/core/src/lib/datatable/components/json-cell/json-cell.component.html deleted file mode 100644 index c1fda144ad..0000000000 --- a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.spec.ts b/lib/core/src/lib/datatable/components/json-cell/json-cell.component.spec.ts index 99afdcfae8..1c22f55c63 100644 --- a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/json-cell/json-cell.component.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts b/lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts index 39b40d6d53..7f68f7e307 100644 --- a/lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts +++ b/lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts @@ -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: ` + + + + + + + + `, 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 { diff --git a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts index c8d8a64a5d..c7250d6ee1 100644 --- a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.spec.ts @@ -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: '' }; diff --git a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts index 91be8b79cb..8afc921ca6 100644 --- a/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts +++ b/lib/core/src/lib/datatable/components/location-cell/location-cell.component.ts @@ -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: ` diff --git a/lib/core/src/lib/datatable/components/mocks/datatable.mock.ts b/lib/core/src/lib/datatable/components/mocks/datatable.mock.ts index 2b28fdbab5..8f9c1d9325 100644 --- a/lib/core/src/lib/datatable/components/mocks/datatable.mock.ts +++ b/lib/core/src/lib/datatable/components/mocks/datatable.mock.ts @@ -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' } diff --git a/lib/core/src/lib/datatable/components/number-cell/number-cell.component.html b/lib/core/src/lib/datatable/components/number-cell/number-cell.component.html index 29c47ba726..87eb4dbc3a 100644 --- a/lib/core/src/lib/datatable/components/number-cell/number-cell.component.html +++ b/lib/core/src/lib/datatable/components/number-cell/number-cell.component.html @@ -1,9 +1,8 @@ - {{ - number | number: - (decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo): - (decimalConfig?.locale || defaultDecimalConfig.locale) + {{ number | number: + (decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo): + (decimalConfig?.locale || defaultDecimalConfig.locale) }} diff --git a/lib/core/src/lib/datatable/components/number-cell/number-cell.component.spec.ts b/lib/core/src/lib/datatable/components/number-cell/number-cell.component.spec.ts index d81a3d5ca5..5afb20835e 100644 --- a/lib/core/src/lib/datatable/components/number-cell/number-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/number-cell/number-cell.component.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/components/number-cell/number-cell.component.ts b/lib/core/src/lib/datatable/components/number-cell/number-cell.component.ts index 76ccb60b13..00224d6e89 100644 --- a/lib/core/src/lib/datatable/components/number-cell/number-cell.component.ts +++ b/lib/core/src/lib/datatable/components/number-cell/number-cell.component.ts @@ -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; diff --git a/lib/core/src/lib/datatable/data-column/data-column-header.component.ts b/lib/core/src/lib/datatable/data-column/data-column-header.component.ts index 8176d33568..e3277d93f4 100644 --- a/lib/core/src/lib/datatable/data-column/data-column-header.component.ts +++ b/lib/core/src/lib/datatable/data-column/data-column-header.component.ts @@ -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; diff --git a/lib/core/src/lib/datatable/data-column/data-column-list.component.ts b/lib/core/src/lib/datatable/data-column/data-column-list.component.ts index 784841d0c1..bc7995089c 100644 --- a/lib/core/src/lib/datatable/data-column/data-column-list.component.ts +++ b/lib/core/src/lib/datatable/data-column/data-column-list.component.ts @@ -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; + } diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.spec.ts b/lib/core/src/lib/datatable/data-column/data-column.component.spec.ts index d14c69d737..8b3b291c3e 100644 --- a/lib/core/src/lib/datatable/data-column/data-column.component.spec.ts +++ b/lib/core/src/lib/datatable/data-column/data-column.component.spec.ts @@ -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(() => { diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts b/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts index a4c3c62a1c..c6095b2357 100644 --- a/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts +++ b/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts @@ -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 = (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' }; + diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.ts b/lib/core/src/lib/datatable/data-column/data-column.component.ts index 4e83721a8e..3d61e61e6d 100644 --- a/lib/core/src/lib/datatable/data-column/data-column.component.ts +++ b/lib/core/src/lib/datatable/data-column/data-column.component.ts @@ -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; diff --git a/lib/core/src/lib/datatable/data-column/data-column.module.ts b/lib/core/src/lib/datatable/data-column/data-column.module.ts index 7310b9248e..b4e1dd1256 100644 --- a/lib/core/src/lib/datatable/data-column/data-column.module.ts +++ b/lib/core/src/lib/datatable/data-column/data-column.module.ts @@ -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 {} diff --git a/lib/core/src/lib/datatable/data/data-column.model.ts b/lib/core/src/lib/datatable/data/data-column.model.ts index 72944df49f..84fa8a86a7 100644 --- a/lib/core/src/lib/datatable/data/data-column.model.ts +++ b/lib/core/src/lib/datatable/data/data-column.model.ts @@ -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 { id?: string; diff --git a/lib/core/src/lib/datatable/data/data-sorting.model.ts b/lib/core/src/lib/datatable/data/data-sorting.model.ts index ac2f317198..197dcea0d1 100644 --- a/lib/core/src/lib/datatable/data/data-sorting.model.ts +++ b/lib/core/src/lib/datatable/data/data-sorting.model.ts @@ -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 + ) { + } } diff --git a/lib/core/src/lib/datatable/data/data-table.schema.ts b/lib/core/src/lib/datatable/data/data-table.schema.ts index 4e1d40fa4b..eb0c9e19bd 100644 --- a/lib/core/src/lib/datatable/data/data-table.schema.ts +++ b/lib/core/src/lib/datatable/data/data-table.schema.ts @@ -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'; diff --git a/lib/core/src/lib/datatable/data/datatable-adapter.ts b/lib/core/src/lib/datatable/data/datatable-adapter.ts index 7c48331404..aaef65e0bd 100644 --- a/lib/core/src/lib/datatable/data/datatable-adapter.ts +++ b/lib/core/src/lib/datatable/data/datatable-adapter.ts @@ -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>; selectedRow: DataRow; - getRows(): Array; - setRows(rows: Array): void; - getColumns(): Array; - setColumns(columns: Array): 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; } diff --git a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts index 951642ac3b..abf6ec2aaa 100644 --- a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts +++ b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts @@ -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 implements DataColumn { diff --git a/lib/core/src/lib/datatable/data/object-datarow.model.ts b/lib/core/src/lib/datatable/data/object-datarow.model.ts index 4c6516208c..dc1202ef4f 100644 --- a/lib/core/src/lib/datatable/data/object-datarow.model.ts +++ b/lib/core/src/lib/datatable/data/object-datarow.model.ts @@ -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 { diff --git a/lib/core/src/lib/datatable/data/object-datatable-adapter.spec.ts b/lib/core/src/lib/datatable/data/object-datatable-adapter.spec.ts index cbc3cb9f7e..ba2064c390 100644 --- a/lib/core/src/lib/datatable/data/object-datatable-adapter.spec.ts +++ b/lib/core/src/lib/datatable/data/object-datatable-adapter.spec.ts @@ -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' } ]; diff --git a/lib/core/src/lib/datatable/data/object-datatable-adapter.ts b/lib/core/src/lib/datatable/data/object-datatable-adapter.ts index 4c010bf29e..aea687446a 100644 --- a/lib/core/src/lib/datatable/data/object-datatable-adapter.ts +++ b/lib/core/src/lib/datatable/data/object-datatable-adapter.ts @@ -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 { diff --git a/lib/core/src/lib/datatable/datatable.module.ts b/lib/core/src/lib/datatable/datatable.module.ts index e581e94e95..57e17bbd76 100644 --- a/lib/core/src/lib/datatable/datatable.module.ts +++ b/lib/core/src/lib/datatable/datatable.module.ts @@ -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, diff --git a/lib/core/src/lib/datatable/directives/custom-empty-content-template.directive.ts b/lib/core/src/lib/datatable/directives/custom-empty-content-template.directive.ts index 7145e2abc1..9f53287228 100644 --- a/lib/core/src/lib/datatable/directives/custom-empty-content-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/custom-empty-content-template.directive.ts @@ -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 {} diff --git a/lib/core/src/lib/datatable/directives/custom-loading-template.directive.ts b/lib/core/src/lib/datatable/directives/custom-loading-template.directive.ts index dc133d7cce..3a7f7da546 100644 --- a/lib/core/src/lib/datatable/directives/custom-loading-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/custom-loading-template.directive.ts @@ -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 {} diff --git a/lib/core/src/lib/datatable/directives/custom-no-permission-template.directive.ts b/lib/core/src/lib/datatable/directives/custom-no-permission-template.directive.ts index 3cbf2fd92d..28fea6057e 100644 --- a/lib/core/src/lib/datatable/directives/custom-no-permission-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/custom-no-permission-template.directive.ts @@ -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 {} diff --git a/lib/core/src/lib/datatable/directives/drop-zone.directive.ts b/lib/core/src/lib/datatable/directives/drop-zone.directive.ts index a8eeeb0122..3722f52713 100644 --- a/lib/core/src/lib/datatable/directives/drop-zone.directive.ts +++ b/lib/core/src/lib/datatable/directives/drop-zone.directive.ts @@ -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; diff --git a/lib/core/src/lib/datatable/directives/header-filter-template.directive.spec.ts b/lib/core/src/lib/datatable/directives/header-filter-template.directive.spec.ts index beb4355d79..3291167c0f 100644 --- a/lib/core/src/lib/datatable/directives/header-filter-template.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/header-filter-template.directive.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/directives/header-filter-template.directive.ts b/lib/core/src/lib/datatable/directives/header-filter-template.directive.ts index aa1a74bd24..a8b3fb7506 100644 --- a/lib/core/src/lib/datatable/directives/header-filter-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/header-filter-template.directive.ts @@ -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) { diff --git a/lib/core/src/lib/datatable/directives/loading-template.directive.spec.ts b/lib/core/src/lib/datatable/directives/loading-template.directive.spec.ts index a97c469b9d..efc18441a9 100644 --- a/lib/core/src/lib/datatable/directives/loading-template.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/loading-template.directive.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/directives/loading-template.directive.ts b/lib/core/src/lib/datatable/directives/loading-template.directive.ts index d6849ea9e1..c066d3eef6 100644 --- a/lib/core/src/lib/datatable/directives/loading-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/loading-template.directive.ts @@ -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; } } + } diff --git a/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.spec.ts b/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.spec.ts index 7aa7984c46..b266a5bf52 100644 --- a/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.spec.ts @@ -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; let dataTable: DataTableComponent; let directive: MainMenuDataTableTemplateDirective; diff --git a/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.ts b/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.ts index e32496489f..ed8749e42d 100644 --- a/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.ts @@ -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; diff --git a/lib/core/src/lib/datatable/directives/no-content-template.directive.spec.ts b/lib/core/src/lib/datatable/directives/no-content-template.directive.spec.ts index a073cd71cb..5f1670f090 100644 --- a/lib/core/src/lib/datatable/directives/no-content-template.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/no-content-template.directive.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/directives/no-content-template.directive.ts b/lib/core/src/lib/datatable/directives/no-content-template.directive.ts index 0d0c6a6a42..1c6187468b 100644 --- a/lib/core/src/lib/datatable/directives/no-content-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/no-content-template.directive.ts @@ -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) { diff --git a/lib/core/src/lib/datatable/directives/no-permission-template.directive.spec.ts b/lib/core/src/lib/datatable/directives/no-permission-template.directive.spec.ts index e44f0b13e3..6eaa7341f4 100644 --- a/lib/core/src/lib/datatable/directives/no-permission-template.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/no-permission-template.directive.spec.ts @@ -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; diff --git a/lib/core/src/lib/datatable/directives/no-permission-template.directive.ts b/lib/core/src/lib/datatable/directives/no-permission-template.directive.ts index 06b9b4c2c7..aaa3021642 100644 --- a/lib/core/src/lib/datatable/directives/no-permission-template.directive.ts +++ b/lib/core/src/lib/datatable/directives/no-permission-template.directive.ts @@ -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) { diff --git a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts index a902a71789..2182dbce9e 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts @@ -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 } }); }); }); diff --git a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts index 677fc46816..0ff2eabeed 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts @@ -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 { diff --git a/lib/core/src/lib/datatable/directives/resizable/resizable.module.ts b/lib/core/src/lib/datatable/directives/resizable/resizable.module.ts index 66d2f23ddd..116061c85f 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resizable.module.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resizable.module.ts @@ -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 {} diff --git a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts index 71a8acaf45..cda879492c 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts @@ -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 } diff --git a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts index 7f2bc60ae2..d431eb219d 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts @@ -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 { /** diff --git a/lib/core/src/lib/datatable/public-api.ts b/lib/core/src/lib/datatable/public-api.ts index bc3ec5cdaa..378952b87a 100644 --- a/lib/core/src/lib/datatable/public-api.ts +++ b/lib/core/src/lib/datatable/public-api.ts @@ -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'; diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts index b370b00ccb..e1d1f6c1a5 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts @@ -15,25 +15,35 @@ * limitations under the License. */ -import { AppConfigService, ColumnsSelectorComponent, DataColumn, DataRowEvent, getDataColumnMock, ObjectDataRow, User } from '@alfresco/adf-core'; +import { Component, SimpleChange, ViewChild } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { + AppConfigService, + ColumnsSelectorComponent, + CustomEmptyContentTemplateDirective, + DataColumn, + DataRowEvent, + DataTableModule, + getDataColumnMock, + ObjectDataRow, + User +} from '@alfresco/adf-core'; +import { ProcessListCloudService } from '../services/process-list-cloud.service'; +import { ProcessListCloudComponent } from './process-list-cloud.component'; +import { fakeCustomSchema, fakeProcessCloudList, processListSchemaMock } from '../mock/process-list-service.mock'; +import { of } from 'rxjs'; +import { shareReplay, skip } from 'rxjs/operators'; +import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module'; +import { ProcessListCloudSortingModel } from '../models/process-list-sorting.model'; +import { PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN } from '../../../services/cloud-token.service'; +import { ProcessListCloudPreferences } from '../models/process-cloud-preferences'; +import { PROCESS_LIST_CUSTOM_VARIABLE_COLUMN } from '../../../models/data-column-custom-data'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { PreferenceCloudServiceInterface } from '@alfresco/adf-process-services-cloud'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; -import { Component, SimpleChange, ViewChild } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing'; -import { By } from '@angular/platform-browser'; -import { of } from 'rxjs'; -import { shareReplay, skip } from 'rxjs/operators'; -import { PROCESS_LIST_CUSTOM_VARIABLE_COLUMN } from '../../../models/data-column-custom-data'; -import { PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN } from '../../../services/cloud-token.service'; -import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module'; -import { fakeCustomSchema, fakeProcessCloudList, processListSchemaMock } from '../mock/process-list-service.mock'; -import { ProcessListCloudPreferences } from '../models/process-cloud-preferences'; -import { ProcessListCloudSortingModel } from '../models/process-list-sorting.model'; -import { ProcessListCloudService } from '../services/process-list-cloud.service'; -import { ProcessListCloudComponent } from './process-list-cloud.component'; @Component({ template: ` @@ -626,9 +636,9 @@ describe('ProcessListCloudComponent: Creating an empty custom template - EmptyTe beforeEach(() => { TestBed.configureTestingModule({ - imports: [ProcessServiceCloudTestingModule, MatProgressSpinnerModule], + imports: [ProcessServiceCloudTestingModule, DataTableModule, MatProgressSpinnerModule], providers: [{ provide: PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN, useValue: preferencesService }], - declarations: [EmptyTemplateComponent, ProcessListCloudComponent] + declarations: [EmptyTemplateComponent, ProcessListCloudComponent, CustomEmptyContentTemplateDirective] }); fixtureEmpty = TestBed.createComponent(EmptyTemplateComponent); fixtureEmpty.detectChanges(); diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts index f62a72009c..a28dd37f7f 100644 --- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts @@ -650,7 +650,7 @@ describe('TaskListCloudComponent: Copy cell content directive from app.config sp fixture.detectChanges(); const cell = fixture.debugElement.query(By.css('[data-automation-id="text_ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NONE"]')); - expect(cell.nativeElement.textContent.trim()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NONE'); + expect(cell.nativeElement.textContent).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NONE'); }); it('replacePriorityValues should return undefined when no rows defined', () => { diff --git a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts b/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts index 65cdf23688..9ec7ad551c 100644 --- a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts +++ b/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts @@ -24,6 +24,7 @@ import { materialLocators } from './public-api'; const MAX_LOADING_TIME = 120000; export class DataTableComponentPage { + rootElement: ElementFinder; list: ElementArrayFinder; contents: ElementArrayFinder; @@ -38,22 +39,22 @@ export class DataTableComponentPage { noContentContainer: ElementFinder; mainMenuButton: ElementFinder; - rows = `adf-datatable tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`; + rows = `adf-datatable div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`; constructor(rootElement = $$('adf-datatable').first()) { this.rootElement = rootElement; - this.list = this.rootElement.$$(`tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`); + this.list = this.rootElement.$$(`div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`); this.contents = this.rootElement.$$('.adf-datatable-body span'); this.tableBody = this.rootElement.$$(`.adf-datatable-body`).first(); this.allColumns = this.rootElement.$$('div[data-automation-id*="auto_header_content_id"]'); this.mainMenuButton = this.rootElement.$('[data-automation-id="adf-datatable-main-menu-button"]'); this.selectedRowNumber = this.rootElement.$(`adf-datatable-row[class*='is-selected'] div[data-automation-id*='text_']`); this.allSelectedRows = this.rootElement.$$(`adf-datatable-row[class*='is-selected']`); - this.selectAll = this.rootElement.$(`thead[class*='adf-datatable-header'] ${materialLocators.Checkbox.root}`); + this.selectAll = this.rootElement.$(`div[class*='adf-datatable-header'] ${materialLocators.Checkbox.root}`); this.emptyList = this.rootElement.$(`adf-empty-content`); this.emptyListTitle = this.rootElement.$(`.adf-empty-content__title`); this.emptyListSubtitle = this.rootElement.$(`.adf-empty-content__subtitle`); - this.noContentContainer = $(`td[class*='adf-no-content-container']`); + this.noContentContainer = $(`div[class*='adf-no-content-container']`); } geCellElementDetail(detail: string): ElementArrayFinder { @@ -113,23 +114,19 @@ export class DataTableComponentPage { } async checkRowIsSelected(columnName: string, columnValue: string): Promise { - const selectedRow = this.getCellElementByValue(columnName, columnValue).element( - by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`) - ); + const selectedRow = this.getCellElementByValue(columnName, columnValue).element(by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`)); await BrowserVisibility.waitUntilElementIsVisible(selectedRow); } async checkRowIsNotSelected(columnName: string, columnValue: string): Promise { - const selectedRow = this.getCellElementByValue(columnName, columnValue).element( - by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`) - ); + const selectedRow = this.getCellElementByValue(columnName, columnValue).element(by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`)); await BrowserVisibility.waitUntilElementIsNotVisible(selectedRow); } async getColumnValueForRow(identifyingColumn: string, identifyingValue: string, columnName: string): Promise { const row = this.getRow(identifyingColumn, identifyingValue); await BrowserVisibility.waitUntilElementIsVisible(row); - const rowColumn = row.$(`td[title="${columnName}"] span`); + const rowColumn = row.$(`div[title="${columnName}"] span`); return BrowserActions.getText(rowColumn); } @@ -142,7 +139,7 @@ export class DataTableComponentPage { * @returns 'true' if the list is sorted as await expected and 'false' if it isn't */ async checkListIsSorted(sortOrder: string, columnTitle: string, listType: string = 'STRING'): Promise { - const column = $$(`td.adf-datatable-cell[title='${columnTitle}'] span`); + const column = $$(`div.adf-datatable-cell[title='${columnTitle}'] span`); await BrowserVisibility.waitUntilElementIsVisible(column.first()); const initialList: string[] = []; @@ -232,14 +229,14 @@ export class DataTableComponentPage { async getAllRowsColumnValues(column: string): Promise { let columnValues: string[] = []; - const columnLocator = $$( - `adf-datatable tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row'] *[title="${column}"] span` - ); + const columnLocator = $$(`adf-datatable div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row'] div[title="${column}"] span`); await BrowserVisibility.waitUntilElementIsPresent(columnLocator.first(), 1000); try { await BrowserVisibility.waitUntilElementIsPresent(columnLocator.first(), 1000); - columnValues = await columnLocator.filter(async (el) => el.isPresent()).map(async (el) => el.getText()); + columnValues = await columnLocator + .filter(async (el) => el.isPresent()) + .map(async (el) => el.getText()); } catch (error) { Logger.log(error); } @@ -248,7 +245,7 @@ export class DataTableComponentPage { } async getRowsWithSameColumnValues(columnName: string, columnValue: string) { - const columnLocator = `td[title='${columnName}'] div[data-automation-id="text_${columnValue}"] span`; + const columnLocator = `div[title='${columnName}'] div[data-automation-id="text_${columnValue}"] span`; await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.$$(columnLocator).first()); return this.rootElement.$$(columnLocator).getText(); } @@ -276,7 +273,7 @@ export class DataTableComponentPage { * @param titleColumn column title */ async sortByColumn(sortOrder: string, titleColumn: string): Promise { - const locator = $(`th[data-automation-id="auto_id_${titleColumn}"]`); + const locator = $(`div[data-automation-id="auto_id_${titleColumn}"]`); await BrowserVisibility.waitUntilElementIsVisible(locator); const result = await BrowserActions.getAttribute(locator, 'class'); @@ -329,20 +326,12 @@ export class DataTableComponentPage { } getRow(columnName: string, columnValue: string): ElementFinder { - return this.rootElement - .all( - by.xpath( - `//td[starts-with(@title, '${columnName}')]//div[contains(@data-automation-id, '${columnValue}')]//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]` - ) - ) - .first(); + return this.rootElement.all(by.xpath(`//div[starts-with(@title, '${columnName}')]//div[contains(@data-automation-id, '${columnValue}')]//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`)).first(); } // @deprecated use Playwright instead getRowByIndex(index: number): ElementFinder { - return this.rootElement.element( - by.xpath(`//div[contains(@class,'adf-datatable-body')]//adf-datatable-row[contains(@class,'adf-datatable-row')][${index}]`) - ); + return this.rootElement.element(by.xpath(`//div[contains(@class,'adf-datatable-body')]//adf-datatable-row[contains(@class,'adf-datatable-row')][${index}]`)); } async contentInPosition(position: number): Promise { @@ -351,7 +340,7 @@ export class DataTableComponentPage { } getCellElementByValue(columnName: string, columnValue: string, columnPrefix = 'text_'): ElementFinder { - return this.rootElement.$$(`td[title="${columnName}"] div[data-automation-id="${columnPrefix}${columnValue}"] span`).first(); + return this.rootElement.$$(`div[title="${columnName}"] div[data-automation-id="${columnPrefix}${columnValue}"] span`).first(); } async tableIsLoaded(): Promise { @@ -361,27 +350,23 @@ export class DataTableComponentPage { async waitTillContentLoaded(): Promise { if (await this.isSpinnerPresent()) { Logger.log('wait datatable loading spinner disappear'); - await BrowserVisibility.waitUntilElementIsNotVisible( - this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), - MAX_LOADING_TIME - ); + await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME); if (await this.isEmpty()) { Logger.log('empty page'); } else { await this.waitFirstElementPresent(); } + } else if (await this.isEmpty()) { Logger.log('empty page'); } else { try { Logger.log('wait datatable loading spinner is present'); await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), 2000); - await BrowserVisibility.waitUntilElementIsNotVisible( - this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), - MAX_LOADING_TIME - ); - } catch (error) {} + await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME); + } catch (error) { + } if (await this.isEmpty()) { Logger.log('empty page'); @@ -407,7 +392,8 @@ export class DataTableComponentPage { try { Logger.log('wait datatable loading spinner is present'); await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName(materialLocators.Progress.bar.root))); - } catch (error) {} + } catch (error) { + } if (await this.isEmpty()) { Logger.log('empty page'); } else { @@ -418,10 +404,14 @@ export class DataTableComponentPage { // @deprecated use Playwright instead async isColumnDisplayed(columnTitle: string): Promise { - return (await this.allColumns).some(async (column) => { - const columnText = await column.getText(); - return columnText === columnTitle; - }); + const isColumnDisplayed = (await this.allColumns).some( + async column => { + const columnText = await column.getText(); + return columnText === columnTitle; + } + ); + + return isColumnDisplayed; } // @deprecated use Playwright instead @@ -434,11 +424,11 @@ export class DataTableComponentPage { } getCellByRowNumberAndColumnName(rowNumber: number, columnName: string): ElementFinder { - return this.list.get(rowNumber).$$(`td[title="${columnName}"] span`).first(); + return this.list.get(rowNumber).$$(`div[title="${columnName}"] span`).first(); } getCellByRowContentAndColumn(rowColumn: string, rowContent: string, columnName: string): ElementFinder { - return this.getRow(rowColumn, rowContent).$(`td[title='${columnName}']`); + return this.getRow(rowColumn, rowContent).$(`div[title='${columnName}']`); } async selectRowByContent(content: string): Promise { @@ -457,52 +447,42 @@ export class DataTableComponentPage { } getCellByContent(content: string): ElementFinder { - return this.rootElement - .all(by.cssContainingText(`adf-datatable-row[class*='adf-datatable-row'] td[class*='adf-datatable-cell']`, content)) - .first(); + return this.rootElement.all(by.cssContainingText(`adf-datatable-row[class*='adf-datatable-row'] div[class*='adf-datatable-cell']`, content)).first(); } async checkCellByHighlightContent(content: string): Promise { - const cell = this.rootElement.element( - by.cssContainingText( - `adf-datatable-row[class*='adf-datatable-row'] div[class*='adf-name-location-cell-name'] span.adf-highlight`, - content - ) - ); + const cell = this.rootElement.element(by.cssContainingText(`adf-datatable-row[class*='adf-datatable-row'] div[class*='adf-name-location-cell-name'] span.adf-highlight`, content)); await BrowserVisibility.waitUntilElementIsVisible(cell); } async clickRowByContent(name: string): Promise { - const resultElement = this.rootElement.$$(`td[data-automation-id='${name}']`).first(); + const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first(); await BrowserActions.click(resultElement); } async clickRowByContentCheckbox(name: string): Promise { - const resultElement = this.rootElement - .$$(`div[data-automation-id='${name}']`) - .first() - .element(by.xpath(`ancestor::adf-datatable-row/label/${materialLocators.Checkbox.root}`)); + const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first().element(by.xpath(`ancestor::adf-datatable-row/label/${materialLocators.Checkbox.root}`)); browser.actions().mouseMove(resultElement); await BrowserActions.click(resultElement); } async checkRowContentIsDisplayed(content: string): Promise { - const resultElement = this.rootElement.$$(`td[data-automation-id='${content}']`).first(); + const resultElement = this.rootElement.$$(`div[data-automation-id='${content}']`).first(); await BrowserVisibility.waitUntilElementIsVisible(resultElement); } async checkRowContentIsNotDisplayed(content: string): Promise { - const resultElement = this.rootElement.$$(`tr[data-automation-id='${content}']`).first(); + const resultElement = this.rootElement.$$(`div[data-automation-id='${content}']`).first(); await BrowserVisibility.waitUntilElementIsNotVisible(resultElement); } async checkRowContentIsDisabled(content: string): Promise { - const resultElement = this.rootElement.$$(`tr[data-automation-id='${content}'] div.adf-cell-value img[aria-label='Disabled']`).first(); + const resultElement = this.rootElement.$$(`div[data-automation-id='${content}'] div.adf-cell-value img[aria-label='Disabled']`).first(); await BrowserVisibility.waitUntilElementIsVisible(resultElement); } async doubleClickRowByContent(name: string): Promise { - const resultElement = this.rootElement.$$(`td[data-automation-id='${name}']`).first(); + const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first(); await BrowserActions.click(resultElement); await browser.actions().sendKeys(protractor.Key.ENTER).perform(); } diff --git a/lib/testing/src/lib/protractor/core/pages/data-table/column.ts b/lib/testing/src/lib/protractor/core/pages/data-table/column.ts index 7551de0fd8..731feed600 100644 --- a/lib/testing/src/lib/protractor/core/pages/data-table/column.ts +++ b/lib/testing/src/lib/protractor/core/pages/data-table/column.ts @@ -19,7 +19,7 @@ export abstract class Column { columnName: string; columnType: string; - constructor(columnName: string, columnType: string) { + constructor(columnName: string, columnType: string ) { this.columnName = columnName; this.columnType = columnType; } diff --git a/lib/testing/src/lib/protractor/core/pages/data-table/data-table-item.ts b/lib/testing/src/lib/protractor/core/pages/data-table/data-table-item.ts index a893ff4801..8b7a2989ee 100644 --- a/lib/testing/src/lib/protractor/core/pages/data-table/data-table-item.ts +++ b/lib/testing/src/lib/protractor/core/pages/data-table/data-table-item.ts @@ -23,7 +23,7 @@ import { BrowserVisibility } from '../../utils/browser-visibility'; export class DataTableItem { columns = new Array(); rootElement: ElementFinder; - rows = `tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`; + rows = `div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`; constructor(rootElement = $$('adf-datatable').first()) { this.rootElement = rootElement; @@ -34,16 +34,14 @@ export class DataTableItem { } async getColumn(columnName: string): Promise { - return this.columns.find((column) => column.getColumnName() === columnName); + return this.columns.find( + (column) => column.getColumnName() === columnName + ); } async getRow(columnName: string, columnValue: string): Promise { - console.log('getRow', '-------------------------------------------------------'); const column = await this.getColumn(columnName); - const locator = - `//td[@title="${column.columnName}"]` + - column.createLocator(columnValue) + - `//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`; + const locator = `//div[@title="${column.columnName}"]` + column.createLocator(columnValue) + `//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`; return this.rootElement.element(by.xpath(locator)); } @@ -73,26 +71,19 @@ export class DataTableItem { async getColumnValueForRow(identifyingColumnName: string, identifyingColumnValue: string, columnName: string): Promise { const row = await this.getRow(identifyingColumnName, identifyingColumnValue); await BrowserVisibility.waitUntilElementIsVisible(row); - const rowColumn = row.$(`td[title="${columnName}"] span`); + const rowColumn = row.$(`div[title="${columnName}"] span`); return BrowserActions.getText(rowColumn); } async checkRowIsSelected(columnName: string, columnValue: string): Promise { - console.log('checkRowIsSelected', '-------------------------------------------------------'); const column = await this.getColumn(columnName); - const locator = - `//td[@title="${column.columnName}"]` + - column.createLocator(columnValue) + - `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`; + const locator = `//div[@title="${column.columnName}"]` + column.createLocator(columnValue) + `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`; await BrowserVisibility.waitUntilElementIsVisible(element(by.xpath(locator))); } async checkRowIsNotSelected(columnName: string, columnValue: string): Promise { const column = await this.getColumn(columnName); - const locator = - `//div[@title="${column.columnName}"]` + - column.createLocator(columnValue) + - `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`; + const locator = `//div[@title="${column.columnName}"]` + column.createLocator(columnValue) + `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`; await BrowserVisibility.waitUntilElementIsNotVisible(element(by.xpath(locator))); } diff --git a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts b/lib/testing/src/lib/protractor/core/pages/viewer.page.ts index 01da0955dd..09fbf52648 100644 --- a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts +++ b/lib/testing/src/lib/protractor/core/pages/viewer.page.ts @@ -58,7 +58,7 @@ export class ViewerPage { unknownFormat = $(`adf-viewer-unknown-format .adf-viewer__unknown-format-view`); async viewFile(fileName: string): Promise { - const fileView = $$(`#document-list-container td[data-automation-id="${fileName}"]`).first(); + const fileView = $$(`#document-list-container div[data-automation-id="${fileName}"]`).first(); await BrowserActions.click(fileView); await browser.actions().sendKeys(protractor.Key.ENTER).perform(); await this.waitTillContentLoaded(); @@ -245,7 +245,7 @@ export class ViewerPage { } async clickInfoButton(): Promise { - await BrowserActions.click(this.infoButton); + await BrowserActions.click($('button[data-automation-id="adf-toolbar-sidebar"]')); } async clickOnTab(tabName: string): Promise {