[ACS-6722] aca custom aspect property of d date type breaks application (#9331)

* [ACS-6722] fix custom date property parsing, delete reduntant function calls in templates * [ACS-6722] add unit test
2025-07-24 17:32:15 +00:00 · 2024-02-15 23:06:03 +01:00
parent 8d5f3c9884
commit a8d547c7b4
8 changed files with 39 additions and 26 deletions
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
+++ b/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"
--- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts
+++ b/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;
    }
 }
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -1,6 +1,6 @@
 <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 }}
@@ -8,7 +8,7 @@
 <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"
--- 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
@@ -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();
    }

--- a/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.html
+++ b/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>
--- a/lib/core/src/lib/card-view/components/card-view-mapitem/card-view-mapitem.component.ts
+++ b/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;
    }

--- a/lib/core/src/lib/common/utils/date-fns-utils.spec.ts
+++ b/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);
+    });
 });
--- a/lib/core/src/lib/common/utils/date-fns-utils.ts
+++ b/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'));
    }