tables: revert back to action buttons and pass paths to table from callers

Author: pranavrao145

app/assets/images/icons/ellipsis-v.svg

@@ -17,80 +17,54 @@
     </div>
   <% end %>
 
-  <!-- Construct columns sizes string from individual col_size parameters, include actions if present -->
-  <% col_list = columns.map { |c| c.col_size || "minmax(0, 1fr)" }.to_a %>
-  <% col_list << "50px" if has_actions? %>
-  <% column_sizes = col_list.join(" ") %>
+  <!-- Construct columns sizes string from individual col_size parameters -->
+  <% column_sizes = columns.map { |c| c.col_size || "minmax(0, 1fr)" }.join(" ") %>
 
   <!-- Each row (including header) is its own rounded box -->
   <div class="mb-2">
     <div class="card ui-enter-item bg-neutral rounded-lg" style="--ui-enter-delay: 80ms;">
-      <div class="p-4 grid items-center gap-4" style="grid-template-columns: <%= column_sizes %>">
+      <div class="p-4 grid items-stretch gap-4" style="grid-template-columns: <%= column_sizes %>">
         <% columns.each do |column| %>
-          <div class="text-sm font-semibold text-neutral-content"><%= column.header %></div>
-        <% end %>
-        <% if has_actions? %>
-          <div class="text-sm font-semibold text-neutral-content text-center"><%= t("shared.index_table_component.actions.label") %></div>
+          <div class="text-sm font-semibold text-neutral-content flex items-center"><%= column.header %></div>
         <% end %>
       </div>
     </div>
   </div>
 
-  <div class="space-y-2" data-controller="table-actions-dropdown" data-action="click@window->table-actions-dropdown#handleDocumentClick">
+  <div class="space-y-2">
     <% records.each_with_index do |record, index| %>
-      <% record_actions = actions_for(record) %>
       <div
         data-index-table-component-target="row"
         class="card ui-enter-item bg-white rounded-lg group transition-shadow relative overflow-visible shadow-sm<%= " cursor-pointer hover:shadow-md" if clickable_rows %>"
-        style="--ui-enter-delay: <%= 120 + ((index % 15) * 35) %>ms;"
-        <% if clickable_rows %>
-          data-action="click->table-actions-dropdown#navigateToRecord"
-        data-record-path="<%= row_path_for(record) %>"
-      <% end %>>
-      <div class="p-3 grid items-center gap-4 rounded-lg<%= " group-hover:bg-secondary/30 transition-colors" if clickable_rows %>" style="grid-template-columns: <%= column_sizes %>">
-        <% columns.each do |column| %>
-          <div class="text-sm text-base-content"><%= render_cell_content(record, column) %></div>
-        <% end %>
-        <% if has_actions? %>
-          <button type="button"
-                  class="flex items-center justify-center w-full hover:text-base-content transition-colors"
-                  data-action="click->table-actions-dropdown#openMenu">
-            <%= render IconComponent.new(icon: "ellipsis-v", size: :sm, classes: "text-base-content/50 hover:text-base-content transition-colors") %>
-          </button>
-        <% end %>
-      </div>
-
-      <% if has_actions? && record_actions.any? %>
-        <div class="hidden ui-enter-item absolute top-full right-0 mt-1 z-50 bg-base-100 rounded-lg border border-base-300 shadow-lg min-w-48 py-1" data-table-actions-dropdown-target="menu">
-          <% record_actions.each do |action| %>
-            <% turbo_data = { turbo_method: action[:method] }.compact %>
-            <% turbo_data[:turbo_confirm] = action[:confirm] if action[:confirm] %>
-            <% if action[:turbo_stream] %>
-              <% turbo_data[:turbo_stream] = true %>
-            <% end %>
-            <%= link_to(action[:path], data: turbo_data, class: "group/menu-item flex items-center gap-3 px-4 py-2 text-sm text-base-content hover:bg-primary/30 transition-colors") do %>
-              <% if action[:icon] %>
-                <%= render IconComponent.new(icon: action[:icon], size: :sm, classes: "text-base-content/50 group-hover/menu-item:text-primary transition-colors") %>
-              <% end %>
-              <span><%= action[:label] %></span>
+        style="--ui-enter-delay: <%= 120 + ((index % 15) * 35) %>ms;">
+        <div class="p-3 grid items-stretch gap-4 rounded-lg<%= " group-hover:bg-secondary/30 transition-colors" if clickable_rows %>" style="grid-template-columns: <%= column_sizes %>">
+          <% columns.each do |column| %>
+            <%= render_cell_wrapper(
+                  record,
+                  column,
+                  classes: class_names(
+                    "text-sm text-base-content min-w-0 w-full h-full flex items-center",
+                    row_clickable_for?(record, column) && "block"
+                  )
+                ) do %>
+              <%= render_cell_content(record, column) %>
             <% end %>
           <% end %>
         </div>
-      <% end %>
-    </div>
-  <% end %>
-  <div data-index-table-component-target="emptyRow" class="card ui-enter-item bg-white rounded-lg shadow-sm <%= "hidden" unless empty? %>" style="--ui-enter-delay: 120ms;">
-    <div class="flex justify-center p-3 items-center">
-      <div class="text-sm text-base-content/40 font-bold"><%= t("shared.index_table_component.no_entries") %></div>
+      </div>
+    <% end %>
+    <div data-index-table-component-target="emptyRow" class="card ui-enter-item bg-white rounded-lg shadow-sm <%= "hidden" unless empty? %>" style="--ui-enter-delay: 120ms;">
+      <div class="flex justify-center p-3 items-center">
+        <div class="text-sm text-base-content/40 font-bold"><%= t("shared.index_table_component.no_entries") %></div>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="flex justify-center mt-4">
-  <div class="join hidden" data-index-table-component-target="pagination">
-    <button class="join-item btn btn-sm" data-action="index-table-component#previousPage" data-prev>&lt;</button>
-    <span class="join-item btn btn-sm no-animation pointer-events-none" data-index-table-component-target="pageInfo"></span>
-    <button class="join-item btn btn-sm" data-action="index-table-component#nextPage" data-next>&gt;</button>
+  <div class="flex justify-center mt-4">
+    <div class="join hidden" data-index-table-component-target="pagination">
+      <button class="join-item btn btn-sm" data-action="index-table-component#previousPage" data-prev>&lt;</button>
+      <span class="join-item btn btn-sm no-animation pointer-events-none" data-index-table-component-target="pageInfo"></span>
+      <button class="join-item btn btn-sm" data-action="index-table-component#nextPage" data-next>&gt;</button>
+    </div>
   </div>
 </div>
-</div>

app/components/shared/index_table_component.html.erb

@@ -1,42 +1,53 @@
 module Shared
   class IndexTableComponent < ViewComponent::Base
-    attr_reader :records, :columns, :searchable, :per_page, :actions, :clickable_rows, :turbo_stream_rows
+    attr_reader :records, :columns, :searchable, :per_page, :clickable_rows, :turbo_stream_rows
 
     Column = Struct.new(:attribute, :header, :cell_renderer, :col_size)
 
-    def initialize(records:, searchable: true, per_page: 10, actions: nil, clickable_rows: true,
-                   turbo_stream_rows: false)
+    def initialize(records:, searchable: true, per_page: 10, clickable_rows: true,
+                   turbo_stream_rows: false, record_path: nil)
       super()
       @records = records
       @columns = []
       @searchable = searchable
       @per_page = per_page
-      @actions = actions
       @clickable_rows = clickable_rows
       @turbo_stream_rows = turbo_stream_rows
-    end
-
-    def row_path_for(record)
-      options = @turbo_stream_rows ? { format: :turbo_stream } : {}
-      polymorphic_path(record.to_polymorphic_path, **options)
+      @record_path = record_path
     end
 
     def column(attribute, header: nil, col_size: nil, &cell_renderer)
       label = header || default_header_for(attribute)
       @columns << Column.new(attribute, label, cell_renderer, col_size)
     end
 
-    def has_actions?
-      @actions.present?
+    private
+
+    def row_path_for(record)
+      return nil unless @record_path
+
+      path = @record_path.call(record)
+
+      return path unless @turbo_stream_rows
+
+      path.include?("?") ? "#{path}&format=turbo_stream" : "#{path}?format=turbo_stream"
     end
 
-    def actions_for(record)
-      return [] unless has_actions?
+    def row_link_data
+      { turbo_stream: (@turbo_stream_rows ? true : nil) }.compact
+    end
 
-      @actions.call(record)
+    def render_cell_wrapper(record, column, classes:, &)
+      if row_clickable_for?(record, column)
+        link_to(row_path_for(record), data: row_link_data, class: classes, &)
+      else
+        content_tag(:div, class: classes, &)
+      end
     end
 
-    private
+    def row_clickable_for?(record, column)
+      clickable_rows && row_path_for(record).present? && column.attribute != :actions
+    end
 
     def render_cell_content(record, column)
       if column.cell_renderer

app/components/shared/index_table_component.rb

@@ -1,7 +1,3 @@
 class ApplicationRecord < ActiveRecord::Base
   primary_abstract_class
-
-  def to_polymorphic_path
-    self
-  end
 end

app/javascript/controllers/table_actions_dropdown_controller.js

@@ -8,8 +8,4 @@ class Journal < ApplicationRecord
   has_rich_text :markdown_content
 
   validates :title, presence: true
-
-  def to_polymorphic_path
-    [subproject.project, subproject, self]
-  end
 end

app/models/application_record.rb

@@ -1,8 +1,4 @@
 class LogEntry < ApplicationRecord
   belongs_to :subproject
   belongs_to :user
-
-  def to_polymorphic_path
-    [subproject.project, subproject, self]
-  end
 end

app/models/journal.rb

@@ -6,8 +6,4 @@ class Subproject < ApplicationRecord
 
   has_many :log_entries, dependent: :destroy
   has_many :journals, dependent: :destroy
-
-  def to_polymorphic_path
-    [project, self]
-  end
 end

app/models/log_entry.rb

@@ -26,12 +26,7 @@
         <h1 class="text-2xl font-bold"><%= t(".subprojects") %></h1>
         <%= render Shared::IndexTableComponent.new(
               records: @project.subprojects,
-              actions: lambda { |subproject|
-                [
-                  { icon: "edit", label: t("shared.index_table_component.actions.edit"), path: edit_project_subproject_path(@project, subproject), turbo_stream: true },
-                  { icon: "delete", label: t("shared.index_table_component.actions.delete"), path: project_subproject_path(@project, subproject), method: :delete, confirm: t("subprojects.destroy.confirm") }
-                ]
-              }
+              record_path: ->(subproject) { project_subproject_path(@project, subproject) }
             ) do |table| %>
           <% table.column :name do |subproject| %>
             <%= subproject.name %>
@@ -45,6 +40,12 @@
           <% table.column :created_at do |subproject| %>
             <%= l(subproject.created_at) %>
           <% end %>
+          <% table.column :actions, header: t("shared.index_table_component.actions.label"), col_size: "90px" do |subproject| %>
+            <div class="flex flex-row gap-2 items-center justify-center">
+              <%= render ActionButtonComponent.new(to: edit_project_subproject_path(@project, subproject), icon: "edit", turbo_stream: true, colour: :info) %>
+              <%= render ActionButtonComponent.new(to: project_subproject_path(@project, subproject), method: :delete, icon: "delete", colour: :error, confirm: t("subprojects.destroy.confirm")) %>
+            </div>
+          <% end %>
         <% end %>
       <% end %>
     </div>

app/models/subproject.rb

@@ -8,12 +8,6 @@
   <%= render ContentCardComponent.new do %>
     <%= render Shared::IndexTableComponent.new(
           records: @regions,
-          actions: lambda { |region|
-            [
-              { icon: "edit", label: t("shared.index_table_component.actions.edit"), path: edit_region_path(region), turbo_stream: true },
-              { icon: "delete", label: t("shared.index_table_component.actions.delete"), path: region_path(region), method: :delete, confirm: t("regions.destroy.confirm") }
-            ]
-          },
           clickable_rows: false
         ) do |table| %>
     <% table.column :name %>
@@ -23,6 +17,12 @@
     <% table.column :longitude do |region| %>
       <%= "#{region.longitude.abs.round(4)}° #{region.longitude >= 0 ? 'E' : 'W'}" %>
     <% end %>
+    <% table.column :actions, header: t("shared.index_table_component.actions.label"), col_size: "90px" do |region| %>
+      <div class="flex flex-row gap-2 items-center justify-center">
+        <%= render ActionButtonComponent.new(to: edit_region_path(region), icon: "edit", turbo_stream: true, colour: :info) %>
+        <%= render ActionButtonComponent.new(to: region_path(region), method: :delete, icon: "delete", colour: :error, confirm: t("regions.destroy.confirm")) %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>
 </div>