Update FilterComponent

nanego · May 15, 2024 · ae50a79 · ae50a79
1 parent 280cf30
commit ae50a79
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 84 deletions.
diff --git a/app/components/filter_component.rb b/app/components/filter_component.rb
@@ -6,17 +6,17 @@ class FilterComponent < ApplicationComponent
   erb_template <<~ERB
     <%= render CardComponent.new(type: :primary) do |card| %>
       <% card.with_header do %>
-        <h3 class="panel-title"><%= t(".header.title") %><%= counter_tag %></h3>
+        <h3 class="card-title"><%= t(".header.title") %><%= counter_tag %></h3>
       <% end %>
 
       <%#= filters_badge_tags %>
 
-      <%= form_with model: @filter, url: "", method: :get, class: "form-inline", id: :filters do |f| %>
+      <%= form_with model: @filter, url: "", method: :get, class: "row row-cols-lg-auto g-3 align-items-center", id: :filters do |f| %>
         <%= form&.call(f) %>
 
         <% card.with_footer do %>
           <%= f.submit t(".submit"), class: "btn btn-primary btn-sm", form: :filters %>
-          <%= link_to t(".reset"), url_for(only_path: false, overwrite_params: nil), class: "btn btn-link btn-sm" %>
+          <%= link_to t(".reset"), url_for(only_path: false, overwrite_params: nil), class: "btn btn-link card-link btn-sm" %>
 
           <%= totals_tag %>
         <% end %>
@@ -58,7 +58,7 @@ def counter_tag
   end
 
   def totals_tag
-    tag.span class: "pull-right" do
+    tag.small class: "ms-auto text-secondary-emphasis" do
       if @filter.filled?
         t(".total_with_filters", results_count: @filter.results_count, total_count: @filter.total_count)
       else

diff --git a/app/views/bays/index.html.erb b/app/views/bays/index.html.erb
@@ -13,19 +13,27 @@
 
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="form-group">
-        <%= f.label :q %>
-        <%= f.search_field :q, class: "form-control" %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.search_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
+          <%= f.label :q %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :room_id %>
-        <%= f.collection_select(:room_id, Room.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:room_id, Room.sorted, :id, :to_s, { prompt: true, include_blank: true },
+                                                                     { class: "form-control" }) %>
+          <%= f.label :room_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :islet_id %>
-        <%= f.collection_select(:islet_id, Islet.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:islet_id, Islet.sorted, :id, :to_s, { prompt: true, include_blank: true },
+                                  { class: "form-control" }) %>
+          <%= f.label :islet_id %>
+        </div>
       </div>
     <% end %>
   <% end %>

diff --git a/app/views/clusters/index.html.erb b/app/views/clusters/index.html.erb
@@ -13,9 +13,11 @@
 
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="form-group">
-        <%= f.label :q %>
-        <%= f.text_field :q %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.text_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
+          <%= f.label :q %>
+        </div>
       </div>
     <% end %>
   <% end %>

diff --git a/app/views/frames/index.html.erb b/app/views/frames/index.html.erb
@@ -13,24 +13,32 @@
 
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="form-group">
-        <%= f.label :q %>
-        <%= f.search_field :q, class: "form-control" %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.search_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
+          <%= f.label :q %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :u %>
-        <%= f.select(:u, Frame.group(:u).order(:u).pluck(:u), { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.select(:u, Frame.group(:u).order(:u).pluck(:u), { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :u %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :room_id %>
-        <%= f.collection_select(:room_id, Room.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:room_id, Room.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :room_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :islet_id %>
-        <%= f.collection_select(:islet_id, Islet.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:islet_id, Islet.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :islet_id %>
+        </div>
       </div>
     <% end %>
   <% end %>

diff --git a/app/views/modeles/index.html.erb b/app/views/modeles/index.html.erb
@@ -15,24 +15,32 @@
 
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="form-group">
-        <%= f.label :q %>
-        <%= f.search_field :q, class: "form-control" %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.search_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
+          <%= f.label :q %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :architecture_id %>
-        <%= f.collection_select(:architecture_id, Architecture.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:architecture_id, Architecture.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :architecture_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :category_id %>
-        <%= f.collection_select(:category_id, Category.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:category_id, Category.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :category_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :manufacturer_id %>
-        <%= f.collection_select(:manufacturer_id, Manufacturer.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:manufacturer_id, Manufacturer.sorted, :id, :to_s, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :manufacturer_id %>
+        </div>
       </div>
     <% end %>
   <% end %>

diff --git a/app/views/rooms/index.html.erb b/app/views/rooms/index.html.erb
@@ -11,14 +11,18 @@
 
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="form-group">
-        <%= f.label :q %>
-        <%= f.text_field :q %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.text_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
+          <%= f.label :q %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :site_id %>
-        <%= f.collection_select(:site_id, Site.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:site_id, Site.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :site_id %>
+        </div>
       </div>
     <% end %>
   <% end %>

diff --git a/app/views/servers/index.html.erb b/app/views/servers/index.html.erb
@@ -20,48 +20,67 @@
 
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="form-group">
-        <%= f.label :q %>
-        <%= f.text_field :q %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.text_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
+          <%= f.label :q %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :frame_id %>
-        <%= f.collection_select(:frame_id, Frame.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:frame_id, Frame.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :frame_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :bay_id %>
-        <%= f.collection_select(:bay_id, Bay.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:bay_id, Bay.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :bay_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :islet_id %>
-        <%= f.collection_select(:islet_id, Islet.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:islet_id, Islet.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :islet_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :room_id %>
-        <%= f.collection_select(:room_id, Room.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:room_id, Room.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :room_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :modele_id %>
-        <%= f.collection_select(:modele_id, Modele.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:modele_id, Modele.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :modele_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :gestion_id %>
-        <%= f.collection_select(:gestion_id, Gestion.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:gestion_id, Gestion.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :gestion_id %>
+        </div>
       </div>
 
-      <div class="form-group">
-        <%= f.label :domaine_id %>
-        <%= f.collection_select(:domaine_id, Domaine.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:domaine_id, Domaine.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :domaine_id %>
+        </div>
       </div>
-      <div class="form-group">
-        <%= f.label :cluster_id %>
-        <%= f.collection_select(:cluster_id, Cluster.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+
+      <div class="col-12">
+        <div class="form-floating">
+          <%= f.collection_select(:cluster_id, Cluster.sorted, :id, :name, { prompt: true, include_blank: true }, { class: "form-control" }) %>
+          <%= f.label :cluster_id %>
+        </div>
       </div>
     <% end %>
   <% end %>

diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -661,3 +661,5 @@ fr:
         bay_id: Baie
         modele_id: Modèle
         cluster_id: Cluster
+    placeholder:
+      search: Tapez votre recherche
diff --git a/spec/components/filter_component_spec.rb b/spec/components/filter_component_spec.rb
@@ -16,17 +16,17 @@
 
   context "without block" do
     it do # rubocop:disable RSpec/ExampleLength
-      expect(rendered_component.to_html).to have_tag("div.panel.panel-primary") do
-        with_tag("div.panel-heading") do
-          with_tag("h3.panel-title", text: I18n.t("filter_component.header.title"))
+      expect(rendered_component.to_html).to have_tag("div.card.card-primary") do
+        with_tag("div.card-header") do
+          with_tag("h3.card-title", text: I18n.t("filter_component.header.title"))
         end
 
-        with_tag("div.panel-footer") do
+        with_tag("div.card-footer") do
           with_tag("input.btn.btn-primary.btn-sm", with: {
             type: :submit, form: :filters, value: I18n.t("filter_component.submit")
           })
           with_tag("a.btn.btn-secondary.btn-sm", text: I18n.t("filter_component.reset"))
-          with_tag("span.pull-right", text: I18n.t("filter_component.total", count: Frame.count))
+          with_tag("small.ms-auto", text: I18n.t("filter_component.total", count: Frame.count))
         end
       end
     end
@@ -45,21 +45,21 @@
     end
 
     it do # rubocop:disable RSpec/ExampleLength
-      expect(rendered_component.to_html).to have_tag("div.panel.panel-primary") do
-        with_tag("div.panel-heading") do
-          with_tag("h3.panel-title", text: "#{I18n.t("filter_component.header.title")} (2)")
+      expect(rendered_component.to_html).to have_tag("div.card.card-primary") do
+        with_tag("div.card-header") do
+          with_tag("h3.card-title", text: "#{I18n.t("filter_component.header.title")} (2)")
         end
 
-        with_tag("div.panel-body") do
+        with_tag("div.card-body") do
           with_tag("form#filters.form-inline", with: { action: "", method: :get }) do
             with_tag("input", with: { type: :search, name: :q, value: "My" })
             with_tag("input", with: { type: :text, name: :u, value: "24" })
           end
         end
 
-        with_tag("div.panel-footer") do
+        with_tag("div.card-footer") do
           with_tag("a.btn.btn-secondary.btn-sm", text: I18n.t("filter_component.reset"), with: { href: "http://test.host/frames" })
-          with_tag("span.pull-right", text: I18n.t("filter_component.total_with_filters", total_count: Frame.count, results_count: 1))
+          with_tag("small.ms-auto", text: I18n.t("filter_component.total_with_filters", total_count: Frame.count, results_count: 1))
         end
       end
     end