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