Allow attaching an image to budget phases

Co-authored-by: decabeza <alberto@decabeza.es>

app/assets/stylesheets/admin/budget_phases/form.scss

@@ -22,4 +22,14 @@
       }
     }
   }
+
+  .images {
+    @include direct-uploads;
+  }
+
+  .button {
+    &.upload-image {
+      margin-bottom: $line-height / 2;
+    }
+  }
 }

app/assets/stylesheets/budgets/phases.scss

@@ -180,7 +180,16 @@
 
   .budget-phase {
     @include breakpoint(medium) {
-      width: 50%;
+      @include grid-row-nest;
+
+      > * {
+        @include grid-column;
+        width: 50%;
+      }
+
+      .budget-phase-image {
+        text-align: center;
+      }
     }
   }
 }

app/components/admin/budget_phases/form_component.html.erb

@@ -43,6 +43,13 @@
     </div>
   <% end %>
 
+  <% if feature?(:allow_images) %>
+    <div class="images small-12 column">
+      <%= render "images/nested_image", imageable: @phase, f: f %>
+      <p class="help-text"><%= t("admin.budget_phases.edit.image_description") %></p>
+    </div>
+  <% end %>
+
   <div class="small-12 column">
     <%= f.submit t("admin.budget_phases.edit.save_changes"), class: "button success" %>
   </div>

app/components/budgets/phases_component.html.erb

@@ -43,9 +43,17 @@
         </div>
 
         <div class="budget-phase">
-          <h3><%= phase.name %></h3>
+          <div class="budget-phase-content">
-          <p><%= start_date(phase) %> - <%= end_date(phase) %></p>
+            <h3><%= phase.name %></h3>
-          <%= auto_link_already_sanitized_html(wysiwyg(phase.description)) %>
+            <p><%= start_date(phase) %> - <%= end_date(phase) %></p>
+            <%= auto_link_already_sanitized_html(wysiwyg(phase.description)) %>
+          </div>
+
+          <% if phase.image.present? %>
+            <div class="budget-phase-image">
+              <%= image_tag phase.image.attachment.url(:large) %>
+            </div>
+          <% end %>
         </div>
       </div>
     <% end %>

app/controllers/concerns/admin/budget_phases_actions.rb

@@ -3,6 +3,7 @@ module Admin::BudgetPhasesActions
 
   included do
     include Translatable
+    include ImageAttributes
 
     before_action :load_budget
     before_action :load_phase, only: [:edit, :update]
@@ -30,7 +31,7 @@ module Admin::BudgetPhasesActions
     end
 
     def budget_phase_params
-      valid_attributes = [:starts_at, :ends_at, :enabled]
+      valid_attributes = [:starts_at, :ends_at, :enabled, image_attributes: image_attributes]
       params.require(:budget_phase).permit(*valid_attributes, translation_params(Budget::Phase))
     end
 end

app/models/budget/phase.rb

@@ -10,6 +10,7 @@ class Budget
     translates :description, touch: true
     include Globalizable
     include Sanitizable
+    include Imageable
 
     belongs_to :budget, touch: true
     belongs_to :next_phase, class_name: self.name, inverse_of: :prev_phase

config/locales/en/admin.yml

@@ -200,6 +200,7 @@ en:
         duration: "Phase's duration"
         duration_description: "The period of time this phase will be active."
         enabled_help_text: This phase will be public in the budget's phases timeline, as well as active for any other purpose
+        image_description: "If an image is uplodaded it will be displayed next to the description of this phase."
         name_help_text: "This is the title of the phase users will read on the header whenever this phase is active."
         save_changes: Save changes
       index:

config/locales/es/admin.yml

@@ -199,6 +199,7 @@ es:
         duration: "Duración de la fase"
         duration_description: "El período de tiempo que esta fase estará activa."
         enabled_help_text: Esta fase será pública en el calendario de fases del presupuesto y estará activa para otros propósitos
+        image_description: "Si se proporciona una imagen se mostrará junto a la descripción de esta fase."
         name_help_text: "Este es el título de la fase que los usuarios leerán en el encabezado cuando la fase esté activa."
         save_changes: Guardar cambios
         title: "Editar fase"

spec/system/admin/budget_phases_spec.rb

@@ -42,5 +42,18 @@ describe "Admin budget phases" do
         expect(page).not_to have_content "Accepting projects"
       end
     end
+
+    scenario "shows successful notice when updating the phase with a valid image" do
+      visit edit_admin_budget_budget_phase_path(budget, budget.current_phase)
+
+      imageable_attach_new_file(
+        "budget_phase_image",
+        Rails.root.join("spec/fixtures/files/clippy.jpg")
+      )
+
+      click_on "Save changes"
+
+      expect(page).to have_content "Changes saved"
+    end
   end
 end