decidim-forms 0.30.9 → 0.31.0.rc1

data/app/packs/src/decidim/forms/display_conditions.component.js

@@ -5,7 +5,7 @@ class DisplayCondition {
     this.wrapperField = options.wrapperField;
     this.type = options.type;
     this.conditionQuestion = options.conditionQuestion;
-    this.answerOption = options.answerOption;
+    this.responseOption = options.responseOption;
     this.mandatory = options.mandatory;
     this.value = options.value;
     this.onFulfilled = options.onFulfilled;
@@ -34,7 +34,7 @@ class DisplayCondition {
       if (checked) {
         const text = $(el).find("input[name$=\\[custom_body\\]]").val();
         const value = $input.val();
-        const id = $(el).find("input[name$=\\[answer_option_id\\]]").val();
+        const id = $(el).find("input[name$=\\[response_option_id\\]]").val();
 
         multipleInput.push({ id, value, text });
       }
@@ -54,7 +54,7 @@ class DisplayCondition {
     return $conditionWrapperField.find(".js-collection-input").find("input:not([type='hidden'])");
   }
 
-  checkAnsweredCondition(value) {
+  checkRespondedCondition(value) {
     if (typeof (value) !== "object") {
       return Boolean(value);
     }
@@ -62,20 +62,20 @@ class DisplayCondition {
     return Boolean(value.some((it) => it.value));
   }
 
-  checkNotAnsweredCondition(value) {
-    return !this.checkAnsweredCondition(value);
+  checkNotRespondedCondition(value) {
+    return !this.checkRespondedCondition(value);
   }
 
   checkEqualCondition(value) {
     if (value.length) {
-      return value.some((it) => it.id === this.answerOption.toString());
+      return value.some((it) => it.id === this.responseOption.toString());
     }
     return false;
   }
 
   checkNotEqualCondition(value) {
     if (value.length) {
-      return value.every((it) => it.id !== this.answerOption.toString());
+      return value.every((it) => it.id !== this.responseOption.toString());
     }
     return false;
   }
@@ -99,11 +99,11 @@ class DisplayCondition {
     let fulfilled = false;
 
     switch (this.type) {
-    case "answered":
-      fulfilled = this.checkAnsweredCondition(value);
+    case "responded":
+      fulfilled = this.checkRespondedCondition(value);
       break;
-    case "not_answered":
-      fulfilled = this.checkNotAnsweredCondition(value);
+    case "not_responded":
+      fulfilled = this.checkNotRespondedCondition(value);
       break;
     case "equal":
       fulfilled = this.checkEqualCondition(value);
@@ -143,7 +143,7 @@ class DisplayConditionsComponent {
         wrapperField: this.wrapperField,
         type: $condition.data("type"),
         conditionQuestion: $condition.data("condition"),
-        answerOption: $condition.data("option"),
+        responseOption: $condition.data("option"),
         mandatory: $condition.data("mandatory"),
         value: $condition.data("value"),
         onFulfilled: (fulfilled) => {

data/app/packs/src/decidim/forms/forms.js

@@ -13,7 +13,7 @@ import createDisplayConditions from "src/decidim/forms/display_conditions.compon
 import createMaxChoicesAlertComponent from "src/decidim/forms/max_choices_alert.component"
 import { preventUnload } from "src/decidim/utilities/dom"
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   $(".js-radio-button-collection, .js-check-box-collection").each((idx, el) => {
     createOptionAttachedInputs({
       wrapperField: $(el),
@@ -22,7 +22,7 @@ $(() => {
     });
   });
 
-  $.unique($(".js-check-box-collection").parents(".answer")).each((idx, el) => {
+  $.unique($(".js-check-box-collection").parents(".response")).each((idx, el) => {
     const maxChoices = $(el).data("max-choices");
     if (maxChoices) {
       createMaxChoicesAlertComponent({
@@ -35,39 +35,18 @@ $(() => {
     }
   });
 
-  document.querySelectorAll(".js-sortable-check-box-collection").forEach((el) =>  {
+  document.querySelectorAll(".js-sortable-check-box-collection").forEach((el) => new DragonDrop(el, {
+    handle: false,
+    item: ".js-collection-input"
+  }));
 
-    /**
-    * Due to a bug reported in https://github.com/decidim/decidim/issues/15191
-    * we have to listen to the `drag` event and prevent the scrolling
-    * and enabling it back again after it.
-    */
-
-    let preventScroll = function(event) {
-      event.preventDefault();
-    }
-
-    el.addEventListener("touchmove", (event) => {
-      preventScroll(event);
-    }, { passive: false });
-
-    el.addEventListener("touchend", () => {
-      el.removeEventListener("touchmove", preventScroll)
-    });
-
-    return new DragonDrop(el, {
-      handle: false,
-      item: ".js-collection-input"
-    });
-  });
-
-  $(".answer-questionnaire .question[data-conditioned='true']").each((idx, el) => {
+  $(".response-questionnaire .question[data-conditioned='true']").each((idx, el) => {
     createDisplayConditions({
       wrapperField: $(el)
     });
   });
 
-  const form = document.querySelector("form.answer-questionnaire");
+  const form = document.querySelector("form.response-questionnaire");
   if (form) {
     const safePath = form.dataset.safePath.split("?")[0];
     let exitUrl = "";

data/app/packs/stylesheets/decidim/forms/forms.scss

@@ -1,4 +1,4 @@
-.answer-questionnaire {
+.response-questionnaire {
   @apply border-t-2 border-background pt-8;
 
   &__step {
@@ -22,7 +22,7 @@
   }
 
   &__question-label {
-    @apply text-black text-xl font-semibold;
+    @apply text-black text-xl font-semibold relative before:content-[attr(data-response-idx)] before:w-6 before:h-6 md:before:absolute md:before:-left-4 md:before:-translate-x-full before:inline-flex before:justify-center before:rounded-full before:bg-background before:text-lg before:text-gray-2 before:font-semibold;
   }
 
   &__question-description {

data/app/presenters/decidim/forms/admin/questionnaire_participant_presenter.rb

@@ -19,7 +19,7 @@ module Decidim
           participant.ip_hash || "-"
         end
 
-        def answered_at
+        def responded_at
           participant.created_at
         end
 
@@ -30,23 +30,23 @@ module Decidim
         end
 
         def status
-          I18n.t(registered? ? "registered" : "unregistered", scope: "decidim.forms.user_answers_serializer")
+          I18n.t(registered? ? "registered" : "unregistered", scope: "decidim.forms.user_responses_serializer")
         end
 
-        def answers
-          siblings.map { |answer| QuestionnaireAnswerPresenter.new(answer:) }
+        def responses
+          siblings.map { |response| QuestionnaireResponsePresenter.new(response:) }
         end
 
-        def first_short_answer
-          short = siblings.where(decidim_forms_questions: { question_type: %w(short_answer) })
+        def first_short_response
+          short = siblings.where(decidim_forms_questions: { question_type: %w(short_response) })
           short.first
         end
 
         def completion
-          with_body = siblings.where(decidim_forms_questions: { question_type: %w(short_answer long_answer) })
+          with_body = siblings.where(decidim_forms_questions: { question_type: %w(short_response long_response) })
                               .where.not(body: "").count
-          with_choices = siblings.where.not(decidim_forms_questions: { question_type: %w(short_answer long_answer) })
-                                 .where("decidim_forms_answers.id IN (SELECT decidim_answer_id FROM decidim_forms_answer_choices)").count
+          with_choices = siblings.where.not(decidim_forms_questions: { question_type: %w(short_response long_response) })
+                                 .where("decidim_forms_responses.id IN (SELECT decidim_response_id FROM decidim_forms_response_choices)").count
 
           (with_body + with_choices).to_f / questionnaire.questions.not_separator.not_title_and_description.count * 100
         end
@@ -54,10 +54,10 @@ module Decidim
         private
 
         def siblings
-          Answer.not_separator
-                .not_title_and_description
-                .where(questionnaire:, session_token: participant.session_token)
-                .joins(:question).order("decidim_forms_questions.position ASC")
+          Response.not_separator
+                  .not_title_and_description
+                  .where(questionnaire:, session_token: participant.session_token)
+                  .joins(:question).order("decidim_forms_questions.position ASC")
         end
       end
     end

data/app/presenters/decidim/forms/admin/questionnaire_response_presenter.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Forms
+    module Admin
+      #
+      # Presenter for questionnaire response
+      #
+      class QuestionnaireResponsePresenter < SimpleDelegator
+        delegate :content_tag, :safe_join, :link_to, :number_to_human_size, to: :view_context
+
+        include Decidim::TranslatableAttributes
+
+        def response
+          __getobj__.fetch(:response)
+        end
+
+        def view_context
+          __getobj__.fetch(:view_context, ActionController::Base.new.view_context)
+        end
+
+        def question
+          translated_attribute(response.question.body)
+        end
+
+        def body
+          return response.body if response.body.present?
+          return attachments if response.attachments.any?
+          return "-" if response.choices.empty?
+
+          choices = response.choices.map do |choice|
+            {
+              response_option_body: choice.try(:response_option).try(:translated_body),
+              choice_body: body_or_custom_body(choice)
+            }
+          end
+
+          return choice(choices.first) if response.question.question_type == "single_option"
+
+          content_tag(:ul) do
+            safe_join(choices.map { |c| choice(c) })
+          end
+        end
+
+        def attachments
+          content_tag(:ul) do
+            safe_join(response.attachments.map { |a| pretty_attachment(a) })
+          end
+        end
+
+        private
+
+        def pretty_attachment(attachment)
+          # rubocop:disable Style/StringConcatenation
+          # Interpolating strings that are `html_safe` is problematic with Rails.
+          content_tag :li do
+            link_to(attachment.url, target: "_blank", rel: "noopener noreferrer") do
+              content_tag(:span) do
+                translated_attribute(attachment.title).presence ||
+                  I18n.t("download_attachment", scope: "decidim.forms.questionnaire_response_presenter")
+              end + " " + content_tag(:small) do
+                "#{attachment.file_type} #{number_to_human_size(attachment.file_size)}"
+              end
+            end
+          end
+          # rubocop:enable Style/StringConcatenation
+        end
+
+        def choice(choice_hash)
+          content_tag :li do
+            render_body_for choice_hash
+          end
+        end
+
+        def render_body_for(choice_hash)
+          return choice_hash[:response_option_body] if choice_hash[:choice_body].blank?
+
+          "#{choice_hash[:response_option_body]} (#{choice_hash[:choice_body]})"
+        end
+
+        def body_or_custom_body(choice)
+          return choice.custom_body if choice.try(:custom_body).present?
+
+          ""
+        end
+      end
+    end
+  end
+end

data/app/presenters/decidim/forms/admin_log/question_presenter.rb

@@ -15,11 +15,11 @@ module Decidim
       class QuestionPresenter < Decidim::Log::BasePresenter
         private
 
-        # i18n-tasks-use t("decidim.forms.admin_log.question.publish_answers")
-        # i18n-tasks-use t("decidim.forms.admin_log.question.unpublish_answers")
+        # i18n-tasks-use t("decidim.forms.admin_log.question.publish_responses")
+        # i18n-tasks-use t("decidim.forms.admin_log.question.unpublish_responses")
         def action_string
           case action
-          when "publish_answers", "unpublish_answers"
+          when "publish_responses", "unpublish_responses"
             "decidim.forms.admin_log.question.#{action}"
           else
             super

data/app/presenters/decidim/forms/{answer_option_presenter.rb → response_option_presenter.rb}

@@ -3,9 +3,9 @@
 module Decidim
   module Forms
     #
-    # Decorator for answer_options
+    # Decorator for response_options
     #
-    class AnswerOptionPresenter < SimpleDelegator
+    class ResponseOptionPresenter < SimpleDelegator
       include Decidim::TranslationsHelper
 
       def translated_body

data/app/queries/decidim/forms/questionnaire_participant.rb

@@ -2,7 +2,7 @@
 
 module Decidim
   module Forms
-    # A class used to collect user answers for a questionnaire
+    # A class used to collect user responses for a questionnaire
     class QuestionnaireParticipant < Decidim::Query
       # Syntactic sugar to initialize the class and return the queried objects.
       #
@@ -23,12 +23,12 @@ module Decidim
 
       # Returns query with participant info
       def query
-        answers.select(:session_token, :decidim_user_id, :ip_hash).first
+        responses.select(:session_token, :decidim_user_id, :ip_hash).first
       end
 
-      # Finds the participant's answers.
-      def answers
-        Answer.where(questionnaire: @questionnaire, session_token: @token)
+      # Finds the participant's responses.
+      def responses
+        Response.where(questionnaire: @questionnaire, session_token: @token)
       end
     end
   end

data/app/queries/decidim/forms/questionnaire_participants.rb

@@ -2,7 +2,7 @@
 
 module Decidim
   module Forms
-    # A class used to collect user answers for a questionnaire
+    # A class used to collect user responses for a questionnaire
     class QuestionnaireParticipants < Decidim::Query
       # Syntactic sugar to initialize the class and return the queried objects.
       #
@@ -18,12 +18,12 @@ module Decidim
         @questionnaire = questionnaire
       end
 
-      # Finds all Answers for the questionnaire (unique session_tokens).
-      # Because exporters only have access to the Answers this
+      # Finds all Responses for the questionnaire (unique session_tokens).
+      # Because exporters only have access to the Responses this
       # is used as an indirect way to access the participants
       # (see #participants and #participant)
       def query
-        Answer.where(questionnaire: @questionnaire)
+        Response.where(questionnaire: @questionnaire)
       end
 
       def participant(session_token)
@@ -31,8 +31,8 @@ module Decidim
       end
 
       def participants
-        subquery = query.select("DISTINCT ON (decidim_forms_answers.session_token) decidim_forms_answers.*")
-        Answer.select("*").from(subquery).order(:created_at)
+        subquery = query.select("DISTINCT ON (decidim_forms_responses.session_token) decidim_forms_responses.*")
+        Response.select("*").from(subquery).order(:created_at)
       end
 
       def count_participants

data/app/queries/decidim/forms/questionnaire_user_responses.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Forms
+    # A class used to collect user responses for a questionnaire
+    class QuestionnaireUserResponses < Decidim::Query
+      # Syntactic sugar to initialize the class and return the queried objects.
+      #
+      # questionnaire - a Questionnaire object
+      def self.for(questionnaire)
+        new(questionnaire).query
+      end
+
+      # Initializes the class.
+      #
+      # questionnaire = a Questionnaire object
+      def initialize(questionnaire)
+        @questionnaire = questionnaire
+      end
+
+      # Finds and group responses by user for each questionnaire's question.
+      def query
+        responses = Response.not_separator
+                            .not_title_and_description
+                            .joins(:question)
+                            .where(questionnaire: @questionnaire)
+
+        responses.sort_by { |response| response.question.position.to_i }.group_by { |a| a.user || a.session_token }.values
+      end
+    end
+  end
+end

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

@@ -1,13 +1,13 @@
 <% display_condition = form.object %>
 
-<div class="card questionnaire-question-display-condition">
+<div class="card questionnaire-question-display-condition m-4">
   <div class="card-divider">
     <h2 class="card-title">
     <span><%= t(".display_condition") %></span>
     <% if editable %>
-      <button class="button button__sm button__transparent-secondary small alert remove-display-condition button--title">
+      <button class="button button__xs button__transparent-secondary small alert remove-display-condition button--title">
         <%= icon("delete-bin-line") %>
-        <%= t(".remove") %>
+        <span class="hidden md:block"><%= t(".remove") %></span>
       </button>
     <% end %>
     </h2>
@@ -27,7 +27,7 @@
           options_for_select(display_condition.questions_for_select(questionnaire, question.id), selected: display_condition.decidim_condition_question_id),
           { prompt: t(".select_condition_question"), label: t(".condition_question") },
           disabled: !editable,
-          data: { url: answer_options_url(id: question.id) }
+          data: { url: response_options_url(id: question.id) }
         )
       %>
     </div>
@@ -41,14 +41,14 @@
         )
       %>
     </div>
-    <div class="row column questionnaire-question-display-condition-answer-option">
+    <div class="row column questionnaire-question-display-condition-response-option">
       <%=
         form.select(
-          :decidim_answer_option_id,
-          options_from_collection_for_select(display_condition.answer_options, :id, :translated_body, selected: display_condition.decidim_answer_option_id),
-          { prompt: t(".select_answer_option"), label: t(".answer_option") },
+          :decidim_response_option_id,
+          options_from_collection_for_select(display_condition.response_options, :id, :translated_body, selected: display_condition.decidim_response_option_id),
+          { prompt: t(".select_response_option"), label: t(".response_option") },
           disabled: !editable,
-          data: { selected: display_condition.decidim_answer_option_id }
+          data: { selected: display_condition.decidim_response_option_id }
         )
       %>
     </div>

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

@@ -5,10 +5,10 @@
         <%= form.translated :text_field, :title, autofocus: true, aria: { label: :title } %>
       </div>
       <div class="row column">
-        <%= form.translated :editor, :description, toolbar: :full, lines: 30, label: t("models.components.description", scope: "decidim.forms.admin"), aria: { label: :description } %>
+        <%= form.translated :editor, :description, toolbar: :full, lines: 8, label: t("models.components.description", scope: "decidim.forms.admin"), aria: { label: :description } %>
       </div>
       <div class="row column">
-        <%= form.translated :editor, :tos, toolbar: :content, lines: 10, label: t("models.components.tos", scope: "decidim.forms.admin"), aria: { label: :tos } %>
+        <%= form.translated :editor, :tos, toolbar: :content, lines: 8, label: t("models.components.tos", scope: "decidim.forms.admin"), aria: { label: :tos } %>
       </div>
     </div>
   </div>

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

@@ -1,13 +1,13 @@
 <% matrix_row = form.object %>
 
-<div class="card questionnaire-question-matrix-row">
+<div class="card questionnaire-question-matrix-row mt-4">
   <div class="card-divider">
     <h2 class="card-title">
     <span><%= t(".matrix_row") %></span>
     <% if editable %>
-      <button class="button button__sm button__transparent-secondary small alert remove-matrix-row button--title mb-2">
+      <button class="button button__xs button__transparent-secondary small alert remove-matrix-row button--title mb-2">
         <%= icon("delete-bin-line") %>
-        <%= t(".remove") %>
+        <span class="hidden md:block"><%= t(".remove") %></span>
       </button>
     <% end %>
     </h2>

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

@@ -1,12 +1,12 @@
 <% question = form.object %>
 <% is_expanded = question.errors.any? %>
 <div class="card questionnaire-question" id="accordion-<%= id %>-field">
-  <div class="form__wrapper" data-component="accordion">
-    <%= content_tag :div, class: ["card-divider", ("hover:cursor-grab" if editable)] do %>
+  <div class="form__wrapper" data-controller="accordion">
+    <div class="card-divider">
       <h2 class="card-title flex items-center">
         <span>
           <% if editable %>
-            <%= icon("draggable", class: "dragger") %>
+            <%== icon("drag-move-2-fill") %>
           <% end %>
           <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".question")) %>
         </span>
@@ -23,16 +23,26 @@
           </button>
 
           <% if editable %>
-            <button type="button" class="button button__xs button__transparent-secondary small alert remove-question button--title">
+            <button class="button button__xs button__transparent-secondary small alert move-up-question button--title">
+              <%= icon("arrow-up-line") %>
+              <span class="hidden md:block"><%= t(".up") %></span>
+            </button>
+
+            <button class="button button__xs button__transparent-secondary small alert move-down-question button--title">
+              <%= icon("arrow-down-line") %>
+              <span class="hidden md:block"><%= t(".down") %></span>
+            </button>
+
+            <button class="button button__xs button__transparent-secondary small alert remove-question button--title">
               <%= icon("delete-bin-line") %>
-              <%= t(".remove") %>
+              <span class="hidden md:block"><%= t(".remove") %></span>
             </button>
           <% end %>
           </span>
       </h2>
-    <% end %>
+    </div>
 
-    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>">
+    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>" aria-hidden="<%= is_expanded ? "false" : "true" %>">
       <div class="row column">
         <%=
           form.translated(
@@ -108,23 +118,23 @@
           </div>
 
           <% if editable %>
-            <button class="button button__sm button__secondary add-matrix-row"><%= t(".add_matrix_row") %></button>
+            <button class="button button__xs button__transparent-secondary mt-4 add-matrix-row"><%= t(".add_matrix_row") %></button>
           <% end %>
         </div>
       </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 "questions[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
-              <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question:, editable: %>
+      <div class="questionnaire-question-response-options" data-template="<%= response_option_template_selector %>">
+        <div class="questionnaire-question-response-options-list">
+          <% question.response_options.each do |response_option| %>
+            <%= fields_for "questions[questions][#{question.to_param}][response_options][]", response_option do |response_option_form| %>
+              <%= render "decidim/forms/admin/questionnaires/response_option", form: response_option_form, question:, editable: %>
             <% end %>
           <% end %>
         </div>
 
         <% if editable %>
           <div class="row column">
-            <button type="button" class="button button__sm button__secondary mt-4 add-answer-option"><%= t(".add_answer_option") %></button>
+            <button type="button" class="button button__xs button__transparent-secondary mt-4 add-response-option"><%= t(".add_response_option") %></button>
           </div>
         <% end %>
       </div>
@@ -152,7 +162,7 @@
         <% if editable %>
           <% disabled = !question.persisted? %>
           <div class="row column">
-            <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button button__sm button__secondary mt-4 add-display-condition"><%= t(".add_display_condition") %></button>
+            <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button button__xs button__transparent-secondary mt-4 add-display-condition"><%= t(".add_display_condition") %></button>
           </div>
         <% end %>
       </div>