feat: FORMS-2501 Add rounding support to number components (bcgov#1744)

jasonchung1871 · usingtechnology · RyanBirtch-aot · web-flow · commit 82b6430c8149 · 2025-09-25T11:47:19.000-07:00
* Add rounding support to number components

Introduced a RoundingMixin to provide configurable rounding (method and decimal places) for SimpleNumber and SimpleNumberAdvanced components. Updated their schemas, edit forms, and value processing logic to support rounding. Also updated the deployment script to copy CSS files and added a CSS class for form layout.

* Refactor number components and improve rounding mixin

Refactored SimpleNumberAdvanced to extend SimpleNumberComponent, simplifying inheritance and schema extension. Improved RoundingMixin to cache original prototype methods for setValue, getValue, calculateValue, and getValueAsString, ensuring correct method resolution. Updated component-update.js to also copy .css.map files during deployment.

* Refactor rounding mixin to class-based mixin for numbers

Replaces the object-based RoundingMixin with a class-based mixin (WithRounding) for better TypeScript compatibility and cleaner inheritance. Updates the SimpleNumber component to use the new mixin pattern, improving maintainability and type safety.

* Refactor SimpleNumber component typing and mixin usage

Improves type safety by defining explicit interfaces for Formio component methods and constructors. Updates mixin and class usage to leverage these types, removes unnecessary type assertions, and clarifies the ParentComponent type.

* Refactor number rounding and decimal config in components

Reworks rounding and decimal configuration for SimpleNumber and related components. Moves decimal and rounding options into a unified fieldset, updates form layouts, and consolidates logic for formatting and rounding values. Removes duplicate config from edit forms and simplifies the component implementation.

* Remove unused imports and fix rounding logic

Cleaned up unused imports in SimpleNumber Component and corrected the rounding logic by removing an extraneous argument from Math.floor. This improves code clarity and correctness.

* sonarcloud fixes

* Sonarqube fixes

* Last sonarqube fix

---------

Co-authored-by: usingtechnology &lt;39388115+usingtechnology@users.noreply.github.com&gt;
Co-authored-by: RyanBirtch-aot &lt;104386035+RyanBirtch-aot@users.noreply.github.com&gt;
Co-authored-by: RyanBirtch-aot &lt;ryan.birtch@aot-technologies.com&gt;
diff --git a/app/frontend/component-update.js b/app/frontend/component-update.js
@@ -1,6 +1,6 @@
 // This script attempts to gracefully rebuild and update @bcgov/formio if necessary
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 
 const COMPONENTS_DIR = '../../components';
 const FORMIO_DIR = 'src/formio';
@@ -81,10 +81,35 @@ function cleanComponents() {
  * @description Redeploy `@bcgov/formio` library
  */
 function deployComponents() {
-  console.log(`Redeploying ${TITLE}...`); // eslint-disable-line no-console
+  console.log(`Redeploying ${TITLE}...`);
   if (fs.existsSync(FORMIO_DIR)) fs.rmSync(FORMIO_DIR, { recursive: true });
-  copyDirRecursiveSync(`${COMPONENTS_DIR}/lib`, FORMIO_DIR);
-  console.log(`${TITLE} has been redeployed`); // eslint-disable-line no-console
+
+  // Copy lib directory (JavaScript components)
+  if (fs.existsSync(`${COMPONENTS_DIR}/lib`)) {
+    copyDirRecursiveSync(`${COMPONENTS_DIR}/lib`, FORMIO_DIR);
+  }
+
+  // Copy only CSS files from dist directory
+  if (fs.existsSync(`${COMPONENTS_DIR}/dist`)) {
+    const cssFiles = fs
+      .readdirSync(`${COMPONENTS_DIR}/dist`)
+      .filter((file) => file.endsWith('.css') || file.endsWith('.css.map'));
+
+    if (cssFiles.length > 0) {
+      const cssDir = path.join(FORMIO_DIR, 'css');
+      if (!fs.existsSync(cssDir)) {
+        fs.mkdirSync(cssDir, { recursive: true });
+      }
+
+      cssFiles.forEach((file) => {
+        const sourcePath = path.join(`${COMPONENTS_DIR}/dist`, file);
+        const targetPath = path.join(cssDir, file);
+        copyFileSync(sourcePath, targetPath);
+      });
+    }
+  }
+
+  console.log(`${TITLE} has been redeployed`);
 }
 
 //
@@ -98,7 +123,7 @@ function deployComponents() {
  * @param {string} [cwd] Working directory of the command to run
  */
 function runSync(cmd, cwd = undefined) {
-  const { spawnSync } = require('child_process');
+  const { spawnSync } = require('node:child_process');
   const parts = cmd.split(/\s+/g);
   const opts = { stdio: 'inherit', shell: true };
   if (cwd) opts.cwd = cwd;
diff --git a/app/frontend/src/main.js b/app/frontend/src/main.js
@@ -41,6 +41,7 @@ app.config.globalProperties.$filters = {
 // has to be done BEFORE the keycloak adapter for some reason or it breaks the keycloak library on non-Chromium MS Edge (or IE11).
 // No idea why, probably a polyfill clash
 import BcGovFormioComponents from '~/formio/lib';
+import '~/formio/css/bcgov-formio-components.css';
 import { Formio } from '@formio/vue';
 Formio.use(BcGovFormioComponents);
 
@@ -84,18 +85,20 @@ app.component('BasePanel', BasePanel);
 app.component('BasePrintButton', BasePrintButton);
 app.component('BaseSecure', BaseSecure);
 
-// IE11 Detection (https://stackoverflow.com/a/21825207)
-if (!!window.MSInputMethodContext && !!document.documentMode) {
-  document.write(`<div style="padding-top: 5em; text-align: center;">
+(async () => {
+  // IE11 Detection (https://stackoverflow.com/a/21825207)
+  if (!!window.MSInputMethodContext && !!document.documentMode) {
+    document.write(`<div style="padding-top: 5em; text-align: center;">
       <h1>We're sorry but ${
         import.meta.env.VITE_TITLE
       } is not supported in Internet Explorer.</h1>
       <h1>Please use a modern browser instead (<a href="https://www.google.com/intl/en_ca/chrome/">Chrome</a>, <a href="https://www.mozilla.org/en-CA/firefox/">Firefox</a>, etc).</h1>
     </div>`);
-  NProgress.done();
-} else {
-  loadConfig();
-}
+    NProgress.done();
+  } else {
+    await loadConfig();
+  }
+})();
 
 /**
  * @function initializeApp
diff --git a/components/src/components/Common/Rounding.mixin.ts b/components/src/components/Common/Rounding.mixin.ts
@@ -0,0 +1,84 @@
+/**
+ * Rounding functionality mixin for FormIO number components
+ * 
+ * This mixin implements a common JavaScript mixin pattern using object composition.
+ * References:
+ * - JavaScript Mixins: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+ * - TypeScript Mixins: https://www.typescriptlang.org/docs/handbook/mixins.html
+ * - FormIO Component Extension Patterns: https://github.com/formio/formio.js/wiki/Custom-Components
+ * 
+ * The rounding logic addresses floating-point precision issues common in JavaScript:
+ * - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+ * - https://stackoverflow.com/questions/11832914/how-to-round-to-at-most-2-decimal-places-if-necessary
+ */
+export interface RoundingConfig {
+    method: 'round' | 'floor' | 'ceil';
+}
+
+// Add this to your Rounding.mixin.ts file
+export const RoundingEditFormComponents = [
+    {
+        type: 'fieldset',
+        title: 'Number Precision & Rounding',
+        key: 'precision-fieldset',
+        components: [
+            {
+                type: 'checkbox',
+                key: 'requireDecimal',
+                label: 'Require Decimal',
+                tooltip: 'Always show decimals, even if trailing zeros.',
+                input: true,
+                weight: 100,
+                defaultValue: false
+            },
+            {
+                type: 'number',
+                input: true,
+                weight: 80,
+                key: 'decimalLimit',
+                label: 'Decimal Places',
+                tooltip: 'The maximum number of decimal places',
+                validate: {
+                    integer: true,
+                },
+                conditional: {
+                    show: true,
+                    when: 'requireDecimal',
+                    eq: true
+                },
+            },
+            {
+                type: 'select',
+                key: 'rounding.method',
+                label: 'Rounding Method',
+                data: {
+                    values: [
+                        { label: 'Round (standard)', value: 'round' },
+                        { label: 'Floor (round down)', value: 'floor' },
+                        { label: 'Ceiling (round up)', value: 'ceil' }
+                    ]
+                },
+                defaultValue: 'round',
+                input: true,
+                weight: 101,
+                conditional: {
+                    show: true,
+                    when: 'requireDecimal',
+                    eq: true
+                }
+            }
+        ]
+    }
+];
+
+/**
+ * Add rounding configuration to schema
+ */
+export function addRoundingToSchema(schema: any) {
+    return {
+        ...schema,
+        rounding: {
+            method: 'round' as const,
+        }
+    };
+}
diff --git a/components/src/components/SimpleNumber/Component.form.ts b/components/src/components/SimpleNumber/Component.form.ts
@@ -6,13 +6,14 @@ import EditValidation from './editForm/Component.edit.validation';
 
 import SimpleApi from '../Common/Simple.edit.api';
 import SimpleConditional from '../Common/Simple.edit.conditional';
+import { RoundingEditFormComponents } from '../Common/Rounding.mixin';
 
 export default function(...extend) {
     return baseEditForm([
         EditDisplay,
         {
             key: 'data',
-            ignore: true,
+            ignore: true
         },
         {
             key: 'api',
@@ -38,7 +39,10 @@ export default function(...extend) {
             label: 'Data',
             key: 'customData',
             weight: 10,
-            components: EditData
+            components: [
+                ...EditData,
+                ...RoundingEditFormComponents,
+            ],
         },
         {
             label: 'Validation',
@@ -57,6 +61,6 @@ export default function(...extend) {
             key: 'customConditional',
             weight: 40,
             components: SimpleConditional
-        }
+        },
     ], ...extend);
 }
diff --git a/components/src/components/SimpleNumber/Component.ts b/components/src/components/SimpleNumber/Component.ts
@@ -1,38 +1,75 @@
 /* tslint:disable */
 import { Components } from 'formiojs';
-const ParentComponent = (Components as any).components.number;
 import editForm from './Component.form';
-
+import { addRoundingToSchema } from '../Common/Rounding.mixin';
 import { Constants } from '../Common/Constants';
 
+const ParentComponent = (Components as any).components.number;
+
 const ID = 'simplenumber';
 const DISPLAY = 'Number';
 
+// Apply the mixin to create the final component class
 export default class Component extends (ParentComponent as any) {
-    static schema(...extend) {
-        return ParentComponent.schema({
-            type: ID,
-            label: DISPLAY,
-            key: ID,
-            validate: {
-                min: '',
-                max: '',
-                step: 'any',
-                integer: ''
-            }
-        }, ...extend);
-    }
+  static schema(...extend: any[]) {
+    const baseSchema = ParentComponent.schema(
+      {
+        type: ID,
+        label: DISPLAY,
+        key: ID,
+        validate: {
+          min: '',
+          max: '',
+          step: 'any',
+          integer: '',
+        },
+      },
+      ...extend
+    );
 
-    public static editForm = editForm;
-
-    static get builderInfo() {
-        return {
-            title: DISPLAY,
-            group: 'simple',
-            icon: 'hashtag',
-            weight: 10,
-            documentation: Constants.DEFAULT_HELP_LINK,
-            schema: Component.schema()
-        };
+    return addRoundingToSchema(baseSchema);
+  }
+
+  public static editForm = editForm;
+
+  static get builderInfo() {
+    return {
+      title: DISPLAY,
+      group: 'simple',
+      icon: 'hashtag',
+      weight: 10,
+      documentation: Constants.DEFAULT_HELP_LINK,
+      schema: Component.schema(),
+    };
+  }
+
+  formatValue(value: any) {
+    if (
+      this.component.requireDecimal &&
+      value !== null &&
+      value !== undefined &&
+      value !== ''
+    ) {
+      const decimalPlaces = this.component.decimalLimit || 2;
+      const multiplier = Math.pow(10, decimalPlaces);
+      let numValue = Number.parseFloat(value);
+      if (!Number.isNaN(numValue)) {
+        switch (this.component.rounding.method) {
+          case 'floor':
+            numValue = Math.floor(numValue * multiplier) / multiplier;
+            break;
+          case 'ceil':
+            numValue = Math.ceil(numValue * multiplier) / multiplier;
+            break;
+          case 'round':
+          default:
+            numValue = Math.round(numValue * multiplier) / multiplier;
+            break;
+        }
+        return numValue.toFixed(decimalPlaces);
+      }
     }
+
+    return super.formatValue(value);
+  }
 }
diff --git a/components/src/components/SimpleNumber/editForm/Component.edit.data.ts b/components/src/components/SimpleNumber/editForm/Component.edit.data.ts
@@ -9,20 +9,4 @@ export default [
         label: 'Use Thousands Separator',
         tooltip: 'Separate thousands by local delimiter.'
     },
-    {
-        type: 'number',
-        input: true,
-        weight: 80,
-        key: 'decimalLimit',
-        label: 'Decimal Places',
-        tooltip: 'The maximum number of decimal places.'
-    },
-    {
-        type: 'checkbox',
-        input: true,
-        weight: 90,
-        key: 'requireDecimal',
-        label: 'Require Decimal',
-        tooltip: 'Always show decimals, even if trailing zeros.'
-    },
 ];
diff --git a/components/src/components/SimpleNumberAdvanced/Component.form.ts b/components/src/components/SimpleNumberAdvanced/Component.form.ts
@@ -1,8 +1,37 @@
 import baseEditForm from 'formiojs/components/number/Number.form';
+
+import AdvancedEditDisplay from '../Common/Advanced.edit.display';
+import AdvancedEditData from '../Common/Advanced.edit.data';
 import EditValidation from './editForm/Component.edit.validation';
+import { RoundingEditFormComponents } from '../Common/Rounding.mixin';
 
 export default function(...extend) {
     return baseEditForm([
+        {
+            key: 'display',
+            ignore: true,
+        },
+        {
+            label: 'Display',
+            key: 'customDisplay',
+            weight: 0,
+            components: [
+                ...AdvancedEditDisplay,
+            ],
+        },
+        {
+            key: 'data',
+            ignore: true,
+        },
+        {
+            label: 'Data',
+            key: 'customData',
+            weight: 5,
+            components: [
+                ...AdvancedEditData,
+                ...RoundingEditFormComponents,
+            ],
+        },
         {
             key: 'validation',
             ignore: true
@@ -12,6 +41,6 @@ export default function(...extend) {
             key: 'customValidation',
             weight: 15,
             components: EditValidation
-        }
+        },
     ], ...extend);
 }
diff --git a/components/src/components/SimpleNumberAdvanced/Component.ts b/components/src/components/SimpleNumberAdvanced/Component.ts
diff --git a/components/src/sass/contrib.scss b/components/src/sass/contrib.scss
