decidim-forms 0.21.0 → 0.22.0

data/app/models/decidim/forms/question_matrix_row.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Forms
+    # The data store for a QuestionMatrix in the Decidim::Forms component.
+    class QuestionMatrixRow < Forms::ApplicationRecord
+      belongs_to :question, class_name: "Question", foreign_key: "decidim_question_id"
+
+      delegate :answer_options, :mandatory, :max_choices, to: :question
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
 <% question = form.object %>
 
-<script type="text/template" class="decidim-template" id="<%= template_id %>">
+<script type="text/template" class="decidim-answer-option-template decidim-template" id="<%= template_id %>">
   <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", blank_answer_option do |answer_option_form| %>
     <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question: question, editable: editable %>
   <% end %>

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

@@ -21,12 +21,29 @@
 </div>
 
 <div class="questionnaire-questions">
+  <div class="row column text-center">
+    <button type="button" class="button collapse-all"><%= t(".collapse") %></button>
+    <button type="button" class="button expand-all"><%= t(".expand") %></button>
+  </div>
+
   <% if questionnaire.questions_editable? %>
     <%= fields_for "questionnaire[questions][#{blank_question.to_param}]", blank_question do |question_form| %>
-      <script type="text/template" class="decidim-template">
-        <%= render "decidim/forms/admin/questionnaires/question", form: question_form, id: tabs_id_for_question(blank_question), editable: questionnaire.questions_editable?, child_template_selector: "#answer-option-template-dummy" %>
+      <script type="text/template" class="decidim-question-template decidim-template" id="question-template">
+        <%= render "decidim/forms/admin/questionnaires/question",
+              form: question_form,
+              id: tabs_id_for_question(blank_question),
+              editable: questionnaire.questions_editable?,
+              answer_option_template_selector: "#answer-option-template-dummy",
+              matrix_row_template_selector: "#matrix-row-template-dummy" %>
+      </script>
+      <script type="text/template" class="decidim-separator-template decidim-template" id="separator-template">
+        <%= render "decidim/forms/admin/questionnaires/separator",
+              form: question_form,
+              id: tabs_id_for_question(blank_question),
+              editable: questionnaire.questions_editable? %>
       </script>
       <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-dummy" %>
+      <%= render "decidim/forms/admin/questionnaires/matrix_row_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "matrix-row-template-dummy" %>
     <% end %>
   <% else %>
     <div class="callout warning">
@@ -37,17 +54,33 @@
   <div class="questionnaire-questions-list">
     <% @form.questions.each_with_index do |question, index| %>
       <%= fields_for "questionnaire[questions][]", question do |question_form| %>
-        <%= render "decidim/forms/admin/questionnaires/question", form: question_form, id: tabs_id_for_question(question), editable: questionnaire.questions_editable?, child_template_selector: "#answer-option-template-#{index}" %>
-        <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-#{index}" %>
+        <% if question.separator? %>
+          <%= render "decidim/forms/admin/questionnaires/separator",
+                form: question_form,
+                id: tabs_id_for_question(question),
+                editable: questionnaire.questions_editable? %>
+        <% else %>
+          <%= render "decidim/forms/admin/questionnaires/question",
+                form: question_form,
+                id: tabs_id_for_question(question),
+                editable: questionnaire.questions_editable?,
+                answer_option_template_selector: "#answer-option-template-#{index}",
+                matrix_row_template_selector: "#matrix-row-template-#{index}" %>
+          <%= render "decidim/forms/admin/questionnaires/answer_option_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "answer-option-template-#{index}" %>
+          <%= render "decidim/forms/admin/questionnaires/matrix_row_template", form: question_form, editable: questionnaire.questions_editable?, template_id: "matrix-row-template-#{index}" %>
+        <% end %>
       <% end %>
     <% end %>
   </div>
 
   <% if questionnaire.questions_editable? %>
     <button class="button add-question"><%= t(".add_question") %></button>
+    <button class="button add-separator"><%= t(".add_separator") %></button>
   <% end %>
 </div>
 
 <% if questionnaire.questions_editable? %>
   <%= javascript_include_tag "decidim/forms/admin/forms" %>
 <% end %>
+
+<%= javascript_include_tag "decidim/forms/admin/collapsible_questions" %>

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

@@ -0,0 +1,34 @@
+<% matrix_row = form.object %>
+
+<div class="card questionnaire-question-matrix-row">
+  <div class="card-divider">
+    <h2 class="card-title">
+    <span><%= t(".matrix_row") %></span>
+    <% if editable %>
+      <button class="button small alert hollow remove-matrix-row button--title">
+        <%= t(".remove") %>
+      </button>
+    <% end %>
+    </h2>
+  </div>
+
+  <div class="card-section">
+    <div class="row column">
+      <%=
+        form.translated(
+          :text_field,
+          :body,
+          tabs_id: tabs_id_for_question_matrix_row(question, matrix_row),
+          label: t(".statement"),
+          disabled: !editable
+        )
+      %>
+    </div>
+  </div>
+
+  <% if matrix_row.persisted? %>
+    <%= form.hidden_field :id, disabled: !editable %>
+  <% end %>
+
+  <%= form.hidden_field :deleted, disabled: !editable %>
+</div>

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

@@ -0,0 +1,7 @@
+<% question = form.object %>
+
+<script type="text/template" class="decidim-matrix-row-template decidim-template" id="<%= template_id %>">
+  <%= fields_for "questionnaire[questions][#{question.to_param}][matrix_rows][]", blank_matrix_row do |matrix_row_form| %>
+    <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question: question, editable: editable %>
+  <% end %>
+</script>

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

@@ -5,12 +5,21 @@
     <h2 class="card-title">
     <span>
       <% if editable %>
-        <%== "#{icon("move")} #{t(".question")}" %>
-      <% else %>
-        <%= t(".question") %>
+        <%== icon("move") %>
       <% end %>
+      <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".question")) %>
     </span>
 
+    <button type="button" class="button small secondary button--title question--collapse" data-toggle="<%= id %>-question-card button--collapse-question-<%= id %> button--expand-question-<%= id %>">
+      <span id="button--collapse-question-<%= id %>" data-toggler=".hide" class="icon-collapse hide">
+        <%== icon("caret-top", aria_label: t(".collapse"), role: "img") %>
+      </span>
+
+      <span id="button--expand-question-<%= id %>" data-toggler=".hide" class="icon-expand">
+        <%== icon("caret-bottom", aria_label: t(".expand"), role: "img") %>
+      </span>
+    </button>
+
     <% if editable %>
       <button class="button small alert hollow move-up-question button--title">
         <%== "#{icon("arrow-top")} #{t(".up")}" %>
@@ -27,7 +36,7 @@
     </h2>
   </div>
 
-  <div class="card-section">
+  <div class="card-section collapsible hide" data-toggler=".hide" id="<%= id %>-question-card">
     <div class="row column">
       <%=
         form.translated(
@@ -81,7 +90,21 @@
     <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
     <%= form.hidden_field :deleted, disabled: !editable %>
 
-    <div class="questionnaire-question-answer-options" data-template="<%= child_template_selector %>">
+    <div class="questionnaire-question-matrix-rows" data-template="<%= matrix_row_template_selector %>">
+      <div class="questionnaire-question-matrix-rows-list">
+        <% question.matrix_rows.each do |matrix_row| %>
+          <%= fields_for "questionnaire[questions][#{question.to_param}][matrix_rows][]", matrix_row do |matrix_row_form| %>
+            <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question: question, editable: editable %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <% if editable %>
+        <button class="button add-matrix-row"><%= t(".add_matrix_row") %></button>
+      <% end %>
+    </div>
+
+    <div class="questionnaire-question-answer-options" data-template="<%= answer_option_template_selector %>">
       <div class="questionnaire-question-answer-options-list">
         <% question.answer_options.each do |answer_option| %>
           <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
@@ -100,7 +123,7 @@
         form.select(
           :max_choices,
           (2..question.number_of_options),
-          { prompt: t(".any") },
+          { include_blank: t(".any") },
           disabled: !editable
         )
       %>

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

@@ -0,0 +1,41 @@
+<% question = form.object %>
+
+<div class="card questionnaire-question" id="<%= id %>-field">
+  <div class="card-divider question-divider">
+    <h2 class="card-title">
+    <span>
+      <% if editable %>
+        <%== icon("move") %>
+      <% end %>
+      <%= dynamic_title(t(".separator"), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".separator")) %>
+    </span>
+
+    <% if editable %>
+      <button class="button small alert hollow move-up-question button--title">
+        <%== "#{icon("arrow-top")} #{t(".up")}" %>
+      </button>
+
+      <button class="button small alert hollow move-down-question button--title">
+        <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
+      </button>
+
+      <button class="button small alert hollow remove-question button--title">
+        <%= t(".remove") %>
+      </button>
+    <% end %>
+    </h2>
+
+    <%=
+      form.hidden_field(
+        :question_type,
+        value: :separator
+      )
+    %>
+    <% if question.persisted? %>
+      <%= form.hidden_field :id, disabled: !editable %>
+    <% end %>
+
+    <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
+    <%= form.hidden_field :deleted, disabled: !editable %>
+  </div>
+</div>

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

@@ -1,100 +1,29 @@
 <% field_id = "questionnaire_answers_#{answer_idx}" %>
-<%= label_tag field_id, answer.label(answer_idx), class: "questionnaire-question" %>
 
-<% if translated_attribute(answer.question.description).present? %>
-  <div class="help-text">
-    <%= decidim_sanitize translated_attribute(answer.question.description) %>
-  </div>
-<% end %>
-
-<% case answer.question.question_type %>
-<% when "short_answer" %>
-  <%= answer_form.text_field :body, label: false, id: field_id, disabled: disabled %>
-<% when "long_answer" %>
-  <%= answer_form.text_area :body, label: false, id: field_id, rows: 10, disabled: disabled %>
-<% when "single_option" %>
-  <div class="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">
-        <%= label_tag "#{choice_id}_body" do %>
-          <%= radio_button_tag "questionnaire[answers][#{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) %>
-
-          <%= hidden_field_tag "questionnaire[answers][#{answer_idx}][choices][][answer_option_id]",
-                              answer_option.id,
-                              id: "#{choice_id}_answer_option",
-                              disabled: true %>
-        <% end %>
-
-        <% if answer_option.free_text %>
-          <%= text_field_tag "questionnaire[answers][#{answer_idx}][choices][][custom_body]",
-          choice.try(:custom_body),
-          id: "#{choice_id}_custom_body",
-          disabled: true %>
-        <% end %>
-      </div>
-    <% end %>
-  </div>
-<% when "multiple_option" %>
-  <div class="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 } %>
+<% 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 } %>
+  <%= 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 %>
 
-      <div class="collection-input">
-        <%= label_tag do %>
-          <%= check_box_tag "questionnaire[answers][#{answer_idx}][choices][#{idx}][body]",
-                            translated_attribute(answer_option.body),
-                            choice.present?, disabled: disabled %>
+  <% if translated_attribute(answer.question.description).present? %>
+    <div class="help-text">
+      <%= decidim_sanitize translated_attribute(answer.question.description) %>
+    </div>
+  <% end %>
 
-          <%= translated_attribute(answer_option.body) %>
+  <%= 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 } %>
 
-          <%= hidden_field_tag "questionnaire[answers][#{answer_idx}][choices][#{idx}][answer_option_id]", answer_option.id %>
-        <% end %>
-
-        <% if answer_option.free_text %>
-          <%= text_field_tag "questionnaire[answers][#{answer_idx}][choices][#{idx}][custom_body]",
-          choice.try(:custom_body),
-          disabled: true %>
-        <% end %>
-      </div>
-    <% end %>
-  </div>
-<% when "sorting" %>
-  <div class="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[answers][#{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) %>
-
-          <%= hidden_field_tag "questionnaire[answers][#{answer_idx}][choices][#{idx}][position]",
-                              choice.try(:position),
-                              disabled: true %>
-
-          <%= hidden_field_tag "questionnaire[answers][#{answer_idx}][choices][#{idx}][answer_option_id]", answer_option.id %>
-        <% end %>
-      </div>
-    <% end %>
-  </div>
-<% end %>
+  <%= answer_form.hidden_field :question_id %>
 
-<%= answer_form.hidden_field :question_id %>
+  <small class="form-error max-choices-alert"><%= t(".max_choices_alert") %></small>
 
-<% answer.errors.full_messages.each do |msg| %>
-  <small class="form-error is-visible"><%= msg %></small>
+  <% answer.errors.full_messages.each do |msg| %>
+    <small class="form-error is-visible"><%= msg %></small>
+  <% end %>
 <% end %>

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

@@ -0,0 +1 @@
+<%= answer_form.text_area :body, label: false, id: field_id, rows: 10, disabled: disabled %>

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

@@ -0,0 +1,43 @@
+<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.each_with_index do |row, row_idx| %>
+      <tr class="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="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 %>
+              <% end %>
+            </div>
+          </td>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

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

@@ -0,0 +1,43 @@
+<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.each_with_index do |row, row_idx| %>
+      <tr class="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="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 %>
+              <% end %>
+            </div>
+          </td>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>