I tried make page live view of inventory …
mix phx.gen.live Inventory Item items name:string brand:string quantity:integer unit:string price:integer
* creating lib/stock_web/live/item_live/show.ex
* creating lib/stock_web/live/item_live/index.ex
* creating lib/stock_web/live/item_live/form.ex
* creating test/stock_web/live/item_live_test.exs
* creating lib/stock/inventory/item.ex
* creating priv/repo/migrations/20250612031816_create_items.exs
* creating lib/stock/inventory.ex
* injecting lib/stock/inventory.ex
* creating test/stock/inventory_test.exs
* injecting test/stock/inventory_test.exs
* creating test/support/fixtures/inventory_fixtures.ex
* injecting test/support/fixtures/inventory_fixtures.ex
Add the live routes to your browser scope in lib/stock_web/router.ex:
live "/items", ItemLive.Index, :index
live "/items/new", ItemLive.Form, :new
live "/items/:id", ItemLive.Show, :show
live "/items/:id/edit", ItemLive.Form, :edit
Remember to update your repository by running migrations:
$ mix ecto.migrate
Those created folder item_live with 3 files such as : form.ex, index.ex and show.ex
I saw the page of index.ex like this code below :
defmodule StockWeb.ItemLive.Index do
use StockWeb, :live_view
alias Stock.Inventory
@impl true
def render(assigns) do
~H"""
<Layouts.app flash={@flash}>
<.header>
Listing Items
<:actions>
<.button variant="primary" navigate={~p"/items/new"}>
<.icon name="hero-plus" /> New Item
</.button>
</:actions>
</.header>
<.table
id="items"
rows={@streams.items}
row_click={fn {_id, item} -> JS.navigate(~p"/items/#{item}") end}
>
<:col :let={{_id, item}} label="Name">{item.name}</:col>
<:col :let={{_id, item}} label="Brand">{item.brand}</:col>
<:col :let={{_id, item}} label="Quantity">{item.quantity}</:col>
<:col :let={{_id, item}} label="Unit">{item.unit}</:col>
<:col :let={{_id, item}} label="Price">{item.price}</:col>
<:action :let={{_id, item}}>
<div class="sr-only">
<.link navigate={~p"/items/#{item}"}>Show</.link>
</div>
<.link navigate={~p"/items/#{item}/edit"}>Edit</.link>
</:action>
<:action :let={{id, item}}>
<.link
phx-click={JS.push("delete", value: %{id: item.id}) |> hide("##{id}")}
data-confirm="Are you sure?"
>
Delete
</.link>
</:action>
</.table>
</Layouts.app>
"""
end
@impl true
def mount(_params, _session, socket) do
{:ok,
socket
|> assign(:page_title, "Listing Items")
|> stream(:items, Inventory.list_items())}
end
@impl true
def handle_event("delete", %{"id" => id}, socket) do
item = Inventory.get_item!(id)
{:ok, _} = Inventory.delete_item(item)
{:noreply, stream_delete(socket, :items, item)}
end
end
I tried mix phx.server and saw the page in browser with minimal layout,
My question is how to customize the page of index.ex become more good looking with tailwindcss and others
