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

AAE-37073 Fix error message location and field not highlighting red for card-view-textitem component (#11115)

Browse Source 
* AAE-37073 fix error location and make field highlight red if error

* AAE-37073 code review update - revert change from TranslateModule back to TranslatePipe
This commit is contained in:
Darren Thornton
2025-08-13 08:42:05 -05:00
committed by GitHub
parent e1dc355647
commit 0e4fced94e
4 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -1,6 +1,7 @@
<div [ngSwitch]="templateType">
<div *ngSwitchDefault>
<mat-form-field
subscriptSizing="dynamic"
class="adf-property-field adf-card-textitem-field"
[ngClass]="{
'adf-property-read-only': !isEditable

4
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@@ -5,6 +5,10 @@
font-size: var(--theme-caption-font-size);
padding-top: 6px;
&::before {
display: none;
}
ul {
margin: 0;
padding: 0;

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

@@ -49,6 +49,7 @@ describe('CardViewTextItemComponent', () => {
const updateTextField = async (key: string, value: string) => {
await testingUtils.fillMatInputByDataAutomationId(`card-textitem-value-${key}`, value);
component.update();
fixture.detectChanges();
};
@@ -69,6 +70,7 @@ describe('CardViewTextItemComponent', () => {
const verifyNoErrors = (key: string) => {
const errorElement = getErrorElements(key);
expect(errorElement.length).toBe(0);
expect(component.textInput.errors).toBeNull();
};
const checkCtrlZActions = (ctrlKeyValue: boolean, codeValue: string, metaKeyValue: boolean, mockTestValue: string, flag: boolean) => {
@@ -613,6 +615,7 @@ describe('CardViewTextItemComponent', () => {
await fixture.whenStable();
expect(component.errors).toBe(expectedErrorMessages);
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should set the errorMessages properly if the editedValue is valid', async () => {
@@ -621,7 +624,7 @@ describe('CardViewTextItemComponent', () => {
await updateTextField(component.property.key, 'updated-value');
await fixture.whenStable();
expect(component.errors).toEqual([]);
verifyNoErrors('textKey');
});
it('should render the error', () => {
@@ -759,6 +762,7 @@ describe('CardViewTextItemComponent', () => {
const errorMessage = getTextFieldError(component.property.key);
expect(errorMessage).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should NOT show validation error for empty string', async () => {
@@ -785,6 +789,7 @@ describe('CardViewTextItemComponent', () => {
const errorMessage = getTextFieldError(component.property.key);
expect(errorMessage).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should show validation error for float number', async () => {
@@ -795,6 +800,7 @@ describe('CardViewTextItemComponent', () => {
const error = getTextFieldError(component.property.key);
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
expect(component.property.value).toBe(10);
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should show validation error for exceed the number limit (2147483648)', async () => {
@@ -805,6 +811,7 @@ describe('CardViewTextItemComponent', () => {
const error = getTextFieldError(component.property.key);
expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
expect(component.property.value).toBe(10);
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should not show validation error for below the number limit (2147483647)', async () => {
@@ -862,6 +869,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
expect(getTextFieldError(component.property.key)).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should show validation error for empty string (float)', async () => {
@@ -870,6 +878,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
expect(getTextFieldError(component.property.key)).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
expect(component.textInput.errors?.['customError']).toEqual(true);
});
it('should update input the value on input updated', async () => {

10
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
View File

@@ -84,7 +84,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
private readonly destroyRef = inject(DestroyRef);
constructor(private clipboardService: ClipboardService, private translateService: TranslationService, private cd: ChangeDetectorRef) {
constructor(
private clipboardService: ClipboardService,
private translateService: TranslationService,
private cd: ChangeDetectorRef
) {
super();
}
@@ -141,6 +145,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
private resetErrorMessages() {
this.errors = [];
this.textInput.setErrors(null);
this.textInput.markAsUntouched();
}
update(): void {
@@ -151,6 +157,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
this.cardViewUpdateService.update({ ...this.property, isValidValue: true } as CardViewTextItemModel, this.property.value);
} else {
this.errors = this.property.getValidationErrors(this.editedValue);
this.textInput.setErrors({ customError: true });
this.textInput.markAsTouched();
this.cardViewUpdateService.update({ ...this.property, isValidValue: false } as CardViewTextItemModel, this.editedValue);
}
}