diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Number.vue b/client/web/compose/src/components/ModuleFields/Configurator/Number.vue index 7dddd4012..7954a099e 100644 --- a/client/web/compose/src/components/ModuleFields/Configurator/Number.vue +++ b/client/web/compose/src/components/ModuleFields/Configurator/Number.vue @@ -80,12 +80,14 @@ lg="6" > - @@ -95,14 +97,13 @@ lg="6" > - @@ -131,9 +132,15 @@ - 10000.234 - $0.00 - $10000.23 + 1000.234 + 0,0.00 + 1,000.23 + + + + 1000.234 + 0,0 + 1,000 @@ -143,9 +150,9 @@ - 1 - 0% - 100% + 100 + 0o + 100th @@ -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 () { diff --git a/lib/js/src/compose/types/module-field/number.ts b/lib/js/src/compose/types/module-field/number.ts index 6a0355680..e91e8a1da 100644 --- a/lib/js/src/compose/types/module-field/number.ts +++ b/lib/js/src/compose/types/module-field/number.ts @@ -31,7 +31,7 @@ interface NumberOptions extends Options { const defaults = (): Readonly => Object.freeze({ ...defaultOptions(), - presetFormat: 'currencyFormat', + presetFormat: 'custom', precision: 3, multiDelimiter: '\n', display: 'number', // Either number or progress (progress bar) @@ -73,10 +73,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) @@ -90,18 +92,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 = formatValueAsAccountingNumber(Number(n)) - } - return '' + o.prefix + (out || n) + o.suffix } } +export function formatAccounting (value: number): string { + let result = '' + + if (value === 0) { + return '-' + } + + if (value < 0) { + result = `(${fmt.number(Math.abs(value))}` + } + + return fmt.number(value) +} + Registry.set(kind, ModuleFieldNumber) diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml index 3b465bb8a..0ce03f4c4 100644 --- a/locale/en/corteza-webapp-compose/chart.yaml +++ b/locale/en/corteza-webapp-compose/chart.yaml @@ -210,10 +210,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 diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml index ac4b21e4f..8a986060f 100644 --- a/locale/en/corteza-webapp-compose/field.yaml +++ b/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