Generic Table Partial

app/previews/flex/cases/index_preview.rb

@@ -0,0 +1,40 @@
+module Flex
+  module Cases
+    # Lookbook preview for Cases Index page
+    class IndexPreview < Lookbook::Preview
+      def empty
+        render template: "flex/cases/index", locals: {
+            model_class: PassportCase,
+            cases: []
+        }
+      end
+
+      def with_cases
+        create_case = ->(attrs) {
+          kase = PassportCase.new(
+              id: attrs[:id],
+              created_at: attrs[:created_at],
+          )
+          kase.send(:status=, attrs[:status])
+          kase
+        }
+
+        render template: "flex/cases/index", locals: {
+            model_class: PassportCase,
+            cases: [
+              create_case.call({
+                  id: "45c96903-b562-4817-ba80-d21a0cc276b9",
+                  created_at: "2024-01-15",
+                  status: :open
+              }),
+              create_case.call({
+                  id: "28edb98c-3674-411e-8383-408eed8b427b",
+                  created_at: "2024-01-10",
+                  status: :closed
+              })
+            ]
+        }
+      end
+    end
+  end
+end

app/previews/flex/shared/table_preview.rb

@@ -0,0 +1,26 @@
+module Flex
+  module Shared
+    # Lookbook preview for Table partial
+    class TablePreview < Lookbook::Preview
+      def empty_no_headers
+          render template: "flex/shared/_table", locals: { headers: [], rows: [] }
+      end
+
+      def empty_with_headers
+          render template: "flex/shared/_table", locals: { headers: [ "Col1", "Col2" ], rows: [] }
+      end
+
+      def one_row
+          render template: "flex/shared/_table", locals: { headers: [ "Col1", "Col2" ], rows: [ [ "foo", "bar" ] ] }
+      end
+
+      def one_row_no_headers
+          render template: "flex/shared/_table", locals: { headers: [], rows: [ [ "foo", "bar" ] ] }
+      end
+
+      def multiple_row
+          render template: "flex/shared/_table", locals: { headers: [ "Col1", "Col2" ], rows: [ [ "foo", "bar" ], [ "bar", "baz" ], [ "quux", "fui" ] ] }
+      end
+    end
+  end
+end

app/views/flex/application_forms/_row.html.erb

@@ -1,10 +1,10 @@
 <tr>
   <td>
     <% # TODO show in local time %>
-    <%= link_to application_form[:created_at], application_form[:path] %>
+    <%= link_to row[:created_at], row[:path] %>
   </td>
   <td>
-    <%= t("flex.application_forms.statuses.#{application_form[:status]}") %>
+    <%= t("flex.application_forms.statuses.#{row[:status]}") %>
   </td>
   <td>
     TODO

app/views/flex/application_forms/index.html.erb

@@ -40,29 +40,17 @@
   <h2 class="margin-top-6"><%= in_progress_applications_heading %></h2>
 
   <section class="d-flex flex-column flex-md-row gap-4 align-items-start justify-content-between">
-    <table class="usa-table usa-table--borderless width-full">
-      <thead>
-        <tr>
-          <th scope="col">
-            <%= t("flex.application_forms.index.col_created_at") %>
-          </th>
-          <th scope="col">
-            <%= t("flex.application_forms.index.col_status") %>
-          </th>
-          <th scope="col">
-            <%= t("flex.application_forms.index.col_actions") %>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <% application_forms.each do |application_form| %>
-          <% if local_assigns.key?(:row_view) %>
-            <%= render partial: row_view, locals: { application_form: } %>
-          <% else %>
-            <%= render partial: "flex/application_forms/row", locals: { application_form: } %>
-          <% end %>
-        <% end %>
-      </tbody>
-    </table>
+    <%= render template: "flex/shared/_table", locals: {
+        headers: [
+          t("flex.application_forms.index.col_created_at"),
+          t("flex.application_forms.index.col_status"),
+          t("flex.application_forms.index.col_actions")
+        ],
+        rows: application_forms,
+        row_view: local_assigns.key?(:row_view) ? row_view : "flex/application_forms/row",
+        empty_text: "No applications"
+      }
+    %>
   </section>
+
 <% end %>

app/views/flex/cases/index.html.erb

@@ -15,29 +15,13 @@
 </nav>
 
 <!-- Cases -->
-<table class="usa-table usa-table--borderless usa-table--striped">
-  <thead>
-    <tr>
-      <th scope="col">Case ID</th>
-      <th scope="col">Created</th>
-      <th scope="col">Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    <% if @cases.any? %>
-      <% @cases.each do |kase| %>
-        <tr>
-          <td><%= kase.id %></td>
-          <td><%= kase.created_at.strftime('%m/%d/%Y') %></td>
-          <td>
-            <%= link_to "View", polymorphic_path(kase), class: "usa-button usa-button--outline" %>
-          </td>
-        </tr>
-      <% end %>
-    <% else %>
-      <tr>
-        <td colspan="3" class="text-center">No cases</td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+<%= render template: "flex/shared/_table", locals: {
+    headers: [ "Case ID", "Created", "Action" ],
+    rows: cases.map { |kase| [
+      kase.id,
+      kase.created_at.strftime('%m/%d/%Y'),
+      link_to("View", polymorphic_path(kase), class: "usa-button usa-button--outline")
+    ]},
+    empty_text: "No cases"
+  }
+%>

app/views/flex/shared/_table.html.erb

@@ -0,0 +1,28 @@
+<table class="usa-table usa-table--borderless usa-table--striped width-full">
+  <thead>
+    <tr>
+       <% headers.each do |header| %>
+          <th scope="col"><%= header %></th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+      <% if rows.any? %>
+        <% rows.each do |row| %>
+          <% if defined?(row_view) %>
+            <%= render partial: row_view, locals: { row: } %>
+          <% else %>
+            <tr>
+              <% row.each do |cell| %>
+              <td><%= cell %></td>
+              <% end %>
+            </tr>
+          <% end %>
+        <% end %>
+      <% else %>
+        <tr>
+          <td colspan="<%= headers.size %>" class="text-center"><%= defined?(empty_text) ? empty_text : tag.i("empty") %></td>
+        </tr>
+      <% end %>
+  </tbody>
+</table>

spec/dummy/app/views/passport_application_forms/_row.html.erb

@@ -1,10 +1,10 @@
 <tr>
   <td>
     <% # TODO show in local time %>
-    <%= link_to application_form[:created_at], application_form[:path] %>
+    <%= link_to row[:created_at], row[:path] %>
   </td>
   <td>
-    <%= t("flex.application_forms.statuses.#{application_form[:status]}") %>
+    <%= t("flex.application_forms.statuses.#{row[:status]}") %>
   </td>
   <td>
     Passport TODO

spec/dummy/app/views/passport_cases/index.html.erb

@@ -1 +1 @@
-<%= render template: 'flex/cases/index', locals: { model_class: PassportCase } %>
+<%= render template: 'flex/cases/index', locals: { model_class: PassportCase, cases: @cases } %>