Refactor. Create index scope inside imageable shared examples to check index action of any imageable model. Add image to proposals index.

app/assets/stylesheets/participation.scss

@@ -653,15 +653,16 @@
   }
 }
 
-.budget-investments-list {
+.budget-investments-list .budget-investment,
-  .budget-investment {
+.proposals-list .proposal {
+
   .no-image {
     background: $brand;
   }
 }
-}
 
-.budget-investments-list .budget-investment {
+.budget-investments-list .budget-investment,
+.proposals-list .proposal {
 
   @include breakpoint(small) {
     .no-image {

app/helpers/images_helper.rb

@@ -1,5 +1,24 @@
 module ImagesHelper
 
+  def image_absolute_url(image, version)
+    return "" unless image
+    if Paperclip::Attachment.default_options[:storage] == :filesystem
+      URI(request.url) + image.attachment.url(version)
+    else
+      investment.image_url(version)
+    end
+  end
+
+  def image_note(image)
+    t "images.new.#{image.imageable.class.name.parameterize.underscore}.note",
+      title: image.imageable.title
+  end
+
+  def image_first_recommendation(image)
+    t "images.#{image.imageable.class.name.parameterize.underscore}.recommendation_one_html",
+      title: image.imageable.title
+  end
+
   def image_attachment_file_name(image)
     image.attachment_file_name
   end

app/helpers/investments_helper.rb

@@ -1,23 +0,0 @@
-module InvestmentsHelper
-
-  def investment_image_full_url(investment, version)
-    URI(request.url) + investment.image_url(version)
-  end
-
-  def investment_image_advice_note(investment)
-    if investment.image.present?
-      t("budgets.investments.edit_image.edit_note", title: investment.title)
-    else
-      t("budgets.investments.edit_image.add_note", title: investment.title)
-    end
-  end
-
-  def investment_image_button_text(investment)
-    investment.image.present? ? t("budgets.investments.show.edit_image") : t("budgets.investments.show.add_image")
-  end
-
-  def errors_on_image(investment)
-    investment.errors[:attachment].join(', ') if investment.errors.key?(:attachment)
-  end
-
-end

app/helpers/proposals_helper.rb

@@ -36,6 +36,10 @@ module ProposalsHelper
     can?(:create, document) && proposal.documents.size < Proposal.max_documents_allowed
   end
 
+  def can_destroy_image?(image, proposal)
+    proposal.image.present? && can?(:destroy, image)
+  end
+
   def author_of_proposal?(proposal)
     author_of?(proposal, current_user)
   end

app/views/budgets/investments/_investment_show.html.erb

@@ -132,7 +132,7 @@
       <%= render partial: 'shared/social_share', locals: {
         share_title: t("budgets.investments.show.share"),
         title: investment.title,
-        image_url: investment.image.present? ? investment_image_full_url(investment, :thumb) : '',
+        image_url: image_absolute_url(investment.image, :thumb),
         url: budget_investment_url(budget_id: investment.budget_id, id: investment.id)
       } %>
 

app/views/images/new.html.erb

@@ -3,6 +3,7 @@
   <div class="small-12 medium-9 column">
     <%= back_link_to params[:from] %>
     <h1><%= t("images.new.title") %></h1>
+    <p><%= image_note(@image) %></p>
     <%= render "form", form_url: images_url %>
   </div>
 
@@ -11,7 +12,7 @@
     <h2><%= t("images.recommendations_title") %></h2>
     <ul class="recommendations">
       <li>
-        <%= t "images.recommendation_one_html" %>
+        <%= image_first_recommendation(@image) %>
       </li>
       <li>
         <%= t "images.recommendation_two_html",

app/views/proposals/_proposal.html.erb

@@ -5,7 +5,15 @@
     <div class="icon-successful"></div>
     <div class="row">
 
-      <div class="small-12 medium-9 column">
+      <div class="small-12 medium-3 large-2 column">
+        <% if proposal.image.present? %>
+          <%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
+        <% else %>
+          <div class="no-image"></div>
+        <% end %>
+      </div>
+
+      <div class="small-12 medium-6 large-7 column">
         <div class="proposal-content">
           <% cache [locale_and_user_status(proposal), 'index', proposal, proposal.author] do %>
             <h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>

app/views/proposals/show.html.erb

@@ -109,7 +109,7 @@
 
       <aside class="small-12 medium-3 column">
         <% if can_create_document?(@document, @proposal) || author_of_proposal?(@proposal) || current_editable?(@proposal) ||
-              can?(:create, @image) || (@proposal.image.present? && can?(:destroy, @proposal.image)) %>
+              can?(:create, @image) || can_destroy_image?(@proposal.image, @proposal) %>
           <div class="sidebar-divider"></div>
           <h2><%= t("proposals.show.author") %></h2>
           <div class="show-actions-menu">
@@ -143,7 +143,7 @@
               <% end %>
             <% end %>
 
-            <% if @proposal.image.present? && can?(:destroy, @proposal.image) %>
+            <% if can_destroy_image?(@proposal.image, @proposal) %>
               <%= link_to image_path(@proposal.image, from: request.url),
                           method: :delete,
                           class: 'button hollow float-right',

config/locales/en/budgets.yml

@@ -55,7 +55,6 @@ en:
         tags_instructions: "Tag this proposal. You can choose from proposed categories or add your own"
         tags_label: Tags
         tags_placeholder: "Enter the tags you would like to use, separated by commas (',')"
-        image_label: Upload image
       index:
         title: Participatory budgeting
         unfeasible: Unfeasible investment projects
@@ -109,22 +108,6 @@ en:
         milestones_tab: Milestones
         no_milestones: Don't have defined milestones
         milestone_publish_date: "Published %{publish_date}"
-        edit_image: Edit image
-        add_image: Add image
-      edit_image:
-        title: Change your project image
-        add_note: 'Add an image to your investment project: %{title}'
-        edit_note: 'You are changing investment project image of: %{title}'
-        form:
-          image_label: Upload image
-          image_title: Image title
-          submit_button: Save image
-          remove_button: Remove image
-          remove_alert: Are you sure you want to remove the image?
-        recommendation_title: Image recomendations
-        recommendation_one: Projects that have images attract more attention than those that do not. If you have a picture suitable for your project upload.
-        recommendation_two: Give a descriptive title to the image.
-        invalid_dimmensions: 'Image dimensions are too small. For a good quality please upload a larger image. Minimum width: 475px, minimum height: 475px.'
       wrong_price_format: Only integer numbers
       investment:
         add: Vote

config/locales/en/images.yml

@@ -2,6 +2,8 @@ en:
   images:
     upload_image: Upload image
     remove_image: Remove image
+    remove_alert: Are you sure you want to remove the image?
+
     form:
       title: Descriptive image
       attachment_label: Choose image
@@ -9,12 +11,21 @@ en:
       delete_button: Remove image
       note: "You can upload one image of following content types: %{accepted_content_types}, up to %{max_file_size} MB."
       add_new_image: Add image
+
     new:
       title: Upload image
+      budget_investment:
+        note: 'Add an image to your investment project: %{title}'
+      proposal:
+        note: 'Add an image to your proposal: %{title}'
+
     recommendations_title: File upload tips
-    recommendation_one_html: You can upload only one image. Proposals with image attract more attention of the users.
+    proposal:
-    recommendation_two_html: You can upload <strong>%{accepted_content_types}</strong> image.
+      recommendation_one_html: Proposals with image attract the attention of users more than those that do not have image. This image will be displayed in the list of proposals and on the proposal page.
-    recommendation_three_html: You can upload one image up to <strong>%{max_file_size} MB</strong>.
+    budget_investment:
+      recommendation_one_html: Investment project with image attract the attention of users more than those that do not have image. This image will be displayed in the list of project investments and on the project investments page.
+    recommendation_two_html: "You can upload images in following formats: <strong>%{accepted_content_types}</strong>."
+    recommendation_three_html: You can upload one image up to <strong>1 MB</strong>.
 
     actions:
       create:
@@ -24,9 +35,6 @@ en:
         notice: Image was deleted successfully.
         alert: Cannot destroy image.
         confirm: Are you sure you want to delete the image? This action cannot be undone!
-    buttons:
-      download_image: Dowload file
-      destroy_image: Destroy
     errors:
       messages:
         in_between: must be in between %{min} and %{max}

config/locales/en/responders.yml

@@ -25,10 +25,6 @@ en:
         spending_proposal: "Investment project updated succesfully."
         budget_investment: "Investment project updated succesfully."
         topic: "Topic updated successfully."
-      update_image:
-        budget_investment: "Investment project image updated succesfully."
-      remove_image:
-        budget_investment: "Investment project image removed succesfully."
       destroy:
         spending_proposal: "Spending proposal deleted succesfully."
         budget_investment: "Investment project deleted succesfully."

config/locales/es/budgets.yml

@@ -55,7 +55,6 @@ es:
         tags_label: Temas
         tag_category_label: "Categorías"
         tags_placeholder: "Escribe las etiquetas que desees separadas por una coma (',')"
-        image_label: Subir una imagen
       index:
         title: Presupuestos participativos
         unfeasible: Propuestas de inversión no viables
@@ -109,22 +108,6 @@ es:
         milestones_tab: Seguimiento
         no_milestones: No hay hitos definidos
         milestone_publish_date: "Publicado el %{publish_date}"
-        edit_image: Editar imagen
-        add_image: Añadir imagen
-      edit_image:
-        title: Cambia la imagen de tu proyecto
-        add_note: 'Añade una imagen al proyecto de inversión: %{title}'
-        edit_note: 'Estas cambiando la imagen del proyecto de inversión: %{title}'
-        form:
-          image_label: Subir una imagen
-          image_title: 'Título de la imagen'
-          submit_button: Guardar imagen
-          remove_button: Eliminar imagen
-          remove_alert: ¿Está seguro que desea eliminar la imagen del proyecto?
-        recommendation_title: Recomendaciones para cambiar la imagen
-        recommendation_one: Los proyectos que tienen imágenes llaman más la atención que las que no la tienen. Si tienes una imagen adecuada para tu proyecto súbela.
-        recommendation_two: Dale un título descriptivo a la imagen.
-        invalid_dimmensions: 'Las dimensiones de la imagen son demasiado pequeñas. Para una buena calidad de imagen suba una más grande. Ancho mínimo: 475px, altura mínima: 475px.'
       wrong_price_format: Solo puede incluir caracteres numéricos
       investment:
         add: Votar

config/locales/es/images.yml

@@ -2,6 +2,8 @@ es:
   images:
     upload_image: Subir imagen
     remove_image: Eliminar imagen
+    remove_alert: ¿Está seguro que desea eliminar la imagen del proyecto?
+
     form:
       title: Imagen descriptiva
       attachment_label: Selecciona una imagen
@@ -9,12 +11,21 @@ es:
       delete_button: Eliminar imagen
       note: "Puedes subir una imagen en los formatos: %{accepted_content_types}, y de hasta %{max_file_size} MB por archivo."
       add_new_image: Añadir imagen
+
     new:
       title: Subir una imagen
+      budget_investment:
+        note: 'Añade un título a la propuesta de inversión: %{title}.'
+      proposal:
+        note: 'Añade un título a la propuesta: %{title}.'
+
     recommendations_title: Consejos para subir imágenes
-    recommendation_one_html: Puedes subir una imagen descriptiva, esta imagen se mostrará en los listados y ayudará a que tu propuesta llame más la atención de los usuarios.
+    proposal:
+      recommendation_one_html: Las propuestas con imagen llaman más la atención de los usuarios que las que no tienen imagen. Esta imagen se mostrará en el listado de propuestas y en la página de la propuesta.
+    budget_investment:
+      recommendation_one_html: Las proyectos de inversión con imagen llaman más la atención de los usuarios que las que no tienen imagen. Esta imagen se mostrará en el listado de proyectos de inversión y en la página del proyecto de inversión.
     recommendation_two_html: "Sólo puedes subir <strong>imágenes en los formatos: %{accepted_content_types}</strong>."
-    recommendation_three_html: Puedes subir una imagen de hasta <strong>%{max_file_size} MB</strong>
+    recommendation_three_html: Puedes subir una imagen de hasta <strong>1 MB</strong>.
 
     actions:
       create:
@@ -24,9 +35,6 @@ es:
         notice: "La imagen se ha eliminado correctamente."
         alert: "La imagen no se ha podido eliminar."
         confirm: "¿Está seguro de que desea eliminar la imagen? Esta acción no se puede deshacer!"
-    buttons:
-      download_image: Descargar imagen
-      destroy_image: Eliminar
     errors:
       messages:
         in_between: debe estar entre %{min} y %{max}

config/locales/es/responders.yml

@@ -25,10 +25,6 @@ es:
         spending_proposal: "Propuesta de inversión actualizada correctamente."
         budget_investment: "Propuesta de inversión actualizada correctamente"
         topic: "Tema actualizado correctamente."
-      update_image:
-        budget_investment: "La imagen de la propuesta de inversión se ha actualizado correctamente."
-      remove_image:
-        budget_investment: "La imagen de la propuesta de inversión se ha eliminado correctamente."
       destroy:
         spending_proposal: "Propuesta de inversión eliminada."
         budget_investment: "Propuesta de inversión eliminada."

spec/features/budgets/investments_spec.rb

@@ -464,7 +464,7 @@ feature 'Budget Investments' do
 
   it_behaves_like "followable", "budget_investment", "budget_investment_path", { "budget_id": "budget_id", "id": "id" }
 
-  it_behaves_like "imageable", "budget_investment", "budget_investment_path", { "budget_id": "budget_id", "id": "id" }
+  it_behaves_like "imageable", "budget_investment", "budget_investment_path", { "budget_id": "budget_id", "id": "id" }, "budget_investments_path", { "budget_id": "budget_id" }
 
   it_behaves_like "nested imageable",
                   "budget_investment",

spec/features/proposals_spec.rb

@@ -1274,7 +1274,7 @@ feature 'Proposals' do
 
   it_behaves_like "followable", "proposal", "proposal_path", { "id": "id" }
 
-  it_behaves_like "imageable", "proposal", "proposal_path", { "id": "id" }
+  it_behaves_like "imageable", "proposal", "proposal_path", { "id": "id" }, "proposals_path", {}
 
   it_behaves_like "nested imageable",
                   "proposal",

spec/shared/features/imageable.rb

@@ -1,11 +1,12 @@
-shared_examples "imageable" do |imageable_factory_name, imageable_path, imageable_path_arguments|
+shared_examples "imageable" do |imageable_factory_name, imageable_path, imageable_path_arguments, imageables_path, imageables_path_arguments|
   include ActionView::Helpers
   include ImagesHelper
   include ImageablesHelper
 
   let!(:administrator)          { create(:user) }
   let!(:user)                   { create(:user) }
-  let!(:arguments)           { {} }
+  let!(:imageable_arguments)    { {} }
+  let!(:imageables_arguments)   { {} }
   let!(:imageable)              { create(imageable_factory_name, author: user) }
   let!(:imageable_dom_name)     { imageable_factory_name.parameterize }
 
@@ -13,8 +14,36 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     create(:administrator, user: administrator)
 
     imageable_path_arguments.each do |argument_name, path_to_value|
-      arguments.merge!("#{argument_name}": imageable.send(path_to_value))
+      imageable_arguments.merge!("#{argument_name}": imageable.send(path_to_value))
     end
+
+    imageables_path_arguments.each do |argument_name, path_to_value|
+      imageables_arguments.merge!("#{argument_name}": imageable.send(path_to_value))
+    end
+  end
+
+  context "Index" do
+
+    let!(:featured)                 { create_list(imageable_factory_name, 3) }
+    let!(:imageable_with_image)     { create(imageable_factory_name) }
+    let!(:image)                    { create(:image, imageable: imageable_with_image) }
+    let!(:imageable_without_image)  { create(imageable_factory_name) }
+
+    scenario "should show default imageable image not defined" do
+      visit send(imageables_path, imageables_arguments)
+
+      within "##{dom_id(imageable_without_image)}" do
+        expect(page).to have_css("div.no-image")
+      end
+    end
+
+    scenario "should show imageable image when exists" do
+      image = create(:image, imageable: imageable)
+      visit send(imageables_path, imageables_arguments)
+
+      expect(page).to have_css("img[alt='#{image.title}']")
+    end
+
   end
 
   context "Show" do
@@ -22,7 +51,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Show descriptive image when exists", :js do
       image = create(:image, imageable: imageable)
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
 
       expect(page).to have_css("img[alt='#{image.title}']")
     end
@@ -30,13 +59,13 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Show image title when image exists" do
       image = create(:image, imageable: imageable)
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
 
       expect(page).to have_content image.title
     end
 
     scenario "Should not display upload image button when there is no logged user" do
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
 
       within "##{dom_id(imageable)}" do
         expect(page).not_to have_link("Upload image")
@@ -45,7 +74,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
 
     scenario "Should not display upload image button when maximum number of images reached " do
       create_list(:image, 3, imageable: imageable)
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
 
       within "##{dom_id(imageable)}" do
         expect(page).not_to have_link("Upload image")
@@ -55,7 +84,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should display upload image button when user is logged in and is imageable owner" do
       login_as(user)
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
 
       within "##{dom_id(imageable)}" do
         expect(page).to have_link("Upload image")
@@ -65,7 +94,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should display upload image button when admin is logged in" do
       login_as(administrator)
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
 
       within "##{dom_id(imageable)}" do
         expect(page).to have_link("Upload image")
@@ -75,7 +104,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should navigate to new image page when click un upload button" do
       login_as(user)
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
       click_link  "Upload image"
 
       expect(page).to have_selector("h1", text: "Upload image")
@@ -99,6 +128,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
                            imageable_id: imageable.id)
 
       expect(page).to have_content("You do not have permission to carry out the action 'new' on image.")
+      expect(page).not_to have_content(image_first_recommendation(Image.new(imageable: imageable)))
     end
 
     scenario "Should be able to imageable author" do
@@ -203,11 +233,11 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
       login_as imageable.author
       visit new_image_path(imageable_type: imageable.class.name,
                            imageable_id: imageable.id,
-                              from: send(imageable_path, arguments))
+                           from: send(imageable_path, imageable_arguments))
 
-      expect(page).to have_content "You can upload only one image. Proposals with image attract more attention of the users."
+      expect(page).to have_content(image_first_recommendation(Image.new(imageable: imageable)))
-      expect(page).to have_content "You can upload #{imageable_humanized_accepted_content_types} image."
+      expect(page).to have_content "You can upload images in following formats:  #{imageable_humanized_accepted_content_types}."
-      expect(page).to have_content "You can upload one image up to #{imageable_max_file_size} MB."
+      expect(page).to have_content "You can upload one image up to 1 MB."
     end
 
   end
@@ -230,7 +260,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
 
       visit new_image_path(imageable_type: imageable.class.name,
                            imageable_id: imageable.id,
-                              from: send(imageable_path, arguments))
+                           from: send(imageable_path, imageable_arguments))
       attach_file :image_attachment, "spec/fixtures/files/empty.pdf"
       sleep 1
       click_on "Upload image"
@@ -243,7 +273,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
 
       visit new_image_path(imageable_type: imageable.class.name,
                            imageable_id: imageable.id,
-                              from: send(imageable_path, arguments))
+                           from: send(imageable_path, imageable_arguments))
       fill_in :image_title, with: "Image title"
       attach_file :image_attachment, "spec/fixtures/files/clippy.jpg"
       sleep 1
@@ -257,7 +287,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
 
       visit new_image_path(imageable_type: imageable.class.name,
                            imageable_id: imageable.id,
-                              from: send(imageable_path, arguments))
+                           from: send(imageable_path, imageable_arguments))
       fill_in :image_title, with: "Image title"
       attach_file :image_attachment, "spec/fixtures/files/clippy.jpg"
       sleep 1
@@ -273,7 +303,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
 
       visit new_image_path(imageable_type: imageable.class.name,
                            imageable_id: imageable.id,
-                              from: send(imageable_path, arguments))
+                           from: send(imageable_path, imageable_arguments))
       fill_in :image_title, with: "Image title"
       attach_file :image_attachment, "spec/fixtures/files/clippy.jpg"
       sleep 1
@@ -291,7 +321,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should show success notice after successfull deletion by an admin" do
       login_as administrator
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
       click_on "Remove image"
 
       expect(page).to have_content "Image was deleted successfully."
@@ -300,7 +330,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should show success notice after successfull deletion" do
       login_as imageable.author
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
       click_on "Remove image"
 
       expect(page).to have_content "Image was deleted successfully."
@@ -309,7 +339,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should not show image after successful deletion" do
       login_as imageable.author
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
       click_on "Remove image"
 
       expect(page).not_to have_selector "figure img"
@@ -318,7 +348,7 @@ shared_examples "imageable" do |imageable_factory_name, imageable_path, imageabl
     scenario "Should redirect to imageable path after successful deletion" do
       login_as imageable.author
 
-      visit send(imageable_path, arguments)
+      visit send(imageable_path, imageable_arguments)
       click_on "Remove image"
 
       within "##{dom_id(imageable)}" do