diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 0c29a253285..798d9ac461a 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -183,7 +183,7 @@ key="createdAt" sortingKey="createdAt" type="date" - [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'" + [format]="'timeAgo'" class="adf-ellipsis-cell"> @@ -330,12 +330,6 @@ -
- - Enable medium time format for document list - -
-
Display Empty Metadata diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts index 8b3ad4810df..935e2b97776 100644 --- a/demo-shell/src/app/components/files/files.component.ts +++ b/demo-shell/src/app/components/files/files.component.ts @@ -185,7 +185,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy { permissionsStyle: PermissionStyleModel[] = []; stickyHeader: boolean; - enableMediumTimeFormat = false; displayEmptyMetadata = false; constructor( diff --git a/e2e/content-services/document-list/document-list-component.e2e.ts b/e2e/content-services/document-list/document-list-component.e2e.ts index 971922a472d..cc69fcf6a95 100644 --- a/e2e/content-services/document-list/document-list-component.e2e.ts +++ b/e2e/content-services/document-list/document-list-component.e2e.ts @@ -21,7 +21,6 @@ import { createApiService, LoginPage, StringUtil, UploadActions, UserModel, User import { FileModel } from '../../models/ACS/file.model'; import { NavigationBarPage } from '../../core/pages/navigation-bar.page'; import { NodeEntry } from '@alfresco/js-api'; -import { format } from 'date-fns'; describe('Document List Component', () => { let uploadedFolder: NodeEntry; @@ -70,14 +69,6 @@ describe('Document List Component', () => { name: browser.params.resources.Files.ADF_DOCUMENTS.DOCX.file_name, location: browser.params.resources.Files.ADF_DOCUMENTS.DOCX.file_path }); - const timeAgoFileModel = new FileModel({ - name: browser.params.resources.Files.ADF_DOCUMENTS.TEST.file_name, - location: browser.params.resources.Files.ADF_DOCUMENTS.TEST.file_path - }); - const mediumFileModel = new FileModel({ - name: browser.params.resources.Files.ADF_DOCUMENTS.PDF_B.file_name, - location: browser.params.resources.Files.ADF_DOCUMENTS.PDF_B.file_path - }); let pdfUploadedNode: NodeEntry; let docxUploadedNode: NodeEntry; @@ -138,24 +129,6 @@ describe('Document List Component', () => { await contentServicesPage.checkColumnCreatedByHeader(); await contentServicesPage.checkColumnCreatedHeader(); }); - - it('[C279928] Should be able to display date with timeAgo', async () => { - await apiService.login(acsUser.username, acsUser.password); - timeAgoUploadedNode = await uploadActions.uploadFile(timeAgoFileModel.location, timeAgoFileModel.name, '-my-'); - await contentServicesPage.goToDocumentList(); - const dateValue = await contentServicesPage.getColumnValueForRow(timeAgoFileModel.name, 'Created'); - await expect(dateValue).toMatch(/(ago|few)/); - }); - - it('[C279929] Should be able to display the date with date type', async () => { - await apiService.login(acsUser.username, acsUser.password); - mediumDateUploadedNode = await uploadActions.uploadFile(mediumFileModel.location, mediumFileModel.name, '-my-'); - const createdDate = format(new Date(mediumDateUploadedNode.entry.createdAt), 'PP'); - await contentServicesPage.goToDocumentList(); - await contentServicesPage.enableMediumTimeFormat(); - const dateValue = await contentServicesPage.getColumnValueForRow(mediumFileModel.name, 'Created'); - await expect(dateValue).toContain(createdDate); - }); }); describe('Column Sorting', () => { diff --git a/e2e/core/pages/content-services.page.ts b/e2e/core/pages/content-services.page.ts index a8d3425ed2f..1eebfb420f5 100644 --- a/e2e/core/pages/content-services.page.ts +++ b/e2e/core/pages/content-services.page.ts @@ -235,11 +235,6 @@ export class ContentServicesPage { await BrowserVisibility.waitUntilElementIsClickable(this.uploadFileButton); } - async enableMediumTimeFormat(): Promise { - const mediumTimeFormat = $('#enableMediumTimeFormat'); - await BrowserActions.click(mediumTimeFormat); - } - async checkPaginationIsNotDisplayed(): Promise { await BrowserVisibility.waitUntilElementIsVisible(this.emptyPagination); } 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 6dac741a328..398963c8340 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 @@ -2,14 +2,14 @@ + *ngIf="config.format === 'timeAgo'; else standard_date"> {{ date | adfTimeAgo: config.locale }} - {{ date | adfLocalizedDate: format: 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 66fa6919ac5..276358d13d7 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 @@ -175,13 +175,13 @@ describe('DateCellComponent', () => { checkDisplayedDate(expectedDate); }); - it('should display date and override dateConfig by column format if is provided', () => { + it('should display date and override column format by dateConfig if is provided', () => { component.column = mockColumn; const mockDateConfig: DateConfig = { format: 'short' }; - const expectedDate = 'Wednesday, October 25, 2023 at 12:00:00 AM GMT+00:00'; + const expectedDate = '10/25/23, 12:00 AM'; renderDateCell(mockDateConfig, mockDate, mockTooltip); checkDisplayedDate(expectedDate); 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 e91c07bd435..f178a518197 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,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnInit, ViewEncapsulation, inject } from '@angular/core'; +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'; @@ -28,7 +28,8 @@ import { LocalizedDatePipe, TimeAgoPipe } from '../../../pipes'; selector: 'adf-date-cell', templateUrl: './date-cell.component.html', encapsulation: ViewEncapsulation.None, - host: { class: 'adf-datatable-content-cell' } + host: { class: 'adf-datatable-content-cell' }, + changeDetection: ChangeDetectionStrategy.OnPush }) export class DateCellComponent extends DataTableCellComponent implements OnInit { @@ -50,14 +51,36 @@ export class DateCellComponent extends DataTableCellComponent implements OnInit this.setConfig(); } - get format(): string { - return this.column?.format ?? this.config.format; + private setConfig(): void { + if (this.dateConfig) { + this.setCustomConfig(); + } else { + this.setDefaultConfig(); + } } - private setConfig(): void { - this.config.format = this.dateConfig?.format || this.getAppConfigPropertyValue('dateValues.defaultDateFormat', this.defaultDateConfig.format); - this.config.tooltipFormat = this.dateConfig?.tooltipFormat || this.getAppConfigPropertyValue('dateValues.defaultTooltipDateFormat', this.defaultDateConfig.tooltipFormat); - this.config.locale = this.dateConfig?.locale || this.getAppConfigPropertyValue('dateValues.defaultLocale', this.defaultDateConfig.locale); + private setCustomConfig(): void { + this.config.format = this.dateConfig?.format || this.getDefaultFormat(); + this.config.tooltipFormat = this.dateConfig?.tooltipFormat || this.getDefaultTooltipFormat(); + this.config.locale = this.dateConfig?.locale || this.getDefaultLocale(); + } + + private setDefaultConfig(): void { + this.config.format = this.getDefaultFormat(); + this.config.tooltipFormat = this.getDefaultTooltipFormat(); + this.config.locale = this.getDefaultLocale(); + } + + private getDefaultFormat(): string { + return this.column?.format || this.getAppConfigPropertyValue('dateValues.defaultDateFormat', this.defaultDateConfig.format); + } + + private getDefaultLocale(): string { + return this.getAppConfigPropertyValue('dateValues.defaultLocale', this.defaultDateConfig.locale); + } + + private getDefaultTooltipFormat(): string { + return this.getAppConfigPropertyValue('dateValues.defaultTooltipDateFormat', this.defaultDateConfig.tooltipFormat); } private getAppConfigPropertyValue(key: string, defaultValue: string): string {