add order ui

app/controllers/api/templates_controller.rb

@@ -106,7 +106,7 @@ module Api
         :external_id,
         :shared_link,
         {
-          submitters: [%i[name uuid is_requester invite_by_uuid optional_invite_by_uuid linked_to_uuid email]],
+          submitters: [%i[name uuid is_requester invite_by_uuid optional_invite_by_uuid linked_to_uuid email order]],
           fields: [[:uuid, :submitter_uuid, :name, :type,
                     :required, :readonly, :default_value,
                     :title, :description, :prefillable,

app/controllers/templates_controller.rb

@@ -117,7 +117,7 @@ class TemplatesController < ApplicationController
     params.require(:template).permit(
       :name,
       { schema: [[:attachment_uuid, :name, { conditions: [%i[field_uuid value action operation]] }]],
-        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid optional_invite_by_uuid email]],
+        submitters: [%i[name uuid is_requester linked_to_uuid invite_by_uuid optional_invite_by_uuid email order]],
         fields: [[:uuid, :submitter_uuid, :name, :type,
                   :required, :readonly, :default_value,
                   :title, :description, :prefillable,

app/controllers/templates_recipients_controller.rb

@@ -9,6 +9,10 @@ class TemplatesRecipientsController < ApplicationController
     @template.submitters =
       submitters_params.map { |s| s.reject { |_, v| v.is_a?(String) && v.blank? } }
 
+    if @template.submitters.each_with_index.all? { |s, index| s['order'] == index }
+      @template.submitters.each { |s| s.delete('order') }
+    end
+
     @template.save!
 
     render json: { submitters: @template.submitters }
@@ -18,7 +22,7 @@ class TemplatesRecipientsController < ApplicationController
 
   def submitters_params
     permit_params = { submitters: [%i[name uuid is_requester optional_invite_by_uuid
-                                      invite_by_uuid linked_to_uuid email option]] }
+                                      invite_by_uuid linked_to_uuid email option order]] }
 
     params.require(:template).permit(permit_params).fetch(:submitters, {}).values.filter_map do |s|
       next if s[:uuid].blank?
@@ -29,6 +33,7 @@ class TemplatesRecipientsController < ApplicationController
         s.delete(:is_requester)
       end
 
+      s[:order] = s[:order].to_i if s[:order].present?
       s.delete(:invite_by_uuid) if s[:invite_by_uuid].blank?
       s.delete(:optional_invite_by_uuid) if s[:optional_invite_by_uuid].blank?
 

app/javascript/application.js

@@ -38,6 +38,7 @@ import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
+import MountOnClick from './elements/mount_on_click'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -111,6 +112,7 @@ safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
+safeRegisterElement('mount-on-click', MountOnClick)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/mount_on_click.js

@@ -0,0 +1,11 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('click', () => {
+      document.body.append(this.template.content)
+    })
+  }
+
+  get template () {
+    return document.getElementById(this.dataset.templateId)
+  }
+}

app/views/submissions/_submitters_order.html.erb

@@ -1,4 +1,4 @@
-<% if template.preferences['submitters_order'] == 'preserved' %>
+<% if template.preferences['submitters_order'] == 'preserved' || template.submitters.any? { |s| s['order'] } %>
   <%= f.hidden_field :preserve_order, value: '1' %>
 <% elsif template.submitters.size > 1 %>
   <div class="form-control">

app/views/templates_preferences/_recipients.html.erb

@@ -1,4 +1,5 @@
 <% close_on_submit = local_assigns.fetch(:close_on_submit, true) %>
+<% is_order_set = template.submitters.any? { |s| s['order'] } %>
 <%= form_for template, url: template_recipients_path(template), method: :post, html: { autocomplete: 'off', class: 'mt-1', id: :submitters_form }, data: { close_on_submit: } do |f| %>
   <% unless close_on_submit %>
     <toggle-on-submit data-element-id="form_saved_alert"></toggle-on-submit>
@@ -6,11 +7,24 @@
   <div class="space-y-3 divide-y">
     <% template.submitters.each_with_index do |submitter, index| %>
       <div class="<%= 'pt-3' if index.positive? %>">
-        <%= f.fields_for :submitters, item = Struct.new(:name, :uuid, :is_requester, :email, :invite_by_uuid, :optional_invite_by_uuid, :linked_to_uuid, :option).new(*submitter.values_at('name', 'uuid', 'is_requester', 'email', 'invite_by_uuid', 'optional_invite_by_uuid', 'linked_to_uuid')), index: do |ff| %>
+        <%= f.fields_for :submitters, item = Struct.new(:name, :uuid, :is_requester, :email, :invite_by_uuid, :optional_invite_by_uuid, :linked_to_uuid, :order, :option).new(*submitter.values_at('name', 'uuid', 'is_requester', 'email', 'invite_by_uuid', 'optional_invite_by_uuid', 'linked_to_uuid', 'order')), index: do |ff| %>
           <% item.option = item.is_requester.present? ? 'is_requester' : (item.email.present? ? 'email' : (item.linked_to_uuid.present? ? "linked_to_#{item.linked_to_uuid}" : (item.invite_by_uuid.present? ? "invite_by_#{item.invite_by_uuid}" : (item.optional_invite_by_uuid.present? ? "optional_invite_by_#{item.optional_invite_by_uuid}" : '')))) %>
           <%= ff.hidden_field :uuid %>
           <div class="form-control">
-            <%= ff.text_field :name, class: 'w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer mb-2', autocomplete: 'off', placeholder: "#{index + 1}#{(index + 1).ordinal} Party", required: true %>
+            <div class="flex justify-between">
+              <%= ff.text_field :name, class: 'w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer mb-2', autocomplete: 'off', placeholder: "#{index + 1}#{(index + 1).ordinal} Party", required: true %>
+              <% if template.submitters.size > 2 %>
+                <div id="order_<%= submitter['uuid'] %>" class="mr-0.5">
+                  <% if is_order_set %>
+                    <%= ff.select :order, options_for_select(template.submitters.map.with_index { |_, i| [(i + 1).ordinalize, i] }, submitter['order'].presence || index), {}, class: 'select select-xs text-sm input-bordered bg-white pl-3.5' %>
+                  <% elsif index == 0 %>
+                    <mount-on-click data-template-id="order_fields" class="link whitespace-nowrap text-sm mt-1 mr-1 block">
+                      <%= t('edit_order') %>
+                    </mount-on-click>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
             <% if template.submitters.size == 2 %>
               <%= tag.input name: ff.field_name(:email), value: ff.object.email, type: :email, class: 'base-input', multiple: true, autocomplete: 'off', placeholder: t('default_email'), disabled: ff.object.is_requester || ff.object.invite_by_uuid.present? || ff.object.optional_invite_by_uuid.present?, id: field_uuid = SecureRandom.uuid %>
             <% else %>
@@ -85,3 +99,16 @@
     </div>
   <% end %>
 </div>
+<% if template.submitters.size > 2 && !is_order_set %>
+  <template id="order_fields">
+    <% template.submitters.each_with_index do |submitter, index| %>
+      <turbo-stream action="replace" target="order_<%= submitter['uuid'] %>">
+        <template>
+          <div id="order_<%= submitter['uuid'] %>">
+            <%= select_tag "template[submitters][#{index}][order]", options_for_select(template.submitters.map.with_index { |_, i| [(i + 1).ordinalize, i] }, submitter['order'].presence || index), class: 'select select-xs text-sm input-bordered bg-white pl-3.5' %>
+          </div>
+        </template>
+      </turbo-stream>
+    <% end %>
+  </template>
+<% end %>

config/locales/i18n.yml

@@ -24,6 +24,7 @@ en: &en
   thanks: Thanks
   private: Private
   select: Select
+  edit_order: Edit Order
   invite_form_fields: Invite form fields
   default_parties: Default parties
   authenticate_embedded_form_preview_with_token: Authenticate embedded form preview with token
@@ -898,6 +899,7 @@ en: &en
       range_without_total: "%{from}-%{to} events"
 
 es: &es
+  edit_order: Edita Pedido
   select: Seleccionar
   invite_form_fields: Invitar campos del formulario
   pro: Pro
@@ -1776,6 +1778,7 @@ es: &es
       range_without_total: "%{from}-%{to} eventos"
 
 it: &it
+  edit_order: Modifica Ordine
   select: Seleziona
   invite_form_fields: Invita campi modulo
   pro: Pro
@@ -2654,6 +2657,7 @@ it: &it
       range_without_total: "%{from}-%{to} eventi"
 
 fr: &fr
+  edit_order: Modifier la commande
   select: Sélectionner
   invite_form_fields: Inviter des champs de formulaire
   pro: Pro
@@ -3535,6 +3539,7 @@ fr: &fr
       range_without_total: "%{from} à %{to} événements"
 
 pt: &pt
+  edit_order: Edita Pedido
   select: Selecionar
   invite_form_fields: Convidar campos do formulário
   pro: Pro
@@ -4414,6 +4419,7 @@ pt: &pt
       range_without_total: "%{from}-%{to} eventos"
 
 de: &de
+  edit_order: Bestellung bearbeiten
   select: Auswählen
   invite_form_fields: Formularfelder einladen
   pro: Pro