Add new suggestion attribute to render custom text on tags

Add "display_text" to allow customize the text that we want render on tag.
For Goals we render "SDG1", "SDG2"..
For Targets we render the code "1.1", "1.A"...

app/assets/javascripts/sdg/related_list_selector.js

@@ -5,6 +5,19 @@
       if ($(".sdg-related-list-selector").length) {
         var amsify_suggestags = new AmsifySuggestags($(".sdg-related-list-selector .input"));
 
+        amsify_suggestags.getItem = function(value) {
+          var item_key = this.getItemKey(value);
+          return this.settings.suggestions[item_key];
+        };
+
+        amsify_suggestags.getTag = function(value) {
+          if (this.getItem(value) !== undefined) {
+            return this.getItem(value).display_text;
+          } else {
+            return value;
+          }
+        };
+
         amsify_suggestags._settings({
           suggestions: $(".sdg-related-list-selector .input").data("suggestions-list"),
           whiteList: true,

app/components/sdg/related_list_selector_component.rb

@@ -22,6 +22,7 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent
   def suggestion_tag_for(goal_or_target)
     {
       tag: "#{goal_or_target.code}. #{goal_or_target.title.gsub(",", "")}",
+      display_text: text_for(goal_or_target),
       value: goal_or_target.code
     }
   end
@@ -31,4 +32,12 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent
     def goals
       SDG::Goal.order(:code)
     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)
+      else
+        goal_or_target.code
+      end
+    end
 end

config/locales/en/sdg.yml

@@ -432,6 +432,7 @@ en:
           one: "One more goal"
           other: "%{count} more goals"
     related_list_selector:
+      goal_identifier: "SDG%{code}"
       goal_list: "Goal list"
       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

@@ -432,6 +432,7 @@ es:
           one: "Un objetivo más"
           other: "%{count} objetivos más"
     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"
       placeholder: "Escribe las etiquetas que desees"

spec/components/sdg/related_list_selector_component_spec.rb

@@ -28,6 +28,7 @@ describe SDG::RelatedListSelectorComponent, type: :component do
 
       expect(suggestion).to eq({
         tag: "1. No Poverty",
+        display_text: "SDG1",
         value: 1
       })
     end
@@ -37,6 +38,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",
         value: "1.1"
       })
     end

spec/system/sdg_management/relations_spec.rb

@@ -263,7 +263,7 @@ describe "SDG Relations", :js do
       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" }
+      within(".amsify-suggestags-input-area") { expect(page).to have_content "SDG3" }
 
       fill_in "Sustainable Development Goals and Targets", with: "1.1"
       within(".amsify-list") { find(:css, "[data-val='1.1']").click }