inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-43974 Refactoring added for text and amount form widgets

Browse Source
This commit is contained in:
Anamika Dey
2026-05-11 12:24:06 +05:30
parent 74252797b7
commit 1d39216fc9
4 changed files with 81 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+8 -8
View File
@@ -10,7 +10,7 @@
>
</div>
<div class="adf-amount-widget-container">
<mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
<mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null" subscriptSizing="fixed">
@if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
@if(!enableDisplayBasedOnLocale) {
<span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
@@ -27,16 +27,16 @@
[(ngModel)]="amountWidgetValue"
(ngModelChange)="onFieldChangedAmountWidget()"
[disabled]="field.readOnly"
[errorStateMatcher]="errorStateMatcher"
(focus)="amountWidgetOnFocus()"
(blur)="amountWidgetOnBlur()"
/>
<mat-error *ngIf="field.validationSummary?.message">
{{ field.validationSummary.message | translate:translateParameters }}
</mat-error>
<mat-error *ngIf="isInvalidFieldRequired() && isTouched()">
{{ 'FORM.FIELD.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget
*ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
</div>
</div>
</div>
lib/core/src/lib/form/components/widgets/amount/amount.widget.ts
+26 -3
View File
@@ -19,11 +19,11 @@
import { CurrencyPipe, NgIf } from '@angular/common';
import { Component, OnInit, ViewEncapsulation, InjectionToken, inject, DestroyRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsModule, FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { TranslatePipe } from '@ngx-translate/core';
import { ErrorWidgetComponent } from '../error/error.component';
import { WidgetComponent } from '../widget.component';
import { filter, isObservable, Observable } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -52,7 +52,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken<Observable<AmountWidgetSet
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, TranslatePipe, NgIf],
imports: [MatFormFieldModule, MatInputModule, FormsModule, TranslatePipe, NgIf],
providers: [CurrencyPipe],
encapsulation: ViewEncapsulation.None
})
@@ -69,11 +69,13 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
currencyDisplay: string | boolean = 'symbol';
decimalProperty: string;
enableDisplayBasedOnLocale: boolean;
errorStateMatcher: ErrorStateMatcher;
isInputInFocus = false;
locale: string;
notShowDecimalDigits = '1.0-0';
showDecimalDigits = '1.2-2';
showReadonlyPlaceholder: boolean;
translateParameters: Record<string, string> = {};
valueAsNumber: number;
get placeholder(): string {
@@ -117,6 +119,23 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
}
this.subscribeToFieldChanges();
this.setInitialValues();
this.initErrorStateMatcher();
this.updateTranslateParameters();
}
}
private initErrorStateMatcher(): void {
this.errorStateMatcher = {
isErrorState: (_control: UntypedFormControl | null, _form: FormGroupDirective | NgForm | null): boolean =>
!this.field.isValid && this.isTouched()
};
}
private updateTranslateParameters(): void {
if (this.field.validationSummary?.isActive()) {
this.translateParameters = this.field.validationSummary.getAttributesAsJsonObj();
} else {
this.translateParameters = {};
}
}
@@ -138,6 +157,7 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
}
}
this.markAsTouched();
this.updateTranslateParameters();
}
amountWidgetOnFocus(): void {
@@ -156,6 +176,8 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
onFieldChangedAmountWidget(): void {
this.field.value = this.amountWidgetValue;
super.onFieldChanged(this.field);
this.markAsTouched();
this.updateTranslateParameters();
}
setInitialValues(): void {
@@ -180,6 +202,7 @@ export class AmountWidgetComponent extends WidgetComponent implements OnInit {
} else if (!this.isInputInFocus) {
this.amountWidgetValue = ev.field.value;
}
this.updateTranslateParameters();
});
}
lib/core/src/lib/form/components/widgets/text/text.widget.html
+15 -11
View File
@@ -8,7 +8,7 @@
</label>
</div>
<div class="adf-text-widget-container">
<mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
<mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null" subscriptSizing="fixed">
@if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
{{ field.name | translate }}
</mat-label>
@@ -20,20 +20,24 @@
[required]="field.required"
[value]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
(ngModelChange)="onTextFieldChanged()"
[disabled]="field.readOnly || readOnly"
[textMask]="{mask: mask, isReversed: isMaskReversed}"
[placeholder]="placeholder"
[title]="field.tooltip"
(blur)="markAsTouched()">
[errorStateMatcher]="errorStateMatcher"
(blur)="onBlur()">
@if (field.validationSummary?.message) {
<mat-error>
{{ field.validationSummary.message | translate:translateParameters }}
</mat-error>
}
@if (isInvalidFieldRequired() && isTouched()) {
<mat-error>
{{ 'FORM.FIELD.REQUIRED' | translate }}
</mat-error>
}
</mat-form-field>
<ng-container *ngTemplateOutlet="fieldStatusTemplate ?? defaultErrorMessageTemplate; context: { $implicit: this }" />
<ng-template #defaultErrorMessageTemplate>
<div class="adf-error-messages-container">
<error-widget [error]="field.validationSummary" />
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
</div>
</ng-template>
<ng-container *ngTemplateOutlet="fieldStatusTemplate ?? null" />
</div>
</div>
lib/core/src/lib/form/components/widgets/text/text.widget.ts
+32 -3
View File
@@ -20,15 +20,16 @@
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { Component, DestroyRef, Directive, inject, InjectionToken, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { FormsModule, FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { TranslatePipe } from '@ngx-translate/core';
import { isObservable } from 'rxjs';
import { ADF_CUSTOM_MESSAGE } from '../core/custom-validation-message.token';
import { ErrorWidgetComponent } from '../error/error.component';
import { WidgetComponent } from '../widget.component';
import { InputMaskDirective } from './text-mask.component';
import { IconModule } from '../../../../icon/icon.module';
type FieldStatusTemplate = TemplateRef<{ $implicit: WidgetComponent }>;
const FIELD_STATUS_TEMPLATE = new InjectionToken<FieldStatusTemplate>('FIELD_STATUS_TEMPLATE');
@@ -63,7 +64,7 @@ export class FieldStatusTemplateDirective {
'(invalid)': 'event($event)',
'(select)': 'event($event)'
},
imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, FormsModule, ErrorWidgetComponent, InputMaskDirective, NgTemplateOutlet],
imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, FormsModule, InputMaskDirective, NgTemplateOutlet, IconModule],
encapsulation: ViewEncapsulation.None
})
export class TextWidgetComponent extends WidgetComponent implements OnInit {
@@ -71,6 +72,8 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit {
placeholder: string;
isMaskReversed: boolean;
fieldStatusTemplate = inject(FIELD_STATUS_TEMPLATE, { optional: true });
errorStateMatcher: ErrorStateMatcher;
translateParameters: Record<string, string> = {};
private readonly destroyRef = inject(DestroyRef);
private readonly enableCustomMessage = inject(ADF_CUSTOM_MESSAGE, { optional: true });
@@ -98,5 +101,31 @@ export class TextWidgetComponent extends WidgetComponent implements OnInit {
: this.field.placeholder;
this.isMaskReversed = this.field.params['inputMaskReversed'] ? this.field.params['inputMaskReversed'] : false;
}
this.initErrorStateMatcher();
}
private initErrorStateMatcher(): void {
this.errorStateMatcher = {
isErrorState: (_control: UntypedFormControl | null, _form: FormGroupDirective | NgForm | null): boolean =>
!this.field.isValid && this.isTouched()
};
}
private updateTranslateParameters(): void {
if (this.field.validationSummary?.isActive()) {
this.translateParameters = this.field.validationSummary.getAttributesAsJsonObj();
} else {
this.translateParameters = {};
}
}
onBlur(): void {
this.markAsTouched();
this.updateTranslateParameters();
}
onTextFieldChanged(): void {
this.onFieldChanged(this.field);
this.updateTranslateParameters();
}
}