From 25501c74bb6f03ddb39d3b2d28227e3c8a85a635 Mon Sep 17 00:00:00 2001
From: taitus <sebastia.roig@gmail.com>
Date: Mon, 18 Jan 2021 11:59:38 +0100
Subject: [PATCH] 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.
---
 .../javascripts/sdg/related_list_selector.js  |  4 +++
 .../related_list_selector_component.html.erb  |  3 +-
 .../sdg/related_list_selector_component.rb    | 23 ++++++++++++++
 .../related_list_selector_component_spec.rb   | 30 +++++++++++++++++++
 spec/system/sdg_management/relations_spec.rb  | 23 ++++++++++++++
 5 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/sdg/related_list_selector.js b/app/assets/javascripts/sdg/related_list_selector.js
index cc229e03c..1eb0ba88d 100644
--- a/app/assets/javascripts/sdg/related_list_selector.js
+++ b/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();
diff --git a/app/components/sdg/related_list_selector_component.html.erb b/app/components/sdg/related_list_selector_component.html.erb
index b1dd27f7b..a2035f9ec 100644
--- a/app/components/sdg/related_list_selector_component.html.erb
+++ b/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>
diff --git a/app/components/sdg/related_list_selector_component.rb b/app/components/sdg/related_list_selector_component.rb
index 01455436f..40b99a43d 100644
--- a/app/components/sdg/related_list_selector_component.rb
+++ b/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
diff --git a/spec/components/sdg/related_list_selector_component_spec.rb b/spec/components/sdg/related_list_selector_component_spec.rb
index 469f683dd..2988a88d6 100644
--- a/spec/components/sdg/related_list_selector_component_spec.rb
+++ b/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
diff --git a/spec/system/sdg_management/relations_spec.rb b/spec/system/sdg_management/relations_spec.rb
index fedec6bed..3fee5de4e 100644
--- a/spec/system/sdg_management/relations_spec.rb
+++ b/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