Merge pull request #4331 from consul/sdg_view_targets

Add targets to SDG view

app/assets/stylesheets/sdg/goals/targets.scss

@@ -0,0 +1,18 @@
+.sdg-goal-show .targets {
+  dt,
+  dd {
+    display: inline;
+  }
+
+  dd {
+
+    &::after {
+      content: "";
+      display: block;
+    }
+
+    &:not(:last-child)::after {
+      margin-bottom: $line-height / 2;
+    }
+  }
+}

app/components/sdg/goals/show_component.html.erb

@@ -34,4 +34,6 @@
       <%= render ::Widget::Feeds::FeedComponent.new(processes_feed) %>
     </div>
   <% end %>
+
+  <%= render SDG::Goals::TargetsComponent.new(goal) %>
 </div>

app/components/sdg/goals/targets_component.html.erb

@@ -0,0 +1,28 @@
+<section class="targets">
+  <ul class="tabs" id="target_tabs" data-deep-link="true" data-tabs>
+    <% [global_targets, local_targets].each do |targets| %>
+      <li class="tabs-title <%= active(targets) %>">
+        <%= link_to title(targets), "#tab_#{type(targets)}_targets" %>
+      </li>
+    <% end %>
+  </ul>
+
+  <div class="tabs-content" data-tabs-content="target_tabs">
+    <% [global_targets, local_targets].each do |targets| %>
+      <div class="tabs-panel <%= active(targets) %>" id="tab_<%= type(targets) %>_targets">
+        <% if targets.blank? %>
+          <div class="callout primary">
+            <%= t("sdg.goals.show.targets.no_local_targets") %>
+          </div>
+        <% else %>
+          <dl>
+            <% targets.sort.each do |target| %>
+              <dt><%= target.code %><dt>
+              <dd><%= target.title %><dd>
+            <% end %>
+          </dl>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</section>

app/components/sdg/goals/targets_component.rb

@@ -0,0 +1,37 @@
+class SDG::Goals::TargetsComponent < ApplicationComponent
+  attr_reader :goal
+
+  def initialize(goal)
+    @goal = goal
+  end
+
+  def render?
+    feature?("sdg")
+  end
+
+  private
+
+    def global_targets
+      goal.targets
+    end
+
+    def local_targets
+      goal.local_targets
+    end
+
+    def type(targets)
+      if targets.model.name == "SDG::Target"
+        "global"
+      else
+        "local"
+      end
+    end
+
+    def active(targets)
+      "is-active" if targets.model.name == "SDG::Target"
+    end
+
+    def title(targets)
+      targets.model.model_name.human(count: :other).upcase_first
+    end
+end

config/locales/en/sdg.yml

@@ -444,6 +444,8 @@ en:
       show:
         read_more: "Read more about %{goal}"
         read_less: "Read less about %{goal}"
+        targets:
+          no_local_targets: This goal has no local targets
       title: "Sustainable Development Goals"
       filter:
         heading: "Filters by SDG"

config/locales/es/sdg.yml

@@ -444,6 +444,8 @@ es:
       show:
         read_more: "Leer más sobre %{goal}"
         read_less: "Leer menos sobre %{goal}"
+        targets:
+          no_local_targets: Este objetivo no tiene metas localizadas
       title: "Objetivos de Desarrollo Sostenible"
       filter:
         heading: "Filtros por ODS"

spec/components/sdg/goals/targets_component_spec.rb

@@ -0,0 +1,39 @@
+require "rails_helper"
+
+describe SDG::Goals::TargetsComponent, type: :component do
+  let(:goal) { SDG::Goal[1] }
+  let(:component) { SDG::Goals::TargetsComponent.new(goal) }
+
+  before do
+    Setting["feature.sdg"] = 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 ".targets"
+    expect(page).not_to have_css "#target_tabs"
+    expect(page).not_to have_css ".tabs-content"
+  end
+
+  it "renders tabs panel" do
+    render_inline component
+
+    expect(page).to have_css ".targets"
+    expect(page).to have_css "#target_tabs"
+    expect(page).to have_css "li", count: 2
+    expect(page).to have_content "Targets"
+    expect(page).to have_content "Local targets"
+    expect(page).to have_css ".tabs-content"
+    expect(page).to have_css "#tab_global_targets"
+  end
+
+  it "renders code and title for each target" do
+    render_inline component
+
+    expect(page).to have_content "1.1"
+    expect(page).to have_content "By 2030, eradicate extreme poverty for all people everywhere"
+  end
+end

spec/system/sdg/goals_spec.rb

@@ -117,5 +117,27 @@ describe "SDG Goals", :js do
       expect(page).to have_css("div.read-more a", text: "Read more about Life on Land", visible: :hidden)
       expect(page).to have_css("div.read-more a", text: "Read less about Life on Land")
     end
+
+    scenario "has tab target section" do
+      create(:sdg_local_target, code: "15.1.1", title: "SDG local target sample text")
+      visit sdg_goal_path(15)
+
+      within "#target_tabs" do
+        expect(page).to have_content "Targets"
+        expect(page).to have_content "Local targets"
+      end
+
+      within ".tabs-content" do
+        expect(page).to have_content "15.1 By 2020, ensure the conservation, restoration and sustainable"
+        expect(page).not_to have_content "15.1.1 SDG local target sample text"
+      end
+
+      click_link "Local targets"
+
+      within ".tabs-content" do
+        expect(page).to have_content "15.1.1 SDG local target sample text"
+        expect(page).not_to have_content "15.1 By 2020, ensure the conservation, restoration and sustainable"
+      end
+    end
   end
 end