inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-10 14:11:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "CSX-73 Date and Select Satori (#11056)" (#11144)

Browse Source 
This reverts commit 9b6688ce10.
This commit is contained in:
dominikiwanekhyland
2025-08-26 11:00:03 +02:00
committed by GitHub
parent de537f0a0d
commit 0576aac985
9 changed files with 126 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,50 +1,29 @@
<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>
<mat-form-field <div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
*ngIf="showProperty && !isEditable && !property.multivalued" <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" <span
(dblclick)="copyToClipboard(property.displayValue)" *ngIf="showProperty"
[ngClass]="{ 'adf-property-read-only': !isEditable }" [attr.data-automation-id]="'card-dateitem-' + property.key"
class="adf-property-field"> (dblclick)="copyToClipboard(property.displayValue)"
<mat-label [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
class="adf-property-label" >{{ property.displayValue }}</span
[ngClass]="{ >
'adf-property-value-editable': editable, </span>
'adf-property-readonly-value': isReadonlyProperty <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable hxp-input" [floatLabel]="property.default ? 'always' : null">
}"
[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 <mat-label
*ngIf="isEditable"
class="adf-property-label" class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="isEditable"
[attr.for]="'card-view-dateitem-' + property.key" [attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }" [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
@@ -100,51 +79,51 @@
[startAt]="valueDate" [startAt]="valueDate"
/> />
</mat-form-field> </mat-form-field>
</div> <ng-template #elseEmptyValueBlock>
<ng-template #elseEmptyValueBlock> {{ property.default | translate }}
{{ 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-listbox #chipList class="adf-textitem-chip-list">
<mat-chip-option <mat-chip-option
*ngFor="let propertyValue of property.displayValue; let idx = index" *ngFor="let propertyValue of property.displayValue; let idx = index"
[removable]="isEditable" [removable]="isEditable"
(removed)="removeValueFromList(idx)" (removed)="removeValueFromList(idx)"
>
{{ propertyValue }}
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
</mat-chip-option>
</mat-chip-listbox>
<div
*ngIf="isEditable"
class="adf-property-field adf-dateitem-editable-controls"
(click)="showDatePicker()"
tabindex="0"
role="button"
(keyup.enter)="showDatePicker()"
> >
{{ propertyValue }} <input
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon> class="adf-invisible-date-input"
</mat-chip-option> [attr.tabIndex]="-1"
</mat-chip-listbox> [matDatetimepicker]="datetimePicker"
(dateChange)="addDateToList($event)"
<div [attr.id]="'card-view-dateitem-' + property.key"
*ngIf="isEditable" />
class="adf-property-field adf-dateitem-editable-controls" <mat-datetimepicker-toggle
(click)="showDatePicker()" [attr.tabindex]="-1"
tabindex="0" matSuffix
role="button" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
(keyup.enter)="showDatePicker()" [attr.data-automation-id]="'datepickertoggle-' + property.key"
> [for]="datetimePicker"
<input />
class="adf-invisible-date-input" <mat-datetimepicker
[attr.tabIndex]="-1" #datetimePicker
[matDatetimepicker]="datetimePicker" [type]="$any(property).type"
(dateChange)="addDateToList($event)" [timeInterval]="5"
[attr.id]="'card-view-dateitem-' + property.key" [attr.data-automation-id]="'datepicker-' + property.key"
/> [startAt]="valueDate"
<mat-datetimepicker-toggle />
[attr.tabindex]="-1" </div>
matSuffix
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker"
/>
<mat-datetimepicker
#datetimePicker
[type]="$any(property).type"
[timeInterval]="5"
[attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate"
/>
</div> </div>
</div> </div>

9
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
View File

@@ -64,14 +64,14 @@ describe('CardViewDateItemComponent', () => {
afterEach(() => fixture.destroy()); afterEach(() => fixture.destroy());
const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
const getPropertyInputValue = (): HTMLInputElement => testingUtils.getInputByCSS('.adf-property-value'); const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button'); const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
it('should render the label and value', () => { it('should render the label and value', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(getPropertyLabel()).toBe('Date label'); expect(getPropertyLabel()).toBe('Date label');
expect(getPropertyInputValue().value.trim()).toBe('Jul 10, 2017'); expect(getPropertyValue().trim()).toBe('Jul 10, 2017');
}); });
it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => { it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => {
@@ -87,7 +87,6 @@ describe('CardViewDateItemComponent', () => {
component.displayEmpty = false; component.displayEmpty = false;
fixture.detectChanges(); fixture.detectChanges();
const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
expect(getPropertyValue().trim()).toBe(''); expect(getPropertyValue().trim()).toBe('');
}); });
@@ -104,7 +103,7 @@ describe('CardViewDateItemComponent', () => {
component.displayEmpty = true; component.displayEmpty = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getPropertyInputValue().value.trim()).toBe('FAKE-DEFAULT-KEY'); expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY');
}); });
it('should render the default as value if the value is empty and editable:true', () => { it('should render the default as value if the value is empty and editable:true', () => {
@@ -214,7 +213,7 @@ describe('CardViewDateItemComponent', () => {
component.editable = false; component.editable = false;
fixture.detectChanges(); fixture.detectChanges();
testingUtils.doubleClickByDataAutomationId(`card-${component.property.type}-value-${component.property.key}`); testingUtils.doubleClickByDataAutomationId(`card-dateitem-${component.property.key}`);
fixture.detectChanges(); fixture.detectChanges();
expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE'); expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');

83
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@@ -1,51 +1,48 @@
<ng-container *ngIf="!property.isEmpty() || isEditable"> <ng-container *ngIf="!property.isEmpty() || isEditable">
<div [ngSwitch]="templateType"> <div [ngSwitch]="templateType">
<div *ngSwitchDefault> <div *ngSwitchDefault>
<mat-form-field <div *ngIf="!isEditable"
*ngIf="!isEditable" [attr.data-automation-id]="'card-select-label-' + property.key"
[attr.data-automation-id]="'select-readonly-value-' + property.key" class="adf-property-label adf-property-label-non-editable"
[title]="property.displayValue | async | translate" >{{ property.label | translate }}
class="adf-property-list adf-property adf-property-field" </div>
> <div class="adf-property-field">
<mat-label <div
[attr.data-automation-id]="'card-select-label-' + property.key" *ngIf="!isEditable"
> class="adf-property-value adf-property-read-only"
{{ property.label | translate }} [attr.data-automation-id]="'select-readonly-value-' + property.key"
</mat-label>
<input
matInput
class="adf-property-value"
[attr.tabIndex]="-1"
[value]="property.displayValue | async | translate"
data-automation-class="read-only-value" data-automation-class="read-only-value"
disabled [title]="property.displayValue | async | translate"
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"
[ngClass]="{
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }}
</mat-label>
<mat-select
[(value)]="value"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
panelClass="adf-select-filter"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate"
> >
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" /> {{ property.displayValue | async | translate }}
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option> </div>
<mat-option *ngFor="let option of list$ | async" [value]="option.key"> <div *ngIf="isEditable">
{{ option.label | translate }} <mat-form-field class="adf-property-value">
</mat-option> <mat-label
</mat-select> [attr.data-automation-id]="'card-select-label-' + property.key"
</mat-form-field> class="adf-property-label adf-property-value-editable"
[ngClass]="{
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }}
</mat-label>
<mat-select
[(value)]="value"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
panelClass="adf-select-filter"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate"
>
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
<mat-option *ngFor="let option of list$ | async" [value]="option.key">
{{ option.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div> </div>
<div *ngSwitchCase="'autocompleteBased'"> <div *ngSwitchCase="'autocompleteBased'">
<mat-form-field <mat-form-field

13
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts
View File

@@ -25,7 +25,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { UnitTestingUtils } from '../../../testing/unit-testing-utils'; import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
import { CardViewUpdateService } from '../../services/card-view-update.service'; import { CardViewUpdateService } from '../../services/card-view-update.service';
import { DebugElement, SimpleChange } from '@angular/core'; import { DebugElement } from '@angular/core';
describe('CardViewSelectItemComponent', () => { describe('CardViewSelectItemComponent', () => {
let loader: HarnessLoader; let loader: HarnessLoader;
@@ -85,8 +85,7 @@ describe('CardViewSelectItemComponent', () => {
editable: false editable: false
}); });
fixture.detectChanges(); 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', () => { it('should render readOnly value is editable property is FALSE', () => {
@@ -110,9 +109,7 @@ describe('CardViewSelectItemComponent', () => {
}); });
fixture.detectChanges(); 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 () => { it('should be possible edit selectBox item', async () => {
@@ -287,9 +284,7 @@ describe('CardViewSelectItemComponent', () => {
const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next'); const autocompleteValueSpy = spyOn(cardViewUpdateService.autocompleteInputValue$, 'next');
component.editedValue = ''; component.editedValue = '';
component.editable = true; component.editable = true;
component.ngOnChanges({ component.ngOnChanges({ property: { firstChange: true } } as any);
property: new SimpleChange(undefined, component.property, true)
});
fixture.detectChanges(); fixture.detectChanges();
component.autocompleteControl.setValue('new value'); component.autocompleteControl.setValue('new value');

2
lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
View File

@@ -53,7 +53,7 @@ describe('CardViewComponent', () => {
const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value; const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value;
const getPropertyValueText = (): string => testingUtils.getInputByCSS('.adf-property-value').value; const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
const getPropertyValueByDataAutomationId = (dataAutomationId: string): string => const getPropertyValueByDataAutomationId = (dataAutomationId: string): string =>
testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value; testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value;

8
lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts
View File

@@ -111,7 +111,7 @@ describe('ProcessHeaderCloudComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019'); expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
}); });
it('should display lastModified date', async () => { it('should display lastModified date', async () => {
@@ -121,7 +121,7 @@ describe('ProcessHeaderCloudComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value')); const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
expect(valueEl.nativeElement.value.trim()).toBe('Mar 9, 2019'); expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
}); });
it('should display parentId', async () => { 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')); const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
expect(component.dateFormat).toEqual('full'); expect(component.dateFormat).toEqual('full');
expect(startedDateElement.nativeElement.value.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00'); expect(startedDateElement.nativeElement.innerText.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'); expect(lastModifiedElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');
}); });
}); });
}); });

2
lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
View File

@@ -506,7 +506,7 @@ describe('TaskHeaderCloudComponent', () => {
const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value')); const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value'));
expect(component.dateFormat).toEqual('full'); expect(component.dateFormat).toEqual('full');
expect(createdDateElement.nativeElement.value.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00'); expect(createdDateElement.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');
}); });
}); });

4
lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.spec.ts
View File

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

6
lib/process-services/src/lib/process-list/components/process-instance-header/process-instance-header.component.spec.ts
View File

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