align number field

app/javascript/submission_form/area.vue

@@ -157,6 +157,7 @@
       ref="textContainer"
       dir="auto"
       class="flex items-center px-0.5 w-full"
+      :class="alignClasses[field.preferences?.align]"
     >
       <span v-if="Array.isArray(modelValue)">
         {{ modelValue.join(', ') }}
@@ -167,6 +168,7 @@
       <span
         v-else
         class="whitespace-pre-wrap"
+        :class="{ 'w-full': field.preferences?.align }"
       >{{ modelValue }}</span>
     </div>
   </div>
@@ -253,6 +255,13 @@ export default {
         phone: this.t('phone')
       }
     },
+    alignClasses () {
+      return {
+        center: 'text-center',
+        left: 'text-left',
+        right: 'text-right'
+      }
+    },
     option () {
       return this.field.options.find((o) => o.uuid === this.area.option_uuid)
     },

app/javascript/template_builder/area.vue

@@ -99,7 +99,7 @@
     <div
       class="flex items-center h-full w-full"
       dir="auto"
-      :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
+      :class="[bgColors[submitterIndex], field?.default_value ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
     >
       <span
         v-if="field"
@@ -211,6 +211,13 @@ export default {
     defaultName () {
       return this.buildDefaultName(this.field, this.template.fields)
     },
+    alignClasses () {
+      return {
+        center: 'justify-center',
+        left: 'justify-start',
+        right: 'justify-end'
+      }
+    },
     optionIndexText () {
       if (this.area.option_uuid && this.field.options) {
         return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`

app/javascript/template_builder/field.vue

@@ -115,6 +115,32 @@
               @dragstart.prevent.stop
               @click="closeDropdown"
             >
+              <div
+                v-if="['number'].includes(field.type)"
+                class="py-1.5 px-1 relative"
+                @click.stop
+              >
+                <select
+                  class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal"
+                  @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
+                >
+                  <option
+                    v-for="value in ['left', 'right', 'center']"
+                    :key="value"
+                    :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
+                    :value="value"
+                  >
+                    {{ t(value) }}
+                  </option>
+                </select>
+                <label
+                  :style="{ backgroundColor: backgroundColor }"
+                  class="absolute -top-1 left-2.5 px-1 h-4"
+                  style="font-size: 8px"
+                >
+                  {{ t('align') }}
+                </label>
+              </div>
               <div
                 v-if="['text', 'number'].includes(field.type) && !defaultField"
                 class="py-1.5 px-1 relative"

app/javascript/template_builder/i18n.js

@@ -1,4 +1,8 @@
 const en = {
+  align: 'Align',
+  left: 'Left',
+  right: 'Right',
+  center: 'Center',
   description: 'Description',
   display_title: 'Display title',
   with_logo: 'With logo',

app/views/submissions/_value.html.erb

@@ -1,4 +1,5 @@
-<field-value dir="auto" class="flex absolute text-[1.5vw] lg:text-base" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
+<% align = field.dig('preferences', 'align') %>
+<field-value dir="auto" class="flex absolute text-[1.5vw] lg:text-base <%= align == 'right' ? 'justify-end' : (align == 'center' ? 'justify-center' : '') %>" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
   <% if field['type'].in?(['signature', 'image', 'initials', 'stamp']) %>
     <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" loading="lazy">
   <% elsif field['type'].in?(['file', 'payment']) %>

lib/submissions/generate_result_attachments.rb

@@ -75,8 +75,10 @@ module Submissions
 
           value = submitter.values[field['uuid']]
 
-          layouter = HexaPDF::Layout::TextLayouter.new(text_valign: :center,
-                                                       text_align: value.to_s.match?(RTL_REGEXP) ? :right : :left,
+          text_align = field.dig('preferences', 'align').to_s.to_sym.presence ||
+                       (value.to_s.match?(RTL_REGEXP) ? :right : :left)
+
+          layouter = HexaPDF::Layout::TextLayouter.new(text_valign: :center, text_align:,
                                                        font: pdf.fonts.add(FONT_NAME), font_size:)
 
           next if Array.wrap(value).compact_blank.blank?
@@ -202,15 +204,23 @@ module Submissions
                                                           font: pdf.fonts.add(FONT_NAME),
                                                           font_size: (font_size / 1.4).to_i)
 
-              lines = layouter.fit([text], area['w'] * width, height).lines
+              lines = layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width, height).lines
 
               box_height = lines.sum(&:height)
             end
 
             height_diff = [0, box_height - (area['h'] * height)].max
 
-            layouter.fit([text], area['w'] * width, height_diff.positive? ? box_height : area['h'] * height)
-                    .draw(canvas, (area['x'] * width) + TEXT_LEFT_MARGIN,
+            right_align_x_adjustment =
+              if field['type'].in?(%w[date number]) && text_align != :left
+                (width - (area['w'] * width)) / (text_align == :center ? 2.0 : 1)
+              else
+                0
+              end
+
+            layouter.fit([text], field['type'].in?(%w[date number]) ? width : area['w'] * width,
+                         height_diff.positive? ? box_height : area['h'] * height)
+                    .draw(canvas, (area['x'] * width) - right_align_x_adjustment + TEXT_LEFT_MARGIN,
                           height - (area['y'] * height) + height_diff - TEXT_TOP_MARGIN)
           end
         end