From 8bb55f0d45bbe55608817bcb8c39ede4f2db2f52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 30 Aug 2021 23:12:13 +0200 Subject: [PATCH] Add link to investments from the admin budget page Since managing investments is a very common action, with this link administrators won't have to go back to the index page to manage investments; they can access it from either the budgets index page or the budget page. Since now the links we've got on the budget page are similar to the ones we've got in the index page table, we're styling them in a similar way. We're also fixing a small typo en the investments path; it works exactly the same way as it used to, but passing `budget` instead of `budget_id: budget.id` is shorter and more consistent with what we do in other places. --- .../admin/budgets/groups_and_headings.scss | 10 +- .../stylesheets/admin/budgets/links.scss | 42 +++---- .../stylesheets/admin/table_actions.scss | 103 +---------------- app/assets/stylesheets/mixins/icons.scss | 104 ++++++++++++++++++ .../admin/budgets/links_component.html.erb | 6 + .../budgets/table_actions_component.html.erb | 2 +- .../admin/budgets/links_component_spec.rb | 19 ++++ 7 files changed, 149 insertions(+), 137 deletions(-) diff --git a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss index 78a4e49c3..c6f7d5a86 100644 --- a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss +++ b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss @@ -1,5 +1,6 @@ .admin .groups-and-headings { $gap: rem-calc(map-get($grid-column-gutter, medium)); + @include admin-action-icons; > section + section { margin-top: $line-height * 1.5; @@ -51,15 +52,6 @@ @include icon-on-top; } - .edit-link { - @include has-fa-icon(edit, regular); - } - - .destroy-link { - @include has-fa-icon(trash-alt, regular); - color: darken($alert-color, 5%); - } - .new-link { @include hollow-button; flex-shrink: 0; diff --git a/app/assets/stylesheets/admin/budgets/links.scss b/app/assets/stylesheets/admin/budgets/links.scss index 28ba12b42..a107f700b 100644 --- a/app/assets/stylesheets/admin/budgets/links.scss +++ b/app/assets/stylesheets/admin/budgets/links.scss @@ -1,40 +1,32 @@ .admin .budgets-links { - $gap: $line-height; - @include flex-with-gap($gap); - align-items: baseline; + $vertical-gap: $line-height; + @include admin-action-icons; + @include flex-with-gap; + align-items: flex-start; flex-wrap: wrap; - margin-top: -$gap; + margin-top: -$vertical-gap; > * { - margin-top: $gap; + $min-width: $sdg-icon-min-width; + margin-top: $vertical-gap; + min-width: $min-width; + + @supports (max-width: max-content) { + flex-basis: $min-width; + flex-grow: 1; + max-width: max-content; + } } + * { margin-top: $line-height; } - .preview-link { - @include has-fa-icon(eye, regular); - @include hollow-button; - } - - .edit-link { - @include has-fa-icon(edit, regular); - @include hollow-button; + a { + @include icon-on-top; } .results-link { - @include hollow-button; - } - - .edit-link, - .preview-link, - .results-link { - margin-left: $gap; - margin-top: $gap; - - &::before { - margin-#{$global-right}: $font-icon-margin; - } + @include has-fa-icon(poll, solid); } } diff --git a/app/assets/stylesheets/admin/table_actions.scss b/app/assets/stylesheets/admin/table_actions.scss index 9fc120522..63f466746 100644 --- a/app/assets/stylesheets/admin/table_actions.scss +++ b/app/assets/stylesheets/admin/table_actions.scss @@ -1,4 +1,5 @@ .admin .table-actions { + @include admin-action-icons; @include flex-with-gap(1.6em); align-items: flex-start; padding: 0 0.5em; @@ -11,106 +12,4 @@ button { cursor: pointer; } - - .edit-link { - @include has-fa-icon(edit, regular); - } - - .destroy-link { - @include has-fa-icon(trash-alt, regular); - } - - .destroy-link, - .destroy-role-link, - .destroy-officer-link, - .reject-link, - .confirm-hide-link { - color: darken($alert-color, 5%); - } - - .show-link, - .preview-link { - @include has-fa-icon(eye, regular); - } - - .new-link, - .assign-booth-link { - @include has-fa-icon(plus-circle, solid); - color: $color-success; - } - - .create-role-link, - .create-officer-link { - @include has-fa-icon(user-plus, solid); - color: $color-success; - } - - .destroy-role-link, - .destroy-officer-link, - .reject-link { - @include has-fa-icon(user-times, solid); - } - - .restore-link { - @include has-fa-icon(undo, solid); - } - - .restore-link, - .investments-link { - color: darken($warning-color, 20%); - - &:not(:hover, :focus)::before { - color: $warning-color; - } - } - - .confirm-hide-link { - @include has-fa-icon(flag, regular); - } - - .verify-link { - @include has-fa-icon(user-check, solid); - color: $color-success; - } - - .preview-pending-link { - @include has-fa-icon(search, solid); - } - - .send-pending-link { - @include has-fa-icon(share-square, regular); - color: $color-success; - } - - .configure-link, - .answers-link { - @include has-fa-icon(tools, solid); - } - - .download-link { - @include has-fa-icon(download, solid); - } - - .shifts-link { - @include has-fa-icon(clock, regular); - } - - .investments-link { - @include has-fa-icon(coins, solid); - } - - .headings-link { - @include has-fa-icon(chart-pie, solid); - color: $color-success; - } - - .manage-link, - .ballots-link { - @include has-fa-icon(archive, solid); - color: $link; - } - - .cards-link { - @include has-fa-icon(images, regular); - } } diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss index 80c0982dc..8c7317e78 100644 --- a/app/assets/stylesheets/mixins/icons.scss +++ b/app/assets/stylesheets/mixins/icons.scss @@ -1524,3 +1524,107 @@ $font-awesome-icons: ( font-size: 1.6em; } } + +@mixin admin-action-icons { + .edit-link { + @include has-fa-icon(edit, regular); + } + + .destroy-link { + @include has-fa-icon(trash-alt, regular); + } + + .destroy-link, + .destroy-role-link, + .destroy-officer-link, + .reject-link, + .confirm-hide-link { + color: darken($alert-color, 5%); + } + + .show-link, + .preview-link { + @include has-fa-icon(eye, regular); + } + + .new-link, + .assign-booth-link { + @include has-fa-icon(plus-circle, solid); + color: $color-success; + } + + .create-role-link, + .create-officer-link { + @include has-fa-icon(user-plus, solid); + color: $color-success; + } + + .destroy-role-link, + .destroy-officer-link, + .reject-link { + @include has-fa-icon(user-times, solid); + } + + .restore-link { + @include has-fa-icon(undo, solid); + } + + .restore-link, + .investments-link { + color: darken($warning-color, 20%); + + &:not(:hover, :focus)::before { + color: $warning-color; + } + } + + .confirm-hide-link { + @include has-fa-icon(flag, regular); + } + + .verify-link { + @include has-fa-icon(user-check, solid); + color: $color-success; + } + + .preview-pending-link { + @include has-fa-icon(search, solid); + } + + .send-pending-link { + @include has-fa-icon(share-square, regular); + color: $color-success; + } + + .configure-link, + .answers-link { + @include has-fa-icon(tools, solid); + } + + .download-link { + @include has-fa-icon(download, solid); + } + + .shifts-link { + @include has-fa-icon(clock, regular); + } + + .investments-link { + @include has-fa-icon(coins, solid); + } + + .headings-link { + @include has-fa-icon(chart-pie, solid); + color: $color-success; + } + + .manage-link, + .ballots-link { + @include has-fa-icon(archive, solid); + color: $link; + } + + .cards-link { + @include has-fa-icon(images, regular); + } +} diff --git a/app/components/admin/budgets/links_component.html.erb b/app/components/admin/budgets/links_component.html.erb index 8fa1ce144..c8afc722b 100644 --- a/app/components/admin/budgets/links_component.html.erb +++ b/app/components/admin/budgets/links_component.html.erb @@ -1,4 +1,10 @@
+ <% if budget.investments.any? %> + <%= action(:investments, + text: t("admin.budgets.index.budget_investments"), + path: admin_budget_budget_investments_path(budget)) %> + <% end %> + <% if can?(:read_results, budget) %> <%= action(:results, text: results_text, path: budget_results_path(budget)) %> <% else %> diff --git a/app/components/admin/budgets/table_actions_component.html.erb b/app/components/admin/budgets/table_actions_component.html.erb index 8a250ecef..c6f5ada52 100644 --- a/app/components/admin/budgets/table_actions_component.html.erb +++ b/app/components/admin/budgets/table_actions_component.html.erb @@ -1,7 +1,7 @@ <%= render actions_component do |actions| %> <%= actions.action(:investments, text: t("admin.budgets.index.budget_investments"), - path: admin_budget_budget_investments_path(budget_id: budget.id)) %> + path: admin_budget_budget_investments_path(budget)) %> <% if budget.poll.present? %> <%= actions.action(:ballots, text: t("admin.budgets.index.admin_ballots"), diff --git a/spec/components/admin/budgets/links_component_spec.rb b/spec/components/admin/budgets/links_component_spec.rb index 6648260a3..3013d5d25 100644 --- a/spec/components/admin/budgets/links_component_spec.rb +++ b/spec/components/admin/budgets/links_component_spec.rb @@ -78,4 +78,23 @@ describe Admin::Budgets::LinksComponent, controller: Admin::BaseController do expect(page).not_to have_link "Preview" end end + + describe "investments link" do + let(:budget) { create(:budget) } + let(:component) { Admin::Budgets::LinksComponent.new(budget) } + + it "is shown for budgets with investments" do + create(:budget_investment, budget: budget) + + render_inline component + + expect(page).to have_link "Investment projects" + end + + it "is not shown for budgets without investments" do + render_inline component + + expect(page).not_to have_link "Investment projects" + end + end end