357322 Rework Indexes, Tables and filters design

app/assets/stylesheets/application.scss

@@ -782,15 +782,15 @@ body {
     }
   }
 
-  table {
+  /* table {
     a:not(.btn):not(.dropdown-item) {
       text-decoration: none;
 
       &:focus, &:hover {
         text-decoration: underline;
       }
     }
-  }
+  } */
 
   dl.show-page_dl {
     grid-template-columns: auto 1fr;
@@ -958,6 +958,11 @@ body {
 
   .border-dashed {
     --bs-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .all-small-caps {
+    font-variant: all-small-caps;
   }
 
   /* Bootstrap clean */
@@ -990,7 +995,7 @@ body {
   }
 
   .ts-dropdown {
-    z-index: 9999;
+    z-index: 8888;
   }
 
   /* Tom-Select fix for bootstrap floating label */

app/assets/stylesheets/bootstrap-variables.scss

@@ -1,6 +1,7 @@
 $breadcrumb-divider: quote(">");
 $enable-negative-margins: true;
 $min-contrast-ratio: 3;
+$table-striped-order: even;
 
 :root {
   --navbar-height: 66px;

app/assets/stylesheets/components/table_component.scss

@@ -0,0 +1,90 @@
+.table-component {
+  table {
+    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.09);
+    /* --bs-table-hover-color: var(--bs-link-color); */
+
+    --bs-table-striped-bg: rgb(var(--bs-tertiary-bg-rgb));
+
+    th {
+      a {
+        font-size: .9rem;
+        color: var(--bs-tertiary-color);
+        visibility: hidden;
+
+        &:hover {
+          color: rgb(var(--bs-primary-rgb));
+
+          span.bi-arrow-down-short::before {
+            content: "\f128";
+          }
+
+          span.bi-arrow-up-short::before {
+            content: "\f148";
+          }
+        }
+
+        span.bi-arrow-down-short.link-primary::before {
+          content: "\f128";
+        }
+
+        span.bi-arrow-up-short.link-primary::before {
+          content: "\f148";
+        }
+      }
+
+      &:hover {
+        a {
+          visibility: visible;
+        }
+      }
+
+      a:has(span.bi.link-primary) {
+        visibility: visible;
+      }
+
+      &:has(a) {
+        text-decoration: underline dotted;
+        text-underline-offset: .2em;
+        text-decoration-color: rgba(var(--bs-body-color-rgb), 0.25);
+      }
+    }
+
+    tr {
+      td {
+        padding: 1rem .5rem;
+
+        a:not(.btn):not(.dropdown-item) {
+          color: inherit;
+          text-decoration: underline dashed;
+          text-decoration-color: rgba(var(--bs-body-color-rgb), 0.5);
+          text-underline-offset: 0.4em;
+
+          &:hover {
+            color: var(--bs-link-color);
+            text-decoration: underline;
+          }
+        }
+
+        /* &:nth-child(even) {
+          td {
+            background-color: var(--bs-table-color-state);
+          }
+        } */
+
+        &:hover {
+          a:not(.btn):not(.dropdown-item) {
+            &:hover {
+              text-decoration-color: rgba(var(--bs-link-color-rgb), 0.5);
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        td {
+          border: none !important;
+        }
+      }
+    }
+  }
+}

app/components/list/data_table_component.rb

@@ -74,10 +74,10 @@ def render_bulk_head_checkbox
 
     def render_head_cell(col)
       render(List::TableComponent::TableHeadCell.new(data: { name: col.name })) do
+        concat col.title
+
         if (sort_by = col.sort_by)
-          link_to_sort col.title, sort_by
-        else
-          col.title
+          links_to_sort sort_by
         end
       end
     end
@@ -102,28 +102,32 @@ def render_col(col, row)
       col.call(row)
     end
 
-    def link_to_sort(label, attribute)
+    def links_to_sort(attribute)
       current_attribute = params[:sort_by]&.to_sym
-      current_direction = current_attribute == attribute ? params[:sort].to_sym : nil
+      is_current_attribute = current_attribute == attribute
+      current_direction = is_current_attribute ? params[:sort].to_sym : nil
+
+      concat(link_to_sort(attribute, is_current_attribute, :asc, current_direction))
+      concat(link_to_sort(attribute, is_current_attribute, :desc, current_direction))
+    end
 
-      parameters = case current_direction
-                   when nil then { sort_by: attribute, sort: :asc }
-                   when :asc then { sort_by: attribute, sort: :desc }
-                   else { sort_by: nil, sort: nil }
-                   end
+    def link_to_sort(attribute, is_current_attribute, direction, current_direction)
+      caret = direction == :asc ? "arrow-up-short" : "arrow-down-short"
+      is_current_direction = current_direction == direction
 
+      parameters = is_current_direction ? { sort_by: nil, sort: nil } : { sort_by: attribute, sort: direction }
       url = url_for(controller.request.query_parameters.merge(parameters))
 
       link_to(url) do
-        concat label
-        concat " #{sort_caret(current_direction)}" if current_attribute == attribute
+        # TODO: user tooltip ?
+        concat tag.span class: class_names("bi bi-#{caret}",
+                                           "ms-2": direction == :asc,
+                                           "link-primary": is_current_direction && is_current_attribute),
+                        title: direction,
+                        data: { controller: "tooltip" }
       end
     end
 
-    def sort_caret(direction)
-      sanitize(direction == :desc ? "↓" : "↑")
-    end
-
     def displayed_columns
       @displayed_columns ||= if @columns_to_display.nil?
                                columns

app/components/list/table_component.rb

@@ -3,7 +3,7 @@
 module List
   class TableComponent < ApplicationComponent
     erb_template <<~ERB
-      <div class="table-responsive">
+      <div class="table-responsive table-component border rounded-2">
         <%= tag.table(**@html_attributes) do %>
           <% heads.each do |thead| %>
             <%= thead %>
@@ -28,7 +28,7 @@ def initialize(**html_attributes)
       css_classes = html_attributes.delete(:class)
 
       @html_attributes = html_attributes.merge(
-        class: class_names("table table-striped table-bordered table-hover mb-0", css_classes),
+        class: class_names("table table-striped mb-0 table-hover p-4", css_classes),
       )
     end
 
@@ -53,7 +53,7 @@ def call
 
     class TableHead < TableTag
       TAG_NAME = :thead
-      CSS_CLASSES = ""
+      CSS_CLASSES = "text-nowrap text-uppercase"
     end
 
     class TableBody < TableTag
@@ -67,7 +67,7 @@ class TableFoot < TableTag
 
     class TableRow < TableTag
       TAG_NAME = :tr
-      CSS_CLASSES = "" # FIXME: should be applied only on body
+      CSS_CLASSES = ""
     end
 
     class TableCell < TableTag
@@ -85,6 +85,7 @@ class TableCell < TableTag
         center: "text-center",
         right: "text-end",
       }.freeze
+      CSS_CLASSES = "border-dashed"
 
       def initialize(text = nil, **html_attributes)
         super(**html_attributes)
@@ -96,9 +97,11 @@ def initialize(text = nil, **html_attributes)
         css_text_align = TEXT_ALIGN_TYPES[html_attributes.delete(:text_align)&.to_sym || :left]
 
         @html_attributes = html_attributes.merge(
+          scope: "col",
           class: class_names(
             css_vertical_align,
             css_text_align,
+            self.class::CSS_CLASSES,
             css_classes,
           ),
         )
@@ -113,7 +116,7 @@ def content
 
     class TableHeadCell < TableCell
       TAG_NAME = :th
-      CSS_CLASSES = ""
+      CSS_CLASSES = "fw-light text-secondary-emphasis all-small-caps bg-body-tertiary border-bottom"
     end
   end
 end

app/decorators/room_decorator.rb

@@ -40,6 +40,12 @@ def status_to_badge_component
     BadgeComponent.new(text, color:, variant: :pill)
   end
 
+  def display_on_room_to_badge_component
+    color = display_on_home_page ? :success : :danger
+
+    BadgeComponent.new(I18n.t("boolean.#{display_on_home_page}"), color:, variant: :pill)
+  end
+
   def access_control_to_human
     return I18n.t("access_control.blank") unless (a_c = access_control.presence)
 

app/views/rooms/index.html.erb

@@ -15,7 +15,10 @@
 <div class="p-4 border-top d-flex flex-column row-gap-4">
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="w-100">
+      <div class="w-100 input-group">
+        <span class="input-group-text">
+          <i class="bi bi-search"></i>
+        </span>
         <fieldset class="form-floating">
           <%= f.text_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
           <%= f.label :q %>
@@ -47,7 +50,7 @@
       <% end %>
 
       <% table.with_column(Room.human_attribute_name(:name), sort_by: :name) do |room| %>
-        <b><%= link_to room, room_path(room), data: { turbo_frame: :_top } %></b>
+        <%= link_to room, room_path(room), class: "fw-semibold", data: { turbo_frame: :_top } %>
       <% end %>
 
       <% unless (turbo_frame_request? && @filter.filled?(:site_ids)) %>
@@ -56,26 +59,30 @@
         <% end %>
       <% end %>
 
-      <% table.with_column(Room.human_attribute_name(:position), sort_by: :position) do |room| %>
+      <% table.with_column(Room.human_attribute_name(:position), sort_by: :position, text_align: :right) do |room| %>
         <%= room.position %>
       <% end %>
 
-      <% table.with_column(Islet.model_name.human.pluralize, sort_by: :islets_count) do |room| %>
+      <% table.with_column(Islet.model_name.human.pluralize, sort_by: :islets_count, text_align: :right) do |room| %>
+      <%# table.with_column(Islet.model_name.human.pluralize, sort_by: :islets_count) do |room| # %>
         <%= link_to islets_path(room_ids: room.id), data: { turbo_frame: :_top } do %>
-          <%= Room.human_attribute_name(:islets_count, count: room.islets_count) %>
+          <%#= Room.human_attribute_name(:islets_count, count: room.islets_count) %>
+          <%= room.islets_count %>
         <% end %>
       <% end %>
 
-      <% table.with_column(Frame.model_name.human.pluralize) do |room| %>
+      <% table.with_column(Frame.model_name.human.pluralize, text_align: :right) do |room| %>
+      <%# table.with_column(Frame.model_name.human.pluralize) do |room| %>
         <%= link_to frames_path(room_ids: room.id), data: { turbo_frame: :_top } do %>
-          <%= Room.human_attribute_name(:frames_count, count: authorized_scope(room.frames).count) %>
+          <%#= Room.human_attribute_name(:frames_count, count: authorized_scope(room.frames).count) %>
+          <%= authorized_scope(room.frames).count %>
         <% end %>
       <% end %>
 
-      <% table.with_column(Room.human_attribute_name(:display_on_home_page),
+      <% table.with_column(Room.human_attribute_name(:display_on_home_page_short),
                            sort_by: :display_on_home_page,
                            text_align: :center) do |room| %>
-        <input type="checkbox" <%= room.display_on_home_page ? "checked" : "" %> disabled>
+        <%= render room.decorated.display_on_room_to_badge_component %>
       <% end %>
 
       <% table.with_column(Room.human_attribute_name(:status), sort_by: :status) do |room| %>
@@ -87,21 +94,21 @@
           <%= render partial: "visualization/rooms/export_button", locals: { room: decorate(room) } %>
 
           <% if allowed_to?(:show?, room, with: Visualization::RoomPolicy) %>
-            <%= link_to visualization_room_path(room), class: "btn btn-primary", data: { turbo_frame: :_top } do %>
+            <%= link_to visualization_room_path(room), class: "btn btn-outline-primary", data: { turbo_frame: :_top } do %>
               <span class="bi bi-diagram-3-fill" aria-hidden="true" data-controller="tooltip" data-bs-placement="left" title="<%= t("visualization.title") %>"></span>
               <span class="visually-hidden"><%= t("visualization.title") %></span>
             <% end %>
           <% end %>
 
           <% if allowed_to?(:update?, room) %>
-            <%= link_to edit_room_path(room), class: "btn btn-info", data: { turbo_frame: :_top } do %>
+            <%= link_to edit_room_path(room), class: "btn btn-outline-info", data: { turbo_frame: :_top } do %>
               <span class="bi bi-pencil" aria-hidden="true" data-controller="tooltip" data-bs-placement="left" title="<%= t("action.edit") %>"></span>
               <span class="visually-hidden"><%= t("action.edit") %></span>
             <% end %>
           <% end %>
 
           <% if allowed_to?(:destroy?, room) %>
-            <%= link_to room, method: :delete, data: { turbo_frame: :_top }, class: "btn btn-danger" do %>
+            <%= link_to room, method: :delete, data: { turbo_frame: :_top }, class: "btn btn-outline-danger" do %>
               <span class="bi bi-trash" aria-hidden="true" data-controller="tooltip" data-bs-placement="left" title="<%= t("action.delete") %>"></span>
               <span class="visually-hidden"><%= t("action.delete") %></span>
             <% end %>

app/views/rooms/show.html.erb

@@ -79,7 +79,7 @@
 
           <dt class="pb-2"><%= Room.human_attribute_name(:display_on_home_page) %></dt>
           <dd class="mb-0 pb-2 ps-3">
-            <span><%= t("boolean.#{@room.display_on_home_page}") %></span>
+            <%= render @room.decorated.display_on_room_to_badge_component %>
           </dd>
 
           <dt class="pb-2"><%= Room.human_attribute_name(:status) %></dt>

app/views/sites/index.html.erb

@@ -44,14 +44,14 @@
     <% table.with_column(style: "min-width: 70px; width: 70px") do |site| %>
       <div class="btn-group btn-group-sm" role="group" aria-label="...">
         <% if allowed_to?(:update?, site) %>
-          <%= link_to edit_site_path(site), class: "btn btn-info" do %>
+          <%= link_to edit_site_path(site), class: "btn btn-outline-info" do %>
             <span class="bi bi-pencil" aria-hidden="true" data-controller="tooltip" data-bs-placement="left" title="<%= t("action.edit") %>"></span>
             <span class="visually-hidden"><%= t("action.edit") %></span>
           <% end %>
         <% end %>
 
         <% if allowed_to?(:destroy?, site) %>
-          <%= link_to site, method: :delete, class: "btn btn-danger" do %>
+          <%= link_to site, method: :delete, class: "btn btn-outline-danger" do %>
             <span class="bi bi-trash" aria-hidden="true" data-controller="tooltip" data-bs-placement="left" title="<%= t("action.delete") %>"></span>
             <span class="visually-hidden"><%= t("action.delete") %></span>
           <% end %>

config/locales/activerecord.fr.yml

@@ -61,7 +61,8 @@ fr:
         name: Nom
         position: Position
         content: Contenu
-        display_on_home_page: Afficher sur la page d'accueil
+        display_on_home_page: Afficher sur l'accueil
+        display_on_home_page_short: Sur l'accueil ?
         site_id: Site
         status: Statut
         surface_area: Superficie