Update number configurator ui

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

@@ -80,12 +80,14 @@
           lg="6"
         >
           <b-form-group
-            :label="$t('kind.number.formatLabel')"
+            :label="$t('kind.number.presetFormats.label')"
             label-class="text-primary"
+            style="white-space: pre-line;"
+            :description="formattedOptionsDescription"
           >
-            <b-form-input
-              v-model="f.options.format"
-              placeholder="0.00"
+            <b-form-select
+              v-model="f.options.presetFormat"
+              :options="formatOptions"
             />
           </b-form-group>
         </b-col>
@@ -95,14 +97,13 @@
           lg="6"
         >
           <b-form-group
-            :label="$t('kind.number.presetFormats.label')"
+            :label="$t('kind.number.formatLabel')"
             label-class="text-primary"
-            style="white-space: pre-line;"
-            :description="formattedOptionsDescription"
           >
-            <b-form-select
-              v-model="f.options.presetFormat"
-              :options="formatOptions"
+            <b-form-input
+              v-model="f.options.format"
+              :disabled="f.options.presetFormat !== 'custom'"
+              placeholder="0.00"
             />
           </b-form-group>
         </b-col>
@@ -131,9 +132,15 @@
               </thead>
 
               <tr>
-                <td>10000.234</td>
-                <td>$0.00</td>
-                <td>$10000.23</td>
+                <td>1000.234</td>
+                <td>0,0.00</td>
+                <td>1,000.23</td>
+              </tr>
+
+              <tr>
+                <td>1000.234</td>
+                <td>0,0</td>
+                <td>1,000</td>
               </tr>
 
               <tr>
@@ -143,9 +150,9 @@
               </tr>
 
               <tr>
-                <td>1</td>
-                <td>0%</td>
-                <td>100%</td>
+                <td>100</td>
+                <td>0o</td>
+                <td>100th</td>
               </tr>
 
               <tr>
@@ -395,27 +402,22 @@ export default {
       },
 
       formatOptions: [
-        { value: 'currencyFormat', text: this.$t('kind.number.presetFormats.options.currency') },
-        { value: 'accountingNumber', text: this.$t('kind.number.presetFormats.options.accountingNumber') },
+        { value: 'custom', text: this.$t('kind.number.presetFormats.options.custom') },
+        { value: 'accounting', text: this.$t('kind.number.presetFormats.options.accounting') },
       ],
     }
   },
 
   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
+      return this.$t(`kind.number.presetFormats.description.${this.f.options.presetFormat}`)
     },
   },
 
   watch: {
     'field.options.display': {
       handler (display) {
-        this.liveExample = display === 'number' ? 123.45679 : 33
+        this.liveExample = display === 'number' ? 1234.56789 : 33.45679
       },
     },
 
@@ -446,7 +448,7 @@ export default {
     this.mock.field.apply({ name: 'mockField' })
     this.mock.module = new compose.Module({ fields: [this.mock.field] }, this.namespace)
     this.mock.record = new compose.Record(this.mock.module, { })
-    this.liveExample = this.field.options.display === 'number' ? 123.45679 : 33.45679
+    this.liveExample = this.field.options.display === 'number' ? 1234.56789 : 33.45679
   },
 
   beforeDestroy () {

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

@@ -30,7 +30,7 @@ interface NumberOptions extends Options {
 
 const defaults = (): Readonly<NumberOptions> => Object.freeze({
   ...defaultOptions(),
-  presetFormat: 'currencyFormat',
+  presetFormat: 'custom',
   precision: 3,
   multiDelimiter: '\n',
   display: 'number', // Either number or progress (progress bar)
@@ -72,10 +72,12 @@ export class ModuleFieldNumber extends ModuleField {
     }
   }
 
-  formatValue (value: string): string {
+  formatValue (value: string, format: string): string {
     const o = this.options
     let n: number
 
+    format = o.presetFormat === 'custom' ? o.format : o.presetFormat
+
     switch (typeof value) {
       case 'string':
         n = parseFloat(value)
@@ -89,30 +91,30 @@ export class ModuleFieldNumber extends ModuleField {
 
     let out = `${n}`
 
-    if (o.format && o.format.length > 0) {
-      out = numeral(n).format(o.format)
+    if (format === 'accounting') {
+      out = formatAccounting(n)
+    } else if (format && format.length > 0) {
+      out = numeral(n).format(format)
     } else {
       out = fmt.number(n)
     }
 
-    if (o.presetFormat === 'accountingNumber') {
-      out = formatChartValueAsAccountingNumber(Number(n))
-    }
-
     return '' + o.prefix + (out || n) + o.suffix
   }
 }
 
-export function formatChartValueAsAccountingNumber (value: number): string {
+export function formatAccounting (value: number): string {
   let result = ''
 
+  if (value === 0) {
+    return '-'
+  }
+
   if (value < 0) {
-    result = `(${Math.abs(value)})`
-  } else if (value === 0) {
-    result = '-'
+    result = `(${fmt.number(Math.abs(value))}`
   }
 
-  return result
+  return fmt.number(value)
 }
 
 Registry.set(kind, ModuleFieldNumber)

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

@@ -209,10 +209,10 @@ edit:
         presetFormats:
           label: Format values using
           options:
-            accountingNumber: Accounting number
+            accounting: Accounting number
             noFormat: No format selected
           description:
-            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'
+            accounting: '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'
     offset:
       label: Offset
       default: Default offset

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

@@ -59,7 +59,7 @@ kind:
     exampleInput: Input
     exampleResult: Result
     examplesLabel: Format examples
-    formatLabel: Format
+    formatLabel: Custom format
     formatPlaceholder: Format
     label: Number
     liveExample: Live example
@@ -96,13 +96,13 @@ kind:
         label: Thresholds
         description: Set which variant to show if value is equal or larger than the threshold
     presetFormats:
-      label: 'Format values using:'
+      label: Format
       options:
-        currency: Currency (Default)
-        accountingNumber: Accounting number
+        custom: Custom
+        accounting: Accounting
       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'
+        custom: ''
+        accounting: Negative numbers are transformed into positive and added in brackets and the value 0 is substituted by a dash
   record:
     currentUnnamedModule: (Current unnamed module)
     label: Record