From 23f72d939a3bcbffdecb6ab115048664c08127fc Mon Sep 17 00:00:00 2001 From: taitus Date: Mon, 18 Jan 2021 12:17:29 +0100 Subject: [PATCH] Add list of goals icons to component - When we click on an icon we add a new tag with the Goal related to the input or we remove the tag when that label already exists. - Manage goals icons status when add or remove related targets: Whenever there is a tag related to Goal, either the Goal itself or a Target, the icon will be "checked". When there is no related Goal or Target it will no longer be marked as checked. --- .../javascripts/sdg/related_list_selector.js | 32 ++++++++++++ app/assets/stylesheets/_consul_settings.scss | 2 + app/assets/stylesheets/layout.scss | 4 +- .../sdg/related_list_selector.scss | 22 +++++++++ .../related_list_selector_component.html.erb | 8 +++ .../sdg/related_list_selector_component.rb | 4 ++ config/locales/en/sdg.yml | 1 + config/locales/es/sdg.yml | 1 + spec/system/sdg_management/relations_spec.rb | 49 +++++++++++++++++++ 9 files changed, 121 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/sdg/related_list_selector.js b/app/assets/javascripts/sdg/related_list_selector.js index 2abaff9f9..3e2817e86 100644 --- a/app/assets/javascripts/sdg/related_list_selector.js +++ b/app/assets/javascripts/sdg/related_list_selector.js @@ -8,13 +8,45 @@ amsify_suggestags._settings({ suggestions: $(".sdg-related-list-selector .input").data("suggestions-list"), whiteList: true, + afterRemove: function(value) { + var keep_goal = $(amsify_suggestags.selector).val().split(",").some(function(selected_value) { + return App.SDGRelatedListSelector.goal_code(value) === App.SDGRelatedListSelector.goal_code(selected_value); + }); + App.SDGRelatedListSelector.goal_element(value).attr("aria-checked", keep_goal); + }, + afterAdd: function(value) { + App.SDGRelatedListSelector.goal_element(value).attr("aria-checked", true); + }, keepLastOnHoverTag: false, checkSimilar: false }); amsify_suggestags.classes.focus = ".sdg-related-list-focus"; amsify_suggestags.classes.sTagsInput = ".sdg-related-list-selector-input"; amsify_suggestags._init(); + App.SDGRelatedListSelector.manage_icons(amsify_suggestags); } + }, + manage_icons: function(amsify_suggestags) { + $("[role='checkbox']").on("click keydown", function(event) { + var goal_id = this.dataset.code; + + if (event.type === "click" || (event.type === "keydown" && [13, 32].indexOf(event.keyCode) >= 0)) { + if (amsify_suggestags.isPresent(goal_id)) { + amsify_suggestags.removeTag(goal_id, false); + } else { + amsify_suggestags.addTag(goal_id, false); + } + + event.preventDefault(); + event.stopPropagation(); + } + }); + }, + goal_element: function(value) { + return $("li[data-code=" + App.SDGRelatedListSelector.goal_code(value) + "]"); + }, + goal_code: function(value) { + return value.toString().split(".")[0]; } }; }).call(this); diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 85b754aae..d46b5c516 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -68,6 +68,8 @@ $color-alert: #a94442; $pdf-primary: #0300ff; $pdf-secondary: #ff9e00; +$outline-focus: 3px solid #ffbf47; + // 2. Foundation settings overrides // --------------------------------- diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 3fe00f6be..ccba5e002 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -77,7 +77,7 @@ a { &:focus { color: $link-hover; - outline: 3px solid #ffbf47; + outline: $outline-focus; } } @@ -1075,7 +1075,7 @@ footer { width: auto; &:focus { - outline: 3px solid #ffbf47; + outline: $outline-focus; } } } diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 6f302919e..7d48a155f 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -9,4 +9,26 @@ } } } + + > ul { + list-style: none; + margin-bottom: 0; + margin-left: 0; + + li { + display: inline-block; + + &[aria-checked=true] img { + opacity: 0.15; + } + + &:focus { + outline: $outline-focus; + } + } + } + + .input-section { + margin-top: $line-height / 2; + } } diff --git a/app/components/sdg/related_list_selector_component.html.erb b/app/components/sdg/related_list_selector_component.html.erb index a2035f9ec..48c8d33df 100644 --- a/app/components/sdg/related_list_selector_component.html.erb +++ b/app/components/sdg/related_list_selector_component.html.erb @@ -1,4 +1,12 @@
+ +
<%= f.text_field :sdg_related_list, class: "input", diff --git a/app/components/sdg/related_list_selector_component.rb b/app/components/sdg/related_list_selector_component.rb index 40b99a43d..923faa14f 100644 --- a/app/components/sdg/related_list_selector_component.rb +++ b/app/components/sdg/related_list_selector_component.rb @@ -5,6 +5,10 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent @f = form end + def checked?(code) + f.object.sdg_goals.find_by(code: code).present? + end + def sdg_related_suggestions goals_and_targets.map { |goal_or_target| suggestion_tag_for(goal_or_target) } end diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml index 2df83bb24..cf680a647 100644 --- a/config/locales/en/sdg.yml +++ b/config/locales/en/sdg.yml @@ -432,5 +432,6 @@ en: one: "One more goal" other: "%{count} more goals" related_list_selector: + goal_list: "Goal list" hint: "You can introduce the code of a specific goal/target or a text to find one" placeholder: "Write a goal or target code or description" diff --git a/config/locales/es/sdg.yml b/config/locales/es/sdg.yml index ab80cf3a1..3ebc3f537 100644 --- a/config/locales/es/sdg.yml +++ b/config/locales/es/sdg.yml @@ -432,5 +432,6 @@ es: one: "Un objetivo más" other: "%{count} objetivos más" related_list_selector: + goal_list: "Listado de objetivos" hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno" placeholder: "Escribe las etiquetas que desees" diff --git a/spec/system/sdg_management/relations_spec.rb b/spec/system/sdg_management/relations_spec.rb index b2a800413..7197f06d4 100644 --- a/spec/system/sdg_management/relations_spec.rb +++ b/spec/system/sdg_management/relations_spec.rb @@ -287,5 +287,54 @@ describe "SDG Relations", :js do fill_in "Sustainable Development Goals and Targets", with: "tag nonexistent," within(".amsify-suggestags-input-area") { expect(page).not_to have_content "tag nonexistent" } end + + describe "by clicking on a Goal icon" do + scenario "allows adding a Goal" do + process = create(:legislation_process, title: "SDG process") + + visit sdg_management_edit_legislation_process_path(process) + find("li[data-code='1']").click + click_button "Update Process" + click_link "Marked as reviewed" + + within("tr", text: "SDG process") do + expect(page).to have_css "td", exact_text: "1" + end + end + + scenario "allows remove a Goal" do + skip("Pending to fix removing item twice") + end + end + + describe "manage goals icon status" do + scenario "when add a tag related to Goal, the icon will be checked" do + process = create(:legislation_process, title: "SDG process") + + visit sdg_management_edit_legislation_process_path(process) + find("li[data-code='1']").click + + expect(find("li[data-code='1']")["aria-checked"]).to eq "true" + end + + scenario "when remove a last tag related to a Goal, the icon will not be checked" do + process = create(:legislation_process, title: "SDG process") + process.sdg_goals = [SDG::Goal[1]] + process.sdg_targets = [SDG::Target[1.1]] + + visit sdg_management_edit_legislation_process_path(process) + within "span[data-val='1']" do + find(".amsify-remove-tag").click + end + + expect(find("li[data-code='1']")["aria-checked"]).to eq "true" + + within "span[data-val='1.1']" do + find(".amsify-remove-tag").click + end + + expect(find("li[data-code='1']")["aria-checked"]).to eq "false" + end + end end end