Add list of goals icons to component

- When we click on an icon we add a new tag with the Goal related to the input or
we remove the tag when that label already exists.

- Manage goals icons status when add or remove related targets:
Whenever there is a tag related to Goal, either the Goal itself or a Target, the icon
will be "checked".
When there is no related Goal or Target it will no longer be marked as checked.

app/assets/javascripts/sdg/related_list_selector.js

@@ -8,13 +8,45 @@
         amsify_suggestags._settings({
           suggestions: $(".sdg-related-list-selector .input").data("suggestions-list"),
           whiteList: true,
+          afterRemove: function(value) {
+            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);
+          },
+          afterAdd: function(value) {
+            App.SDGRelatedListSelector.goal_element(value).attr("aria-checked", true);
+          },
           keepLastOnHoverTag: false,
           checkSimilar: false
         });
         amsify_suggestags.classes.focus = ".sdg-related-list-focus";
         amsify_suggestags.classes.sTagsInput = ".sdg-related-list-selector-input";
         amsify_suggestags._init();
+        App.SDGRelatedListSelector.manage_icons(amsify_suggestags);
       }
+    },
+    manage_icons: function(amsify_suggestags) {
+      $("[role='checkbox']").on("click keydown", function(event) {
+        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);
+          }
+
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      });
+    },
+    goal_element: function(value) {
+      return $("li[data-code=" + App.SDGRelatedListSelector.goal_code(value) + "]");
+    },
+    goal_code: function(value) {
+      return value.toString().split(".")[0];
     }
   };
 }).call(this);

app/assets/stylesheets/_consul_settings.scss

@@ -68,6 +68,8 @@ $color-alert:       #a94442;
 $pdf-primary:       #0300ff;
 $pdf-secondary:     #ff9e00;
 
+$outline-focus:     3px solid #ffbf47;
+
 // 2. Foundation settings overrides
 // ---------------------------------
 

app/assets/stylesheets/layout.scss

@@ -77,7 +77,7 @@ a {
 
   &:focus {
     color: $link-hover;
-    outline: 3px solid #ffbf47;
+    outline: $outline-focus;
   }
 }
 
@@ -1075,7 +1075,7 @@ footer {
     width: auto;
 
     &:focus {
-      outline: 3px solid #ffbf47;
+      outline: $outline-focus;
     }
   }
 }

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -9,4 +9,26 @@
       }
     }
   }
+
+  > ul {
+    list-style: none;
+    margin-bottom: 0;
+    margin-left: 0;
+
+    li {
+      display: inline-block;
+
+      &[aria-checked=true] img {
+        opacity: 0.15;
+      }
+
+      &:focus {
+        outline: $outline-focus;
+      }
+    }
+  }
+
+  .input-section {
+    margin-top: $line-height / 2;
+  }
 }

app/components/sdg/related_list_selector_component.html.erb

@@ -1,4 +1,12 @@
 <div class="sdg-related-list-selector">
+  <ul aria-label="<%= t("sdg.related_list_selector.goal_list") %>">
+    <% goals.each do |goal| %>
+      <li data-code="<%= goal.code %>" role="checkbox" aria-checked="<%= checked?(goal.code) %>" tabindex="0">
+        <%= render SDG::Goals::IconComponent.new(goal) %>
+      </li>
+    <% end %>
+  </ul>
+
   <div class="input-section">
     <%= f.text_field :sdg_related_list,
                       class: "input",

app/components/sdg/related_list_selector_component.rb

@@ -5,6 +5,10 @@ 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

config/locales/en/sdg.yml

@@ -432,5 +432,6 @@ en:
           one: "One more goal"
           other: "%{count} more goals"
     related_list_selector:
+      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,5 +432,6 @@ es:
           one: "Un objetivo más"
           other: "%{count} objetivos más"
     related_list_selector:
+      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/system/sdg_management/relations_spec.rb

@@ -287,5 +287,54 @@ describe "SDG Relations", :js do
       fill_in "Sustainable Development Goals and Targets", with: "tag nonexistent,"
       within(".amsify-suggestags-input-area") { expect(page).not_to have_content "tag nonexistent" }
     end
+
+    describe "by clicking on a Goal icon" do
+      scenario "allows adding a Goal" do
+        process = create(:legislation_process, title: "SDG process")
+
+        visit sdg_management_edit_legislation_process_path(process)
+        find("li[data-code='1']").click
+        click_button "Update Process"
+        click_link "Marked as reviewed"
+
+        within("tr", text: "SDG process") do
+          expect(page).to have_css "td", exact_text: "1"
+        end
+      end
+
+      scenario "allows remove a Goal" do
+        skip("Pending to fix removing item twice")
+      end
+    end
+
+    describe "manage goals icon status" do
+      scenario "when add a tag related to Goal, the icon will be checked" do
+        process = create(:legislation_process, title: "SDG process")
+
+        visit sdg_management_edit_legislation_process_path(process)
+        find("li[data-code='1']").click
+
+        expect(find("li[data-code='1']")["aria-checked"]).to eq "true"
+      end
+
+      scenario "when remove a last tag related to a Goal, the icon will not be 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)
+        within "span[data-val='1']" do
+          find(".amsify-remove-tag").click
+        end
+
+        expect(find("li[data-code='1']")["aria-checked"]).to eq "true"
+
+        within "span[data-val='1.1']" do
+          find(".amsify-remove-tag").click
+        end
+
+        expect(find("li[data-code='1']")["aria-checked"]).to eq "false"
+      end
+    end
   end
 end