From 46e80bf430e3751d90eaf3e27778bbbb17ed5860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 17 Feb 2021 15:00:34 +0100
Subject: [PATCH] Extract budget phases to a component

---
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/budgets/phases.scss    | 56 ++++++++++++++++++
 app/assets/stylesheets/participation.scss     | 57 -------------------
 .../budgets/phases_component.html.erb}        |  6 +-
 app/components/budgets/phases_component.rb    |  8 +++
 app/views/budgets/index.html.erb              |  2 +-
 6 files changed, 69 insertions(+), 61 deletions(-)
 create mode 100644 app/assets/stylesheets/budgets/phases.scss
 rename app/{views/budgets/_phases.html.erb => components/budgets/phases_component.html.erb} (67%)
 create mode 100644 app/components/budgets/phases_component.rb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 149facb82..6ce3e2ede 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -32,6 +32,7 @@
 @import "sticky_overrides";
 @import "tags";
 @import "admin/**/*";
+@import "budgets/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
new file mode 100644
index 000000000..82cd6c304
--- /dev/null
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -0,0 +1,56 @@
+.budget-phases {
+  border-left: 3px solid $budget;
+  margin-left: $line-height / 2;
+  padding: $line-height $line-height / 2;
+
+  h3,
+  span,
+  p {
+    padding: 0 $line-height / 4;
+  }
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  span {
+    color: $text-medium;
+    display: block;
+    font-size: $small-font-size;
+    margin-bottom: $line-height / 2;
+  }
+
+  .phase {
+    position: relative;
+
+    &:not(:first-child) {
+      margin-top: $line-height * 1.5;
+    }
+
+    &::before {
+      background-color: #fff;
+      border: 4px solid $budget;
+      border-radius: 100%;
+      content: "";
+      height: 16px;
+      left: -22px;
+      position: absolute;
+      top: 6px;
+      width: 16px;
+      z-index: 99;
+    }
+
+    &.is-active {
+
+      h3 {
+        background: $budget;
+        color: #fff;
+        display: inline-block;
+      }
+
+      &::before {
+        background-color: $budget;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 4a3669547..7e60e6ada 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1467,63 +1467,6 @@
   }
 }
 
-.budget-timeline {
-  border-left: 3px solid $budget;
-  margin-left: $line-height / 2;
-  padding: $line-height $line-height / 2;
-
-  h3,
-  span,
-  p {
-    padding: 0 $line-height / 4;
-  }
-
-  h3 {
-    margin-bottom: 0;
-  }
-
-  span {
-    color: $text-medium;
-    display: block;
-    font-size: $small-font-size;
-    margin-bottom: $line-height / 2;
-  }
-
-  .phase {
-    position: relative;
-
-    &:not(:first-child) {
-      margin-top: $line-height * 1.5;
-    }
-
-    &::before {
-      background-color: #fff;
-      border: 4px solid $budget;
-      border-radius: 100%;
-      content: "";
-      height: 16px;
-      left: -22px;
-      position: absolute;
-      top: 6px;
-      width: 16px;
-      z-index: 99;
-    }
-
-    &.is-active {
-
-      h3 {
-        background: $budget;
-        color: #fff;
-        display: inline-block;
-      }
-
-      &::before {
-        background-color: $budget;
-      }
-    }
-  }
-}
-
 .budgets-stats {
 
   .header {
diff --git a/app/views/budgets/_phases.html.erb b/app/components/budgets/phases_component.html.erb
similarity index 67%
rename from app/views/budgets/_phases.html.erb
rename to app/components/budgets/phases_component.html.erb
index 9a05b8ae7..6f2d0596a 100644
--- a/app/views/budgets/_phases.html.erb
+++ b/app/components/budgets/phases_component.html.erb
@@ -1,6 +1,6 @@
-<ul class="no-bullet budget-timeline">
-  <% current_budget.published_phases.each do |phase| %>
-    <li class="phase <%= "is-active" if phase == current_budget.current_phase %>">
+<ul class="no-bullet budget-phases">
+  <% budget.published_phases.each do |phase| %>
+    <li class="phase <%= "is-active" if phase == budget.current_phase %>">
       <h3><%= t("budgets.phase.#{phase.kind}") %></h3>
       <span>
         <%= l(phase.starts_at.to_date, format: :long) if phase.starts_at.present? %>
diff --git a/app/components/budgets/phases_component.rb b/app/components/budgets/phases_component.rb
new file mode 100644
index 000000000..6ecb12fc8
--- /dev/null
+++ b/app/components/budgets/phases_component.rb
@@ -0,0 +1,8 @@
+class Budgets::PhasesComponent < ApplicationComponent
+  delegate :wysiwyg, :auto_link_already_sanitized_html, to: :helpers
+  attr_reader :budget
+
+  def initialize(budget)
+    @budget = budget
+  end
+end
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb
index 4121e817d..c5309b528 100644
--- a/app/views/budgets/index.html.erb
+++ b/app/views/budgets/index.html.erb
@@ -114,7 +114,7 @@
 
         <div id="all_phases">
           <h2><%= t("budgets.index.all_phases") %></h2>
-          <%= render "phases", budget: current_budget %>
+          <%= render Budgets::PhasesComponent.new(current_budget) %>
         </div>
       </div>
     </div>