decidim-forms 0.27.4 → 0.28.0.rc5

data/app/views/decidim/forms/admin/questionnaires/answers/show.html.erb

@@ -1,17 +1,12 @@
 <div class="card" id="answers">
-  <div class="card-divider">
-    <h2 class="card-title">
+  <div class="item_show__header">
+    <h2 class="item_show__header-title">
       <%= t ".title", number: current_idx %>
-      <div class="button--title">
-        <%= link_to_unless last?,  t("views.pagination.next").html_safe, next_url, rel: "next", class: "button tiny button--title next" %>
-      </div>
-      <div class="button--title">
-        <%= link_to_unless first?, t("views.pagination.previous").html_safe, prev_url, rel: "prev", class: "button tiny button--title prev" %>
-      </div>
-      <div class="button--title">
-        <%= link_to t("actions.export", scope: "decidim.forms.admin.questionnaires.answers"), questionnaire_export_response_url(@participant.session_token), class: "button tiny button--title export" %>
-        <%= link_to t("actions.back", scope: "decidim.forms.admin.questionnaires.answers"), questionnaire_participants_url, class: "button tiny button--title back" %>
-      </div>
+
+      <%= link_to t("actions.next", scope: "decidim.forms.admin.questionnaires.answers").html_safe, next_url, rel: "next", class: "button button__sm button__secondary next" unless last? %>
+      <%= link_to t("actions.previous", scope: "decidim.forms.admin.questionnaires.answers").html_safe, prev_url, rel: "prev", class: "button button__sm button__secondary prev" unless first? %>
+      <%= link_to t("actions.export", scope: "decidim.forms.admin.questionnaires.answers"), questionnaire_export_response_url(@participant.session_token), class: "button button__sm button__secondary export" %>
+      <%= link_to t("actions.back", scope: "decidim.forms.admin.questionnaires.answers"), questionnaire_participants_url, class: "button button__sm button__secondary back" %>
     </h2>
   </div>
   <div class="card-section">
@@ -20,10 +15,10 @@
         <thead>
           <tr>
             <th><%= t("session_token", scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("user_status",   scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("ip_hash",       scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("completion",    scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("created_at",    scope: "decidim.forms.user_answers_serializer") %></th>
+            <th><%= t("user_status", scope: "decidim.forms.user_answers_serializer") %></th>
+            <th><%= t("ip_hash", scope: "decidim.forms.user_answers_serializer") %></th>
+            <th><%= t("completion", scope: "decidim.forms.user_answers_serializer") %></th>
+            <th><%= t("created_at", scope: "decidim.forms.user_answers_serializer") %></th>
             <th></th>
           </tr>
         </thead>
@@ -38,9 +33,9 @@
         </tbody>
       </table>
     </div>
-    <dl>
+    <dl class="p-4 [&_ul]:list-disc [&_ul]:pl-4">
       <% @participant.answers.each do |answer| %>
-        <dt><%= answer.question %></dt>
+        <dt class="font-semibold"><%= answer.question %></dt>
         <dd><%= answer.body %></dd>
       <% end %>
     </dl>

data/app/views/decidim/forms/admin/questionnaires/edit.html.erb

@@ -3,11 +3,38 @@
 <% if templates_defined? && choose_template? %>
   <%= render partial: "decidim/templates/admin/questionnaire_templates/choose", locals: { target: questionnaire, form_title: t("decidim.forms.admin.questionnaires.edit.title") } %>
 <% else %>
-  <%= decidim_form_for(@form, url: update_url, method: :put, html: { class: "form edit_questionnaire" }) do |form| %>
-    <%= render partial: "decidim/forms/admin/questionnaires/form", object: form %>
 
-    <div class="button--double form-general-submit">
-      <%= form.submit t(".save"), class: "button" %>
-    </div>
-  <% end %>
+<div class="item_show__header">
+  <h2 class="item_show__header-title">
+    <%= edit_questionnaire_title %>
+
+    <% unless template? questionnaire.questionnaire_for %>
+      <% if allowed_to? :preview, :questionnaire %>
+        <%= link_to t("preview", scope: "decidim.forms.admin.questionnaires.form"), public_url, class: "button button__sm button__secondary", target: :_blank, data: { "external-link": false } %>
+      <% end %>
+      <% if questionnaire.answers.any? %>
+        <%= export_dropdown(current_component, questionnaire.id) if allowed_to? :export_answers, :questionnaire %>
+        <% if allowed_to? :show, :questionnaire_answers %>
+          <%= link_to t("actions.show", scope: "decidim.forms.admin.questionnaires"), questionnaire_participants_url, class: "button button__sm button__secondary new whitespace-nowrap" %>
+        <% end %>
+      <% else %>
+        <button class="button button__sm button__secondary whitespace-nowrap" disabled><%= t("empty", scope: "decidim.forms.admin.questionnaires.answers") %></button>
+      <% end %>
+    <% end %>
+  </h2>
+</div>
+
+<div class="item__edit item__edit-1col">
+  <div class="item__edit-form">
+    <%= decidim_form_for(@form, url: update_url, method: :put, html: { class: "form-defaults form edit_questionnaire" }) do |form| %>
+        <%= render partial: "decidim/forms/admin/questionnaires/form", object: form %>
+      <div class="item__edit-sticky">
+        <div class="item__edit-sticky-container">
+          <%= form.submit t(".save"), class: "button button__sm button__secondary" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
 <% end %>

data/app/views/decidim/forms/questionnaires/_answer.html.erb

@@ -1,40 +1,44 @@
 <% field_id = "questionnaire_responses_#{answer_idx}" %>
 
 <% if answer.question.separator? %>
-  <%= render partial: "decidim/forms/questionnaires/answers/#{answer.question.question_type}", locals: { answer: answer, answer_form: answer_form, answer_idx: answer_idx, field_id: field_id, disabled: disabled } %>
+
+  <%= render partial: "decidim/forms/questionnaires/answers/#{answer.question.question_type}", locals: { answer:, answer_form:, answer_idx:, field_id:, disabled: } %>
   <%= answer_form.hidden_field :question_id %>
+
 <% elsif answer.question.title_and_description? %>
-  <%= label_tag field_id, translated_attribute(answer.question.body), class: "questionnaire-title_and_description" %>
-  <% if translated_attribute(answer.question.description).present? %>
-    <div class="help-title_and_description ">
-      <%= decidim_sanitize_editor_admin translated_attribute(answer.question.description) %>
-    </div>
-  <% end %>
-  <%= render partial: "decidim/forms/questionnaires/answers/#{answer.question.question_type}", locals: { answer: answer, answer_form: answer_form, answer_idx: answer_idx, field_id: field_id, disabled: disabled } %>
+
+  <div class="answer-questionnaire__step-heading">
+    <h3 class="h3"><%= translated_attribute(answer.question.body) %></h3>
+    <% if translated_attribute(answer.question.description).present? %>
+      <div>
+        <%= decidim_sanitize_editor_admin translated_attribute(answer.question.description) %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= render partial: "decidim/forms/questionnaires/answers/#{answer.question.question_type}", locals: { answer:, answer_form:, answer_idx:, field_id:, disabled: } %>
   <%= answer_form.hidden_field :question_id %>
+
 <% else %>
-  <% case answer.question.question_type %>
-  <% when "single_option", "multiple_option", "sorting" %>
-    <label class="questionnaire-question"><%= answer.label(cleaned_answer_idx) %></label>
-  <% else %>
-    <%= label_tag field_id, answer.label(cleaned_answer_idx), class: "questionnaire-question" %>
-  <% end %>
 
-  <% if translated_attribute(answer.question.description).present? %>
-    <div class="help-text">
-      <%= decidim_sanitize_editor_admin translated_attribute(answer.question.description) %>
-    </div>
-  <% end %>
+  <div class="answer-questionnaire__question">
+    <%= label_tag field_id, answer.label, class: "answer-questionnaire__question-label questionnaire-question", data: { "answer-idx": cleaned_answer_idx } %>
+    <% if translated_attribute(answer.question.description).present? %>
+      <div class="answer-questionnaire__question-description">
+        <%= decidim_sanitize_editor_admin translated_attribute(answer.question.description) %>
+      </div>
+    <% end %>
 
-  <%= render partial: "decidim/forms/questionnaires/answers/#{answer.question.question_type}", locals: { answer: answer, answer_form: answer_form, answer_idx: answer_idx, field_id: field_id, disabled: disabled, maxlength: (answer.question.max_characters if answer.question.max_characters.positive?) } %>
+    <% if answer.question.max_choices %>
+      <small class="form-error max-choices-alert"><%= t(".max_choices_alert") %></small>
+    <% end %>
 
-  <%= answer_form.hidden_field :question_id %>
+    <% answer.errors.full_messages.each do |msg| %>
+      <small class="form-error is-visible"><%= msg %></small>
+    <% end %>
 
-  <% if answer.question.max_choices %>
-    <small class="form-error max-choices-alert"><%= t(".max_choices_alert") %></small>
-  <% end %>
+    <%= render partial: "decidim/forms/questionnaires/answers/#{answer.question.question_type}", locals: { answer:, answer_form:, answer_idx:, field_id:, disabled:, maxlength: (answer.question.max_characters if answer.question.max_characters.positive?) } %>
+    <%= answer_form.hidden_field :question_id %>
+  </div>
 
-  <% answer.errors.full_messages.each do |msg| %>
-    <small class="form-error is-visible"><%= msg %></small>
-  <% end %>
 <% end %>

data/app/views/decidim/forms/questionnaires/_questionnaire.html.erb

@@ -0,0 +1,78 @@
+<noscript>
+  <%= cell("decidim/announcement", { title: t("decidim.forms.questionnaires.show.questionnaire_js_disabled.title"), body: t("decidim.forms.questionnaires.show.questionnaire_js_disabled.body") }, callout_class: "warning") %>
+</noscript>
+
+<% unless current_participatory_space.can_participate?(current_user) %>
+  <%= cell("decidim/announcement", { title: t("decidim.forms.questionnaires.show.questionnaire_for_private_users.title"), body: t("decidim.forms.questionnaires.show.questionnaire_for_private_users.body") }, callout_class: "alert") %>
+<% end %>
+
+<%= decidim_form_for(@form, url: update_url, method: :post, html: { multipart: true, class: "form answer-questionnaire" }, data: { "safe-path" => form_path }) do |form| %>
+  <%= form_required_explanation %>
+
+  <%= invisible_captcha %>
+  <% answer_idx = 0 %>
+  <% cleaned_answer_idx = 1 %>
+  <% @form.responses_by_step.each_with_index do |step_answers, step_index| %>
+    <div id="step-<%= step_index %>" class="answer-questionnaire__step" <%= "hidden" if !step_index.zero? %>>
+
+      <% if @form.total_steps > 1 %>
+        <p class="answer-questionnaire__step-counter">
+          <%= t("decidim.forms.questionnaires.show.current_step", step: step_index + 1) %>&nbsp;<%= t("decidim.forms.questionnaires.show.of_total_steps", total_steps: @form.total_steps) %></span>
+        </p>
+      <% end %>
+
+      <% step_answers.each do |answer| %>
+        <div class="answer question" data-max-choices="<%= answer.question.max_choices %>" data-conditioned="<%= answer.question.display_conditions.any? %>" data-question-id="<%= answer.question.id %>">
+          <% answer.question.display_conditions.each do |display_condition| %>
+            <%= content_tag :div, nil, class: "display-condition", data: display_condition.to_html_data %>
+          <% end %>
+
+          <%= fields_for "questionnaire[responses][#{answer_idx}]", answer do |answer_form| %>
+            <%= render(
+              "decidim/forms/questionnaires/answer",
+              answer_form:,
+              answer:,
+              answer_idx:,
+              cleaned_answer_idx:,
+              disabled: !current_participatory_space.can_participate?(current_user)
+            ) %>
+          <% end %>
+        </div>
+
+        <% if !(answer.question.separator? || answer.question.title_and_description?) %>
+          <% cleaned_answer_idx += 1 %>
+        <% end %>
+
+        <% answer_idx += 1 %>
+
+      <% end %>
+
+      <div class="answer-questionnaire__footer">
+        <% if step_index + 1 == @form.total_steps %>
+          <% if show_represent_user_group? %>
+            <%= cell("decidim/represent_user_group", form) %>
+          <% end %>
+
+          <% if show_public_participation? %>
+            <%= cell("decidim/public_participation", form) %>
+          <% end %>
+
+          <div class="answer-questionnaire__tos">
+            <%= form.check_box :tos_agreement, label: t("decidim.forms.questionnaires.show.tos_agreement"), id: "questionnaire_tos_agreement", disabled: !current_participatory_space.can_participate?(current_user) %>
+            <div>
+              <%= decidim_sanitize_editor translated_attribute questionnaire.tos %>
+            </div>
+          </div>
+        <% end %>
+
+        <%= cell(
+          "decidim/forms/step_navigation",
+          step_index,
+          total_steps: @form.total_steps,
+          button_disabled: !current_participatory_space.can_participate?(current_user),
+          form:
+        ) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/decidim/forms/questionnaires/_questionnaire_readonly.html.erb

@@ -0,0 +1,11 @@
+<%= render partial: "decidim/devise/shared/login_boxes", locals: { scope: "decidim.forms.questionnaires.show.answer_questionnaire" } %>
+
+<div class="answer-questionnaire mt-12">
+  <ol class="answer-questionnaire__step">
+    <%= cell(
+      "decidim/forms/question_readonly",
+      collection: @questionnaire.questions.not_conditioned.not_separator,
+      indexed_items: @questionnaire.questions.not_conditioned.not_separator.not_title_and_description.pluck(:id)
+    ) %>
+  </ol>
+</div>

data/app/views/decidim/forms/questionnaires/answers/_files.html.erb

@@ -1 +1 @@
-<%= answer_form.file_field :add_documents, label: false, multiple: true, id: field_id, disabled: disabled %>
+<%= answer_form.upload :add_documents, label: false, multiple: true, id: field_id, disabled:, button_class: "button button__lg button__transparent-secondary w-full" %>

data/app/views/decidim/forms/questionnaires/answers/_long_answer.html.erb

@@ -1 +1,3 @@
-<%= answer_form.text_area :body, label: false, id: field_id, rows: 10, disabled: disabled, maxlength: maxlength %>
+<div>
+  <%= answer_form.text_area :body, label: false, id: field_id, rows: 10, disabled:, maxlength:, class: "w-full" %>
+</div>

data/app/views/decidim/forms/questionnaires/answers/_matrix_multiple.html.erb

@@ -1,44 +1,47 @@
-<table class="questionnaire-question-matrix table">
-  <thead>
-    <tr>
-      <td></td>
-      <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
-        <td><%= translated_attribute(answer_option.body) %></td>
-      <% end %>
-    </tr>
-  </thead>
-  <tbody>
-    <% answer.question.matrix_rows.by_position.each_with_index do |row, row_idx| %>
-      <tr class="check-box-collection">
-        <td><%= translated_attribute row.body %></td>
+<div class="answer-questionnaire__multiple-matrix">
+  <table>
+    <thead>
+      <tr>
+        <td></td>
         <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
-          <% choice = answer.selected_choices.find { |choice| choice.answer_option_id == answer_option.id && choice.matrix_row_id == row.id } %>
-          <% choice_id = "#{field_id}_matrix_row_#{row_idx}_choice_#{idx}" %>
-          <td>
-            <div class="collection-input">
-              <%= check_box_tag "questionnaire[responses][#{answer_idx}][choices][][body]",
-                                    translated_attribute(answer_option.body),
-                                    choice.present?,
-                                    id: "#{choice_id}_body", disabled: disabled %>
-              <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][][answer_option_id]",
-                                    answer_option.id,
-                                    id: "#{choice_id}_answer_option",
-                                    disabled: true %>
-              <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][][matrix_row_id]",
-                                    row.id,
-                                    id: "#{choice_id}_matrix_row",
-                                    disabled: true %>
-              <% if answer_option.free_text %>
-                <%= text_field_tag "questionnaire[responses][#{answer_idx}][choices][][custom_body]",
-                choice.try(:custom_body),
-                id: "#{choice_id}_custom_body",
-                disabled: true,
-                maxlength: maxlength %>
-              <% end %>
-            </div>
-          </td>
+          <th><%= translated_attribute(answer_option.body) %></th>
         <% end %>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <% answer.question.matrix_rows.by_position.each_with_index do |row, row_idx| %>
+        <tr class="js-check-box-collection">
+          <td><%= translated_attribute row.body %></td>
+          <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
+            <% choice = answer.selected_choices.find { |choice| choice.answer_option_id == answer_option.id && choice.matrix_row_id == row.id } %>
+            <% choice_id = "#{field_id}_matrix_row_#{row_idx}_choice_#{idx}" %>
+            <td>
+              <div class="js-collection-input">
+                <%= check_box_tag "questionnaire[responses][#{answer_idx}][choices][][body]",
+                                  translated_attribute(answer_option.body),
+                                  choice.present?,
+                                  "aria-label": translated_attribute(answer_option.body),
+                                  id: "#{choice_id}_body", disabled: %>
+                <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][][answer_option_id]",
+                                     answer_option.id,
+                                     id: "#{choice_id}_answer_option",
+                                     disabled: true %>
+                <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][][matrix_row_id]",
+                                     row.id,
+                                     id: "#{choice_id}_matrix_row",
+                                     disabled: true %>
+                <% if answer_option.free_text %>
+                  <%= text_field_tag "questionnaire[responses][#{answer_idx}][choices][][custom_body]",
+                                     choice.try(:custom_body),
+                                     id: "#{choice_id}_custom_body",
+                                     disabled: true,
+                                     maxlength: %>
+                <% end %>
+              </div>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/decidim/forms/questionnaires/answers/_matrix_single.html.erb

@@ -1,44 +1,47 @@
-<table class="questionnaire-question-matrix table">
-  <thead>
-    <tr>
-      <td></td>
-      <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
-        <td><%= translated_attribute(answer_option.body) %></td>
-      <% end %>
-    </tr>
-  </thead>
-  <tbody>
-    <% answer.question.matrix_rows.by_position.each_with_index do |row, row_idx| %>
-      <tr class="radio-button-collection">
-        <td><%= translated_attribute row.body %></td>
+<div class="answer-questionnaire__single-matrix">
+  <table>
+    <thead>
+      <tr>
+        <td></td>
         <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
-          <% choice = answer.choices.find { |choice| choice.answer_option_id == answer_option.id && choice.matrix_row_id == row.id } %>
-          <% choice_id = "#{field_id}_matrix_row_#{row_idx}_choice_#{idx}" %>
-          <td>
-            <div class="collection-input">
-              <%= radio_button_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][body]",
-                                    translated_attribute(answer_option.body),
-                                    answer_option.id == choice.try(:answer_option_id),
-                                    id: "#{choice_id}_body", disabled: disabled %>
-              <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][answer_option_id]",
-                                    answer_option.id,
-                                    id: "#{choice_id}_answer_option",
-                                    disabled: true %>
-              <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][matrix_row_id]",
-                                    row.id,
-                                    id: "#{choice_id}_matrix_row",
-                                    disabled: true %>
-              <% if answer_option.free_text %>
-                <%= text_field_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][custom_body]",
-                choice.try(:custom_body),
-                id: "#{choice_id}_custom_body",
-                disabled: true,
-                maxlength: maxlength %>
-              <% end %>
-            </div>
-          </td>
+          <th><%= translated_attribute(answer_option.body) %></th>
         <% end %>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <% answer.question.matrix_rows.by_position.each_with_index do |row, row_idx| %>
+        <tr class="js-radio-button-collection">
+          <td><%= translated_attribute row.body %></td>
+          <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
+            <% choice = answer.choices.find { |choice| choice.answer_option_id == answer_option.id && choice.matrix_row_id == row.id } %>
+            <% choice_id = "#{field_id}_matrix_row_#{row_idx}_choice_#{idx}" %>
+            <td>
+              <div class="js-collection-input">
+                <%= radio_button_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][body]",
+                                     translated_attribute(answer_option.body),
+                                     answer_option.id == choice.try(:answer_option_id),
+                                     "aria-label": translated_attribute(answer_option.body),
+                                     id: "#{choice_id}_body", disabled: %>
+                <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][answer_option_id]",
+                                     answer_option.id,
+                                     id: "#{choice_id}_answer_option",
+                                     disabled: true %>
+                <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][matrix_row_id]",
+                                     row.id,
+                                     id: "#{choice_id}_matrix_row",
+                                     disabled: true %>
+                <% if answer_option.free_text %>
+                  <%= text_field_tag "questionnaire[responses][#{answer_idx}][choices][#{row_idx}][custom_body]",
+                                     choice.try(:custom_body),
+                                     id: "#{choice_id}_custom_body",
+                                     disabled: true,
+                                     maxlength: %>
+                <% end %>
+              </div>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/decidim/forms/questionnaires/answers/_multiple_option.html.erb

@@ -1,12 +1,12 @@
-<div class="check-box-collection">
+<div class="answer-questionnaire__single-option js-check-box-collection">
   <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
     <% choice = answer.selected_choices.find { |choice| choice.answer_option_id == answer_option.id } %>
 
-    <div class="collection-input">
+    <div class="js-collection-input">
       <%= label_tag do %>
         <%= check_box_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][body]",
                           translated_attribute(answer_option.body),
-                          choice.present?, disabled: disabled %>
+                          choice.present?, disabled: %>
 
         <%= translated_attribute(answer_option.body) %>
 
@@ -15,9 +15,10 @@
 
       <% if answer_option.free_text %>
         <%= text_field_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][custom_body]",
-        choice.try(:custom_body),
-        disabled: true,
-        maxlength: maxlength %>
+                           choice.try(:custom_body),
+                           disabled: true,
+                           maxlength:,
+                           class: "w-full" %>
       <% end %>
     </div>
   <% end %>

data/app/views/decidim/forms/questionnaires/answers/_separator.html.erb

@@ -1 +1 @@
-<%= answer_form.hidden_field :body, value: "separator", id: field_id, disabled: disabled %>
+<%= answer_form.hidden_field :body, value: "separator", id: field_id, disabled: %>

data/app/views/decidim/forms/questionnaires/answers/_short_answer.html.erb

@@ -1 +1,3 @@
-<%= answer_form.text_field :body, label: false, id: field_id, disabled: disabled, maxlength: maxlength %>
+<div>
+  <%= answer_form.text_field :body, label: false, id: field_id, disabled:, maxlength:, class: "w-full" %>
+</div>

data/app/views/decidim/forms/questionnaires/answers/_single_option.html.erb

@@ -1,30 +1,31 @@
-<div class="radio-button-collection">
+<div class="answer-questionnaire__single-option js-radio-button-collection">
   <% choice = answer.choices.first %>
 
   <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
     <% choice_id = "#{field_id}_choices_#{idx}" %>
 
-    <div class="collection-input">
+    <div class="js-collection-input">
       <%= label_tag "#{choice_id}_body" do %>
         <%= radio_button_tag "questionnaire[responses][#{answer_idx}][choices][][body]",
-                            translated_attribute(answer_option.body),
-                            answer_option.id == choice.try(:answer_option_id),
-                            id: "#{choice_id}_body", disabled: disabled %>
+                             translated_attribute(answer_option.body),
+                             answer_option.id == choice.try(:answer_option_id),
+                             id: "#{choice_id}_body", disabled: %>
 
         <%= translated_attribute(answer_option.body) %>
 
         <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][][answer_option_id]",
-                            answer_option.id,
-                            id: "#{choice_id}_answer_option",
-                            disabled: true %>
+                             answer_option.id,
+                             id: "#{choice_id}_answer_option",
+                             disabled: true %>
       <% end %>
 
       <% if answer_option.free_text %>
         <%= text_field_tag "questionnaire[responses][#{answer_idx}][choices][][custom_body]",
-        choice.try(:custom_body),
-        id: "#{choice_id}_custom_body",
-        disabled: true,
-        maxlength: maxlength %>
+                           choice.try(:custom_body),
+                           id: "#{choice_id}_custom_body",
+                           disabled: true,
+                           maxlength:,
+                           class: "w-full" %>
       <% end %>
     </div>
   <% end %>

data/app/views/decidim/forms/questionnaires/answers/_sorting.html.erb

@@ -1,23 +1,20 @@
-<div class="sortable-check-box-collection">
+<div class="answer-questionnaire__sorting-container js-sortable-check-box-collection">
   <% answer.question.answer_options.each_with_index do |answer_option, idx| %>
     <% choice = answer.selected_choices.find { |choice| choice.answer_option_id == answer_option.id } %>
 
-    <div class="collection-input">
-      <%= label_tag do %>
-        <%= check_box_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][body]",
+    <div class="answer-questionnaire__sorting js-collection-input" role="button">
+
+      <%#= check_box_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][body]",
                           translated_attribute(answer_option.body),
                           choice.present?, disabled: disabled %>
 
-        <span class="position"><%= choice.try(:position) %></span>
-
-        <%= translated_attribute(answer_option.body) %>
+      <%= translated_attribute(answer_option.body) %>
 
-        <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][position]",
-                            choice.try(:position),
-                            disabled: true %>
+      <%= icon "drag-move-2-line" %>
 
-        <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][answer_option_id]", answer_option.id %>
-      <% end %>
+      <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][position]", choice.try(:position) %>
+      <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][body]", translated_attribute(answer_option.body) %>
+      <%= hidden_field_tag "questionnaire[responses][#{answer_idx}][choices][#{idx}][answer_option_id]", answer_option.id %>
     </div>
   <% end %>
 </div>

data/app/views/decidim/forms/questionnaires/answers/_title_and_description.html.erb

@@ -1 +1 @@
-<%= answer_form.hidden_field :body, value: "title-and-description", id: field_id, disabled: disabled %>
+<%= answer_form.hidden_field :body, value: "title-and-description", id: field_id, disabled: %>