341610 - Add child block table on #show (nanego#215)

* wip - sites * wip - rooms * feat: add lazy loaded rooms on Sites#show * feat: add lazy loaded islets on RoomsController#show * feat: add lazy loaded bays on IsletsController#show * feat: add lazy loaded frames on BaysController#show * feat: add lazy loaded servers on FramesController#show * style: code cleanup * tests: add tests on HasManyTurboFrameComponent and previews * Fix dropdown in table-responsive --------- Co-authored-by: Maximilien Bausson <[email protected]> Co-authored-by: Nicolas Brousse <[email protected]> Co-authored-by: B_Rass <[email protected]>
pantographe · Oct 2, 2024 · 6554073 · 6554073
1 parent 8e18f28
commit 6554073
Show file tree

Hide file tree

Showing 22 changed files with 305 additions and 199 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -791,6 +791,12 @@ body {
       }
     }
   }
+
+  .table-responsive .dropdown,
+  .table-responsive .btn-group,
+  .table-responsive .btn-group-vertical {
+      position: static;
+  }
 }
 
 @include color-mode(dark) {

diff --git a/app/components/has_many_turbo_frame_component.rb b/app/components/has_many_turbo_frame_component.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class HasManyTurboFrameComponent < ApplicationComponent
+  include Turbo::FramesHelper
+
+  erb_template <<~ERB
+    <%= render CardComponent.new do |c| %>
+      <% c.with_header do %>
+        <h3><%= @title %></h3>
+
+        <%= link_to @url do %>
+          <%= t(".see_more") %>
+        <% end %>
+      <% end %>
+
+      <%= turbo_frame_tag(@frame_id, loading: :lazy, src: @url) do %>
+        <div class="w-100 d-flex justify-content-center align-items-center gap-3">
+          <span><%= t(".loading") %></span>
+          <span class="spinner-border spinner-border-sm p-4"></span>
+        </div>
+      <% end %>
+    <% end %>
+  ERB
+
+  def initialize(title, url:, frame_id:)
+    @title = title
+    @url = url
+    @frame_id = frame_id
+
+    super()
+  end
+end
diff --git a/app/controllers/islets_controller.rb b/app/controllers/islets_controller.rb
@@ -12,9 +12,8 @@ def index
   end
 
   def show
-    return @islet if request.format.html?
-
     respond_to do |format|
+      format.html
       format.json
       format.txt { send_data Frame.to_txt(@servers_per_frames[@room.id], params[:bg]) }
     end

diff --git a/app/processors/frames_processor.rb b/app/processors/frames_processor.rb
@@ -21,5 +21,9 @@ class FramesProcessor < ApplicationProcessor
     raw.joins(:islet).where(islet: { id: islet_id })
   end
 
+  map :bay_id do |bay_id:|
+    raw.joins(:bay).where(bay: { id: bay_id })
+  end
+
   sortable fields: SORTABLE_FIELDS
 end
diff --git a/app/views/bays/_export_button.html.erb b/app/views/bays/_export_button.html.erb
@@ -47,7 +47,7 @@
 
     <li><hr class="dropdown-divider"></li>
 
-    <li><%= link_to visualization_bay_path(bay, format: :txt, view: "", bg: ""), class: "dropdown-item" do %>
+    <li><%= link_to visualization_bay_path(bay, format: :txt, view: "", bg: ""), class: "dropdown-item", data: { turbo_frame: :_top } do %>
         <span class="bi bi-file-earmark-text" aria-hidden="true"></span>
         <%= t("export_button.exports.txt") %>
       <% end %>
@@ -63,7 +63,7 @@
     <li><hr class="dropdown-divider"></li>
 
     <li>
-      <%= link_to ports_path(room_id: bay.islet.room_id, bay_id: bay.id), class: "dropdown-item" do %>
+      <%= link_to ports_path(room_id: bay.islet.room_id, bay_id: bay.id), class: "dropdown-item", data: { turbo_frame: :_top } do %>
         <span class="bi bi-card-list" aria-hidden="true"></span>
         <%= t("export_button.port_list") %>
       <% end %>

diff --git a/app/views/bays/index.html.erb b/app/views/bays/index.html.erb
@@ -41,59 +41,61 @@
     <% end %>
   <% end %>
 
-  <%= render List::DataTableComponent.new(@bays) do |table| %>
-    <% table.with_column(Room.model_name.human, sort_by: :"rooms.name") do |bay| %>
-      <%= link_to bay.room, room_path(bay.room) %>
-    <% end %>
-
-    <% table.with_column(Islet.model_name.human, sort_by: :"islets.name") do |bay| %>
-      <%= link_to bay.islet, islet_path(bay.islet) %>
-    <% end %>
+  <%= turbo_frame_tag(dom_id(Bay, :table), data: { turbo_action: :advance }) do %>
+    <%= render List::DataTableComponent.new(@bays) do |table| %>
+      <% table.with_column(Room.model_name.human, sort_by: :"rooms.name") do |bay| %>
+        <%= link_to bay.room, room_path(bay.room), data: { turbo_frame: :_top } %>
+      <% end %>
 
-    <% table.with_column(Frame.model_name.human.pluralize) do |bay| %>
-      <b>
-        <%=
-          bay.frames.map do |frame|
-            link_to(frame.name, frame_path(frame))
-          end.join(" / ").html_safe
-        %>
-      </b>
-    <% end %>
+      <% table.with_column(Islet.model_name.human, sort_by: :"islets.name") do |bay| %>
+        <%= link_to bay.islet, islet_path(bay.islet), data: { turbo_frame: :_top } %>
+      <% end %>
 
-    <% table.with_column(Bay.human_attribute_name(:lane), sort_by: :lane) do |bay| %>
-      <%= bay.lane %>
-    <% end %>
+      <% table.with_column(Frame.model_name.human.pluralize) do |bay| %>
+        <b>
+          <%=
+            bay.frames.map do |frame|
+              link_to(frame.name, frame_path(frame), data: { turbo_frame: :_top })
+            end.join(" / ").html_safe
+          %>
+        </b>
+      <% end %>
 
-    <% table.with_column(Bay.human_attribute_name(:position), sort_by: :position) do |bay| %>
-      <%= bay.position %>
-    <% end %>
+      <% table.with_column(Bay.human_attribute_name(:lane), sort_by: :lane) do |bay| %>
+        <%= bay.lane %>
+      <% end %>
 
-    <% table.with_column(Server.model_name.human.pluralize) do |bay| %>
-      <%= link_to servers_path(bay_id: bay.id) do %>
-        <%= Bay.human_attribute_name(:materials_count, count: bay.materials.count) %>
+      <% table.with_column(Bay.human_attribute_name(:position), sort_by: :position) do |bay| %>
+        <%= bay.position %>
       <% end %>
-    <% end %>
 
-    <% table.with_column(style: "min-width: 140px; width: 140px") do |bay| %>
-      <div class="btn-group btn-group-sm" role="group" aria-label="...">
-        <%= render partial: "bays/export_button", locals: { bay: bay } %>
-        <%= link_to visualization_bay_path(bay), class: "btn btn-primary" 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 %>
-        <%= link_to edit_bay_path(bay), class: "btn btn-info" do %>
-          <span class="bi bi-pencil" title="<%= t("action.edit") %>" aria-hidden="true"
-                data-controller="tooltip"
-                data-bs-placement="left"></span>
-          <span class="visually-hidden"><%= t("action.edit") %></span>
-        <% end %>
-        <%= link_to bay, method: :delete, data: { confirm: t(".delete_confirmation") }, class: "btn btn-danger" do %>
-          <span class="bi bi-trash" title="<%= t("action.delete") %>" aria-hidden="true"
-                data-controller="tooltip"
-                data-bs-placement="left"></span>
-          <span class="visually-hidden"><%= t("action.delete") %></span>
+      <% table.with_column(Server.model_name.human.pluralize) do |bay| %>
+        <%= link_to servers_path(bay_id: bay.id), data: { turbo_frame: :_top } do %>
+          <%= Bay.human_attribute_name(:materials_count, count: bay.materials.count) %>
         <% end %>
-      </div>
+      <% end %>
+
+      <% table.with_column(style: "min-width: 140px; width: 140px") do |bay| %>
+        <div class="btn-group btn-group-sm" role="group" aria-label="...">
+          <%= render partial: "bays/export_button", locals: { bay: bay } %>
+          <%= link_to visualization_bay_path(bay), class: "btn btn-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 %>
+          <%= link_to edit_bay_path(bay), class: "btn btn-info", data: { turbo_frame: :_top } do %>
+            <span class="bi bi-pencil" title="<%= t("action.edit") %>" aria-hidden="true"
+                  data-controller="tooltip"
+                  data-bs-placement="left"></span>
+            <span class="visually-hidden"><%= t("action.edit") %></span>
+          <% end %>
+          <%= link_to bay, method: :delete, data: { turbo_frame: :_top, confirm: t(".delete_confirmation") }, class: "btn btn-danger" do %>
+            <span class="bi bi-trash" title="<%= t("action.delete") %>" aria-hidden="true"
+                  data-controller="tooltip"
+                  data-bs-placement="left"></span>
+            <span class="visually-hidden"><%= t("action.delete") %></span>
+          <% end %>
+        </div>
+      <% end %>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/bays/show.html.erb b/app/views/bays/show.html.erb
@@ -36,4 +36,6 @@
   </div>
 </div>
 
+<%= render HasManyTurboFrameComponent.new(Frame.model_name.human.pluralize, url: frames_path(bay_id: @bay.id), frame_id: dom_id(Frame, :table)) %>
+
 <%= render ChangelogEntries::ObjectListComponent.new(@bay) %>
diff --git a/app/views/frames/index.html.erb b/app/views/frames/index.html.erb
@@ -44,51 +44,61 @@
           <%= f.label :islet_id %>
         </fieldset>
       </div>
+
+      <div>
+        <fieldset class="form-floating">
+          <%= f.collection_select(:bay_id, Bay.sorted, :id, :to_s, { prompt: true, include_blank: true },
+                                                                   { class: "form-select" }) %>
+          <%= f.label :bay_id %>
+        </fieldset>
+      </div>
     <% end %>
   <% end %>
 
-  <%= render List::DataTableComponent.new(@frames) do |table| %>
-    <% table.with_column(Frame.human_attribute_name(:name), sort_by: :name) do |frame| %>
-      <b>
-      <%= link_to frame.name, frame %>
-      </b>
-    <% end %>
+  <%= turbo_frame_tag(dom_id(Frame, :table), data: { turbo_action: :advance }) do %>
+    <%= render List::DataTableComponent.new(@frames) do |table| %>
+      <% table.with_column(Frame.human_attribute_name(:name), sort_by: :name) do |frame| %>
+        <b>
+          <%= link_to frame.name, frame, data: { turbo_frame: :_top } %>
+        </b>
+      <% end %>
 
-    <% table.with_column(Frame.human_attribute_name(:servers)) do |frame| %>
-      <%= safe_join(frame.servers.map{ |s| link_to s.name, s }, ", ") %>
-    <% end %>
+      <% table.with_column(Frame.human_attribute_name(:servers)) do |frame| %>
+        <%= safe_join(frame.servers.map { |s| link_to(s.name, s, data: { turbo_frame: :_top }) }, ", ") %>
+      <% end %>
 
-    <% table.with_column(Frame.human_attribute_name(:u), sort_by: :u) do |frame| %>
-      <%= frame.u %>
-    <% end %>
+      <% table.with_column(Frame.human_attribute_name(:u), sort_by: :u) do |frame| %>
+        <%= frame.u %>
+      <% end %>
 
-    <% table.with_column(Frame.human_attribute_name(:room), sort_by: :"rooms.name") do |frame| %>
-      <%= frame.room.present? ? link_to(frame.room, frame.room) : frame.room %>
-    <% end %>
+      <% table.with_column(Frame.human_attribute_name(:room), sort_by: :"rooms.name") do |frame| %>
+        <%= frame.room.present? ? link_to(frame.room, frame.room, data: { turbo_frame: :_top }) : frame.room %>
+      <% end %>
 
-    <% table.with_column(Islet.model_name.human, sort_by: :"islets.name") do |frame| %>
-      <%= link_to frame.bay.islet, islet_path(frame.bay.islet) if frame.bay.present? %>
-    <% end %>
+      <% table.with_column(Islet.model_name.human, sort_by: :"islets.name") do |frame| %>
+        <%= link_to frame.bay.islet, islet_path(frame.bay.islet), data: { turbo_frame: :_top } if frame.bay.present? %>
+      <% end %>
 
-    <% table.with_column(style: "min-width: 70px; width: 70px") do |frame| %>
-      <div class="btn-group btn-group-sm" role="group" aria-label="...">
-        <%= link_to visualization_frame_path(frame), class: "btn btn-primary" 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 %>
-        <%= link_to edit_frame_path(frame), class: "btn btn-info" do %>
-          <span class="bi bi-pencil" title="<%= t("action.edit") %>" aria-hidden="true"
-                                                                     data-controller="tooltip"
-                                                                     data-bs-placement="left"></span>
-          <span class="visually-hidden"><%= t("action.edit") %></span>
-        <% end %>
-        <%= link_to frame, method: :delete, data: { confirm: t(".delete_confirmation") }, class: "btn btn-danger" do %>
-          <span class="bi bi-trash" title="<%= t("action.delete") %>" aria-hidden="true"
-                                                                     data-controller="tooltip"
-                                                                     data-bs-placement="left"></span>
-          <span class="visually-hidden"><%= t("action.delete") %></span>
-        <% end %>
-      </div>
+      <% table.with_column(style: "min-width: 70px; width: 70px") do |frame| %>
+        <div class="btn-group btn-group-sm" role="group" aria-label="...">
+          <%= link_to visualization_frame_path(frame), class: "btn btn-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 %>
+          <%= link_to edit_frame_path(frame), class: "btn btn-info", data: { turbo_frame: :_top } do %>
+            <span class="bi bi-pencil" title="<%= t("action.edit") %>" aria-hidden="true"
+                                                                      data-controller="tooltip"
+                                                                      data-bs-placement="left"></span>
+            <span class="visually-hidden"><%= t("action.edit") %></span>
+          <% end %>
+          <%= link_to frame, method: :delete, data: { turbo_frame: :_top, confirm: t(".delete_confirmation") }, class: "btn btn-danger" do %>
+            <span class="bi bi-trash" title="<%= t("action.delete") %>" aria-hidden="true"
+                                                                      data-controller="tooltip"
+                                                                      data-bs-placement="left"></span>
+            <span class="visually-hidden"><%= t("action.delete") %></span>
+          <% end %>
+        </div>
+      <% end %>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/frames/show.html.erb b/app/views/frames/show.html.erb
@@ -37,4 +37,6 @@
   </div>
 </div>
 
+<%= render HasManyTurboFrameComponent.new(Server.model_name.human.pluralize, url: servers_path(frame_id: @frame.id), frame_id: dom_id(Server, :table)) %>
+
 <%= render ChangelogEntries::ObjectListComponent.new(@frame) %>
diff --git a/app/views/islets/_export_button.html.erb b/app/views/islets/_export_button.html.erb
@@ -48,7 +48,7 @@
     <li><hr class="dropdown-divider"></li>
 
     <li>
-      <%= link_to islet_path(islet, format: :txt, view: "", bg: ""), class: "dropdown-item" do %>
+      <%= link_to islet_path(islet, format: :txt, view: "", bg: ""), class: "dropdown-item", data: { turbo_frame: :_top } do %>
         <span class="bi bi-file-earmark-text" aria-hidden="true"></span>
         <%= t("export_button.exports.txt") %>
       <% end %>
@@ -64,7 +64,7 @@
     <li><hr class="dropdown-divider"></li>
 
     <li>
-      <%= link_to ports_path(room_id: islet.room.id, islet: islet.name), class: "dropdown-item" do %>
+      <%= link_to ports_path(room_id: islet.room.id, islet: islet.name), class: "dropdown-item", data: { turbo_frame: :_top } do %>
         <span class="bi bi-card-list" aria-hidden="true"></span>
         <%= t("export_button.port_list") %>
       <% end %>

diff --git a/app/views/islets/index.html.erb b/app/views/islets/index.html.erb
@@ -12,39 +12,41 @@
     <% end %>
   </div>
 
-  <%= render List::DataTableComponent.new(@islets) do |table| %>
-    <% table.with_column(Site.model_name.human, sort_by: :"sites.name") do |islet| %>
-      <%= link_to islet.site, site_path(islet.site) %>
-    <% end %>
+  <%= turbo_frame_tag(dom_id(Islet, :table), data: { turbo_action: :advance }) do %>
+    <%= render List::DataTableComponent.new(@islets) do |table| %>
+      <% table.with_column(Site.model_name.human, sort_by: :"sites.name") do |islet| %>
+        <%= link_to islet.site, site_path(islet.site), data: { turbo_frame: :_top } %>
+      <% end %>
 
-    <% table.with_column(Room.model_name.human, sort_by: :"rooms.name") do |islet| %>
-      <%= link_to islet.room, room_path(islet.room) %>
-    <% end %>
+      <% table.with_column(Room.model_name.human, sort_by: :"rooms.name") do |islet| %>
+        <%= link_to islet.room, room_path(islet.room), data: { turbo_frame: :_top } %>
+      <% end %>
 
-    <% table.with_column(Islet.model_name.human, sort_by: :name) do |islet| %>
-      <%= link_to islet, islet_path(islet) %>
-    <% end %>
+      <% table.with_column(Islet.model_name.human, sort_by: :name) do |islet| %>
+        <%= link_to islet, islet_path(islet), data: { turbo_frame: :_top } %>
+      <% end %>
 
-    <% table.with_column(Islet.human_attribute_name(:position), sort_by: :position) do |islet| %>
-      <%= islet.position %>
-    <% end %>
+      <% table.with_column(Islet.human_attribute_name(:position), sort_by: :position) do |islet| %>
+        <%= islet.position %>
+      <% end %>
 
-    <% table.with_column(Frame.model_name.human.pluralize) do |islet| %>
-      <%= Islet.human_attribute_name(:frames_count, count: islet.frames.count) %>
-    <% end %>
+      <% table.with_column(Frame.model_name.human.pluralize) do |islet| %>
+        <%= Islet.human_attribute_name(:frames_count, count: islet.frames.count) %>
+      <% end %>
 
-    <% table.with_column(style: "min-width: 140px; width: 140px") do |islet| %>
-      <div class="btn-group btn-group-sm" role="group" aria-label="...">
-        <%= render partial: "islets/export_button", locals: { islet: islet } %>
-        <%= link_to edit_islet_path(islet), class: "btn btn-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 %>
-        <%= link_to islet, method: :delete, data: { confirm: t(".delete_confirmation") }, class: "btn btn-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 %>
-      </div>
+      <% table.with_column(style: "min-width: 140px; width: 140px") do |islet| %>
+        <div class="btn-group btn-group-sm" role="group" aria-label="...">
+          <%= render partial: "islets/export_button", locals: { islet: islet } %>
+          <%= link_to edit_islet_path(islet), class: "btn btn-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 %>
+          <%= link_to islet, method: :delete, data: { turbo_frame: :_top, confirm: t(".delete_confirmation") }, class: "btn btn-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 %>
+        </div>
+      <% end %>
     <% end %>
   <% end %>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,4 +36,6 @@ @@
       </div>
     </div>
+    <%= render HasManyTurboFrameComponent.new(Frame.model_name.human.pluralize, url: frames_path(bay_id: @bay.id), frame_id: dom_id(Frame, :table)) %>
     <%= render ChangelogEntries::ObjectListComponent.new(@bay) %>