add number format

app/javascript/submission_form/area.vue

@@ -165,6 +165,9 @@
       <span v-else-if="field.type === 'date'">
         {{ formattedDate }}
       </span>
+      <span v-else-if="field.type === 'number'">
+        {{ formatNumber(modelValue, field.preferences?.format) }}
+      </span>
       <span
         v-else
         class="whitespace-pre-wrap"
@@ -373,6 +376,17 @@ export default {
         }
       }
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',

app/javascript/template_builder/area.vue

@@ -161,6 +161,10 @@
               class="aspect-square mx-auto"
               :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
             />
+            <span
+              v-else-if="field.type === 'number'"
+              class="whitespace-pre-wrap"
+            >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
             <span
               v-else
               class="whitespace-pre-wrap"
@@ -417,6 +421,17 @@ export default {
     closeDropdown () {
       document.activeElement.blur()
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     maybeBlurSettings (e) {
       if (!e.relatedTarget || !this.$refs.settingsDropdown.contains(e.relatedTarget)) {
         this.isSettingsFocus = false

app/javascript/template_builder/field_settings.vue

@@ -1,4 +1,31 @@
 <template>
+  <div
+    v-if="field.type === 'number'"
+    class="py-1.5 px-1 relative"
+    @click.stop
+  >
+    <select
+      :placeholder="t('format')"
+      class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
+      @change="[field.preferences ||= {}, field.preferences.format = $event.target.value, save()]"
+    >
+      <option
+        v-for="format in numberFormats"
+        :key="format"
+        :value="format"
+        :selected="format === field.preferences?.format || (format === 'none' && !field.preferences?.format)"
+      >
+        {{ formatNumber(123456789.567, format) }}
+      </option>
+    </select>
+    <label
+      :style="{ backgroundColor }"
+      class="absolute -top-1 left-2.5 px-1 h-4"
+      style="font-size: 8px"
+    >
+      {{ t('format') }}
+    </label>
+  </div>
   <div
     v-if="['number'].includes(field.type)"
     class="py-1.5 px-1 relative"
@@ -335,6 +362,14 @@ export default {
         return acc
       }, {})
     },
+    numberFormats () {
+      return [
+        'none',
+        'comma',
+        'dot',
+        'space'
+      ]
+    },
     dateFormats () {
       const formats = [
         'MM/DD/YYYY',
@@ -382,6 +417,17 @@ export default {
 
       this.save()
     },
+    formatNumber (number, format) {
+      if (format === 'comma') {
+        return new Intl.NumberFormat('en-US').format(number)
+      } else if (format === 'dot') {
+        return new Intl.NumberFormat('de-DE').format(number)
+      } else if (format === 'space') {
+        return new Intl.NumberFormat('fr-FR').format(number)
+      } else {
+        return number
+      }
+    },
     formatDate (date, format) {
       const monthFormats = {
         M: 'numeric',

app/views/submissions/_value.html.erb

@@ -39,6 +39,11 @@
       <% value = Time.current.in_time_zone(local_assigns[:timezone]).to_date.to_s if value == '{{date}}' %>
       <%= TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale]) %>
     </div>
+  <% elsif field['type'] == 'number' %>
+    <autosize-field></autosize-field>
+    <div class="flex items-center px-0.5 whitespace-nowrap">
+      <%= NumberUtils.format_number(value, field.dig('preferences', 'format')) %>
+    </div>
   <% else %>
     <autosize-field></autosize-field>
     <div class="flex items-center px-0.5 whitespace-pre-wrap"><%= Array.wrap(value).join(', ') %></div>

lib/number_utils.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module NumberUtils
+  FORMAT_LOCALES = {
+    'dot' => 'de',
+    'space' => 'fr',
+    'comma' => 'en'
+  }.freeze
+
+  module_function
+
+  def format_number(number, format)
+    locale = FORMAT_LOCALES[format]
+
+    if locale
+      ApplicationController.helpers.number_with_delimiter(number, locale:)
+    else
+      number
+    end
+  end
+end

lib/submissions/generate_audit_trail.rb

@@ -261,6 +261,8 @@ module Submissions
                 value = TimeUtils.format_date_string(value, field.dig('preferences', 'format'), account.locale)
               end
 
+              value = NumberUtils.format_number(value, field.dig('preferences', 'format')) if field['type'] == 'number'
+
               value = value.join(', ') if value.is_a?(Array)
 
               composer.formatted_text_box([{ text: TextUtils.maybe_rtl_reverse(value.to_s.presence || 'n/a') }],

lib/submissions/generate_result_attachments.rb

@@ -213,6 +213,8 @@ module Submissions
               value = TimeUtils.format_date_string(value, field.dig('preferences', 'format'), account.locale)
             end
 
+            value = NumberUtils.format_number(value, field.dig('preferences', 'format')) if field['type'] == 'number'
+
             value = TextUtils.maybe_rtl_reverse(Array.wrap(value).join(', '))
 
             text = HexaPDF::Layout::TextFragment.create(value, font: pdf.fonts.add(FONT_NAME),