Add list of targets to SDG tag list

Co-authored-by: Senén Rodero Rodríguez <senenrodero@gmail.com>

app/assets/stylesheets/participation.scss

@@ -488,6 +488,10 @@
 
   .tags {
     @extend %tags;
+  }
+
+  .tags,
+  .sdg-target-tag-list {
 
     a {
       margin-right: rem-calc(6);
@@ -673,7 +677,10 @@
 
   .tags {
     @extend %tags;
+  }
 
+  .tags,
+  .sdg-target-tag-list {
     a {
       font-size: $tiny-font-size;
     }

app/assets/stylesheets/sdg/tag_list.scss

@@ -7,4 +7,22 @@
       @extend %tag;
     }
   }
+
+  .sdg-target-tag-list {
+    @extend %tags;
+
+    a:not(.more-targets) {
+      color: $white;
+    }
+
+    @each $code, $color in $sdg-colors {
+      [data-code^="#{$code}"] {
+        background-color: $color;
+
+        &:hover {
+          background-color: darken($color, 10%);
+        }
+      }
+    }
+  }
 }

app/components/sdg/tag_list_component.html.erb

@@ -1,3 +1,4 @@
 <div class="sdg-tag-list">
   <%= render SDG::Goals::TagListComponent.new(record, limit: limit) %>
+  <%= render SDG::Targets::TagListComponent.new(record, limit: limit) %>
 </div>

app/components/sdg/targets/tag_list_component.html.erb

@@ -0,0 +1 @@
+<%= link_list(*links, class: "sdg-target-tag-list") %>

app/components/sdg/targets/tag_list_component.rb

@@ -0,0 +1,36 @@
+class SDG::Targets::TagListComponent < ApplicationComponent
+  include SDG::TagList
+
+  private
+
+    def record
+      record_or_name
+    end
+
+    def links
+      [*target_links, see_more_link(targets)]
+    end
+
+    def target_links
+      targets.sort[0..(limit.to_i - 1)].map do |target|
+        [
+          "#{SDG::Target.model_name.human} #{target.code}",
+          index_by_target(target),
+          title: filter_text(target),
+          data: { code: target.code }
+        ]
+      end
+    end
+
+    def targets
+      record.sdg_targets
+    end
+
+    def index_by_target(target)
+      index_by(target: target.code)
+    end
+
+    def i18n_namespace
+      "targets"
+    end
+end

config/i18n-tasks.yml

@@ -219,6 +219,7 @@ ignore_unused:
   - "seeds.settings.*"
   - "dashboard.polls.*.submit"
   - "sdg.goals.goal_*"
+  - "sdg.*.filter.more.*"
   - "sdg_management.relations.index.filter*"
 ####
 ## Exclude these keys from the `i18n-tasks eq-base" report:

config/locales/en/sdg.yml

@@ -439,3 +439,9 @@ en:
       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"
       remove_tag: "Remove"
+    targets:
+      filter:
+        link: "See all %{resources} related to target %{code}"
+        more:
+          one: "One more target"
+          other: "%{count} more targets"

config/locales/es/sdg.yml

@@ -439,3 +439,9 @@ es:
       hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno"
       placeholder: "Escribe las etiquetas que desees"
       remove_tag: "Eliminar"
+    targets:
+      filter:
+        link: "Ver %{resources} de la meta %{code}"
+        more:
+          one: "Una meta más"
+          other: "%{count} metas más"

spec/components/sdg/targets/tag_list_component_spec.rb

@@ -0,0 +1,70 @@
+require "rails_helper"
+
+describe SDG::Targets::TagListComponent, type: :component do
+  let(:debate) do
+    create(:debate,
+           sdg_targets: [SDG::Target[1.1], SDG::Target[3.2], create(:sdg_local_target, code: "3.2.1")]
+          )
+  end
+  let(:component) { SDG::Targets::TagListComponent.new(debate) }
+
+  before do
+    Setting["feature.sdg"] = true
+    Setting["sdg.process.debates"] = true
+  end
+
+  it "does not render when the feature is disabled" do
+    Setting["feature.sdg"] = false
+
+    render_inline component
+
+    expect(page).not_to have_css "li"
+  end
+
+  it "does not render when the SDG process feature is disabled" do
+    Setting["sdg.process.debates"] = false
+
+    render_inline component
+
+    expect(page).not_to have_css "li"
+  end
+
+  it "renders a list of targets" do
+    render_inline component
+
+    expect(page).to have_css "li", count: 3
+  end
+
+  it "renders links for each target" do
+    render_inline component
+
+    expect(page).to have_css "li", count: 3
+    expect(page).to have_link "target 1.1",
+      title: "See all Debates related to target 1.1",
+      href: "/debates?advanced_search#{CGI.escape("[target]")}=1.1"
+    expect(page).to have_link "target 3.2",
+      title: "See all Debates related to target 3.2",
+      href: "/debates?advanced_search#{CGI.escape("[target]")}=3.2"
+    expect(page).to have_link "target 3.2.1",
+      title: "See all Debates related to target 3.2.1",
+      href: "/debates?advanced_search#{CGI.escape("[target]")}=3.2.1"
+  end
+
+  it "orders targets by code" do
+    render_inline component
+
+    expect(page.first("a")[:title]).to end_with "target 1.1"
+  end
+
+  it "renders a link for more targets when out of limit" do
+    component = SDG::Targets::TagListComponent.new(debate, limit: 1)
+
+    render_inline component
+
+    expect(page).to have_selector "a", count: 2
+    expect(page).to have_link "target 1.1"
+    expect(page).to have_link "2+",
+      title: "2 more targets",
+      href: "/debates/#{debate.to_param}"
+  end
+end