Update Currency component and fix other issuesin ToDo and tests

pegasystems · Oct 4, 2023 · 535c6e1 · 535c6e1
1 parent baa380e
commit 535c6e1
Show file tree

Hide file tree

Showing 9 changed files with 1,116 additions and 18 deletions.
diff --git a/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.html b/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.html
@@ -3,23 +3,24 @@
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
-    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$" class="psdk-currency-field">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
-        <input
-          matInput
-          [placeholder]=""
-          type="number"
-          step="0.01"
-          min="0.01"
-          [value]="value$"
-          [required]="bRequired$"
-          [formControlName]="controlName$"
-          [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
-          (click)="fieldOnClick($event)"
-          (blur)="fieldOnBlur($event)"
-        />
+        <div class="psdk-currency-input">
+          <span>{{ symbol }}</span>
+          <input style="margin-left: 5px;"
+            type="float"
+            matInput
+            [placeholder]=""
+            [value]="value$ | number:'1.2-2'"
+            [required]="bRequired$"
+            [formControlName]="controlName$"
+            [attr.data-test-id]="testId"
+            (change)="fieldOnChange($event)"
+            (click)="fieldOnClick($event)"
+            (blur)="fieldOnBlur($event)"
+          />
+      </div>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

diff --git a/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.scss b/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.scss
@@ -15,6 +15,14 @@
   width: 100%;
 }
 
+.psdk-currency-input{
+  display: flex;
+}
+
+.psdk-currency-field ::ng-deep .mdc-floating-label{
+  position: initial !important;
+}
+
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
diff --git a/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.ts b/packages/angular-sdk-components/src/app/_components/field/currency/currency.component.ts
@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { getCurrencyCharacters } from '../../../_helpers/currency-utils';
 
 @Component({
   selector: 'app-currency',
@@ -35,8 +36,13 @@ export class CurrencyComponent implements OnInit {
   componentReference: string = '';
   testId: string;
   helperText: string;
+  currencyISOCode: string = "USD";
+  currencyOptions: Object = {};
 
-  fieldControl = new FormControl<number | null>(null, null);
+  fieldControl = new FormControl(null, {updateOn: 'blur'});
+  symbol: string;
+  thousandsSep: string;
+  decimalSep: string;
 
   constructor(private angularPConnect: AngularPConnectService, private cdRef: ChangeDetectorRef, private utils: Utils) {}
 
@@ -127,6 +133,15 @@ export class CurrencyComponent implements OnInit {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$['readOnly']);
     }
 
+    if(this.configProps$['currencyISOCode'] != null){
+      this.currencyISOCode = this.configProps$['currencyISOCode'];
+    }
+
+    const theSymbols = getCurrencyCharacters(this.currencyISOCode);
+    this.symbol = theSymbols.theCurrencySymbol;
+    this.thousandsSep = theSymbols.theDigitGroupSeparator;
+    this.decimalSep = theSymbols.theDecimalIndicator;
+
     this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control

diff --git a/...ages/angular-sdk-components/src/app/_components/template/app-shell/app-shell.component.ts b/...ages/angular-sdk-components/src/app/_components/template/app-shell/app-shell.component.ts
@@ -130,6 +130,8 @@ export class AppShellComponent implements OnInit {
           this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
         }
 
+        this.bOkDisplayError = true;
+
         if (this.bOkDisplayError) {
           let config = { panelClass: ['snackbar-newline'] };
           this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);

diff --git a/packages/angular-sdk-components/src/app/_components/widget/todo/todo.component.ts b/packages/angular-sdk-components/src/app/_components/widget/todo/todo.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, Input, NgZone } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { ProgressSpinnerService } from '../../../_messages/progress-spinner.service';
+import { ErrorMessagesService } from '../../../_messages/error-messages.service';
 import { Utils } from '../../../_helpers/utils';
 
 @Component({
@@ -37,7 +38,7 @@ export class TodoComponent implements OnInit {
   CONSTS: any;
   bLogging = true;
 
-  constructor(private psService: ProgressSpinnerService, private ngZone: NgZone, private utils: Utils) {}
+  constructor(private psService: ProgressSpinnerService, private erService: ErrorMessagesService, private ngZone: NgZone, private utils: Utils) {}
 
   ngOnInit() {
     if (!this.PCore$) {
@@ -231,16 +232,20 @@ export class TodoComponent implements OnInit {
       options['target'] = sTarget;
     }
 
+    this.psService.sendMessage(true);
+
     this.pConn$
       .getActionsApi()
       .openAssignment(id, classname, options)
       .then(() => {
+        this.psService.sendMessage(false);
         if (this.bLogging) {
           console.log(`openAssignment completed`);
         }
       })
       .catch(() => {
-        alert(`Submit failed!`);
+      this.psService.sendMessage(false);
+      this.erService.sendMessage('show', "Failed to open");
       });
   }
 }
diff --git a/packages/angular-sdk-components/src/app/_helpers/currency-utils.ts b/packages/angular-sdk-components/src/app/_helpers/currency-utils.ts
@@ -0,0 +1,74 @@
+/* eslint-disable import/no-named-default */
+import { default as CurrencyAlias } from '../_helpers/formatters/currency';
+import { default as CurrencyMapAlias } from '../_helpers/formatters/currency-map';
+
+declare const PCore;
+
+export const getCurrencyOptions = (inISOCode: string) => {
+
+    const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || 'en-US';
+
+    let currMapToUse = CurrencyMapAlias.US;
+    let localeToUse = operatorLocale;
+
+    // Determine CurrencyMap lookup based on ISO code (if specified).
+    //  If no ISO code, use locale
+    //  If no locale, default to US
+    if (inISOCode) {
+      if (inISOCode === "EUR") {
+        currMapToUse = CurrencyMapAlias.NL;
+        localeToUse = "nl-NL";
+      } else {
+        // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap
+        const countryCode = inISOCode.substring(0,2);
+        currMapToUse = CurrencyMapAlias[countryCode];
+      }
+    } else if (operatorLocale) {
+      // No ISO Code so check for operator locale (and force upper case for lookup)
+      const countryCode = operatorLocale.substring(3).toUpperCase();
+      currMapToUse = CurrencyMapAlias[countryCode];
+    } else {
+      // no ISO code and no operator locale, default to US
+      currMapToUse = CurrencyMapAlias.US;
+    }
+
+    // If no currMapToUse at this point, default to US as a failsafe
+    if (!currMapToUse) {
+      currMapToUse = CurrencyMapAlias['US'];
+    }
+
+    const theCode = currMapToUse.currencyCode.substring(0, 3);
+    const currencyOptions = { locale: localeToUse, style: "currency", currency: theCode }
+
+    return currencyOptions;
+
+  }
+
+export const getCurrencyCharacters = (inISOCode: string) => {
+    const theCurrencyChars = {
+      theCurrencySymbol: '$',
+      theDecimalIndicator: '.',
+      theDigitGroupSeparator: ','
+    }
+
+    const theCurrencyOptions = getCurrencyOptions(inISOCode);
+
+    const testValue = 1234.56;
+    const formattedString = CurrencyAlias.Currency(testValue, theCurrencyOptions);
+
+    // console.log(`formattedString: ${formattedString}`);
+
+    // Here, we have the formatted string (ex: $1,234.56) where:
+    //  Currency symbol = formattedString[0]
+    //  Separator = formattedString[2]
+    //  DecimalIndicator = formattedString[6];
+
+    theCurrencyChars.theCurrencySymbol = formattedString[0];
+    theCurrencyChars.theDigitGroupSeparator = formattedString[2];
+    theCurrencyChars.theDecimalIndicator = formattedString[6];
+
+    // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);
+
+    return theCurrencyChars;
+
+  }