From 29fbdfbe2fce2a4fa46e4eb12388430338f40da5 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 13 Dec 2024 00:24:29 +0200
Subject: [PATCH] cells align

---
 app/javascript/submission_form/area.vue           |  1 +
 .../template_builder/field_settings.vue           |  4 ++--
 app/views/submissions/_value.html.erb             |  2 +-
 lib/submissions/generate_result_attachments.rb    | 15 ++++++++++++---
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index b969f644..d3f7015e 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -168,6 +168,7 @@
     <div
       v-else-if="field.type === 'cells'"
       class="w-full flex items-center"
+      :class="{ 'justify-end': field.preferences?.align === 'right' }"
     >
       <div
         v-for="(char, index) in modelValue"
diff --git a/app/javascript/template_builder/field_settings.vue b/app/javascript/template_builder/field_settings.vue
index a2340027..931e9794 100644
--- a/app/javascript/template_builder/field_settings.vue
+++ b/app/javascript/template_builder/field_settings.vue
@@ -27,7 +27,7 @@
     </label>
   </div>
   <div
-    v-if="['number'].includes(field.type)"
+    v-if="['number', 'cells'].includes(field.type)"
     class="py-1.5 px-1 relative"
     @click.stop
   >
@@ -36,7 +36,7 @@
       @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
     >
       <option
-        v-for="value in ['left', 'right', 'center']"
+        v-for="value in ['left', 'right', field.type === 'cells' ? null : 'center'].filter(Boolean)"
         :key="value"
         :selected="field.preferences?.align ? value === field.preferences.align : value === 'left'"
         :value="value"
diff --git a/app/views/submissions/_value.html.erb b/app/views/submissions/_value.html.erb
index ab269352..6c58d0d8 100644
--- a/app/views/submissions/_value.html.erb
+++ b/app/views/submissions/_value.html.erb
@@ -50,7 +50,7 @@
     <% end %>
   <% elsif field['type'] == 'cells' && area['cell_w'].to_f > 0.0 %>
     <% cell_width = area['cell_w'] / area['w'] * 100 %>
-    <div class="w-full flex items-center">
+    <div class="w-full flex items-center <%= 'justify-end' if align == 'right' %>">
       <% (0..(area['w'] / area['cell_w']).ceil).each do |index| %>
         <% if value[index] %>
           <div class="text-center flex-none" style="width: <%= cell_width %>%;"><%= value[index] %></div>
diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 8842e9d9..f9c66a89 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -382,7 +382,10 @@ module Submissions
           when ->(type) { type == 'cells' && !area['cell_w'].to_f.zero? }
             cell_width = area['cell_w'] * width
 
-            TextUtils.maybe_rtl_reverse(value).chars.each_with_index do |char, index|
+            chars = TextUtils.maybe_rtl_reverse(value).chars
+            chars = chars.reverse if field.dig('preferences', 'align') == 'right'
+
+            chars.each_with_index do |char, index|
               next if char.blank?
 
               text = HexaPDF::Layout::TextFragment.create(char, font:,
@@ -409,9 +412,15 @@ module Submissions
                 line_height = layouter.fit([text], cell_width, height).lines.first.height
               end
 
+              x =
+                if field.dig('preferences', 'align') == 'right'
+                  ((area['x'] + area['w']) * width) - (cell_width * (index + 1))
+                else
+                  (area['x'] * width) + (cell_width * index)
+                end
+
               cell_layouter.fit([text], cell_width, [line_height, area['h'] * height].max)
-                           .draw(canvas, ((area['x'] * width) + (cell_width * index)),
-                                 height - (area['y'] * height))
+                           .draw(canvas, x, height - (area['y'] * height))
             end
           else
             if field['type'] == 'date'