[HXCS-2818] CardViewDateItem component ignore timezone when displayin…

…g dates (#9304) * [HXCS-2818] card-view-dateitem interpret dates as local, store them as utc * [HXCS-2818] refactoring --------- Co-authored-by: Adriano Costa <[email protected]>
Alfresco · Feb 5, 2024 · efd8e8d · efd8e8d
1 parent 47d1165
commit efd8e8d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/demo-shell/src/app/components/card-view/card-view.component.ts b/demo-shell/src/app/components/card-view/card-view.component.ts
@@ -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

diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
@@ -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: [
@@ -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();
             }
         }
@@ -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();
@@ -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;
         }
     }
 
@@ -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];
         }
     }
 }
diff --git a/lib/core/src/lib/card-view/models/card-view-dateitem.model.ts b/lib/core/src/lib/card-view/models/card-view-dateitem.model.ts
@@ -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;
 
@@ -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;
+    }
 }
diff --git a/lib/core/src/lib/common/utils/date-fns-utils.ts b/lib/core/src/lib/common/utils/date-fns-utils.ts
@@ -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;
@@ -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'));
+    }
+
 }