Improve user experience related to Consultations/Questions

CHANGELOG.md

@@ -24,6 +24,7 @@ end
 
 **Added**:
 
+- **decidim-consultations**, Add buttons fot better Questions navigation. [#5112](https://github.com/decidim/decidim/pull/5112)
 - **decidim-core**, Add rake task to recalculate all metrics since some specific date. [#5117](https://github.com/decidim/decidim/pull/5117)
 - **decidim-core**, Add instructions to recalculate participants metrics. [#5110](https://github.com/decidim/decidim/pull/5110)
 - **decidim-core**, **decidim-admin**, Add Selective Newsletter and allow Space admins to manage them. [#5039](https://github.com/decidim/decidim/pull/5039)

decidim-consultations/app/assets/stylesheets/decidim/consultations/_question.scss

@@ -36,11 +36,24 @@
 
 .question-vote-cabin{
   margin-bottom: 3em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .vote-button-caption{
     font-size: 1.5em;
     text-transform: uppercase;
     font-weight: bold;
     color: white;
   }
+
+  .small-buttons div{
+    margin-top: 1em;
+  }
+}
+
+.consultations-card{
+  .button.expanded.button--sc.success{
+    color: white;
+  }
 }

decidim-consultations/app/controllers/concerns/decidim/consultations/needs_question.rb

@@ -7,7 +7,7 @@ module Consultations
     module NeedsQuestion
       def self.enhance_controller(instance_or_module)
         instance_or_module.class_eval do
-          helper_method :current_question, :current_consultation, :current_participatory_space, :stats,
+          helper_method :current_question, :previous_question, :next_question, :current_consultation, :current_participatory_space, :stats,
                         :sorted_results
 
           helper Decidim::WidgetUrlsHelper
@@ -35,6 +35,26 @@ def current_question
           @current_question ||= detect_question
         end
 
+        # Public: Finds the previous Question in the Array of questions
+        # associated to the current_question's consultation.
+        #
+        # Returns the previous Question in the Array or nil if out of bounds.
+        def previous_question
+          return nil if (current_question_index - 1).negative?
+
+          current_consultation_questions.at(current_question_index - 1)
+        end
+
+        # Public: Finds the next Question in the Array of questions
+        # associated to the current_question's consultation.
+        #
+        # Returns the next Question in the Array or nil if out of bounds.
+        def next_question
+          return nil if current_question_index + 1 >= current_consultation_questions.size
+
+          current_consultation_questions.at(current_question_index + 1)
+        end
+
         # Public: Finds the current Consultation given this controller's
         # context.
         #
@@ -64,6 +84,14 @@ def organization_consultations
         def stats
           @stats ||= QuestionStatsPresenter.new(question: current_question)
         end
+
+        def current_consultation_questions
+          @current_consultation_questions ||= current_question.consultation.questions.to_a
+        end
+
+        def current_question_index
+          current_consultation_questions.find_index(current_question)
+        end
       end
     end
   end

decidim-consultations/app/controllers/decidim/consultations/question_votes_controller.rb

@@ -6,6 +6,8 @@ class QuestionVotesController < Decidim::Consultations::ApplicationController
       include NeedsQuestion
       include Decidim::FormFactory
 
+      helper QuestionsHelper
+
       before_action :authenticate_user!
 
       def create

decidim-consultations/app/helpers/decidim/consultations/consultations_helper.rb

@@ -12,6 +12,20 @@ def options_for_state_filter
           ["finished", t("consultations.filters.finished", scope: "decidim")]
         ]
       end
+
+      # Returns a link to the given question with different text/appearence
+      # depending on whether the user has voted it or not.
+      def display_take_part_button_for(question)
+        if current_user && question.voted_by?(current_user)
+          i18n_text = t("already_voted", scope: "decidim.questions.vote_button")
+          css = "button expanded button--sc success"
+        else
+          i18n_text = t("take_part", scope: "decidim.consultations.question")
+          css = "button expanded button--sc"
+        end
+
+        link_to(i18n_text, decidim_consultations.question_path(question), class: css)
+      end
     end
   end
 end

decidim-consultations/app/helpers/decidim/consultations/questions_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Consultations
+    # Helper for questions controller
+    module QuestionsHelper
+      # Returns a link to the next/previous question if found.
+      # Else, returns a disabled link to the current question.
+      def display_next_previous_button(direction, optional_classes = "")
+        css = "card__button button hollow " + optional_classes
+
+        case direction
+        when :previous
+          i18n_text = t("previous_button", scope: "decidim.questions")
+          question = previous_question || current_question
+          css << " disabled" if previous_question.nil?
+        when :next
+          i18n_text = t("next_button", scope: "decidim.questions")
+          question = next_question || current_question
+          css << " disabled" if next_question.nil?
+        end
+
+        link_to(i18n_text, decidim_consultations.question_path(question), class: css)
+      end
+    end
+  end
+end

decidim-consultations/app/views/decidim/consultations/consultations/_question.html.erb

@@ -28,9 +28,7 @@
                 <% end %>
               <% end %>
             <% else %>
-              <%= link_to t("consultations.question.take_part", scope: "decidim"),
-                          decidim_consultations.question_path(question),
-                          class: "button expanded button--sc" %>
+              <%= display_take_part_button_for(question) %>
             <% end %>
           </div>
         </div>

decidim-consultations/app/views/decidim/consultations/questions/_vote_button.html.erb

@@ -1,5 +1,8 @@
-<div class="row question-vote-cabin">
-  <div class="columns mediumlarge-4 mediumlarge-push-4">
+<div class="row column question-vote-cabin">
+  <div class="columns mediumlarge-4 show-for-mediumlarge previous-question">
+    <%= display_next_previous_button(:previous, "float-left") %>
+  </div>
+  <div class="columns mediumlarge-4">
     <% if question.consultation.upcoming? %>
       <div class="card__button button expanded disabled">
         <div class="vote-button-caption"><%= t("questions.vote_button.vote", scope: "decidim") %></div>
@@ -50,6 +53,17 @@
       <% end %>
     <% end %>
   </div>
+  <div class="columns mediumlarge-4 show-for-mediumlarge next-question">
+    <%= display_next_previous_button(:next, "float-right") %>
+  </div>
+  <div class="small-buttons">
+    <div class="columns small-6 hide-for-mediumlarge previous-question">
+      <%= display_next_previous_button(:previous, "expanded") %>
+    </div>
+    <div class="columns small-6 hide-for-mediumlarge next-question">
+      <%= display_next_previous_button(:next, "expanded") %>
+    </div>
+  </div>
 </div>
 
 <%= render partial: "decidim/consultations/questions/vote_modal", locals: { question: question } %>

decidim-consultations/config/locales/en.yml

@@ -258,6 +258,8 @@ en:
         statistics:
           consultations_count: Consultations
     questions:
+      next_button: Next question
+      previous_button: Previous question
       results:
         title: Results
       show:

decidim-consultations/spec/system/consultation_spec.rb

@@ -3,8 +3,9 @@
 require "spec_helper"
 
 describe "Consultation", type: :system do
-  let(:organization) { create(:organization) }
-  let(:consultation) { create(:consultation, :published, organization: organization) }
+  let!(:organization) { create(:organization) }
+  let!(:consultation) { create(:consultation, :published, organization: organization) }
+  let!(:user) { create :user, :confirmed, organization: organization }
 
   before do
     switch_to_host(organization.host)
@@ -74,4 +75,39 @@
       expect(page).to have_i18n_content(question.subtitle)
     end
   end
+
+  context "when showing the button that links to the question" do
+    let!(:question) { create(:question, :published, consultation: consultation, scope: consultation.highlighted_scope) }
+
+    context "when the user is not logged in" do
+      before do
+        switch_to_host(organization.host)
+        visit decidim_consultations.consultation_path(consultation)
+      end
+
+      it "shows the `take part` button" do
+        expect(page).to have_content("TAKE PART")
+      end
+    end
+
+    context "when the user is logged in" do
+      before do
+        switch_to_host(organization.host)
+        login_as user, scope: :user
+      end
+
+      it "shows the `take part` button if the user has not voted yet" do
+        visit decidim_consultations.consultation_path(consultation)
+
+        expect(page).to have_content("TAKE PART")
+      end
+
+      it "shows the `already voted` button if the user has already voted" do
+        question.votes.create(author: user, response: Decidim::Consultations::Response.new)
+        visit decidim_consultations.consultation_path(consultation)
+
+        expect(page).to have_content("ALREADY VOTED")
+      end
+    end
+  end
 end

decidim-consultations/spec/system/question_spec.rb

@@ -32,6 +32,24 @@
 
       expect(page).to have_i18n_content(question.what_is_decided)
     end
+
+    it "shows the previous/next question button" do
+      expect(page).to have_content("Previous question")
+      expect(page).to have_content("Next question")
+    end
+
+    context "when showing the previous/next question button" do
+      let(:previous_button) { page.find("a", text: "Previous question") }
+      let(:next_button) { page.find("a", text: "Next question") }
+
+      it "disables the previous button when viewing the first question" do
+        expect(previous_button[:class]).to include("disabled")
+      end
+
+      it "disables the next button when viewing the last question" do
+        expect(next_button[:class]).to include("disabled")
+      end
+    end
   end
 
   context "when finished consultations" do