have been 5 years since my last elixir/phoenix development, since then have been a lot of changes specially the change added in the v1.7
So I’m refreshing my knowledge doing again the exercises of the book programming phoenix 1.4 but I’m stuck in the chapter 3 Controllers figuring out how and where implement the function first_name than back in version v1.4 was like follow
defmodule RumblWeb.UserView do
use RumblWeb, :view
alias Rumbl.Accounts
def first_name(%Accounts.User{name: name}) do
name
|> String.split(" ")
|> Enum.at(0)
end
end
and then used by the template index.html.eex
Listing Users
<table>
<%= for user <- @users do %>
<tr>
<td><b><%= **first_name**(user) %></b> (<%= user.id %>)</td>
<td><%= link "View", to: Routes.user_path(@conn, :show, user.id) %></td>
</tr>
<% end %>
</table>
So, Any of you have a tutorial about how to apply this kind of logic in the new phoenix 1.7 I just have found this thread Programming Phoenix 1.4 book examples updated to 1.7 but I’m not pretty sure this is the only or the best way to do it
Thanks in advance
I have found a way to solved it using de GitHub repo published in Programming Phoenix 1.4 book examples updated to 1.7 thread. Even so I would like to know your feedback mainly to find the best way to do it
the user_html.ex file
defmodule RumblWeb.UserHTML do
use RumblWeb, :html
embed_templates "user_html/*"
def first_name(name) do
name
|> String.split(" ")
|> Enum.at(0)
end
end
controllers/user_html/index.html.heex
<h1>Listing Users</h1>
<.table id="users" rows={@users}>
<:col :let={user} label="name"><%= first_name(user.name) %> (<%= user.id %>)</:col>
<:col :let={user} label="View"><.link href={~p"/users/#{user}"} class={[
"rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80"
]}>Show User</.link></:col>
</.table>
controllers/user_html/show.html.heex
<.header>
User
</.header>
<.list>
<:item title="ID"><%= @user.id %></:item>
<:item title="Name"><%= @user.name %></:item>
<:item title="Username"><%= @user.username %></:item>
</.list>
The only thing make me feel I little bit uncomfortable with this approach is I haven´t found yet the way to reuse templates just like appears in the book where the template that shows user info is reused in the view that shows the list of users
Views have essentially been swapped for components which you can define in a controller’s associated HTML module. It’s all detailed here.
In terms of your example, I tend to use components for everything, even these “helper” type functions. Some may find this gratuitous, and in this specific example it probably is, though of course splitting a string to get a first name is not a super realistic one (or at least not a good idea, lol):
def first_name(assigns) do
[first_name | _] = String.split(assigns.user.name, " ")
assigns = assign(assigns, :first_name, first_name)
~H"<%= @first_name %>"
end
Then you can use it like so:
~H"""
<table>
<tr :for={user <- @users}>
<td><b><.first_name user={user} /></b> (<%= user.id %>)</td>
<td> ... </td>
</tr>
</table>
"""
This can just be a private component within your HTML module or put it somewhere else so you can import it anywhere.
Thanks for answering @sodapopcan Following your approach I could do it in the following
way
user_html.ex
defmodule RumblWeb.UserHTML do
use RumblWeb, :html
embed_templates "user_html/*"
attr :name, :string, required: true
def first_name(assigns) do
[first_name | _] = String.split(assigns.name, " ")
assigns = assign(assigns, :first_name, first_name)
~H"<%= @first_name %>"
end
end
index.html.heex
<table>
<tr :for={user <- @users}>
<td><b><.first_name name={user.name} /></b> (<%= user.id %>)</td>
<td><.link href={~p"/users/#{user}"} class={[
"rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80"
]}>Show User</.link></td>
</tr>
</table>
I’m still getting used to the new way to do the things, but I think I can get it, So the idea is to define global or local componentes (that can take advantage of tailwind to have an style) and this components be reused even as nested componentes in other hex templates acting just like HTML tags with attributes and so on. If I’m wrong please do not hesitate in correct me in order to be able understand it.
