Updated percentage to fix format and payload issue (#216)

* Updated percentage to fix format and payload issue * updated based on comment --------- Co-authored-by: mohas22 <[email protected]>
pegasystems · Oct 29, 2024 · ec002f1 · ec002f1
1 parent d008203
commit ec002f1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/components/fields/Percentage/index.ts b/src/components/fields/Percentage/index.ts
@@ -39,9 +39,6 @@ class Percentage extends FormComponentBase {
 
     // setup this component's styling...
     this.theComponentStyleTemplate = percentageStyles;
-
-    // NOTE: Need to bind the callback to 'this' so it has this element's context when it's called.
-    this.registerAndSubscribeComponent(this.onStateChange.bind(this));
   }
 
   disconnectedCallback() {
@@ -63,14 +60,19 @@ class Percentage extends FormComponentBase {
     // const theConfigProps = this.thePConn.getConfigProps();
   }
 
+  fieldOnChange(event: any) {
+    event.target.value = event.target.value.replace('%', '');
+    super.fieldOnChange(event);
+  }
+
   render() {
     if (this.bLogging) {
       console.log(`${this.theComponentName}: render with pConn: ${JSON.stringify(this.pConn)}`);
     }
     if (this.bDebug) {
       debugger;
     }
-
+    this.value = (parseFloat(this.value) / 100).toString();
     // To prevent accumulation (and extra rendering) of previous renders, begin each the render
     //  of any component that's a child of BridgeBase with a call to this.prepareForRender();
     this.prepareForRender();
@@ -96,9 +98,9 @@ class Percentage extends FormComponentBase {
       ? html` <lion-input-amount
           id=${this.theComponentId}
           dataTestId=${this.testId}
-          .modelValue=${parseFloat(this.value)}
           .fieldName=${this.label}
           .formatOptions=${{ style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 4 }}
+          .modelValue=${parseFloat(this.value)}
           .validators=${this.lionValidatorsArray}
           .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
           ?readonly=${this.bReadonly}

diff --git a/src/components/fields/RadioButtons/index.ts b/src/components/fields/RadioButtons/index.ts
@@ -36,6 +36,7 @@ class RadioButtons extends FormComponentBase {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  inline = false;
   constructor() {
     //  Note: BridgeBase constructor has 2 optional args:
     //  1st: inDebug - sets this.bLogging: false if not provided
@@ -113,6 +114,7 @@ class RadioButtons extends FormComponentBase {
       this.localePath,
       this.thePConn.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
+    this.inline = theConfigProps.inline;
   }
 
   // The original implementation of fieldOnChange before we switched to using the super class implementation
@@ -180,7 +182,6 @@ class RadioButtons extends FormComponentBase {
             <div class="mat-form-field-infix radio-group-form">
               <lion-radio-group
                 id=${this.theComponentId}
-                class="psdk-radio-vertical"
                 dataTestId=${this.testId}
                 .fieldName=${this.label}
                 .modelValue=${this.value}
@@ -193,18 +194,18 @@ class RadioButtons extends FormComponentBase {
                 @change=${this.fieldOnChange}
               >
                 <span slot="label" class="radio-group-label">${this.annotatedLabel}</span>
-                ${this.options.map((option: any) => {
-                  const val = this.thePConn.getLocalizedValue(
-                    option.value,
-                    this.localePath,
-                    this.thePConn.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
-                  );
-                  return html`
-                    ${option.key === this.value
+                <div class=${this.inline ? 'psdk-radio-horizontal' : 'psdk-radio-vertical'}>
+                  ${this.options.map((option: any) => {
+                    const val = this.thePConn.getLocalizedValue(
+                      option.value,
+                      this.localePath,
+                      this.thePConn.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
+                    );
+                    return option.key === this.value
                       ? html` <lion-radio class="psdk-radio-button" checked label=${val} .choiceValue=${option.key}></lion-radio>`
-                      : html` <lion-radio class="psdk-radio-button" label=${val} .choiceValue=${option.key}></lion-radio>`}
-                  `;
-                })}
+                      : html` <lion-radio class="psdk-radio-button" label=${val} .choiceValue=${option.key}></lion-radio>`;
+                  })}
+                </div>
               </lion-radio-group>
             </div>
           `