Update Currency component and fix other issues in ToDo and tests

playwright-message.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line strict
+console.log('\x1b[33m%s\x1b[0m','Running in headless mode, use `npm run test:headed` for running in headed mode.');

playwright.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line strict
 const { devices } = require('@playwright/test');
 
 /**

projects/angular-sdk-library/src/lib/_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>

projects/angular-sdk-library/src/lib/_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;
 }

projects/angular-sdk-library/src/lib/_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,
@@ -131,6 +137,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

projects/angular-sdk-library/src/lib/_components/template/app-shell/app-shell.component.ts

@@ -138,6 +138,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);

projects/angular-sdk-library/src/lib/_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';
 
 declare const window: any;
@@ -43,7 +44,7 @@ export class TodoComponent implements OnInit {
   showlessLocalizedValue = this.localizedVal('show_less', 'CosmosFields');
   showMoreLocalizedValue = this.localizedVal('show_more', 'CosmosFields');
 
-  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$) {
@@ -236,16 +237,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");
       });
   }
 }

projects/angular-sdk-library/src/lib/_helpers/currency-utils.ts

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-named-default */
+import { default as CurrencyAlias } from './formatters/currency';
+import { default as CurrencyMapAlias } from './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;
+};