diff --git a/app/assets/javascripts/sdg/related_list_selector.js b/app/assets/javascripts/sdg/related_list_selector.js
index 8836acd77..f36c1f7b9 100644
--- a/app/assets/javascripts/sdg/related_list_selector.js
+++ b/app/assets/javascripts/sdg/related_list_selector.js
@@ -30,11 +30,11 @@
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);
+ App.SDGRelatedListSelector.goal_element(value).prop("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.goal_element(value).prop("checked", true);
App.SDGRelatedListSelector.manage_add_help(amsify_suggestags, value);
},
keepLastOnHoverTag: false,
@@ -48,23 +48,24 @@
}
},
manage_icons: function(amsify_suggestags) {
- $("[role='checkbox']").on("click keydown", function(event) {
+ $(".sdg-related-list-selector .goals input").on("change", function() {
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);
- }
-
+ if (amsify_suggestags.isPresent(goal_id)) {
+ amsify_suggestags.removeTag(goal_id, false);
+ } else {
+ amsify_suggestags.addTag(goal_id, false);
+ }
+ }).on("keydown", function(event) {
+ if (event.keyCode === 13) {
+ $(this).trigger("click");
event.preventDefault();
event.stopPropagation();
}
});
},
goal_element: function(value) {
- return $("li[data-code=" + App.SDGRelatedListSelector.goal_code(value) + "]");
+ return $(".sdg-related-list-selector .goals [data-code=" + App.SDGRelatedListSelector.goal_code(value) + "]");
},
goal_code: function(value) {
return value.toString().split(".")[0];
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 534d0b6c9..bad75babd 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -244,7 +244,7 @@
width: calc(100% + #{$spacing});
width: calc(100% + #{$max-spacing});
- li {
+ > * {
margin-bottom: 0;
margin-left: $spacing;
margin-left: $max-spacing;
diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss
index a2de54bd5..9e4f8c0ad 100644
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -2,6 +2,10 @@
@include grid-column-gutter;
clear: both;
+ > legend {
+ margin-bottom: 0;
+ }
+
.amsify-suggestags-area .amsify-select-tag {
color: $white;
@@ -12,22 +16,19 @@
}
}
- label + ul {
+ .goals {
$spacing: 0.5%;
@include sdg-goal-list($spacing);
- li {
+ legend {
+ font-weight: normal;
+ font-style: italic;
+ }
+
+ label {
min-width: $sdg-icon-min-width;
width: calc(100% / 17 - #{$spacing});
- &[aria-checked=true] img {
- opacity: 0.15;
- }
-
- &:focus {
- outline: $outline-focus;
- }
-
&:hover {
cursor: pointer;
}
@@ -36,6 +37,23 @@
width: 100%;
}
}
+
+ input {
+ @include element-invisible;
+
+ &:focus + label {
+ outline: $outline-focus;
+ }
+
+ &:checked + label img {
+ opacity: 0.15;
+ }
+ }
+ }
+
+ label {
+ font-weight: normal;
+ font-style: italic;
}
.input-section {
diff --git a/app/components/sdg/related_list_selector_component.html.erb b/app/components/sdg/related_list_selector_component.html.erb
index 3697bfa29..a1bbca60e 100644
--- a/app/components/sdg/related_list_selector_component.html.erb
+++ b/app/components/sdg/related_list_selector_component.html.erb
@@ -1,26 +1,24 @@
-
-
+
diff --git a/app/components/sdg/related_list_selector_component.rb b/app/components/sdg/related_list_selector_component.rb
index 4f32adf5a..2dedae2d2 100644
--- a/app/components/sdg/related_list_selector_component.rb
+++ b/app/components/sdg/related_list_selector_component.rb
@@ -5,10 +5,6 @@ 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
@@ -39,6 +35,13 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent
SDG::Goal.order(:code)
end
+ def goal_field(checkbox_form)
+ goal = checkbox_form.object
+
+ checkbox_form.check_box(data: { code: goal.code }) +
+ checkbox_form.label { render(SDG::Goals::IconComponent.new(goal)) }
+ end
+
def text_for(goal_or_target)
if goal_or_target.class.name == "SDG::Goal"
t("sdg.related_list_selector.goal_identifier", code: goal_or_target.code)
@@ -46,4 +49,8 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent
goal_or_target.code
end
end
+
+ def relatable_name
+ f.object.model_name.human.downcase
+ end
end
diff --git a/config/locales/en/activerecord.yml b/config/locales/en/activerecord.yml
index 825386440..ce8db966a 100644
--- a/config/locales/en/activerecord.yml
+++ b/config/locales/en/activerecord.yml
@@ -2,7 +2,6 @@ en:
attributes:
geozone_id: "Scope of operation"
results_enabled: "Show results"
- related_sdg_list: "Sustainable Development Goals and Targets"
stats_enabled: "Show stats"
advanced_stats_enabled: "Show advanced stats"
name: Name
diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml
index 9ce18e282..0eb3a869c 100644
--- a/config/locales/en/sdg.yml
+++ b/config/locales/en/sdg.yml
@@ -455,12 +455,13 @@ en:
other: "%{count} more goals"
related_list_selector:
goal_identifier: "SDG%{code}"
- goal_list: "Goal list"
+ goal_list: "You can choose one or several SDGs aligned with your %{record}"
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"
remove_tag: "Remove"
+ title: "Sustainable Development Goals and Targets"
targets:
filter:
link: "See all %{resources} related to target %{code}"
diff --git a/config/locales/es/activerecord.yml b/config/locales/es/activerecord.yml
index b98bafcb2..86f05b5ff 100644
--- a/config/locales/es/activerecord.yml
+++ b/config/locales/es/activerecord.yml
@@ -2,7 +2,6 @@ es:
attributes:
geozone_id: "Ámbito de actuación"
results_enabled: "Mostrar resultados"
- related_sdg_list: "Objetivos de Desarrollo Sostenible y Metas"
stats_enabled: "Mostrar estadísticas"
advanced_stats_enabled: "Mostrar estadísticas avanzadas"
name: Nombre
diff --git a/config/locales/es/sdg.yml b/config/locales/es/sdg.yml
index 7c864ce93..a3f4f9561 100644
--- a/config/locales/es/sdg.yml
+++ b/config/locales/es/sdg.yml
@@ -455,12 +455,13 @@ es:
other: "%{count} objetivos más"
related_list_selector:
goal_identifier: "ODS%{code}"
- goal_list: "Listado de objetivos"
+ goal_list: "Puedes seleccionar uno o varios ODS con los que se alinea tu %{record}"
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"
remove_tag: "Eliminar"
+ title: "Objetivos de Desarrollo Sostenible y Metas"
targets:
filter:
link: "Ver %{resources} de la meta %{code}"
diff --git a/spec/support/common_actions.rb b/spec/support/common_actions.rb
index 9c9f267cc..6702b6609 100644
--- a/spec/support/common_actions.rb
+++ b/spec/support/common_actions.rb
@@ -45,7 +45,9 @@ module CommonActions
end
def click_sdg_goal(code)
- find("li[data-code='#{code}']").click
+ within(".sdg-related-list-selector .goals") do
+ find("[data-code='#{code}'] + label").click
+ end
end
def remove_sdg_goal_or_target_tag(code)
diff --git a/spec/system/sdg_management/relations_spec.rb b/spec/system/sdg_management/relations_spec.rb
index be5bff406..1f647ef30 100644
--- a/spec/system/sdg_management/relations_spec.rb
+++ b/spec/system/sdg_management/relations_spec.rb
@@ -299,17 +299,17 @@ describe "SDG Relations", :js do
create(:sdg_local_target, code: "1.1.1")
visit sdg_management_edit_legislation_process_path(process)
- fill_in "Sustainable Development Goals and Targets", with: "3"
+ fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "3"
within(".amsify-list") { find(:css, "[data-val='3']").click }
within(".amsify-suggestags-input-area") { expect(page).to have_content "SDG3" }
- fill_in "Sustainable Development Goals and Targets", with: "1.1"
+ fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "1.1"
within(".amsify-list") { find(:css, "[data-val='1.1']").click }
within(".amsify-suggestags-input-area") { expect(page).to have_content "1.1" }
- fill_in "Sustainable Development Goals and Targets", with: "1.1.1"
+ fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "1.1.1"
within(".amsify-list") { find(:css, "[data-val='1.1.1']").click }
within(".amsify-suggestags-input-area") { expect(page).to have_content "1.1.1" }
@@ -327,8 +327,8 @@ describe "SDG Relations", :js do
process = create(:legislation_process, title: "SDG process")
visit sdg_management_edit_legislation_process_path(process)
+ fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "tag nonexistent,"
- fill_in "Sustainable Development Goals and Targets", with: "tag nonexistent,"
within(".amsify-suggestags-input-area") { expect(page).not_to have_content "tag nonexistent" }
end
@@ -368,7 +368,7 @@ describe "SDG Relations", :js do
visit sdg_management_edit_legislation_process_path(process)
click_sdg_goal(1)
- expect(find("li[data-code='1']")["aria-checked"]).to eq "true"
+ expect(find("input[data-code='1']")).to be_checked
end
scenario "when remove a last tag related to a Goal, the icon will not be checked" do
@@ -380,15 +380,32 @@ describe "SDG Relations", :js do
visit sdg_management_edit_legislation_process_path(process)
remove_sdg_goal_or_target_tag(1)
- expect(find("li[data-code='1']")["aria-checked"]).to eq "true"
+ expect(find("input[data-code='1']")).to be_checked
remove_sdg_goal_or_target_tag(1.1)
- expect(find("li[data-code='1']")["aria-checked"]).to eq "true"
+ expect(find("input[data-code='1']")).to be_checked
remove_sdg_goal_or_target_tag("1.1.1")
- expect(find("li[data-code='1']")["aria-checked"]).to eq "false"
+ expect(find("input[data-code='1']")).not_to be_checked
+ end
+
+ context "when we have a Goal and a related Target selected" do
+ scenario "we can remove and add same Goal always keeping the icon as 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)
+ click_sdg_goal(1)
+
+ expect(find("input[data-code='1']")).to be_checked
+
+ click_sdg_goal(1)
+
+ expect(find("input[data-code='1']")).to be_checked
+ end
end
end