[ACS-6722] aca custom aspect property of d date type breaks applicati…

…on (#9331)

* [ACS-6722] fix custom date property parsing, delete reduntant function calls in templates

* [ACS-6722] add unit test

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html

@@ -2,19 +2,19 @@
 <div class="adf-property-value adf-card-view-array-item-container">
     <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
         <mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
-            <ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
+            <ng-container *ngIf="displayCount > 0; else withOutDisplayCount" >
                 <mat-chip
-                    *ngFor="let item of items.slice(0, displayCount())"
+                    *ngFor="let item of items.slice(0, displayCount)"
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                     <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                     <span>{{item?.value}}</span>
                 </mat-chip>
                 <mat-chip
-                    *ngIf="items.length > displayCount()"
+                    *ngIf="items.length > displayCount"
                     data-automation-id="card-arrayitem-more-chip"
                     [matMenuTriggerFor]="menu">
-                    <span>{{items.length - displayCount()}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
+                    <span>{{items.length - displayCount}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
                 </mat-chip>
             </ng-container>
             <ng-template #withOutDisplayCount>
@@ -32,7 +32,7 @@
                 <mat-card-content>
                     <mat-chip-list>
                         <mat-chip (click)="clicked()"
-                            *ngFor="let item of items.slice(displayCount(), items.length)"
+                            *ngFor="let item of items.slice(displayCount, items.length)"
                             [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                         <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                         <span>{{item?.value}}</span>
@@ -45,7 +45,7 @@
     <ng-template #elseEmptyValueBlock>
         <span class="adf-card-array-item-default" data-automation-id="card-arrayitem-default">{{ property?.default | translate }}</span>
     </ng-template>
-    <button mat-icon-button *ngIf="showClickableIcon()"
+    <button mat-icon-button *ngIf="showClickableIcon"
         (click)="clicked()"
         class="adf-array-item-action"
         [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -27,20 +27,20 @@ import { BaseCardView } from '../base-card-view';
 })
 export class CardViewArrayItemComponent extends BaseCardView<CardViewArrayItemModel> {
     clicked(): void {
-        if (this.isClickable()) {
+        if (this.isClickable) {
             this.cardViewUpdateService.clicked(this.property);
         }
     }
 
-    showClickableIcon(): boolean {
-        return this.hasIcon && this.isClickable();
+    get showClickableIcon(): boolean {
+        return this.hasIcon && this.isClickable;
     }
 
-    displayCount(): number {
+    get displayCount(): number {
         return this.property.noOfItemsToDisplay ? this.property.noOfItemsToDisplay : 0;
     }
 
-    isClickable(): boolean {
+    get isClickable(): boolean {
         return !!this.property.clickable;
     }
 }

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,14 +1,14 @@
 <label class="adf-property-label"
      [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-     *ngIf="showProperty() || isEditable"
+     *ngIf="showProperty || isEditable"
      [attr.for]="'card-view-dateitem-' + property.key"
      [ngClass]="{'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable}">
     {{ property.label | translate }}
 </label>
 <div class="adf-property-value" [ngClass]="{'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty}">
     <span *ngIf="!isEditable && !property.multivalued"
           [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-        <span *ngIf="showProperty()"
+        <span *ngIf="showProperty"
               [attr.data-automation-id]="'card-dateitem-' + property.key"
               (dblclick)="copyToClipboard(property.displayValue)"
               matTooltipShowDelay="1000"
@@ -19,13 +19,13 @@
             <span class="adf-datepicker-toggle"
                   [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
                   (click)="showDatePicker()">
-                <span *ngIf="showProperty(); else elseEmptyValueBlock"
+                <span *ngIf="showProperty; else elseEmptyValueBlock"
                     [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
                     {{ property.displayValue }}</span>
             </span>
 
             <mat-icon
-                *ngIf="showClearAction()"
+                *ngIf="showClearAction"
                 class="adf-date-reset-icon"
                 (click)="onDateClear()"
                 [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -84,15 +84,15 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
         super.ngOnDestroy();
     }
 
-    showProperty(): boolean {
+    get showProperty(): boolean {
         return this.displayEmpty || !this.property.isEmpty();
     }
 
-    showClearAction(): boolean {
+    get showClearAction(): boolean {
         return this.displayClearAction && (!this.property.isEmpty() || !!this.property.default);
     }
 
-    showDatePicker() {
+    showDatePicker(): void {
         this.datepicker.open();
     }
 

lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.html

@@ -1,18 +1,18 @@
 <div [attr.data-automation-id]="'card-mapitem-label-' + property.key"
      class="adf-property-label"
-     *ngIf="showProperty()">{{ property.label | translate }}</div>
+     *ngIf="showProperty">{{ property.label | translate }}</div>
 <div class="adf-property-value adf-map-item-padding">
     <div>
-        <span *ngIf="!isClickable(); else clickableTemplate"
+        <span *ngIf="!isClickable; else clickableTemplate"
               [attr.data-automation-id]="'card-mapitem-value-' + property.key">
-            <span *ngIf="showProperty();">{{ property.displayValue }}</span>
+            <span *ngIf="showProperty;">{{ property.displayValue }}</span>
         </span>
     </div>
     <ng-template #clickableTemplate>
         <span class="adf-mapitem-clickable-value"
               (click)="clicked()"
               [attr.data-automation-id]="'card-mapitem-value-' + property.key">
-            <span *ngIf="showProperty(); else emptyValueTemplate">{{ property.displayValue }}</span>
+            <span *ngIf="showProperty; else emptyValueTemplate">{{ property.displayValue }}</span>
         </span>
     </ng-template>
     <ng-template #emptyValueTemplate>

lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.ts

@@ -29,11 +29,11 @@ export class CardViewMapItemComponent extends BaseCardView<CardViewMapItemModel>
     @Input()
     displayEmpty: boolean = true;
 
-    showProperty() {
+    get showProperty(): boolean {
         return this.displayEmpty || !this.property.isEmpty();
     }
 
-    isClickable() {
+    get isClickable(): boolean {
         return this.property.clickable;
     }
 

lib/core/src/lib/common/utils/date-fns-utils.spec.ts

@@ -125,4 +125,11 @@ describe('DateFnsUtils', () => {
         const result = DateFnsUtils.isValidDate('2021-06-09 14:10', 'D-M-YYYY hh:mm A');
         expect(result).toBeFalse();
     });
+
+    it('should return Date when forcing locale or UTC with string date argument', () => {
+        const resultLocal = DateFnsUtils.forceLocal('2014-02-11T11:30:30');
+        const resultUtc = DateFnsUtils.forceUtc('2014-02-11T11:30:30');
+        expect(resultLocal).toBeInstanceOf(Date);
+        expect(resultUtc).toBeInstanceOf(Date);
+    });
 });

lib/core/src/lib/common/utils/date-fns-utils.ts

@@ -203,11 +203,17 @@ export class DateFnsUtils {
         return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
     }
 
-    static forceLocal(date: Date): Date {
+    static forceLocal(date: string | Date): Date {
+        if (typeof date === 'string'){
+            date = parseISO(date);
+        }
         return new Date(lightFormat(date, 'yyyy-MM-dd'));
     }
 
-    static forceUtc(date: Date): Date {
+    static forceUtc(date: string | Date): Date {
+        if (typeof date === 'string'){
+            date = parseISO(date);
+        }
         return new Date(lightFormat(date, 'yyyy-MM-dd').concat('T00:00:00.000Z'));
     }