I’m migrating a small/medium sized application to use the new phx 1.7 view-less component paradigm and I’ve run into a few issues.
Our layout is non-trivial in that each page can potentially have a sub-navigation menu, header and search bar.
We previously accomplished this by allowing each controller action to pass a specific view as part of assigns, then the templates would check if that view was set and render it. Something like this:
in the controller:
render(conn, "show.html",
class: class,
content_header_view: {AppWeb.ClassView, "_header.html"}
)
And in our “admin” layout:
<%= if content_header_view = assigns[:content_header_view] do %>
<% {module, template} = content_header_view %>
<section>
<%= render(module, template, assigns) %>
</section>
This worked well-enough and allowed for the flexibility we desired at a per-action level.
With the move to components, I thought this would be a great use case for slots but I’m now a bit baffled at what the “right” way to do this is.
Here’s what I tried first with the move to phx 1.7:
I moved the old “admin.html.heex” layout to /components/layouts/ and in my layouts file called embed_templates. Then I created a bodyless function as described by the docs in order to define my slots, like so:
defmodule AppWeb.Layouts do
@moduledoc """
The module for handling layouts
"""
use AppWeb, :html
embed_templates "layouts/*"
slot :search_form_content,
doc: "A special slot for a search form that lives at the top of the page",
required: false
slot :header_content,
doc: "A slot for content that is fixed at the top of the page",
required: false
slot :secondary_nav_content, doc: "A slot for a secondary nav", required: false
def admin(assigns)
end
I set the controller to use the admin layout and then, in my index.html.heex file, I added this at the top:
<:secondary_nav_content>
Test Nav Content!
</:secondary_nav_content>
Existing content here was here
When I refreshed the page, I got this error: invalid slot entry <:secondary_nav_content>. A slot entry must be a direct child of a component
… which, after the fact, made sense to me since I didn’t wrap that slot in a component. But my naive expectation was that I could call into the admin layout’s slot from within the template that’s being rendered.
I then tried:
<.admin>
<:secondary_nav_content>
Test Nav Content!
</:secondary_nav_content>
Existing content here was here
<.admin/>
But that gave me an error about not being able to find the admin component. And even if it had worked, I believe it would have rendered the admin layout twice, once inside the other since we’re using put_layout to set the admin layout.
Here’s where I ended up:
I ended up making a layout file for each major “resource” in my site and then I called into the admin component directly in that file.
E.g.: /components/layouts/student.html.heex now has this content in it:
<.admin {assigns}>
<:search_form_content>
<AppWeb.StudentHTML.search_form {assigns} />
</:search_form_content>
<:header_content :if={assigns[:student]}>
<AppWeb.StudentHTML.header {assigns} />
</:header_content>
<:secondary_nav_content :if={assigns[:student]}>
<AppWeb.StudentHTML.subnav {assigns} />
</:secondary_nav_content>
</.admin>
Which is slightly different from another section like /components/layouts/class.html.heex which has only one slot filled out:
<.admin {assigns}>
<:header_content :if={assigns[:class]}>
<AppWeb.ClassHTML.header {assigns} />
</:header_content>
</.admin>
And the controllers now specifically put_layout on each action:
def show(conn, %{"id" => id}) do
course = LegacyData.get_course_with_requisites!(id)
conn
|> put_layout({AppWeb.Layouts, :course})
|> render(:show,
page_title: course.course_name,
course: course
)
end
In a sense, this is what I hoped for but for some reason it feels a bit icky and I’m not sure why.
My questions are: is this sane? Is it the intended approach? Is there a better way to do this?
Can anyone point to another project that handles non-trivial layouts like this?
I suppose my issue with this approach is: It’s odd that you can define slots on the admin view that cannot be used unless you compose a new view on top of it. This solution “works” in that I get the ability to define slots on a case by case basis but it requires that I define a new layout that uses the admin layout as a component internally.
This is not a pattern I’ve seen elsewhere so I’m curious what others think.
