Skip to content

Commit

Permalink
date-fns implementation in card-view-datetime component and added/mod…
Browse files Browse the repository at this point in the history 
…ified test cases for the component.
  • Loading branch information
@jatin2008
jatin2008 committed Jul 21, 2023
1 parent a0d63fd commit 2ae0a01
Show file tree
Hide file tree
Showing 7 changed files with 179 additions and 40 deletions.
61 changes: 51 additions & 10 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,14 +17,15 @@

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';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { ClipboardService } from '../../../clipboard/clipboard.service';
import { TranslateModule } from '@ngx-translate/core';
import { AppConfigService } from '@alfresco/adf-core';
import { endOfDay, startOfDay } from 'date-fns';
import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.model';

describe('CardViewDateItemComponent', () => {

Expand Down Expand Up @@ -61,7 +62,7 @@ describe('CardViewDateItemComponent', () => {
afterEach(() => fixture.destroy());

it('should pick date format from appConfigService', () => {
expect(component.dateFormat).toEqual('shortDate');
expect(component.dateFormat).toEqual('MMM d, y');
});

it('should render the label and value', () => {
Expand Down Expand Up @@ -191,16 +192,16 @@ describe('CardViewDateItemComponent', () => {
const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
component.editable = true;
component.property.editable = true;
component.property.value = moment('Jul 10 2017', 'MMM DD YYYY').endOf('day').toDate();
const expectedDate = moment('Jul 10 2017', 'MMM DD YYYY');
component.property.value = endOfDay(new Date('Jul 10 2017'));
const expectedDate = new Date('Jul 10 2017');
fixture.detectChanges();
const property = { ...component.property };

component.onDateChanged({ value: expectedDate });
expect(itemUpdatedSpy).toHaveBeenCalledWith({
target: property,
changed: {
dateKey: expectedDate.endOf('day').toDate()
dateKey: endOfDay(expectedDate)
}
});
});
Expand All @@ -209,13 +210,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 });

await fixture.whenStable();
expect(component.property.value).toEqual(expectedDate.endOf('day').toDate());
expect(component.property.value).toEqual(endOfDay(expectedDate));
});

it('should copy value to clipboard on double click', () => {
Expand Down Expand Up @@ -314,14 +315,14 @@ describe('CardViewDateItemComponent', () => {
});
});

it('should be possible update a date-time', async () => {
it('should be possible update a date-time using end of day', async () => {
component.editable = true;
component.property.editable = true;
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');
const expectedDate = new Date('Jul 10 2018');
fixture.detectChanges();

await fixture.whenStable();
Expand All @@ -332,7 +333,7 @@ describe('CardViewDateItemComponent', () => {
component.onDateChanged({ value: expectedDate });

fixture.detectChanges();
expect(component.property.value).toEqual(expectedDate.endOf('day').toDate());
expect(component.property.value).toEqual(endOfDay(expectedDate));
});

it('should render chips for multivalue dates when chips are enabled', async () => {
Expand All @@ -353,4 +354,44 @@ describe('CardViewDateItemComponent', () => {
expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017');
expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017');
});

it('should render chips for multivalue datetimes when chips are enabled', async () => {
component.property = new CardViewDatetimeItemModel({
label: 'Text label',
value: ['Jul 10 2017 00:01:00', 'Jul 11 2017 00:01:00', 'Jul 12 2017 00:01:00'],
key: 'textkey',
editable: true,
multivalued: true
});

fixture.detectChanges();
await fixture.whenStable();
const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
expect(valueChips).not.toBeNull();
expect(valueChips.length).toBe(3);
expect(valueChips[0].nativeElement.innerText.trim()).toBe('Jul 10, 2017, 0:01');
expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017, 0:01');
expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017, 0:01');
});

it('should be possible update a date-time using start of day', async () => {
component.editable = true;
component.property.editable = true;
component.property.default = 'Jul 10 2017 00:01:00';
component.property.key = 'properties.cm:from';
component.dateFormat = 'M/d/yy, h:mm a';
component.property.value = '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-properties.cm:from"]');
expect(element).toBeDefined();
expect(element.innerText).toEqual('Jul 10, 2017');
component.onDateChanged({ value: expectedDate });

fixture.detectChanges();
expect(component.property.value).toEqual(startOfDay(expectedDate));
});
});
58 changes: 30 additions & 28 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 @@ -15,28 +15,24 @@
* limitations under the License.
*/

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 { Component, Inject, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
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 { endOfDay, parse, startOfDay } from 'date-fns';
import { MatDatepicker } from '@angular/material/datepicker';
import { DateFnsUtils } from '../../../common/utils/date-fns-utils';

@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: DateAdapter, useClass: DateFnsAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }
],
selector: 'adf-card-view-dateitem',
templateUrl: './card-view-dateitem.component.html',
Expand All @@ -58,35 +54,37 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
displayClearAction: boolean = true;

@ViewChild('datePicker')
public datepicker: MatDatetimepickerComponent<any>;
public datepicker: MatDatepicker<any>;

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

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

constructor(private dateAdapter: DateAdapter<Moment>,
constructor(private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService,
private appConfig: AppConfigService,
private clipboardService: ClipboardService,
private translateService: TranslationService) {
private translateService: TranslationService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
super();
this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
// need to change this to app.config when will change from moment to date-fns throughout the application
// this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
this.dateFormat = 'MMM d, y';
}

ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => {
this.dateAdapter.setLocale(locale);
this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale));
this.property.locale = locale;
});

(this.dateAdapter as MomentDateAdapter).overrideDisplayFormat = 'MMM DD';
this.dateFormatConfig.display.dateInput = this.dateFormat;

if (this.property.value) {
this.valueDate = moment(this.property.value, this.dateFormat);
this.valueDate = parse(this.property.value, this.dateFormat, new Date());
} else if (this.property.multivalued && !this.property.value) {
this.property.value = [];
}
Expand Down Expand Up @@ -115,10 +113,10 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode

onDateChanged(newDateValue) {
if (newDateValue) {
const momentDate = moment(newDateValue.value, this.dateFormat, true).endOf('day');
if (momentDate.isValid()) {
this.valueDate = momentDate;
this.property.value = momentDate.toDate();
const date = this.getDateValue(newDateValue);
if (date) {
this.valueDate = date;
this.property.value = date;
this.update();
}
}
Expand All @@ -138,9 +136,9 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode

addDateToList(newDateValue) {
if (newDateValue) {
const momentDate = moment(newDateValue.value, this.dateFormat, true).endOf('day');
if (momentDate.isValid()) {
this.property.value.push(momentDate.toDate());
const date = this.getDateValue(newDateValue);
if (date) {
this.property.value.push(date);
this.update();
}
}
Expand All @@ -154,4 +152,8 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
update() {
this.cardViewUpdateService.update({ ...this.property } as CardViewDateItemModel, this.property.value);
}

getDateValue(newDateValue): Date {
return this.property.key === 'properties.cm:from' ? startOfDay(newDateValue.value) : endOfDay(newDateValue.value);
}
}
2 changes: 1 addition & 1 deletion lib/core/src/lib/card-view/models/card-view-datetimeitem.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { CardViewDateItemProperties } from '../interfaces/card-view.interfaces';

export class CardViewDatetimeItemModel extends CardViewDateItemModel implements CardViewItem, DynamicComponentModel {
type: string = 'datetime';
format: string = 'MMM d, y';
format: string = 'MMM d, y, H:mm';

constructor(cardViewDateItemProperties: CardViewDateItemProperties) {
super(cardViewDateItemProperties);
Expand Down
81 changes: 81 additions & 0 deletions lib/core/src/lib/common/utils/date-fns-utils.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*!
* @license
* Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import {ar, cs, da, de, enUS, es, fi, fr, it, ja, nb, nl, pl, ptBR, ru, sv, zhCN} from 'date-fns/locale';

export class DateFnsUtils {
static getLocaleFromString(locale: string): Locale {
let dateFnsLocale: Locale;
switch(locale) {
case 'ar':
dateFnsLocale = ar;
break;
case 'cs':
dateFnsLocale = cs;
break;
case 'da':
dateFnsLocale = da;
break;
case 'de':
dateFnsLocale = de;
break;
case 'en':
dateFnsLocale = enUS;
break;
case 'es':
dateFnsLocale = es;
break;
case 'fi':
dateFnsLocale = fi;
break;
case 'fr':
dateFnsLocale = fr;
break;
case 'it':
dateFnsLocale = it;
break;
case 'ja':
dateFnsLocale = ja;
break;
case 'nb':
dateFnsLocale = nb;
break;
case 'nl':
dateFnsLocale = nl;
break;
case 'pl':
dateFnsLocale = pl;
break;
case 'pt-BR':
dateFnsLocale = ptBR;
break;
case 'ru':
dateFnsLocale = ru;
break;
case 'sv':
dateFnsLocale = sv;
break;
case 'zh-CN':
dateFnsLocale = zhCN;
break;
default:
dateFnsLocale = enUS;
break;
}
return dateFnsLocale;
}
}
1 change: 1 addition & 0 deletions lib/core/src/lib/common/utils/public-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,4 @@ export * from './file-utils';
export * from './moment-date-formats.model';
export * from './moment-date-adapter';
export * from './string-utils';
export * from './date-fns-utils';
14 changes: 14 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"@angular/core": "14.1.3",
"@angular/forms": "14.1.3",
"@angular/material": "14.1.2",
"@angular/material-date-fns-adapter": "^14.1.2",
"@angular/material-moment-adapter": "14.1.2",
"@angular/platform-browser": "14.1.3",
"@angular/platform-browser-dynamic": "14.1.3",
Expand Down Expand Up @@ -225,4 +226,3 @@
"module": "./index.js",
"typings": "./index.d.ts"
}

0 comments on commit 2ae0a01

Please sign in to comment.