From 614e6da92b76e7da29a18363d77f488f68072cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Mon, 28 Jun 2021 02:55:39 +0200 Subject: [PATCH] Use a submit button in budget executions filters As mentioned in commit 5214d89c8, there are several issues with submitting a form when a `` field to this form, which also submitted on change. Sometimes users changed one of the values and wanted to change the other value as well before submitting the form. However, it wasn't possible, because we would submit it before they had a chance to change the second value. So now we don't submit the form on change and add a submit button. This is similar to what we do in the "Advanced filters" we use in several places. --- .../budgets/executions/filters.scss | 22 +++++++++++++++++++ .../executions/filters_component.html.erb | 11 +++++----- config/locales/en/general.yml | 1 + config/locales/es/general.yml | 1 + spec/system/budgets/executions_spec.rb | 20 +++++++++++++---- 5 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 app/assets/stylesheets/budgets/executions/filters.scss diff --git a/app/assets/stylesheets/budgets/executions/filters.scss b/app/assets/stylesheets/budgets/executions/filters.scss new file mode 100644 index 000000000..5044ad003 --- /dev/null +++ b/app/assets/stylesheets/budgets/executions/filters.scss @@ -0,0 +1,22 @@ +.budget-executions-filters { + margin-bottom: $line-height / 2; + + @include breakpoint(medium) { + $gap: 1em; + align-items: flex-end; + display: flex; + margin-left: -$gap; + + > * { + margin-left: $gap; + } + } + + select { + height: $line-height * 2; + } + + [type="submit"] { + @include regular-button; + } +} diff --git a/app/components/budgets/executions/filters_component.html.erb b/app/components/budgets/executions/filters_component.html.erb index 9bd358b62..eed52e564 100644 --- a/app/components/budgets/executions/filters_component.html.erb +++ b/app/components/budgets/executions/filters_component.html.erb @@ -1,23 +1,24 @@ -<%= form_tag(budget_executions_path(budget), method: :get) do %> -
+<%= form_tag(budget_executions_path(budget), method: :get, class: "budget-executions-filters") do %> +
<%= label_tag :milestone_tag, t("budgets.executions.filters.milestone_tag.label") %> <%= select_tag :milestone_tag, options_for_select( options_for_milestone_tags, params[:milestone_tag] ), - class: "js-submit-on-change", prompt: t("budgets.executions.filters.milestone_tag.all", count: budget.investments.winners.with_milestones.count) %>
-
+
<%= label_tag :status, t("budgets.executions.filters.status.label") %> <%= select_tag :status, options_from_collection_for_select(statuses, :id, lambda { |s| "#{s.name} (#{filters_select_counts(s.id)})" }, params[:status]), - class: "js-submit-on-change", prompt: t("budgets.executions.filters.status.all", count: budget.investments.winners.with_milestones.count) %>
+
+ <%= submit_tag t("shared.filter") %> +
<% end %> diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 9e7f326e9..650e44785 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -669,6 +669,7 @@ en: back: "Go back to my content" shared: edit: "Edit" + filter: "Filter" save: "Save" delete: "Delete" "yes": "Yes" diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 43e8cda0a..7c59338f9 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -669,6 +669,7 @@ es: back: "Volver a mi contenido" shared: edit: "Editar" + filter: "Filtrar" save: "Guardar" delete: "Borrar" "yes": "Si" diff --git a/spec/system/budgets/executions_spec.rb b/spec/system/budgets/executions_spec.rb index e1b362ad8..d9a789434 100644 --- a/spec/system/budgets/executions_spec.rb +++ b/spec/system/budgets/executions_spec.rb @@ -71,6 +71,7 @@ describe "Executions" do expect(page).to have_content("No winner investments in this state") select "Executed (0)", from: "Project's current state" + click_button "Filter" expect(page).to have_content("No winner investments in this state") end @@ -166,16 +167,19 @@ describe "Executions" do expect(page).to have_content(investment2.title) select "Studying the project (1)", from: "Project's current state" + click_button "Filter" expect(page).to have_content(investment1.title) expect(page).not_to have_content(investment2.title) select "Bidding (1)", from: "Project's current state" + click_button "Filter" expect(page).to have_content(investment2.title) expect(page).not_to have_content(investment1.title) select "Executing the project (0)", from: "Project's current state" + click_button "Filter" expect(page).not_to have_content(investment1.title) expect(page).not_to have_content(investment2.title) @@ -195,9 +199,13 @@ describe "Executions" do click_link "Milestones" select "Studying the project (0)", from: "Project's current state" + click_button "Filter" + expect(page).not_to have_content(investment1.title) select "Bidding (1)", from: "Project's current state" + click_button "Filter" + expect(page).to have_content(investment1.title) end @@ -215,9 +223,13 @@ describe "Executions" do click_link "Milestones" select "Studying the project (1)", from: "Project's current state" + click_button "Filter" + expect(page).to have_content(investment1.title) select "Bidding (0)", from: "Project's current state" + click_button "Filter" + expect(page).not_to have_content(investment1.title) end @@ -241,26 +253,26 @@ describe "Executions" do expect(page).to have_content(investment2.title) select "tag2 (2)", from: "Milestone tag" - - expect(page).to have_content(investment1.title) - expect(page).to have_content(investment2.title) - select "Studying the project (1)", from: "Project's current state" + click_button "Filter" expect(page).to have_content(investment1.title) expect(page).not_to have_content(investment2.title) select "Bidding (1)", from: "Project's current state" + click_button "Filter" expect(page).not_to have_content(investment1.title) expect(page).to have_content(investment2.title) select "tag1 (1)", from: "Milestone tag" + click_button "Filter" expect(page).not_to have_content(investment1.title) expect(page).not_to have_content(investment2.title) select "All (2)", from: "Milestone tag" + click_button "Filter" expect(page).not_to have_content(investment1.title) expect(page).to have_content(investment2.title)