Add help section

In the help section we show the titles of the Goals and Targets that we have added

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 = '<li data-id="' + value + '">' + "<strong>" + value + "</strong> " + title + "</li>";
+      $(".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);

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);
+  }
 }

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 } %>
   </div>
+
+  <div class="help-section callout primary hide">
+    <h3><%= t("sdg.related_list_selector.help.title", record: f.object.model_name.human) %></h3>
+    <ul class="selected-info"></ul>
+  </div>
 </div>

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

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"

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"

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

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