CSX-73 Date and Select Satori (#11056)

* CSX-73 Date and Select Satori * CSX-73 Fix process-header unit test * CSX-73 Fix core unit test * CSX-73 Fix core unit test * CSX-73 Fix task-header unit test * CSX-73 Fix task-header unit test * CSX-73 Fix task-header unit test * CSX-73 Fix card-view dateitem * CSX-73 Fix card-view dateitem --------- Co-authored-by: Sahana Ghosal <sahana.ghosal@hyland.com>
2025-09-10 14:11:42 +00:00 · 2025-08-18 14:32:55 +01:00
parent 9deaab4c11
commit 9b6688ce10
9 changed files with 155 additions and 127 deletions
--- 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,29 +1,50 @@
-<mat-label
-    class="adf-property-label"
-    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-    *ngIf="showProperty && !isEditable"
-    [attr.for]="'card-view-dateitem-' + property.key"
-    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
-    [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
->
-    {{ property.label | translate }}
-</mat-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"
-            [attr.data-automation-id]="'card-dateitem-' + property.key"
+<mat-form-field
+    *ngIf="showProperty && !isEditable && !property.multivalued"
+    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"
    (dblclick)="copyToClipboard(property.displayValue)"
-            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-            >{{ property.displayValue }}</span
-        >
-    </span>
-    <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable hxp-input" [floatLabel]="property.default ? 'always' : null">
+    [ngClass]="{ 'adf-property-read-only': !isEditable }"
+    class="adf-property-field">
    <mat-label
        class="adf-property-label"
+        [ngClass]="{
+                    'adf-property-value-editable': editable,
+                    'adf-property-readonly-value': isReadonlyProperty
+                }"
        [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+        [attr.for]="'card-view-dateitem-' + property.key"
+        [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+    >
+        {{ property.label | translate }}
+    </mat-label>
+    <input
+        matInput
+        [attr.data-automation-id]="'card-dateitem-' + property.key"
+        [value]="property.displayValue"
+        title="{{ property.label | translate }}"
+        [attr.id]="'card-view-dateitem-' + property.key"
+        [attr.tabIndex]="-1"
+        [attr.aria-label]="property.label | translate"
+        class="adf-property-value"
+        [ngClass]="{
+                'adf-property-value-editable': editable,
+                'adf-property-readonly-value': isReadonlyProperty,
+            }"
+        readonly
+        disabled
+    />
+</mat-form-field>
+
+<div
+    class="adf-property-value"
+    [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }"
+    >
+
+    <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable adf-property-field hxp-input" [floatLabel]="property.default ? 'always' : null">
+        <mat-label
            *ngIf="isEditable"
+            class="adf-property-label"
+            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
            [attr.for]="'card-view-dateitem-' + property.key"
            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
@@ -79,11 +100,12 @@
                [startAt]="valueDate"
            />
    </mat-form-field>
-    <ng-template #elseEmptyValueBlock>
+</div>
+<ng-template #elseEmptyValueBlock>
    {{ property.default | translate }}
-    </ng-template>
+</ng-template>

-    <div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
+<div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
    <mat-chip-listbox #chipList class="adf-textitem-chip-list">
        <mat-chip-option
            *ngFor="let propertyValue of property.displayValue; let idx = index"
@@ -125,5 +147,4 @@
            [startAt]="valueDate"
        />
    </div>
-    </div>
 </div>
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
@@ -64,14 +64,14 @@ describe('CardViewDateItemComponent', () => {
    afterEach(() => fixture.destroy());

    const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
-    const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
+    const getPropertyInputValue = (): HTMLInputElement => testingUtils.getInputByCSS('.adf-property-value');
    const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');

    it('should render the label and value', () => {
        fixture.detectChanges();

        expect(getPropertyLabel()).toBe('Date label');
-        expect(getPropertyValue().trim()).toBe('Jul 10, 2017');
+        expect(getPropertyInputValue().value.trim()).toBe('Jul 10, 2017');
    });

    it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => {
@@ -87,6 +87,7 @@ describe('CardViewDateItemComponent', () => {
        component.displayEmpty = false;
        fixture.detectChanges();

+        const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
        expect(getPropertyValue().trim()).toBe('');
    });

@@ -103,7 +104,7 @@ describe('CardViewDateItemComponent', () => {
        component.displayEmpty = true;
        fixture.detectChanges();

-        expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY');
+        expect(getPropertyInputValue().value.trim()).toBe('FAKE-DEFAULT-KEY');
    });

    it('should render the default as value if the value is empty and editable:true', () => {
@@ -213,7 +214,7 @@ describe('CardViewDateItemComponent', () => {
        component.editable = false;
        fixture.detectChanges();

-        testingUtils.doubleClickByDataAutomationId(`card-dateitem-${component.property.key}`);
+        testingUtils.doubleClickByDataAutomationId(`card-${component.property.type}-value-${component.property.key}`);

        fixture.detectChanges();
        expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
@@ -1,23 +1,28 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
    <div [ngSwitch]="templateType">
        <div *ngSwitchDefault>
-        <div *ngIf="!isEditable"
-            [attr.data-automation-id]="'card-select-label-' + property.key"
-            class="adf-property-label adf-property-label-non-editable"
-            >{{ property.label | translate }}
-        </div>
-            <div class="adf-property-field">
-                <div
+            <mat-form-field
                *ngIf="!isEditable"
-                    class="adf-property-value adf-property-read-only"
                [attr.data-automation-id]="'select-readonly-value-' + property.key"
-                    data-automation-class="read-only-value"
                [title]="property.displayValue | async | translate"
+                class="adf-property-list adf-property adf-property-field"
            >
-                    {{ property.displayValue | async | translate }}
-                </div>
-                <div *ngIf="isEditable">
-                    <mat-form-field class="adf-property-value">
+                <mat-label
+                    [attr.data-automation-id]="'card-select-label-' + property.key"
+                >
+                    {{ property.label | translate }}
+                </mat-label>
+                <input
+                    matInput
+                    class="adf-property-value"
+                    [attr.tabIndex]="-1"
+                    [value]="property.displayValue | async | translate"
+                    data-automation-class="read-only-value"
+                    disabled
+                    readonly
+                />
+            </mat-form-field>
+            <mat-form-field class="adf-property-value" *ngIf="isEditable">
                <mat-label
                    [attr.data-automation-id]="'card-select-label-' + property.key"
                    class="adf-property-label adf-property-value-editable"
@@ -42,8 +47,6 @@
                </mat-select>
            </mat-form-field>
        </div>
-            </div>
-        </div>
        <div *ngSwitchCase="'autocompleteBased'">
            <mat-form-field
                class="adf-property-field adf-card-selectitem-autocomplete  "
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
@@ -25,7 +25,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
-import { DebugElement } from '@angular/core';
+import { DebugElement, SimpleChange } from '@angular/core';

 describe('CardViewSelectItemComponent', () => {
    let loader: HarnessLoader;
@@ -85,7 +85,8 @@ describe('CardViewSelectItemComponent', () => {
                editable: false
            });
            fixture.detectChanges();
-            expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Select box label');
+
+            expect(testingUtils.getInnerTextByDataAutomationId('card-select-label-key')).toBe('Select box label');
        });

        it('should render readOnly value is editable property is FALSE', () => {
@@ -109,7 +110,9 @@ describe('CardViewSelectItemComponent', () => {
            });

            fixture.detectChanges();
-            expect(getReadOnlyElement().nativeElement.title).toBe('Two');
+
+            const inputEl = getReadOnlyElement().nativeElement as HTMLInputElement;
+            expect(inputEl.value).toBe('Two');
        });

        it('should be possible edit selectBox item', async () => {
@@ -284,7 +287,9 @@ describe('CardViewSelectItemComponent', () => {
            const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next');
            component.editedValue = '';
            component.editable = true;
-            component.ngOnChanges({ property: { firstChange: true } } as any);
+            component.ngOnChanges({
+                property: new SimpleChange(undefined, component.property, true)
+            });
            fixture.detectChanges();

            component.autocompleteControl.setValue('new value');
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
@@ -53,7 +53,7 @@ describe('CardViewComponent', () => {

    const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
    const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value;
-    const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
+    const getPropertyValueText = (): string => testingUtils.getInputByCSS('.adf-property-value').value;
    const getPropertyValueByDataAutomationId = (dataAutomationId: string): string =>
        testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value;

--- a/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts
@@ -111,7 +111,7 @@ describe('ProcessHeaderCloudComponent', () => {
        await fixture.whenStable();

        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
-        expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
+        expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019');
    });

    it('should display lastModified date', async () => {
@@ -121,7 +121,7 @@ describe('ProcessHeaderCloudComponent', () => {
        await fixture.whenStable();

        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
-        expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
+        expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019');
    });

    it('should display parentId', async () => {
@@ -216,8 +216,8 @@ describe('ProcessHeaderCloudComponent', () => {
            const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));

            expect(component.dateFormat).toEqual('full');
-            expect(startedDateElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
-            expect(lastModifiedElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
+            expect(startedDateElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
+            expect(lastModifiedElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
        });
    });
 });
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
@@ -506,7 +506,7 @@ describe('TaskHeaderCloudComponent', () => {
            const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value'));

            expect(component.dateFormat).toEqual('full');
-            expect(createdDateElement.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
+            expect(createdDateElement.nativeElement.value.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
        });
    });

--- a/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.spec.ts
+++ b/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.spec.ts
@@ -207,9 +207,7 @@ describe('TaskAttachmentList', () => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual(
-                'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'
-            );
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').value.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER');
        });
    });

--- a/lib/process-services/src/lib/process-list/components/process-instance-header/process-instance-header.component.spec.ts
+++ b/lib/process-services/src/lib/process-list/components/process-instance-header/process-instance-header.component.spec.ts
@@ -64,7 +64,7 @@ describe('ProcessInstanceHeaderComponent', () => {
        component.ngOnChanges();
        fixture.detectChanges();
        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
-        expect(valueEl.innerText).toBe('Nov 3, 2016');
+        expect(valueEl.value).toBe('Nov 3, 2016');
    });

    it('should display placeholder if no due date', () => {
@@ -72,7 +72,7 @@ describe('ProcessInstanceHeaderComponent', () => {
        component.ngOnChanges();
        fixture.detectChanges();
        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
-        expect(valueEl.innerText).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
+        expect(valueEl.value).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
    });

    it('should display process category', async () => {
@@ -98,7 +98,7 @@ describe('ProcessInstanceHeaderComponent', () => {
        component.ngOnChanges();
        fixture.detectChanges();
        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]');
-        expect(valueEl.innerText).toBe('Nov 3, 2016');
+        expect(valueEl.value).toBe('Nov 3, 2016');
    });

    it('should display started by', async () => {