From 5663b59e6999114519e5f4059e7307d2fc7211ff Mon Sep 17 00:00:00 2001 From: Laura Jaime Date: Wed, 20 Nov 2024 12:49:17 +0100 Subject: [PATCH] Rework sdgs filters --- .../challenges/challenges_controller.rb | 7 +- .../decidim/problems/problems_controller.rb | 5 +- .../decidim/solutions/solutions_controller.rb | 4 - .../decidim/challenges/challenges_helper.rb | 1 - .../decidim/problems/problems_helper.rb | 1 - .../decidim/solutions/solutions_helper.rb | 1 - app/packs/entrypoints/decidim_sdgs.scss | 2 + app/packs/src/decidim/sdgs/filter.js | 12 +- app/packs/stylesheets/decidim/sdgs/ods.scss | 355 +++++++++--------- .../decidim/sdgs/sdgs_filter/modal.scss | 75 +++- .../challenges/challenges/index.html.erb | 8 + .../decidim/problems/problems/index.html.erb | 8 + .../decidim/sdgs/sdgs_filter/_modal.html.erb | 35 ++ .../decidim/sdgs/sdgs_filter/_model.html.erb | 31 -- .../solutions/solutions/index.html.erb | 8 + .../challenges/filter_challenges_spec.rb | 80 ++-- .../solutions/filter_solutions_spec.rb | 100 ++--- 17 files changed, 398 insertions(+), 335 deletions(-) create mode 100644 app/views/decidim/sdgs/sdgs_filter/_modal.html.erb delete mode 100644 app/views/decidim/sdgs/sdgs_filter/_model.html.erb diff --git a/app/controllers/decidim/challenges/challenges_controller.rb b/app/controllers/decidim/challenges/challenges_controller.rb index 1c8f2dd1..290d33d3 100644 --- a/app/controllers/decidim/challenges/challenges_controller.rb +++ b/app/controllers/decidim/challenges/challenges_controller.rb @@ -38,10 +38,6 @@ def challenge_scope @challenge_scope ||= current_organization.scopes.find_by(id: @challenge.decidim_scope_id) end - def default_filter_params - has_sdgs? ? default_filters.merge({ with_any_sdgs_codes: [] }) : default_filters - end - def challenges @challenges ||= reorder(paginate(search.result)) end @@ -50,11 +46,12 @@ def search_collection ::Decidim::Challenges::Challenge.where(component: current_component).published end - def default_filters + def default_filter_params { search_text_cont: "", with_any_state: %w(proposal execution finished), with_any_scope: default_filter_scope_params, + with_any_sdgs_codes: [], related_to: "", } end diff --git a/app/controllers/decidim/problems/problems_controller.rb b/app/controllers/decidim/problems/problems_controller.rb index eb147980..b87505b4 100644 --- a/app/controllers/decidim/problems/problems_controller.rb +++ b/app/controllers/decidim/problems/problems_controller.rb @@ -38,16 +38,13 @@ def challenge_scope end def default_filter_params - has_sdgs? ? default_filters.merge({ with_any_sdgs_codes: [] }) : default_filters - end - - def default_filters { search_text_cont: "", with_any_state: %w(proposal execution finished), with_any_sectorial_scope: default_filter_scope_params, with_any_technological_scope: default_filter_scope_params, with_any_territorial_scope: default_filter_scope_params, + with_any_sdgs_codes: [], related_to: "", } end diff --git a/app/controllers/decidim/solutions/solutions_controller.rb b/app/controllers/decidim/solutions/solutions_controller.rb index 7ff0f3bb..97cf2347 100644 --- a/app/controllers/decidim/solutions/solutions_controller.rb +++ b/app/controllers/decidim/solutions/solutions_controller.rb @@ -62,10 +62,6 @@ def create private def default_filter_params - has_sdgs? ? default_filters.merge({ with_any_sdgs_codes: [] }) : default_filters - end - - def default_filters { search_text_cont: "", with_any_territorial_scope: default_filter_scope_params, diff --git a/app/helpers/decidim/challenges/challenges_helper.rb b/app/helpers/decidim/challenges/challenges_helper.rb index 25adf339..8d65fd16 100644 --- a/app/helpers/decidim/challenges/challenges_helper.rb +++ b/app/helpers/decidim/challenges/challenges_helper.rb @@ -14,7 +14,6 @@ def filter_sections items.append(method: :with_any_scope, collection: filter_global_scopes_values, label_scope: "decidim.shared.filters", id: "scope") end - items.append(method: :with_any_sdgs_codes, collection: filter_sdgs_values, label_scope: "decidim.shared.filters", id: "sdgs") if has_sdgs? items.reject { |item| item[:collection].blank? } end diff --git a/app/helpers/decidim/problems/problems_helper.rb b/app/helpers/decidim/problems/problems_helper.rb index 1e7177e5..b519015d 100644 --- a/app/helpers/decidim/problems/problems_helper.rb +++ b/app/helpers/decidim/problems/problems_helper.rb @@ -16,7 +16,6 @@ def filter_sections items.append(method: :with_any_technological_scope, collection: filter_global_scopes_values, label_scope: "decidim.problems.problems.filters", id: "technological_scope") items.append(method: :with_any_territorial_scope, collection: filter_global_scopes_values, label_scope: "decidim.problems.problems.filters", id: "territorial_scope") end - items.append(method: :with_any_sdgs_codes, collection: filter_sdgs_values, label_scope: "decidim.shared.filters", id: "sdgs") if has_sdgs? items.reject { |item| item[:collection].blank? } end diff --git a/app/helpers/decidim/solutions/solutions_helper.rb b/app/helpers/decidim/solutions/solutions_helper.rb index d6259666..28654082 100644 --- a/app/helpers/decidim/solutions/solutions_helper.rb +++ b/app/helpers/decidim/solutions/solutions_helper.rb @@ -13,7 +13,6 @@ def filter_sections end items.append(method: :related_to, collection: linked_classes_filter_values_for(Decidim::Challenges::Challenge), label_scope: "decidim.solutions.solutions.filters", id: "related_to", type: :radio_buttons) - items.append(method: :with_any_sdgs_codes, collection: filter_sdgs_values, label_scope: "decidim.shared.filters", id: "sdgs") if has_sdgs? items.reject { |item| item[:collection].blank? } end diff --git a/app/packs/entrypoints/decidim_sdgs.scss b/app/packs/entrypoints/decidim_sdgs.scss index 10787c8f..11ad96a1 100644 --- a/app/packs/entrypoints/decidim_sdgs.scss +++ b/app/packs/entrypoints/decidim_sdgs.scss @@ -1 +1,3 @@ +@import "stylesheets/decidim/sdgs/sdgs_filter/button.scss"; +@import "stylesheets/decidim/sdgs/sdgs_filter/modal.scss"; @import "stylesheets/decidim/sdgs/ods.scss"; diff --git a/app/packs/src/decidim/sdgs/filter.js b/app/packs/src/decidim/sdgs/filter.js index 803d3cc2..e0b3a25f 100644 --- a/app/packs/src/decidim/sdgs/filter.js +++ b/app/packs/src/decidim/sdgs/filter.js @@ -9,7 +9,15 @@ function toggleSdgFilterCellSelect(cell, selected) { } } -$( document ).ready(function() { +$(document).ready(function() { + window.onclick = function(event) { + let modal = document.querySelector("#sdgs-modal"); + + if (event.target == modal) { + modal.style.display = "none"; + } + } + /** * Setup Sdgs selector */ @@ -62,4 +70,6 @@ $( document ).ready(function() { sdgs_opener.parent("form").submit() sdgs_opener= null }); + + }) diff --git a/app/packs/stylesheets/decidim/sdgs/ods.scss b/app/packs/stylesheets/decidim/sdgs/ods.scss index 4b6dbeb1..b38ca9fa 100644 --- a/app/packs/stylesheets/decidim/sdgs/ods.scss +++ b/app/packs/stylesheets/decidim/sdgs/ods.scss @@ -6,181 +6,180 @@ src: url('../fonts/Oswald-Medium.ttf') } -// .sdgs-title { -// display: flex; -// justify-content: space-between; - -// .text { -// width: 64%; -// } -// } - -// #ods-logo-container { -// width: 250px; -// height: 250px; -// padding-top: 25px; -// background-color: #dedede; -// margin: auto; - -// img { -// display: block; -// margin: auto auto 10px; -// width: 155px; -// } - -// #title { -// text-align: center; -// font-weight: bold; -// font-size: 15pt; -// line-height: 15px; -// margin: 0; -// } - -// #subtitle { -// text-align: center; -// font-size: 9.5pt; -// } - -// } - -// #ods-container { -// display: grid; -// grid-template-columns: repeat(6, 1fr); -// gap: 16px; -// } - -// .ods { -// width: 100%; -// position: relative; -// margin-bottom: 25px; -// cursor: pointer; - -// &:hover { -// -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.75); -// -moz-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.75); -// box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.75); -// transition: all 0.5s ease; -// } - -// &.final { -// padding: 10px; -// height: 175px; -// border: 1px solid #c6c6c6; -// } - -// .text-container { -// position: absolute; -// top: 4.2px; -// left: 76px; -// width: 120px; - -// &.stretch { -// left: 55px; -// width: 105px; -// } -// } - -// p { -// margin: 0; -// font-family: Oswald-Medium, 'Open Sans Semibold', sans-serif; -// color: white; -// font-size: 9pt; -// text-size-adjust: 100%; -// } - -// object { -// width: 100%; -// } -// } - -// #objective-container { -// .hide { -// display: none; -// } -// } - -// .card__highlight { -// .text-container { -// position: absolute; -// top: 0; -// left: 23px; -// width: 120px; -// } -// } - -// .objectives_container { -// background-color: #c22244; -// padding-left: 30px; -// padding-top: 15px; -// padding-bottom: 15px; -// font-size: larger; - -// p { -// color: white; -// margin-bottom: 0; -// } - -// .objectives_subtitle{ -// font-weight: bold; -// } - -// } - -// .objectives_text{ -// padding-left: 30px; -// padding-right: 30px; - -// p { -// margin-top: 10px; -// margin-bottom: 0 -// } - -// } - -// @media (max-width: 1215px) { -// .ods p { -// font-size: 8pt; -// } -// } - -// @media (max-width: 1115px) { -// .ods p { -// font-size: 7pt; -// } -// } - -// @media (max-width: 1023px) { -// .ods p { -// font-size: 9pt; -// } -// } - -// @media (max-width: 740px) { -// .ods p { -// font-size: 8pt; -// } -// } - -// @media (max-width: 690px) { -// .ods p { -// font-size: 7pt; -// } -// } - -// @media (max-width: 639px) { -// .ods p { -// font-size: 9pt; -// } -// } - -// @media (max-width: 520px) { -// .ods p { -// font-size: 8pt; -// } -// } - -// @media (max-width: 490px) { -// .ods p { -// font-size: 7pt; -// } -// } +.sdgs-title { + display: flex; + justify-content: space-between; + + .text { + width: 64%; + } +} + +#ods-logo-container { + width: 250px; + height: 250px; + padding-top: 25px; + background-color: #dedede; + margin: auto; + + img { + display: block; + margin: auto auto 10px; + width: 155px; + } + + #title { + text-align: center; + font-weight: bold; + font-size: 15pt; + line-height: 15px; + margin: 0; + } + + #subtitle { + text-align: center; + font-size: 9.5pt; + } +} + +#ods-container { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 16px; +} + +.ods { + width: 100%; + position: relative; + margin-bottom: 25px; + cursor: pointer; + + &:hover { + -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.75); + box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.75); + transition: all 0.5s ease; + } + + &.final { + padding: 10px; + height: 175px; + border: 1px solid #c6c6c6; + } + + .text-container { + position: absolute; + top: 4.2px; + left: 76px; + width: 120px; + + &.stretch { + left: 55px; + width: 105px; + } + } + + p { + margin: 0; + font-family: Oswald-Medium, 'Open Sans Semibold', sans-serif; + color: white; + font-size: 9pt; + text-size-adjust: 100%; + } + + object { + width: 100%; + } +} + +#objective-container { + .hide { + display: none; + } +} + +.card__highlight { + .text-container { + position: absolute; + top: 0; + left: 23px; + width: 120px; + } +} + +.objectives_container { + background-color: #c22244; + padding-left: 30px; + padding-top: 15px; + padding-bottom: 15px; + font-size: larger; + + p { + color: white; + margin-bottom: 0; + } + + .objectives_subtitle{ + font-weight: bold; + } + +} + +.objectives_text{ + padding-left: 30px; + padding-right: 30px; + + p { + margin-top: 10px; + margin-bottom: 0 + } + +} + +@media (max-width: 1215px) { + .ods p { + font-size: 8pt; + } +} + +@media (max-width: 1115px) { + .ods p { + font-size: 7pt; + } +} + +@media (max-width: 1023px) { + .ods p { + font-size: 9pt; + } +} + +@media (max-width: 740px) { + .ods p { + font-size: 8pt; + } +} + +@media (max-width: 690px) { + .ods p { + font-size: 7pt; + } +} + +@media (max-width: 639px) { + .ods p { + font-size: 9pt; + } +} + +@media (max-width: 520px) { + .ods p { + font-size: 8pt; + } +} + +@media (max-width: 490px) { + .ods p { + font-size: 7pt; + } +} diff --git a/app/packs/stylesheets/decidim/sdgs/sdgs_filter/modal.scss b/app/packs/stylesheets/decidim/sdgs/sdgs_filter/modal.scss index c1a1889e..29eae87f 100644 --- a/app/packs/stylesheets/decidim/sdgs/sdgs_filter/modal.scss +++ b/app/packs/stylesheets/decidim/sdgs/sdgs_filter/modal.scss @@ -1,23 +1,60 @@ -#sdg-container { - .sdg-cell{ - cursor: pointer; - text-align: center; - border: 3px solid white; +#sdgs-modal { + display: none; + position: fixed; + z-index: 99; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); - img { - width: 100%; - } - div.text{ - height: 3em; - background-color: lightgrey; + .reveal__header { + background-color: #fefefe; + display: flex; + justify-content: space-between; + padding-bottom: 8px; + + .close-button { + font-size: 24px; + line-height: 30px; } - p{ - height: 3em; - //line-height: 3em; - padding-top: 0.5em; - display: inline-block; - vertical-align: middle; - font-size: 0.8em; + } + + .modal-content { + background-color: #fefefe; + margin: 2% auto; + padding: 20px; + width: 43%; + } + + #sdg-container { + background-color: #fefefe; + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 16px; + + .sdg-cell { + cursor: pointer; + text-align: center; + border: 3px solid white; + + img { + width: 100%; + } + + div.text{ + width: 100%; + height: 5em; + background-color: lightgrey; + font-size: 12px; + } } } -} \ No newline at end of file + + .buttons { + display: flex; + justify-content: center; + } +} diff --git a/app/views/decidim/challenges/challenges/index.html.erb b/app/views/decidim/challenges/challenges/index.html.erb index c3d89df7..3f6b5864 100644 --- a/app/views/decidim/challenges/challenges/index.html.erb +++ b/app/views/decidim/challenges/challenges/index.html.erb @@ -9,6 +9,12 @@ <%= render layout: "decidim/shared/filters", locals: { filter_sections:, search_variable: :search_text_cont, skip_to_id: "challenges" } do %> <%= hidden_field_tag :order, order, id: nil, class: "order_filter" %> <% end %> + + <% if has_sdgs? %> + <%= filter_form_for filter do |form| %> + <%= sdgs_filter_selector(form) %> + <% end %> + <% end %> <% end %> <% end %> @@ -19,3 +25,5 @@ <%= render partial: "challenges" %> <% end %> + +<%= render partial: "decidim/sdgs/sdgs_filter/modal" %> diff --git a/app/views/decidim/problems/problems/index.html.erb b/app/views/decidim/problems/problems/index.html.erb index 2c5d4e80..15769334 100644 --- a/app/views/decidim/problems/problems/index.html.erb +++ b/app/views/decidim/problems/problems/index.html.erb @@ -11,6 +11,12 @@ <%= hidden_field_tag :order, order, id: nil, class: "order_filter" %> <% end %> <% end %> + + <% if has_sdgs? %> + <%= filter_form_for filter do |form| %> + <%= sdgs_filter_selector(form) %> + <% end %> + <% end %> <% end %> <%= render layout: "layouts/decidim/shared/layout_two_col" do %> @@ -18,3 +24,5 @@ <%= render partial: "problems", locals: { has_sdgs: has_sdgs? } %> <% end %> + +<%= render partial: "decidim/sdgs/sdgs_filter/modal" %> diff --git a/app/views/decidim/sdgs/sdgs_filter/_modal.html.erb b/app/views/decidim/sdgs/sdgs_filter/_modal.html.erb new file mode 100644 index 00000000..03a0d2ba --- /dev/null +++ b/app/views/decidim/sdgs/sdgs_filter/_modal.html.erb @@ -0,0 +1,35 @@ +<%= append_stylesheet_pack_tag "decidim_sdgs" %> + +
+
+
+

<%= t(".title") %>

+ +
+
+
+ <% Decidim::Sdgs::Sdg::SDGS.each_with_index do |sdg_code, idx| + idx+= 1 + idx_str= idx.to_s.rjust(2, "0") %> +
+ <%= image_pack_tag "media/images/ods-#{idx_str}.svg", alt: "Logo SDG #{idx_str}"%> +
+

<%= "#{idx_str}. #{t_sdg(sdg_code)}" %>

+
+
+ <% end %> +
+
+
+
+ <%= t(".close") %> +
+
+ +
+
+ +<%= append_javascript_pack_tag "decidim_sdgs" %> + diff --git a/app/views/decidim/sdgs/sdgs_filter/_model.html.erb b/app/views/decidim/sdgs/sdgs_filter/_model.html.erb deleted file mode 100644 index f0de5596..00000000 --- a/app/views/decidim/sdgs/sdgs_filter/_model.html.erb +++ /dev/null @@ -1,31 +0,0 @@ -
-
-

<%= t(".title") %>

- -
-
-
-
- <% Decidim::Sdgs::Sdg::SDGS.each_with_index do |sdg_code, idx| - idx+= 1 - idx_str= idx.to_s.rjust(2, "0") %> -
- <%= image_pack_tag "media/images/ods-#{idx_str}.svg", alt: "Logo SDG #{idx_str}"%> -
-

<%= "#{idx_str}. #{t_sdg(sdg_code)}" %>

-
-
- <% end %> -
-
-
-
-
- <%= t(".close") %> -
-
-
- -<%= javascript_pack_tag "decidim_sdgs" %> diff --git a/app/views/decidim/solutions/solutions/index.html.erb b/app/views/decidim/solutions/solutions/index.html.erb index 5bb69664..59be032c 100644 --- a/app/views/decidim/solutions/solutions/index.html.erb +++ b/app/views/decidim/solutions/solutions/index.html.erb @@ -19,6 +19,12 @@ <%= render layout: "decidim/shared/filters", locals: { filter_sections:, search_variable: :search_text_cont, skip_to_id: "solutions" } do %> <%= hidden_field_tag :order, order, id: nil, class: "order_filter" %> <% end %> + + <% if has_sdgs? %> + <%= filter_form_for filter do |form| %> + <%= sdgs_filter_selector(form) %> + <% end %> + <% end %> <% end %> <% end %> @@ -27,3 +33,5 @@ <%= render partial: "solutions", locals: { has_sdgs: has_sdgs? } %> <% end %> + +<%= render partial: "decidim/sdgs/sdgs_filter/modal" %> diff --git a/spec/system/decidim/challenges/filter_challenges_spec.rb b/spec/system/decidim/challenges/filter_challenges_spec.rb index 0fe4f36a..5d87a1f6 100644 --- a/spec/system/decidim/challenges/filter_challenges_spec.rb +++ b/spec/system/decidim/challenges/filter_challenges_spec.rb @@ -160,45 +160,45 @@ end end - # context "when the participatory_space DOES contain an SDGs component" do - # let!(:sdgs_component) { create(:component, participatory_space: participatory_process, manifest_name: "sdgs") } - - # before do - # create_list(:challenge, 2, component:, sdg_code: :no_poverty) - # create(:challenge, component:, sdg_code: :zero_hunger) - # create(:challenge, component:, sdg_code: :good_health) - # create(:challenge, component:, sdg_code: nil) - # visit_component - # end - - # it "the filter is rendered" do - # expect(page).to have_field(".filters__section.sdgs-filter") - # end - - # context "when NOT selecting any SDG" do - # it "lists all the challenges" do - # expect(page).to have_field(".card--challenge", count: 5) - # expect(page).to have_content("5 CHALLENGES") - # end - # end - - # context "when selecting some SDGs" do - # before do - # find(".filters__section.sdgs-filter button").click_on - # expect(page).to have_field("#sdgs-modal") - - # within "#sdgs-modal" do - # find('.sdg-cell[data-value="no_poverty"]').click_on - # find('.sdg-cell[data-value="good_health"]').click_on - # find(".reveal__footer a.button").click_on - # end - # end - - # it "lists the challenges with the selected SDGs" do - # expect(page).to have_field(".card--challenge", count: 3) - # expect(page).to have_content("3 CHALLENGES") - # end - # end - # end + context "when the participatory_space DOES contain an SDGs component" do + let!(:sdgs_component) { create(:component, participatory_space: participatory_process, manifest_name: "sdgs") } + + before do + create_list(:challenge, 2, component:, sdg_code: :no_poverty) + create(:challenge, component:, sdg_code: :zero_hunger) + create(:challenge, component:, sdg_code: :good_health) + create(:challenge, component:, sdg_code: nil) + visit_component + end + + it "the filter is rendered" do + expect(page).to have_css(".filters__section.sdgs-filter") + end + + context "when NOT selecting any SDG" do + it "lists all the challenges" do + expect(page).to have_css(".card__list", count: 5) + expect(page).to have_content("5 challenges") + end + end + + context "when selecting some SDGs" do + before do + find(".filters__section.sdgs-filter button").click_link_or_button + expect(page).to have_css("#sdgs-modal") + + within "#sdgs-modal" do + find('.sdg-cell[data-value="no_poverty"]').click + find('.sdg-cell[data-value="good_health"]').click + find(".reveal__footer a.button").click + end + end + + it "lists the challenges with the selected SDGs" do + expect(page).to have_css(".card__list", count: 3) + expect(page).to have_content("3 challenges") + end + end + end end end diff --git a/spec/system/decidim/solutions/filter_solutions_spec.rb b/spec/system/decidim/solutions/filter_solutions_spec.rb index 34c1a403..2ba2714d 100644 --- a/spec/system/decidim/solutions/filter_solutions_spec.rb +++ b/spec/system/decidim/solutions/filter_solutions_spec.rb @@ -43,56 +43,56 @@ end end - # context "when the participatory_space DOES contain an SDGs component" do - # let!(:sdgs_component) { create(:sdgs_component, participatory_space: participatory_process) } - # let!(:challenges_component) { create(:challenges_component, participatory_space: participatory_process) } - # let!(:problems_component) { create(:problems_component, participatory_space: participatory_process) } - - # before do - # challenge = create(:challenge, component: challenges_component, sdg_code: :no_poverty) - # problem = create(:problem, component: problems_component, challenge:) - # create_list(:solution, 2, component:, problem:, challenge:) - # challenge = create(:challenge, component: challenges_component, sdg_code: :zero_hunger) - # problem = create(:problem, component: problems_component, challenge:) - # create(:solution, component:, problem:, challenge:) - # challenge = create(:challenge, component: challenges_component, sdg_code: :good_health) - # problem = create(:problem, component: problems_component, challenge:) - # create(:solution, component:, problem:, challenge:) - # challenge = create(:challenge, component: challenges_component) - # problem = create(:problem, component: problems_component, challenge:) - # create(:solution, component:, problem:, challenge:) - # visit_component - # end - - # it "the filter is rendered" do - # expect(page).to have_field(".filters__section.sdgs-filter") - # end - - # context "when NOT selecting any SDG" do - # it "lists all the solutions" do - # expect(page).to have_field(".card--solution", count: 5) - # expect(page).to have_content("5 SOLUTIONS") - # end - # end - - # context "when selecting some SDGs" do - # before do - # find(".filters__section.sdgs-filter button").click_on - # expect(page).to have_field("#sdgs-modal") - - # within "#sdgs-modal" do - # find('.sdg-cell[data-value="no_poverty"]').click_on - # find('.sdg-cell[data-value="good_health"]').click_on - # find(".reveal__footer a.button").click_on - # end - # end - - # it "lists the solutions with the selected SDGs" do - # expect(page).to have_field(".card--solution", count: 3) - # expect(page).to have_content("3 SOLUTIONS") - # end - # end - # end + context "when the participatory_space DOES contain an SDGs component" do + let!(:sdgs_component) { create(:sdgs_component, participatory_space: participatory_process) } + let!(:challenges_component) { create(:challenges_component, participatory_space: participatory_process) } + let!(:problems_component) { create(:problems_component, participatory_space: participatory_process) } + + before do + challenge = create(:challenge, component: challenges_component, sdg_code: :no_poverty) + problem = create(:problem, component: problems_component, challenge:) + create_list(:solution, 2, component:, problem:, challenge:) + challenge = create(:challenge, component: challenges_component, sdg_code: :zero_hunger) + problem = create(:problem, component: problems_component, challenge:) + create(:solution, component:, problem:, challenge:) + challenge = create(:challenge, component: challenges_component, sdg_code: :good_health) + problem = create(:problem, component: problems_component, challenge:) + create(:solution, component:, problem:, challenge:) + challenge = create(:challenge, component: challenges_component) + problem = create(:problem, component: problems_component, challenge:) + create(:solution, component:, problem:, challenge:) + visit_component + end + + it "the filter is rendered" do + expect(page).to have_css(".filters__section.sdgs-filter") + end + + context "when NOT selecting any SDG" do + it "lists all the solutions" do + expect(page).to have_css(".card__list", count: 5) + expect(page).to have_content("5 solutions") + end + end + + context "when selecting some SDGs" do + before do + find(".filters__section.sdgs-filter button").click_link_or_button + expect(page).to have_css("#sdgs-modal") + + within "#sdgs-modal" do + find('.sdg-cell[data-value="no_poverty"]').click + find('.sdg-cell[data-value="good_health"]').click + find(".reveal__footer a.button").click + end + end + + it "lists the solutions with the selected SDGs" do + expect(page).to have_css(".card__list", count: 3) + expect(page).to have_content("3 solutions") + end + end + end end # context "when using the browser history", :slow do