Skip to content

Commit

Permalink
[APPS-2108] migrate cardview and task filters to date-fns (#9006)
Browse files Browse the repository at this point in the history 
* move based edit task filter to date-fns

* migrate cardview component to date-fns

* bug fixes for card view types, utc and multivalue

* fix copy to clipboard typing issue

* mark moment adapter for deprecation

* exclude e2e

* try migrate metadata smoke
  • Loading branch information
@DenysVuika
DenysVuika committed Oct 18, 2023
1 parent 7d5fbec commit 678df42
Show file tree
Hide file tree
Showing 11 changed files with 150 additions and 105 deletions.
51 changes: 35 additions & 16 deletions e2e/content-services/metadata/metadata-smoke-tests.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ import { MetadataViewPage } from '../../core/pages/metadata-view.page';
import { FileModel } from '../../models/ACS/file.model';
import { browser } from 'protractor';
import { NavigationBarPage } from '../../core/pages/navigation-bar.page';
import * as moment from 'moment';
import { format } from 'date-fns';

describe('Metadata component', () => {

const METADATA = {
DATA_FORMAT: 'll',
DATA_FORMAT: 'PP',
TITLE: 'Details',
COMMENTS_TAB: 'COMMENTS',
PROPERTY_TAB: 'PROPERTIES',
Expand Down Expand Up @@ -108,21 +108,36 @@ describe('Metadata component', () => {
await viewerPage.checkInfoSideBarIsDisplayed();
await metadataViewPage.clickOnPropertiesTab();

await expect(await metadataViewPage.getTitle()).toEqual(METADATA.TITLE);
await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB);
await expect(await metadataViewPage.getExpandedAspectName()).toEqual(METADATA.DEFAULT_ASPECT);
await expect(await metadataViewPage.getName()).toEqual(pngFileModel.name);
await expect(await metadataViewPage.getCreator()).toEqual(pngFileModel.getCreatedByUser().displayName);
await expect(await metadataViewPage.getCreatedDate()).toEqual(moment(pngFileModel.createdAt).format(METADATA.DATA_FORMAT));
await expect(await metadataViewPage.getModifier()).toEqual(pngFileModel.getCreatedByUser().displayName);
await expect(await metadataViewPage.getModifiedDate()).toEqual(moment(pngFileModel.createdAt).format(METADATA.DATA_FORMAT));
await expect(await metadataViewPage.getMimetypeName()).toEqual(pngFileModel.getContent().mimeTypeName);
await expect(await metadataViewPage.getSize()).toEqual(pngFileModel.getContent().getSizeInBytes());
const title = await metadataViewPage.getTitle();
const activeTab = await viewerPage.getActiveTab();
const expandedAspectName = await metadataViewPage.getExpandedAspectName();
const name = await metadataViewPage.getName();
const creator = await metadataViewPage.getCreator();
const createdDate = await metadataViewPage.getCreatedDate();
const modifier = await metadataViewPage.getModifier();
const modifiedDate = await metadataViewPage.getModifiedDate();
const mimeTypeName = await metadataViewPage.getMimetypeName();
const size = await metadataViewPage.getSize();

expect(title).toEqual(METADATA.TITLE);
expect(activeTab).toEqual(METADATA.PROPERTY_TAB);
expect(expandedAspectName).toEqual(METADATA.DEFAULT_ASPECT);
expect(name).toEqual(pngFileModel.name);
expect(creator).toEqual(pngFileModel.getCreatedByUser().displayName);
expect(createdDate).toEqual(format(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT), pngFileModel.createdAt);
expect(modifier).toEqual(pngFileModel.getCreatedByUser().displayName);
expect(modifiedDate).toEqual(format(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT), pngFileModel.createdAt);
expect(mimeTypeName).toEqual(pngFileModel.getContent().mimeTypeName);
expect(size).toEqual(pngFileModel.getContent().getSizeInBytes());

await metadataViewPage.editIconIsDisplayed();
await metadataViewPage.informationButtonIsDisplayed();
await expect(await metadataViewPage.getInformationButtonText()).toEqual(METADATA.MORE_INFO_BUTTON);
await expect(await metadataViewPage.getInformationIconText()).toEqual(METADATA.ARROW_DOWN);

const informationButtonText = await metadataViewPage.getInformationButtonText();
const informationIconText = await metadataViewPage.getInformationIconText();

expect(informationButtonText).toEqual(METADATA.MORE_INFO_BUTTON);
expect(informationIconText).toEqual(METADATA.ARROW_DOWN);
});

it('[C272769] Should be possible to display more details when clicking on More Information button', async () => {
Expand All @@ -131,8 +146,12 @@ describe('Metadata component', () => {
await metadataViewPage.clickOnPropertiesTab();
await metadataViewPage.informationButtonIsDisplayed();
await metadataViewPage.clickOnInformationButton();
await expect(await metadataViewPage.getInformationButtonText()).toEqual(METADATA.LESS_INFO_BUTTON);
await expect(await metadataViewPage.getInformationIconText()).toEqual(METADATA.ARROW_UP);

const informationButtonText = await metadataViewPage.getInformationButtonText();
const informationIconText = await metadataViewPage.getInformationIconText();

expect(informationButtonText).toEqual(METADATA.LESS_INFO_BUTTON);
expect(informationIconText).toEqual(METADATA.ARROW_UP);
});

it('[C270952] Should be possible to open/close properties using info icon', async () => {
Expand Down
3 changes: 2 additions & 1 deletion e2e/protractor.excludes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@
"C313200": "https://alfresco.atlassian.net/browse/APPS-2234",
"C311318-3": "https://alfresco.atlassian.net/browse/APPS-2254",
"C311319-2": "https://alfresco.atlassian.net/browse/APPS-2254",
"C311319-4": "https://alfresco.atlassian.net/browse/APPS-2254"
"C311319-4": "https://alfresco.atlassian.net/browse/APPS-2254",
"C297691": "https://alfresco.atlassian.net/browse/APPS-2254"
}
30 changes: 15 additions & 15 deletions ...core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import moment from 'moment';
import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { CardViewDateItemComponent } from './card-view-dateitem.component';
Expand All @@ -26,6 +25,7 @@ import { ClipboardService } from '../../../clipboard/clipboard.service';
import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.model';
import { TranslateModule } from '@ngx-translate/core';
import { AppConfigService } from '@alfresco/adf-core';
import { MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';

describe('CardViewDateItemComponent', () => {

Expand Down Expand Up @@ -192,15 +192,15 @@ describe('CardViewDateItemComponent', () => {
const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
component.editable = true;
component.property.editable = true;
const expectedDate = moment('Jul 10 2017', 'MMM DD YYYY');
const expectedDate = new Date('Jul 10 2017');
fixture.detectChanges();
const property = { ...component.property };

component.onDateChanged({ value: expectedDate });
component.onDateChanged({ value: expectedDate } as MatDatetimepickerInputEvent<Date>);
expect(itemUpdatedSpy).toHaveBeenCalledWith({
target: property,
changed: {
dateKey: expectedDate.toDate()
dateKey: expectedDate
}
});
});
Expand All @@ -209,13 +209,13 @@ describe('CardViewDateItemComponent', () => {
component.editable = true;
component.property.editable = true;
component.property.value = null;
const expectedDate = moment('Jul 10 2017', 'MMM DD YY');
const expectedDate = new Date('Jul 10 2017');
fixture.detectChanges();

component.onDateChanged({ value: expectedDate });
component.onDateChanged({ value: expectedDate } as MatDatetimepickerInputEvent<Date>);

await fixture.whenStable();
expect(component.property.value).toEqual(expectedDate.toDate());
expect(component.property.value).toEqual(expectedDate);
});

it('should copy value to clipboard on double click', () => {
Expand All @@ -236,7 +236,7 @@ describe('CardViewDateItemComponent', () => {
it('should render the clear icon in case of displayClearAction:true', () => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
component.property.value = new Date('Jul 10 2017');
fixture.detectChanges();

const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
Expand All @@ -257,7 +257,7 @@ describe('CardViewDateItemComponent', () => {
component.editable = true;
component.property.editable = true;
component.displayClearAction = false;
component.property.value = 'Jul 10 2017';
component.property.value = new Date('Jul 10 2017');
fixture.detectChanges();

const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
Expand All @@ -267,7 +267,7 @@ describe('CardViewDateItemComponent', () => {
it('should remove the property value after a successful clear attempt', async () => {
component.editable = true;
component.property.editable = true;
component.property.value = 'Jul 10 2017';
component.property.value = new Date('Jul 10 2017');
fixture.detectChanges();

component.onDateClear();
Expand All @@ -294,7 +294,7 @@ describe('CardViewDateItemComponent', () => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017';
component.property.value = 'Jul 10 2017';
component.property.value = new Date('Jul 10 2017');
fixture.detectChanges();
const property = { ...component.property };

Expand All @@ -320,19 +320,19 @@ describe('CardViewDateItemComponent', () => {
component.property.default = 'Jul 10 2017 00:01:00';
component.property.key = 'fake-key';
component.dateFormat = 'M/d/yy, h:mm a';
component.property.value = 'Jul 10 2017 00:01:00';
const expectedDate = moment('Jul 10 2018', 'MMM DD YY h:m:s');
component.property.value = new Date('Jul 10 2017 00:01:00');
const expectedDate = new Date('Jul 10 2018');
fixture.detectChanges();

await fixture.whenStable();
fixture.detectChanges();
const element = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="card-date-value-fake-key"]');
expect(element).toBeDefined();
expect(element.innerText).toEqual('Jul 10, 2017');
component.onDateChanged({ value: expectedDate });
component.onDateChanged({ value: expectedDate } as MatDatetimepickerInputEvent<Date>);

fixture.detectChanges();
expect(component.property.value).toEqual(expectedDate.toDate());
expect(component.property.value).toEqual(expectedDate);
});

it('should render chips for multivalue dates when chips are enabled', async () => {
Expand Down
83 changes: 45 additions & 38 deletions lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,34 +17,33 @@

import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerComponent } from '@mat-datetimepicker/core';
import { MAT_MOMENT_DATETIME_FORMATS, MomentDatetimeAdapter } from '@mat-datetimepicker/moment';
import moment, { Moment } from 'moment';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerComponent, MatDatetimepickerInputEvent } from '@mat-datetimepicker/core';
import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
import { UserPreferencesService, UserPreferenceValues } from '../../../common/services/user-preferences.service';
import { MomentDateAdapter } from '../../../common/utils/moment-date-adapter';
import { MOMENT_DATE_FORMATS } from '../../../common/utils/moment-date-formats.model';
import { AppConfigService } from '../../../app-config/app-config.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BaseCardView } from '../base-card-view';
import { ClipboardService } from '../../../clipboard/clipboard.service';
import { TranslationService } from '../../../translation/translation.service';
import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '../../../common/utils/date-fns-adapter';
import { ADF_DATETIME_FORMATS, AdfDateTimeFnsAdapter } from '../../../common/utils/datetime-fns-adapter';
import { DateFnsUtils } from '../../../common';
import { isValid } from 'date-fns';

@Component({
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS },
{ provide: DatetimeAdapter, useClass: MomentDatetimeAdapter },
{ provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter },
{ provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
],
selector: 'adf-card-view-dateitem',
templateUrl: './card-view-dateitem.component.html',
styleUrls: ['./card-view-dateitem.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemModel> implements OnInit, OnDestroy {

@Input()
property: CardViewDateItemModel;

Expand All @@ -60,16 +59,18 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
@ViewChild('datetimePicker')
public datepicker: MatDatetimepickerComponent<any>;

valueDate: Moment;
valueDate: Date;
dateFormat: string;

private onDestroy$ = new Subject<boolean>();

constructor(private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService,
private appConfig: AppConfigService,
private clipboardService: ClipboardService,
private translateService: TranslationService) {
constructor(
private dateAdapter: DateAdapter<Date>,
private userPreferencesService: UserPreferencesService,
private appConfig: AppConfigService,
private clipboardService: ClipboardService,
private translateService: TranslationService
) {
super();
this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
}
Expand All @@ -78,16 +79,20 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => {
.subscribe((locale) => {
this.property.locale = locale;
});

(this.dateAdapter as MomentDateAdapter).overrideDisplayFormat = 'MMM DD';
(this.dateAdapter as AdfDateFnsAdapter).displayFormat = 'MMM DD';

if (this.property.value) {
this.valueDate = moment(this.property.value, this.dateFormat);
} else if (this.property.multivalued && !this.property.value) {
this.property.value = [];
if (this.property.multivalued) {
if (!this.property.value) {
this.property.value = [];
}
} else {
if (this.property.value && !Array.isArray(this.property.value)) {
this.valueDate = DateFnsUtils.localToUtc(DateFnsUtils.parseDate(this.property.value, this.dateFormat));
}
}
}

Expand All @@ -112,12 +117,11 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
this.datepicker.open();
}

onDateChanged(newDateValue) {
if (newDateValue) {
const momentDate = moment(newDateValue.value, this.dateFormat, true);
if (momentDate.isValid()) {
this.valueDate = momentDate;
this.property.value = momentDate.toDate();
onDateChanged(event: MatDatetimepickerInputEvent<Date>) {
if (event.value) {
if (isValid(event.value)) {
this.valueDate = event.value;
this.property.value = DateFnsUtils.utcToLocal(event.value);
this.update();
}
}
Expand All @@ -130,24 +134,27 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
this.property.default = null;
}

copyToClipboard(valueToCopy: string) {
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
copyToClipboard(valueToCopy: string | string[]) {
if (typeof valueToCopy === 'string') {
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
}
}

addDateToList(newDateValue) {
if (newDateValue) {
const momentDate = moment(newDateValue.value, this.dateFormat, true);
if (momentDate.isValid()) {
this.property.value.push(momentDate.toDate());
addDateToList(event: MatDatetimepickerInputEvent<Date>) {
if (event.value) {
if (isValid(event.value) && this.property.multivalued && Array.isArray(this.property.value)) {
this.property.value.push(DateFnsUtils.utcToLocal(event.value));
this.update();
}
}
}

removeValueFromList(itemIndex: number) {
this.property.value.splice(itemIndex, 1);
this.update();
if (this.property.multivalued && Array.isArray(this.property.value)) {
this.property.value.splice(itemIndex, 1);
this.update();
}
}

update() {
Expand Down

0 comments on commit 678df42

Please sign in to comment.