Add suggestions list with goals and targets

This will allow autocomplete for the loaded values in suggestions settings.
We remove commas on tag to allow to jquery.amsify.suggestag.js use comma
as delimiter.

app/assets/javascripts/sdg/related_list_selector.js

@@ -4,6 +4,10 @@
     initialize: function() {
       if ($(".sdg-related-list-selector").length) {
         var amsify_suggestags = new AmsifySuggestags($(".sdg-related-list-selector .input"));
+
+        amsify_suggestags._settings({
+          suggestions: $(".sdg-related-list-selector .input").data("suggestions-list"),
+        });
         amsify_suggestags.classes.focus = ".sdg-related-list-focus";
         amsify_suggestags.classes.sTagsInput = ".sdg-related-list-selector-input";
         amsify_suggestags._init();

app/components/sdg/related_list_selector_component.html.erb

@@ -3,6 +3,7 @@
     <%= f.text_field :sdg_related_list,
                       class: "input",
                       placeholder: t("sdg.related_list_selector.placeholder"),
-                      hint: t("sdg.related_list_selector.hint") %>
+                      hint: t("sdg.related_list_selector.hint"),
+                      data: { "suggestions-list": sdg_related_suggestions } %>
   </div>
 </div>

app/components/sdg/related_list_selector_component.rb

@@ -4,4 +4,27 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent
   def initialize(form)
     @f = form
   end
+
+  def sdg_related_suggestions
+    goals_and_targets.map { |goal_or_target| suggestion_tag_for(goal_or_target) }
+  end
+
+  def goals_and_targets
+    goals.map do |goal|
+      [goal, *goal.targets.sort]
+    end.flatten
+  end
+
+  def suggestion_tag_for(goal_or_target)
+    {
+      tag: "#{goal_or_target.code}. #{goal_or_target.title.gsub(",", "")}",
+      value: goal_or_target.code
+    }
+  end
+
+  private
+
+    def goals
+      SDG::Goal.order(:code)
+    end
 end

spec/components/sdg/related_list_selector_component_spec.rb

@@ -11,4 +11,34 @@ 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"
   end
+
+  describe "#goals_and_targets" do
+    it "return all goals and target with order" do
+      goals_and_targets = component.goals_and_targets
+
+      expect(goals_and_targets.first).to eq SDG::Goal[1]
+      expect(goals_and_targets.second).to eq SDG::Target[1.1]
+      expect(goals_and_targets.last).to eq SDG::Target[17.19]
+    end
+  end
+
+  describe "#suggestion_tag_for" do
+    it "return suggestion tag for goal" do
+      suggestion = component.suggestion_tag_for(SDG::Goal[1])
+
+      expect(suggestion).to eq({
+        tag: "1. No Poverty",
+        value: 1
+      })
+    end
+
+    it "return suggestion tag for target" do
+      suggestion = component.suggestion_tag_for(SDG::Target[1.1])
+
+      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",
+        value: "1.1"
+      })
+    end
+  end
 end

spec/system/sdg_management/relations_spec.rb

@@ -255,5 +255,28 @@ describe "SDG Relations", :js do
         expect(page).to have_css "td", exact_text: "1.2, 2.1"
       end
     end
+
+    scenario "allows adding the goals and targets with autocomplete" do
+      process = create(:legislation_process, title: "SDG process")
+      visit sdg_management_edit_legislation_process_path(process)
+
+      fill_in "Sustainable Development Goals and Targets", with: "3"
+      within(".amsify-list") { find(:css, "[data-val='3']").click }
+
+      within(".amsify-suggestags-input-area") { expect(page).to have_content "3" }
+
+      fill_in "Sustainable Development Goals and Targets", 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" }
+
+      click_button "Update Process"
+      click_link "Marked as reviewed"
+
+      within("tr", text: "SDG process") do
+        expect(page).to have_css "td", exact_text: "1, 3"
+        expect(page).to have_css "td", exact_text: "1.1"
+      end
+    end
   end
 end