Skip to content

Commit

Permalink
[HXCS-2818] CardViewDateItem component ignore timezone when displayin…
Browse files Browse the repository at this point in the history 
…g dates (#9304)

* [HXCS-2818] card-view-dateitem interpret dates as local, store them as utc

* [HXCS-2818] refactoring

---------

Co-authored-by: Adriano Costa <Adriano.Costa@hyland.comgit>
  • Loading branch information
@wideLandscape
wideLandscape and Adriano Costa committed Feb 5, 2024
1 parent 47d1165 commit efd8e8d
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 25 deletions.
8 changes: 4 additions & 4 deletions demo-shell/src/app/components/card-view/card-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,17 @@ export class CardViewComponent implements OnInit, OnDestroy {
}),
new CardViewDateItemModel({
label: 'CardView Date Item',
value: new Date(1983, 11, 24, 10, 0, 30),
value: new Date('1983-11-24T00:00:00Z'),
key: 'date',
default: new Date(1983, 11, 24, 10, 0, 30),
default: new Date('1983-11-24T00:00:00Z'),
format: 'shortDate',
editable: this.isEditable
}),
new CardViewDateItemModel({
label: 'CardView Date Item - Multivalue (chips)',
value: [new Date(1983, 11, 24, 10, 0, 30)],
value: [new Date('1983-11-24T00:00:00Z')],
key: 'date',
default: new Date(1983, 11, 24, 10, 0, 30),
default: new Date('1983-11-24T00:00:00Z'),
format: 'shortDate',
editable: this.isEditable,
multivalued: true
Expand Down
30 changes: 13 additions & 17 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 @@ -27,6 +27,7 @@ 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 { isValid } from 'date-fns';
import { DateFnsUtils } from '../../../common/utils/date-fns-utils';

@Component({
providers: [
Expand Down Expand Up @@ -99,10 +100,11 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
if (event.value) {
if (isValid(event.value)) {
this.property.value = new Date(event.value);
this.valueDate = new Date(event.value);
if (this.property.type === 'date') {
this.property.value.setHours(0, 0, 0, 0);
this.property.value = DateFnsUtils.forceUtc(event.value);
this.valueDate = DateFnsUtils.forceLocal(event.value);
}
this.valueDate = event.value;
this.update();
}
}
Expand All @@ -125,9 +127,9 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
addDateToList(event: MatDatetimepickerInputEvent<Date>) {
if (event.value) {
if (isValid(event.value) && this.property.multivalued && Array.isArray(this.property.value)) {
const localDate = event.value;
let localDate = new Date(event.value);
if (this.property.type === 'date') {
localDate.setHours(0, 0, 0, 0);
localDate = DateFnsUtils.forceUtc(event.value);
}
this.property.value.push(localDate);
this.update();
Expand All @@ -148,11 +150,9 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode

private initSingleValueProperty() {
if (this.property.value && !Array.isArray(this.property.value)) {
this.property.value = new Date(this.property.value);
if (this.property.type === 'date') {
this.property.value.setHours(0, 0, 0, 0);
}
this.valueDate = this.property.value;
const date = new Date(this.property.value);
this.property.value = date;
this.valueDate = this.property.type === 'date' ? DateFnsUtils.forceLocal(date) : date;
}
}

Expand All @@ -161,14 +161,10 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
this.property.value = [];
}
if (Array.isArray(this.property.value) && this.property.value.length > 0) {
this.property.value = this.property.value.map((date: Date) => {
const localDate = new Date(date);
if (this.property.type === 'date') {
localDate.setHours(0, 0, 0, 0);
}
return localDate;
});
this.valueDate = this.property.value[0];
this.property.value = this.property.value.map((date: Date | string) => new Date(date));
this.valueDate = this.property.type === 'date'
? DateFnsUtils.forceLocal(this.property.value[0])
: this.property.value[0];
}
}
}
12 changes: 9 additions & 3 deletions lib/core/src/lib/card-view/models/card-view-dateitem.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { DynamicComponentModel } from '../../common/services/dynamic-component-m
import { CardViewBaseItemModel } from './card-view-baseitem.model';
import { CardViewDateItemProperties } from '../interfaces/card-view.interfaces';
import { LocalizedDatePipe } from '../../pipes/localized-date.pipe';
import { DateFnsUtils } from '../../common/utils/date-fns-utils';

type DateItemType = Date | Date[] | null;

Expand All @@ -40,23 +41,28 @@ export class CardViewDateItemModel extends CardViewBaseItemModel<DateItemType> i
if (cardViewDateItemProperties.locale) {
this.locale = cardViewDateItemProperties.locale;
}

}

get displayValue(): string | string[] {
if (this.multivalued) {
if (this.value && Array.isArray(this.value)) {
return this.value.map((date) => this.transformDate(date));
return this.value.map((date) => this.transformDate(this.prepareDate(date)));
} else {
return this.default ? [this.default] : [];
}
} else {
return this.value && !Array.isArray(this.value) ? this.transformDate(this.value) : this.default;
return this.value && !Array.isArray(this.value)
? this.transformDate(this.prepareDate(this.value))
: this.default;
}
}

transformDate(value: Date | string | number): string {
this.localizedDatePipe = new LocalizedDatePipe();
return this.localizedDatePipe.transform(value, this.format, this.locale);
}

private prepareDate(date: Date): Date {
return this.type === 'date' ? DateFnsUtils.forceLocal(date) : date;
}
}
12 changes: 11 additions & 1 deletion lib/core/src/lib/common/utils/date-fns-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@
* limitations under the License.
*/

import { format, parse, parseISO, isValid, isBefore, isAfter } from 'date-fns';
import { format, parse, parseISO, isValid, isBefore, isAfter, lightFormat } from 'date-fns';
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;
Expand Down Expand Up @@ -201,4 +202,13 @@ export class DateFnsUtils {
static localToUtc(date: Date): Date {
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}

static forceLocal(date: Date): Date {
return new Date(lightFormat(date, 'yyyy-MM-dd'));
}

static forceUtc(date: Date): Date {
return new Date(lightFormat(date, 'yyyy-MM-dd').concat('T00:00:00.000Z'));
}

}

0 comments on commit efd8e8d

Please sign in to comment.