Merge pull request #43 from pegasystems/mod/tor/US-551958

updated decimal field component
pegasystems · Aug 22, 2023 · f263a39 · f263a39
2 parents 279b298 + 30b74c6
commit f263a39
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/packages/angular-sdk-components/src/app/_components/field/decimal/decimal.component.html b/packages/angular-sdk-components/src/app/_components/field/decimal/decimal.component.html
@@ -7,10 +7,11 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-label>{{ label$ }}</mat-label>
         <input
+          type="text"
           matInput
+          appThousandSeparator
           [placeholder]=""
-          type="number"
-          step="any"
+          step="0.01"
           [value]="value$"
           [required]="bRequired$"
           [formControlName]="controlName$"

diff --git a/packages/angular-sdk-components/src/app/_components/field/decimal/decimal.component.ts b/packages/angular-sdk-components/src/app/_components/field/decimal/decimal.component.ts
@@ -1,18 +1,19 @@
 import { Component, OnInit, Input, ChangeDetectorRef, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { 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 { ThousandSeparatorDirective } from '../../../_directives/thousand-seperator.directive';
 @Component({
   selector: 'app-decimal',
   templateUrl: './decimal.component.html',
   styleUrls: ['./decimal.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, ThousandSeparatorDirective, MatInputModule, forwardRef(() => ComponentMapperComponent)],
 })
 export class DecimalComponent implements OnInit {
   @Input() pConn$: any;
@@ -135,16 +136,18 @@ export class DecimalComponent implements OnInit {
     this.componentReference = this.pConn$.getStateProps().value;
   }
 
-  fieldOnChange(event: any) {
-    // this.angularPConnect.changeHandler( this, event );
-    this.angularPConnectData.actions.onChange(this, event);
-  }
+  fieldOnChange(event: any) {}
 
   fieldOnClick(event: any) {}
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions.onBlur(this, event);
+    console.log('blur', event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = this.pConn$?.getStateProps().value;
+    let value = event?.target?.value;
+    value = value.replace(/,/g, '');
+    value !== '' ? Number(value) : value
+    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

diff --git a/packages/angular-sdk-components/src/app/_directives/thousand-seperator.directive.ts b/packages/angular-sdk-components/src/app/_directives/thousand-seperator.directive.ts
@@ -0,0 +1,27 @@
+
+
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appThousandSeparator]',
+  standalone: true
+})
+export class ThousandSeparatorDirective {
+
+  constructor(private el: ElementRef) { }
+
+  @HostListener('input', ['$event'])
+  onInput(event) {
+    console.log('event _onHostListenerInput', event);
+    const input = this.el.nativeElement as HTMLInputElement;
+    let value: any = input.value.replace(/,/g, ''); // Remove existing commas
+    if (event?.data !== '.') {
+      value = Number(value).toLocaleString();    // Add thousands separator
+      input.value = value;
+    }
+
+  }
+}
+
+
+