Add currency and accounting number formats to module fields

client/web/compose/src/components/ModuleFields/Configurator/Number.vue

@@ -53,7 +53,7 @@
           >
             <b-form-input
               v-model="f.options.prefix"
-              :placeholder="$t('kind.number.prefixPlaceholder')"
+              placeholder="USD/mo"
             />
           </b-form-group>
         </b-col>
@@ -68,7 +68,7 @@
           >
             <b-form-input
               v-model="f.options.suffix"
-              :placeholder="$t('kind.number.suffixPlaceholder')"
+              placeholder="$"
             />
           </b-form-group>
         </b-col>
@@ -85,7 +85,24 @@
           >
             <b-form-input
               v-model="f.options.format"
-              :placeholder="$t('kind.number.formatPlaceholder')"
+              placeholder="0.00"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('kind.number.presetFormats.label')"
+            label-class="text-primary"
+            style="white-space: pre-line;"
+            :description="formattedOptionsDescription"
+          >
+            <b-form-select
+              v-model="f.options.presetFormat"
+              :options="formatOptions"
             />
           </b-form-group>
         </b-col>
@@ -101,9 +118,15 @@
             <b-table-simple class="w-100 table-sm">
               <thead>
                 <tr>
-                  <th>{{ $t('kind.number.exampleInput') }}</th>
-                  <th>{{ $t('kind.number.exampleFormat') }}</th>
-                  <th>{{ $t('kind.number.exampleResult') }}</th>
+                  <th id="example-input">
+                    {{ $t('kind.number.exampleInput') }}
+                  </th>
+                  <th id="example-format">
+                    {{ $t('kind.number.exampleFormat') }}
+                  </th>
+                  <th id="example-result">
+                    {{ $t('kind.number.exampleResult') }}
+                  </th>
                 </tr>
               </thead>
 
@@ -370,9 +393,25 @@ export default {
         record: undefined,
         errors: new validator.Validated(),
       },
+
+      formatOptions: [
+        { value: 'currencyFormat', text: this.$t('kind.number.presetFormats.options.currency') },
+        { value: 'accountingNumber', text: this.$t('kind.number.presetFormats.options.accountingNumber') },
+      ],
     }
   },
 
+  computed: {
+    formattedOptionsDescription () {
+      const currency = this.$t('kind.number.presetFormats.description.currency')
+      const accountingNumber = this.$t('kind.number.presetFormats.description.accountingNumber')
+
+      let translation = [currency, accountingNumber].join('\r\n')
+
+      return translation
+    },
+  },
+
   watch: {
     'field.options.display': {
       handler (display) {
@@ -430,6 +469,7 @@ export default {
       this.displayOptions = []
       this.variants = []
       this.mock = {}
+      this.formatOptions = []
     },
   },
 }

lib/js/src/compose/types/module-field/number.ts

@@ -11,6 +11,7 @@ interface Threshold {
 }
 
 interface NumberOptions extends Options {
+  presetFormat: string;
   format: string;
   prefix: string;
   suffix: string;
@@ -29,6 +30,7 @@ interface NumberOptions extends Options {
 
 const defaults = (): Readonly<NumberOptions> => Object.freeze({
   ...defaultOptions(),
+  presetFormat: 'currencyFormat',
   precision: 3,
   multiDelimiter: '\n',
   display: 'number', // Either number or progress (progress bar)
@@ -61,7 +63,7 @@ export class ModuleFieldNumber extends ModuleField {
     if (!o) return
     super.applyOptions(o)
 
-    Apply(this.options, o, String, 'format', 'prefix', 'suffix', 'multiDelimiter', 'display', 'variant')
+    Apply(this.options, o, String, 'format', 'prefix', 'suffix', 'multiDelimiter', 'display', 'variant', 'presetFormat')
     Apply(this.options, o, Number, 'precision', 'min', 'max')
     Apply(this.options, o, Boolean, 'showValue', 'showRelative', 'showProgress', 'animated')
 
@@ -84,15 +86,33 @@ export class ModuleFieldNumber extends ModuleField {
       default:
         n = 0
     }
+
     let out = `${n}`
+
     if (o.format && o.format.length > 0) {
       out = numeral(n).format(o.format)
     } else {
       out = fmt.number(n)
     }
 
-    return '' + o.prefix + out + o.suffix
+    if (o.presetFormat === 'accountingNumber') {
+      out = formatChartValueAsAccountingNumber(Number(n))
+    }
+
+    return '' + o.prefix + (out || n) + o.suffix
   }
 }
 
+export function formatChartValueAsAccountingNumber (value: number): string {
+  let result = ''
+
+  if (value < 0) {
+    result = `(${Math.abs(value)})`
+  } else if (value === 0) {
+    result = '-'
+  }
+
+  return result
+}
+
 Registry.set(kind, ModuleFieldNumber)

locale/en/corteza-webapp-compose/field.yaml

@@ -95,6 +95,14 @@ kind:
       thresholds:
         label: Thresholds
         description: Set which variant to show if value is equal or larger than the threshold
+    presetFormats:
+      label: 'Format values using:'
+      options:
+        currency: Currency (Default)
+        accountingNumber: Accounting number
+      description:
+        currency: Currency format displays the data using the default or set by user configuration
+        accountingNumber: 'Accounting number displays the data in the same way as the currency format with the two differences: 1) negative numbers are transformed into positive and added in brackets and 2) the value 0 is substituted by a dash'
   record:
     currentUnnamedModule: (Current unnamed module)
     label: Record