joseratts

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

3 comments

/phoenix #community

0 661 3

2024-03-06 10:33:44 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

joseratts

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

Post #1

sodapopcan

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.

Post #2

joseratts

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.

Post #3

— All posts loaded —