Convert owner controller to html and update core components

lib/ex338_web.ex

@@ -35,6 +35,24 @@ defmodule Ex338Web do
     end
   end
 
+  def controller_html do
+    quote do
+      use Phoenix.Controller,
+        formats: [:html, :json],
+        layouts: [html: {Ex338Web.LayoutView, :app}]
+
+      import Ecto
+      import Ecto.Query
+      import Ex338Web.Gettext
+      import Phoenix.LiveView.Controller
+      import Plug.Conn
+
+      alias Ex338.Repo
+
+      unquote(verified_routes())
+    end
+  end
+
   def view do
     quote do
       use Phoenix.View,
@@ -133,6 +151,7 @@ defmodule Ex338Web do
       # Core UI components and translation
       import Ex338Web.CoreComponents
       import Ex338Web.Gettext
+      import Ex338Web.ViewHelpers
       import Phoenix.HTML
 
       # Shortcut for generating JS commands

lib/ex338_web/components/core_components.ex

@@ -468,7 +468,7 @@ defmodule Ex338Web.CoreComponents do
 
   slot :action, doc: "the slot for showing user actions in the last table column"
 
-  def table(assigns) do
+  def base_table(assigns) do
     assigns =
       with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
         assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
@@ -673,4 +673,64 @@ defmodule Ex338Web.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
+
+  attr :class, :string, default: nil
+  slot :inner_block, required: true
+
+  def page_header(assigns) do
+    ~H"""
+    <h2 class={["py-2 pl-4 text-xl text-gray-600 sm:pl-6", @class]}>
+      <%= render_slot(@inner_block) %>
+    </h2>
+    """
+  end
+
+  attr :class, :string, default: nil
+  slot :inner_block, required: true
+
+  def legacy_table(assigns) do
+    ~H"""
+    <div class={["md:max-w-md", @class]}>
+      <div class="py-2 -my-2 overflow-visible sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+        <div class="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg">
+          <table class="min-w-full">
+            <%= render_slot(@inner_block) %>
+          </table>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  attr :class, :string, default: nil
+  slot :inner_block, required: true
+
+  def legacy_th(assigns) do
+    ~H"""
+    <th class={[
+      "px-2 first:pl-4 first:pr-2 last:pl-2 last:pr-4 sm:px-6 sm:first:px-6 sm:last:px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider",
+      @class
+    ]}>
+      <%= render_slot(@inner_block) %>
+    </th>
+    """
+  end
+
+  attr :class, :string, default: nil
+  attr :style, :string, default: nil
+  slot :inner_block, required: true
+
+  def legacy_td(assigns) do
+    ~H"""
+    <td
+      class={[
+        "px-2 first:pl-4 first:pr-2 last:pl-2 last:pr-4 sm:px-6 sm:first:px-6 sm:last:px-6 py-2 whitespace-normal border-b border-gray-200 text-sm text-left leading-5 text-gray-500",
+        @class
+      ]}
+      style={@style}
+    >
+      <%= render_slot(@inner_block) %>
+    </td>
+    """
+  end
 end

lib/ex338_web/controllers/owner_controller.ex

@@ -1,5 +1,5 @@
 defmodule Ex338Web.OwnerController do
-  use Ex338Web, :controller
+  use Ex338Web, :controller_html
 
   alias Ex338.FantasyLeagues.FantasyLeague
   alias Ex338.FantasyTeams.Owner
@@ -15,7 +15,7 @@ defmodule Ex338Web.OwnerController do
 
     render(
       conn,
-      "index.html",
+      :index,
       fantasy_league: fantasy_league,
       owners: owners
     )

lib/ex338_web/controllers/owner_html.ex

@@ -0,0 +1,48 @@
+defmodule Ex338Web.OwnerHTML do
+  use Ex338Web, :html
+
+  def index(assigns) do
+    ~H"""
+    <.page_header class="sm:mb-6">
+      League Owners
+    </.page_header>
+
+    <.legacy_table>
+      <thead>
+        <tr>
+          <.legacy_th>
+            Fantasy Team
+          </.legacy_th>
+          <.legacy_th>
+            Owner
+          </.legacy_th>
+          <.legacy_th>
+            Slack Name
+          </.legacy_th>
+        </tr>
+      </thead>
+      <tbody class="bg-white">
+        <%= for owner <- @owners do %>
+          <tr>
+            <.legacy_td class="text-indigo-700">
+              <%= fantasy_team_link(@conn, owner.fantasy_team) %>
+            </.legacy_td>
+            <.legacy_td class="text-indigo-700">
+              <.link href={~p"/users/#{owner.user.id}"}>
+                <%= owner.user.name %>
+              </.link>
+            </.legacy_td>
+            <.legacy_td>
+              <%= if owner.user.slack_name == "" do %>
+                --
+              <% else %>
+                <%= owner.user.slack_name %>
+              <% end %>
+            </.legacy_td>
+          </tr>
+        <% end %>
+      </tbody>
+    </.legacy_table>
+    """
+  end
+end