Merge pull request #13 from AjuntamentdeBarcelona/fix/budget-modal-de…

…tail Fix modal pop up when project exceeds budget amount
AjuntamentdeBarcelona · Jun 3, 2021 · b91efac · b91efac
2 parents 824f3c4 + 88a79e0
commit b91efac
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 75 deletions.
diff --git a/decidim-budgets/app/assets/javascripts/decidim/budgets/projects.js.es6 b/decidim-budgets/app/assets/javascripts/decidim/budgets/projects.js.es6
@@ -6,6 +6,7 @@ $(() => {
   const $budgetSummaryTotal = $(".budget-summary__total");
   const $budgetExceedModal = $("#budget-excess");
   const $budgetSummary = $(".budget-summary__progressbox");
+  const $voteButton = $(".budget-vote-button");
   const totalAllocation = parseInt($budgetSummaryTotal.attr("data-total-allocation"), 10);
 
   const cancelEvent = (event) => {
@@ -24,6 +25,10 @@ $(() => {
     return false;
   }
 
+  $voteButton.on("click", "span", (event) => {
+    $(".budget-list__action").click();
+  });
+
   $projects.on("click", ".budget-list__action", (event) => {
     const currentAllocation = parseInt($budgetSummary.attr("data-current-allocation"), 10);
     const $currentTarget = $(event.currentTarget);

diff --git a/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-vote-button.scss b/decidim-budgets/app/assets/stylesheets/decidim/budgets/budget/_budget-vote-button.scss
@@ -4,30 +4,17 @@
   justify-content: space-between;
   align-items: center;
 
-  .icon-wrapper {
-    @extend .budget-list__action;
-  }
-
-  &.added {
-    @extend .budget-list__data--added;
-    color: $body-font-color;
-
-    .icon-wrapper {
-      background: var(--success);
-      border-color: $body-font-color;
-      color: $body-font-color;
-    }
-  }
-
-  &.hollow {
-    .icon-wrapper {
-      border: $button-hollow-border-width solid var(--primary);
-      color: var(--primary);
+  &:hover,
+  &:focus {
+    &.added {
+      .budget-list__action {
+        background: var(--primary);
+        border-color: white;
+        color: white;
+      }
     }
-
-    &:hover,
-    &:focus {
-      .icon-wrapper {
+    &:not(.added) {
+      .budget-list__action {
         border-color: white;
         color: white;
       }

diff --git a/decidim-budgets/app/cells/decidim/budgets/project_list_item/project_data.erb b/decidim-budgets/app/cells/decidim/budgets/project_list_item/project_data.erb
@@ -14,6 +14,6 @@
       <%= cell("decidim/budgets/project_voted_hint", model, class: "display-block margin-top-1") if current_order_checked_out? && resource_added? %>
     </span>
 
-    <%= render :project_data_vote_button if !current_order_checked_out? && voting_open? %>
+    <%= cell("decidim/budgets/project_vote_button", model) if !current_order_checked_out? && voting_open? %>
   <% end %>
 </div>
diff --git a/...ct_list_item/project_data_vote_button.erb → ...idim/budgets/project_vote_button/show.erb b/...ct_list_item/project_data_vote_button.erb → ...idim/budgets/project_vote_button/show.erb
diff --git a/decidim-budgets/app/cells/decidim/budgets/project_vote_button_cell.rb b/decidim-budgets/app/cells/decidim/budgets/project_vote_button_cell.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Budgets
+    # This cell renders an authorized_action button
+    # to vote a given instance of a Project in a budget list
+    class ProjectVoteButtonCell < ProjectListItemCell
+    end
+  end
+end
diff --git a/decidim-budgets/app/views/decidim/budgets/projects/_project_budget_button.html.erb b/decidim-budgets/app/views/decidim/budgets/projects/_project_budget_button.html.erb
@@ -1,54 +1,15 @@
-<div id="project-<%= project.id %>-budget-button">
-  <% if voted_for?(project) %>
-    <%= action_authorized_button_to(
-          "vote",
-          budget_order_line_item_path(budget, project_id: project),
-          method: :delete,
-          remote: true,
-          data: {
-            disable: true,
-            budget: project.budget_amount,
-            "redirect-url": budget_project_path(budget, project)
-          },
-          disabled: !can_have_order? || current_order_checked_out?,
-          class: "button expanded button--sc budget-vote-button added",
-          "aria-label": t(".added_descriptive", resource_name: translated_attribute(project.title))
-        ) do %>
-
-      <span>
-        <%= t(".added") %>
-      </span>
-      <span class="icon-wrapper">
-        <%= icon "x", class: "icon--small", role: "img" %>
-      </span>
-    <% end %>
-  <% elsif current_user.present? %>
-    <%= action_authorized_button_to(
-          "vote",
-          budget_order_line_item_path(budget, project_id: project),
-          method: :post,
-          remote: true,
-          data: {
-            disable: true,
-            budget: project.budget_amount,
-            add: true,
-            "redirect-url": budget_project_path(budget, project)
-          },
-          disabled: !can_have_order? || current_order_checked_out?,
-          class: "button expanded button--sc budget-vote-button hollow",
-          "aria-label": t(".add_descriptive", resource_name: translated_attribute(project.title))
-        ) do %>
-
-      <span>
-        <%= t(".add") %>
-      </span>
-      <span class="icon-wrapper">
-        <%= icon "check", class: "icon--small", role: "img" %>
-      </span>
-    <% end %>
-  <% else %>
+<% if current_user.blank? %>
+  <div id="project-<%= project.id %>-budget-button">
     <button class="button expanded button--sc" data-toggle="loginModal">
       <%= t(".add") %>
     </button>
-  <% end %>
-</div>
+  </div> 
+<% else %>
+  <div id="project-<%= project.id %>-budget-button" class="<%= "added" if voted_for?(project) %> button expanded button--sc budget-vote-button budget-list__data">
+    <span>
+      <%= t(voted_for?(project) ? ".added" : ".add") %>
+    </span>
+
+    <%= cell("decidim/budgets/project_vote_button", project) %>
+  </div>
+<% end %>