From fce844261ab66e35367bfc90c1389ce88d2dfb5e Mon Sep 17 00:00:00 2001 From: taitus Date: Mon, 18 Jan 2021 12:22:05 +0100 Subject: [PATCH] Add help section In the help section we show the titles of the Goals and Targets that we have added --- .../javascripts/sdg/related_list_selector.js | 14 ++++++++++ .../sdg/related_list_selector.scss | 4 +++ .../related_list_selector_component.html.erb | 5 ++++ .../sdg/related_list_selector_component.rb | 1 + config/locales/en/sdg.yml | 2 ++ config/locales/es/sdg.yml | 4 ++- .../related_list_selector_component_spec.rb | 3 +++ spec/system/sdg_management/relations_spec.rb | 26 +++++++++++++++++++ 8 files changed, 58 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/sdg/related_list_selector.js b/app/assets/javascripts/sdg/related_list_selector.js index 4b9c9acb8..b15ac290b 100644 --- a/app/assets/javascripts/sdg/related_list_selector.js +++ b/app/assets/javascripts/sdg/related_list_selector.js @@ -26,9 +26,11 @@ return App.SDGRelatedListSelector.goal_code(value) === App.SDGRelatedListSelector.goal_code(selected_value); }); App.SDGRelatedListSelector.goal_element(value).attr("aria-checked", keep_goal); + App.SDGRelatedListSelector.manage_remove_help(amsify_suggestags, value); }, afterAdd: function(value) { App.SDGRelatedListSelector.goal_element(value).attr("aria-checked", true); + App.SDGRelatedListSelector.manage_add_help(amsify_suggestags, value); }, keepLastOnHoverTag: false, checkSimilar: false @@ -60,6 +62,18 @@ }, goal_code: function(value) { return value.toString().split(".")[0]; + }, + manage_add_help: function(amsify_suggestags, value) { + var title = amsify_suggestags.getItem(value).title; + var html = '
  • ' + "" + value + " " + title + "
    • "; + $(".sdg-related-list-selector .help-section").removeClass("hide"); + $(".sdg-related-list-selector .selected-info").append(html); + }, + manage_remove_help: function(amsify_suggestags, value) { + $('[data-id="' + value + '"]').remove(); + if ($(amsify_suggestags.selector).val() === "") { + $(".sdg-related-list-selector .help-section").addClass("hide"); + } } }; }).call(this); diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 7d48a155f..9f5c5f2bc 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -31,4 +31,8 @@ .input-section { margin-top: $line-height / 2; } + + h3 { + @include header-font-size(h4); + } } diff --git a/app/components/sdg/related_list_selector_component.html.erb b/app/components/sdg/related_list_selector_component.html.erb index 48c8d33df..4c440bb0e 100644 --- a/app/components/sdg/related_list_selector_component.html.erb +++ b/app/components/sdg/related_list_selector_component.html.erb @@ -14,4 +14,9 @@ hint: t("sdg.related_list_selector.hint"), data: { "suggestions-list": sdg_related_suggestions } %> + +
    +

    <%= t("sdg.related_list_selector.help.title", record: f.object.model_name.human) %>

    + +
    diff --git a/app/components/sdg/related_list_selector_component.rb b/app/components/sdg/related_list_selector_component.rb index 45fb6a034..42584fdad 100644 --- a/app/components/sdg/related_list_selector_component.rb +++ b/app/components/sdg/related_list_selector_component.rb @@ -23,6 +23,7 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent { tag: "#{goal_or_target.code}. #{goal_or_target.title.gsub(",", "")}", display_text: text_for(goal_or_target), + title: goal_or_target.title, value: goal_or_target.code } end diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml index 78ab33924..2b8ef3521 100644 --- a/config/locales/en/sdg.yml +++ b/config/locales/en/sdg.yml @@ -434,5 +434,7 @@ en: related_list_selector: goal_identifier: "SDG%{code}" goal_list: "Goal list" + help: + title: "Which SDGs and targets are aligned with my %{record}?" 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 7a29b2f7c..5b021e925 100644 --- a/config/locales/es/sdg.yml +++ b/config/locales/es/sdg.yml @@ -434,5 +434,7 @@ es: related_list_selector: goal_identifier: "ODS%{code}" goal_list: "Listado de objetivos" - hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno" + help: + title: "¿Qué ODS y metas se alinean con mi %{record}?" + 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/components/sdg/related_list_selector_component_spec.rb b/spec/components/sdg/related_list_selector_component_spec.rb index 38ea993e7..ca0db193e 100644 --- a/spec/components/sdg/related_list_selector_component_spec.rb +++ b/spec/components/sdg/related_list_selector_component_spec.rb @@ -10,6 +10,7 @@ describe SDG::RelatedListSelectorComponent, type: :component do expect(page).to have_css ".sdg-related-list-selector .input" expect(page).to have_content "Sustainable Development Goals and Targets" + expect(page).to have_css ".help-section" end describe "#goals_and_targets" do @@ -29,6 +30,7 @@ describe SDG::RelatedListSelectorComponent, type: :component do expect(suggestion).to eq({ tag: "1. No Poverty", display_text: "SDG1", + title: "No Poverty", value: 1 }) end @@ -39,6 +41,7 @@ describe SDG::RelatedListSelectorComponent, type: :component do expect(suggestion).to eq({ tag: "1.1. By 2030 eradicate extreme poverty for all people everywhere currently measured as people living on less than $1.25 a day", display_text: "1.1", + title: "By 2030, eradicate extreme poverty for all people everywhere, currently measured as people living on less than $1.25 a day", value: "1.1" }) end diff --git a/spec/system/sdg_management/relations_spec.rb b/spec/system/sdg_management/relations_spec.rb index 2ed73d797..0f3de3c07 100644 --- a/spec/system/sdg_management/relations_spec.rb +++ b/spec/system/sdg_management/relations_spec.rb @@ -346,5 +346,31 @@ describe "SDG Relations", :js do expect(find("li[data-code='1']")["aria-checked"]).to eq "false" end end + + describe "help section" do + scenario "when add new tag render title in help section" do + process = create(:legislation_process, title: "SDG process") + + visit sdg_management_edit_legislation_process_path(process) + find("li[data-code='1']").click + + within(".help-section") { expect(page).to have_content "No Poverty" } + end + + scenario "when remove a tag remove his title in help section" do + process = create(:legislation_process, title: "SDG process") + process.sdg_goals = [SDG::Goal[1]] + + visit sdg_management_edit_legislation_process_path(process) + + within(".help-section") { expect(page).to have_content "No Poverty" } + + within "span[data-val='1']" do + find(".amsify-remove-tag").click + end + + expect(page).not_to have_content "No Poverty" + end + end end end