From ef7bfa0d611614b09ed8ecec850a05e6afad69a5 Mon Sep 17 00:00:00 2001 From: mohas22 Date: Fri, 19 Jul 2024 16:24:57 +0530 Subject: [PATCH] Updated package json, added decimal as currency support, fixed BUG-878536 --- package-lock.json | 8 +++--- package.json | 2 +- .../field/decimal/decimal.component.html | 17 +++++++++--- .../field/decimal/decimal.component.ts | 26 +++++++++++++++++-- playwright.config.js | 2 +- .../embedded/mc-nav/mc-nav.component.ts | 3 ++- .../e2e/DigV2/FormFields/Decimal.spec.js | 5 ++++ 7 files changed, 51 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index c3f11424..27324327 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,7 @@ "@angular/compiler-cli": "^16.2.12", "@angular/language-service": "^16.2.12", "@pega/configs": "^0.7.1", - "@pega/constellationjs": "~23.1.1", + "@pega/constellationjs": "24.1.0", "@pega/eslint-config": "^0.7.1", "@pega/pcore-pconnect-typedefs": "~2.1.1", "@pega/prettier-config": "^0.7.1", @@ -7498,9 +7498,9 @@ } }, "node_modules/@pega/constellationjs": { - "version": "23.1.1", - "resolved": "https://registry.npmjs.org/@pega/constellationjs/-/constellationjs-23.1.1.tgz", - "integrity": "sha512-8exCJ8xT03iyQiJOhn7Ok1HmN3k7UZ72Z5FbOSVj3dtwFpuSH0DDsk4AT5hyKuqzNpYGjY9k1Mg2hyr4WA6kew==", + "version": "24.1.0", + "resolved": "https://registry.npmjs.org/@pega/constellationjs/-/constellationjs-24.1.0.tgz", + "integrity": "sha512-uWo81h+sQWScU/1wqVPiaXc+gLZDeVwas1Y4Ng/1yCl6M3q8EzVCZ0MA6asgGswdTfzbSD681QKv/u4T6Fxctg==", "dev": true }, "node_modules/@pega/cspell-config": { diff --git a/package.json b/package.json index 61236369..77dd367f 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "@angular/compiler-cli": "^16.2.12", "@angular/language-service": "^16.2.12", "@pega/configs": "^0.7.1", - "@pega/constellationjs": "~23.1.1", + "@pega/constellationjs": "24.1.0", "@pega/eslint-config": "^0.7.1", "@pega/pcore-pconnect-typedefs": "~2.1.1", "@pega/prettier-config": "^0.7.1", diff --git a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.html b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.html index 403d1a48..97c13c25 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.html @@ -1,8 +1,8 @@
- +
-
+
{{ label$ }} @@ -10,7 +10,14 @@ type="text" matInput currencyMask - [options]="{ prefix: '', thousands: currSep, decimal: currDec, align: 'left', nullable: true }" + [options]="{ + prefix: bReadonly$ && formatter === 'Currency' ? currSym : '', + thousands: currSep, + decimal: currDec, + align: 'left', + nullable: true, + inputMode: inputMode + }" [placeholder]="placeholder" step="0.01" [formControlName]="controlName$" @@ -18,6 +25,7 @@ [formControl]="fieldControl" [attr.data-test-id]="testId" (blur)="fieldOnBlur($event)" + [readonly]="bReadonly$" /> {{ getErrorMessage() }} @@ -27,3 +35,6 @@ + + diff --git a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts index dca233db..850eda58 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts @@ -3,13 +3,14 @@ import { CommonModule } from '@angular/common'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; -import { NgxCurrencyDirective } from 'ngx-currency'; +import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency'; import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect'; import { Utils } from '../../../_helpers/utils'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; import { handleEvent } from '../../../_helpers/event-util'; -import { getCurrencyCharacters } from '../../../_helpers/currency-utils'; +import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils'; import { PConnFieldProps } from '../../../_types/PConnProps.interface'; +import { format } from '../../../_helpers/formatters'; interface DecimalProps extends PConnFieldProps { // If any, enter additional props that only exist on Decimal here @@ -59,7 +60,12 @@ export class DecimalComponent implements OnInit, OnDestroy { fieldControl = new FormControl(null, null); currDec: string; currSep: string; + currSym: string; decimalPrecision: number | undefined; + formatter; + formattedValue: any; + inputMode: any; + constructor( private angularPConnect: AngularPConnectService, private cdRef: ChangeDetectorRef, @@ -123,6 +129,7 @@ export class DecimalComponent implements OnInit, OnDestroy { this.testId = this.configProps$.testId; this.label$ = this.configProps$.label; this.displayMode$ = this.configProps$.displayMode; + this.inputMode = NgxCurrencyInputMode.Natural; let nValue: any = this.configProps$.value; if (nValue) { if (typeof nValue === 'string') { @@ -139,6 +146,15 @@ export class DecimalComponent implements OnInit, OnDestroy { this.currDec = theSymbols.theDecimalIndicator; this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : ''; + const theCurrencyOptions = getCurrencyOptions(currencyISOCode); + this.formatter = this.configProps$.formatter; + + if (this.formatter === 'Currency') { + this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions); + } else { + this.formattedValue = format(this.value$, this.pConn$.getComponentName().toLowerCase(), theCurrencyOptions); + } + // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { if (this.configProps$.required != null) { @@ -166,6 +182,12 @@ export class DecimalComponent implements OnInit, OnDestroy { this.fieldControl.enable(); } + if (this.bReadonly$ && this.formatter === 'Currency') { + this.currSym = theSymbols.theCurrencySymbol; + } else { + this.currSym = ''; + } + this.componentReference = (this.pConn$.getStateProps() as any).value; } diff --git a/playwright.config.js b/playwright.config.js index e81182f1..f6c4ccdc 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -44,7 +44,7 @@ const config = { slowMo: 200 } }, - testIgnore: 'e2e/DigV2/ComplexFields/ManyToMany.spec.js', + testIgnore: ['e2e/DigV2/ComplexFields/ManyToMany.spec.js', 'e2e/DigV2/Localization/Localization.spec.js'], /* Configure projects for major browsers */ projects: [ { diff --git a/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts b/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts index 2e6a79c3..03a4031e 100644 --- a/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts +++ b/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts @@ -197,7 +197,8 @@ export class MCNavComponent implements OnInit, OnDestroy { showHideProgress(bShow: boolean) { this.isProgress$ = bShow; - this.cdRef.detectChanges(); + // causing failure on actions buttons in emebedded mode + // this.cdRef.detectChanges(); } logOff() { diff --git a/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js b/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js index 86d597d9..6ff5fdcb 100644 --- a/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js +++ b/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js @@ -103,6 +103,11 @@ test.describe('E2E test', () => { attributes = await common.getAttributes(editableDecimal); await expect(attributes.includes('readonly')).toBeFalsy(); + const decimalAsCurrency = page.locator('input[data-test-id="9e438afab6d7ec67b5582bded10f5172"]'); + attributes = await common.getAttributes(decimalAsCurrency); + await expect(attributes.includes('readonly')).toBeTruthy(); + await expect(await decimalAsCurrency.inputValue()).toBe('$20.00'); + /** Selecting Visibility from the Sub Category dropdown */ selectedSubCategory = page.locator('mat-select[data-test-id="9463d5f18a8924b3200b56efaad63bda"]'); await selectedSubCategory.click();