Add labels to investments filters

Note that adding the labels broke the layout because the button was no
longer aligned with the fields, so we're now using a flex layout.

Since we're using labels, we no longer need a placeholder (which wasn't
very informative, by the way) in the text field.

app/assets/stylesheets/admin/budget_investments/search_form.scss

@@ -29,4 +29,26 @@
       margin-top: calc(#{$line-height} / 2);
     }
   }
+
+  .basic-filters {
+    align-items: flex-end;
+    clear: both;
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+      @include grid-column-gutter;
+      width: 100%;
+
+      @include breakpoint(medium) {
+        width: 25%;
+      }
+    }
+
+    > .title-or-id-filter {
+      @include breakpoint(medium) {
+        width: 50%;
+      }
+    }
+  }
 }

app/components/admin/budget_investments/search_form_component.html.erb

@@ -30,40 +30,49 @@
     </div>
   </div>
 
-  <div class="small-12 medium-3 column">
+  <div class="basic-filters">
-    <%= select_tag :administrator_id,
+    <div class="filter">
-                   options_for_select(admin_select_options, params[:administrator_id]),
+      <%= label_tag :administrator_id, attribute_name(:administrator_id) %>
-                   { prompt: t("admin.budget_investments.index.administrator_filter_all") } %>
+      <%= select_tag :administrator_id,
-  </div>
+                     options_for_select(admin_select_options, params[:administrator_id]),
-  <div class="small-12 medium-3 column">
+                     { prompt: t("admin.budget_investments.index.administrator_filter_all") } %>
-    <%= select_tag :valuator_or_group_id,
+    </div>
-                   options_for_select(valuator_or_group_select_options, params[:valuator_or_group_id]),
-                   { prompt: t("admin.budget_investments.index.valuator_filter_all") } %>
-  </div>
-  <div class="small-12 medium-3 column">
-    <%= select_tag :heading_id,
-                   options_for_select(budget_heading_select_options(budget), params[:heading_id]),
-                   { prompt: t("admin.budget_investments.index.heading_filter_all") } %>
-  </div>
-  <div class="small-12 medium-3 column">
-    <%= select_tag :tag_name,
-                   options_for_select(investment_tags_select_options("valuation_tags"), params[:tag_name]),
-                   { prompt: t("admin.budget_investments.index.tags_filter_all") } %>
-  </div>
 
-  <div class="small-12 medium-3 column">
+    <div class="filter">
-    <%= select_tag :milestone_tag_name,
+      <%= label_tag :valuator_or_group_id, t("admin.budget_investments.index.basic_filters.valuator_or_group") %>
-                   options_for_select(investment_tags_select_options("milestone_tags"), params[:milestone_tag_name]),
+      <%= select_tag :valuator_or_group_id,
-                   { prompt: t("admin.budget_investments.index.milestone_tags_filter_all") } %>
+                     options_for_select(valuator_or_group_select_options, params[:valuator_or_group_id]),
-  </div>
+                     { prompt: t("admin.budget_investments.index.valuator_filter_all") } %>
+    </div>
 
-  <div class="small-12 medium-6 column">
+    <div class="filter">
-    <div class="input-group">
+      <%= label_tag :heading_id, attribute_name(:heading_id) %>
-      <%= text_field_tag :title_or_id, params["title_or_id"], placeholder: t("admin.budget_investments.index.placeholder") %>
+      <%= select_tag :heading_id,
+                     options_for_select(budget_heading_select_options(budget), params[:heading_id]),
+                     { prompt: t("admin.budget_investments.index.heading_filter_all") } %>
+    </div>
+
+    <div class="filter">
+      <%= label_tag :tag_name, attribute_name(:valuation_tag_list) %>
+      <%= select_tag :tag_name,
+                     options_for_select(investment_tags_select_options("valuation_tags"), params[:tag_name]),
+                     { prompt: t("admin.budget_investments.index.tags_filter_all") } %>
+    </div>
+
+    <div class="filter">
+      <%= label_tag :milestone_tag_name, attribute_name(:milestone_tag_list) %>
+      <%= select_tag :milestone_tag_name,
+                     options_for_select(investment_tags_select_options("milestone_tags"), params[:milestone_tag_name]),
+                     { prompt: t("admin.budget_investments.index.milestone_tags_filter_all") } %>
+    </div>
+
+    <div class="filter title-or-id-filter">
+      <%= label_tag :title_or_id, t("admin.budget_investments.index.basic_filters.title_or_id") %>
+      <%= text_field_tag :title_or_id, params["title_or_id"] %>
+    </div>
+
+    <div class="filter">
+      <%= submit_tag t("admin.budget_investments.index.buttons.filter"), class: "button expanded" %>
     </div>
   </div>
-
-  <div class="small-12 medium-3 column end">
-    <%= submit_tag t("admin.budget_investments.index.buttons.filter"), class: "button expanded" %>
-  </div>
 <% end %>

app/components/admin/budget_investments/search_form_component.rb

@@ -8,6 +8,10 @@ class Admin::BudgetInvestments::SearchFormComponent < ApplicationComponent
 
   private
 
+    def attribute_name(attribute)
+      Budget::Investment.human_attribute_name(attribute)
+    end
+
     def advanced_filters_params
       params[:advanced_filters] ||= []
     end

config/locales/en/admin.yml

@@ -235,12 +235,14 @@ en:
         title: "%{budget} phases"
     budget_investments:
       index:
+        basic_filters:
+          valuator_or_group: Valuator or group
+          title_or_id: Title or ID
         heading_filter_all: All headings
         administrator_filter_all: All administrators
         valuator_filter_all: All valuators
         tags_filter_all: All tags
         advanced_filters: Advanced filters
-        placeholder: Search projects
         filters:
           all: All
           without_admin: Without assigned admin

config/locales/es/admin.yml

@@ -235,12 +235,14 @@ es:
         title: "Fases de %{budget}"
     budget_investments:
       index:
+        basic_filters:
+          valuator_or_group: Evaluador o grupo
+          title_or_id: Título o ID
         heading_filter_all: Todas las partidas
         administrator_filter_all: Todos los administradores
         valuator_filter_all: Todos los evaluadores
         tags_filter_all: Todas las etiquetas
         advanced_filters: Filtros avanzados
-        placeholder: Buscar proyectos
         filters:
           all: Todos
           without_admin: Sin administrador

spec/system/admin/budget_investments_spec.rb

@@ -98,28 +98,28 @@ describe "Admin budget investments", :admin do
       expect(page).to have_link("Change name")
       expect(page).to have_link("Plant trees")
 
-      select "Parks: Central Park", from: "heading_id"
+      select "Parks: Central Park", from: "Heading"
       click_button "Filter"
 
       expect(page).not_to have_link("Realocate visitors")
       expect(page).not_to have_link("Change name")
       expect(page).to have_link("Plant trees")
 
-      select "All headings", from: "heading_id"
+      select "All headings", from: "Heading"
       click_button "Filter"
 
       expect(page).to have_link("Realocate visitors")
       expect(page).to have_link("Change name")
       expect(page).to have_link("Plant trees")
 
-      select "Streets: Main Avenue", from: "heading_id"
+      select "Streets: Main Avenue", from: "Heading"
       click_button "Filter"
 
       expect(page).to have_link("Realocate visitors")
       expect(page).not_to have_link("Change name")
       expect(page).not_to have_link("Plant trees")
 
-      select "Streets: Mercy Street", from: "heading_id"
+      select "Streets: Mercy Street", from: "Heading"
       click_button "Filter"
 
       expect(page).not_to have_link("Realocate visitors")
@@ -142,28 +142,28 @@ describe "Admin budget investments", :admin do
       expect(page).to have_link("Realocate visitors")
       expect(page).to have_link("Destroy the city")
 
-      select "Admin 1", from: "administrator_id"
+      select "Admin 1", from: "Administrator"
       click_button "Filter"
 
       expect(page).to have_content("There is 1 investment")
       expect(page).not_to have_link("Destroy the city")
       expect(page).to have_link("Realocate visitors")
 
-      select "Alias", from: "administrator_id"
+      select "Alias", from: "Administrator"
       click_button "Filter"
 
       expect(page).to have_content("There are no investment projects")
       expect(page).not_to have_link("Destroy the city")
       expect(page).not_to have_link("Realocate visitors")
 
-      select "All administrators", from: "administrator_id"
+      select "All administrators", from: "Administrator"
       click_button "Filter"
 
       expect(page).to have_content("There are 2 investments")
       expect(page).to have_link("Destroy the city")
       expect(page).to have_link("Realocate visitors")
 
-      select "Admin 1", from: "administrator_id"
+      select "Admin 1", from: "Administrator"
       click_button "Filter"
 
       expect(page).to have_content("There is 1 investment")
@@ -183,21 +183,21 @@ describe "Admin budget investments", :admin do
       expect(page).to have_link("Realocate visitors")
       expect(page).to have_link("Destroy the city")
 
-      select "Valuator 1", from: "valuator_or_group_id"
+      select "Valuator 1", from: "Valuator or group"
       click_button "Filter"
 
       expect(page).to have_content("There is 1 investment")
       expect(page).not_to have_link("Destroy the city")
       expect(page).to have_link("Realocate visitors")
 
-      select "All valuators", from: "valuator_or_group_id"
+      select "All valuators", from: "Valuator or group"
       click_button "Filter"
 
       expect(page).to have_content("There are 2 investments")
       expect(page).to have_link("Destroy the city")
       expect(page).to have_link("Realocate visitors")
 
-      select "Valuator 1", from: "valuator_or_group_id"
+      select "Valuator 1", from: "Valuator or group"
       click_button "Filter"
       expect(page).to have_content("There is 1 investment")
       expect(page).not_to have_link("Destroy the city")
@@ -215,21 +215,21 @@ describe "Admin budget investments", :admin do
       expect(page).to have_link("Build a hospital")
       expect(page).to have_link("Build a theatre")
 
-      select "Health", from: "valuator_or_group_id"
+      select "Health", from: "Valuator or group"
       click_button "Filter"
 
       expect(page).to have_content("There is 1 investment")
       expect(page).to have_link("Build a hospital")
       expect(page).not_to have_link("Build a theatre")
 
-      select "All valuators", from: "valuator_or_group_id"
+      select "All valuators", from: "Valuator or group"
       click_button "Filter"
 
       expect(page).to have_content("There are 2 investments")
       expect(page).to have_link("Build a hospital")
       expect(page).to have_link("Build a theatre")
 
-      select "Culture", from: "valuator_or_group_id"
+      select "Culture", from: "Valuator or group"
       click_button "Filter"
 
       expect(page).to have_content("There is 1 investment")
@@ -619,7 +619,7 @@ describe "Admin budget investments", :admin do
       expect(page).to have_content("More schools")
       expect(page).to have_content("More hospitals")
 
-      select "Admin 1", from: "administrator_id"
+      select "Admin 1", from: "Administrator"
       click_button "Filter"
 
       expect(page).to have_css(".budget_investment", count: 2)
@@ -627,7 +627,7 @@ describe "Admin budget investments", :admin do
       expect(page).to have_content("More schools")
       expect(page).not_to have_content("More hospitals")
 
-      fill_in "title_or_id", with: educate_children.id
+      fill_in "Title or ID", with: educate_children.id
       click_button "Filter"
 
       expect(page).to have_css(".budget_investment", count: 1)
@@ -661,7 +661,7 @@ describe "Admin budget investments", :admin do
       expect(page).to have_content("More schools")
       expect(page).not_to have_content("More hospitals")
 
-      fill_in "title_or_id", with: educate_children.id
+      fill_in "Title or ID", with: educate_children.id
       click_button "Filter"
 
       expect(page).to have_css(".budget_investment", count: 1)
@@ -694,7 +694,7 @@ describe "Admin budget investments", :admin do
       expect(page).to have_content("More hospitals")
       expect(page).to have_content("More hostals")
 
-      select "Admin 1", from: "administrator_id"
+      select "Admin 1", from: "Administrator"
       click_button "Filter"
 
       expect(page).to have_css(".budget_investment", count: 3)
@@ -714,7 +714,7 @@ describe "Admin budget investments", :admin do
       expect(page).not_to have_content("More hospitals")
       expect(page).not_to have_content("More hostals")
 
-      fill_in "title_or_id", with: educate_children.id
+      fill_in "Title or ID", with: educate_children.id
       click_button "Filter"
 
       expect(page).to have_css(".budget_investment", count: 1)
@@ -759,13 +759,13 @@ describe "Admin budget investments", :admin do
       expect(page).to have_content("Proyecto de inversión")
       expect(page).to have_content("Some other investment")
 
-      fill_in "title_or_id", with: "Proyecto de inversión"
+      fill_in "Title or ID", with: "Proyecto de inversión"
       click_button "Filter"
 
       expect(page).to have_content("Proyecto de inversión")
       expect(page).not_to have_content("Some other investment")
 
-      fill_in "title_or_id", with: "Some other investment"
+      fill_in "Title or ID", with: "Some other investment"
       click_button "Filter"
 
       expect(page).not_to have_content("Proyecto de inversión")
@@ -778,7 +778,7 @@ describe "Admin budget investments", :admin do
       expect(page).to have_content("Proyecto de inversión")
       expect(page).to have_content("Some other investment")
 
-      fill_in "title_or_id", with: first_investment.id
+      fill_in "Title or ID", with: first_investment.id
       click_button "Filter"
 
       expect(page).to have_content("Some other investment")