How to convert LiveView modals to in-page forms?

Questions / Help
,
1

umm, dont want to be rude here, but modals totally suck and the Phoenix LiveView generators use them as standard.

How do I convert a modal to an in-page form?

<.modal :if={@live_action in [:new, :edit]} id="chat-modal" show on_cancel={JS.patch(~p"/chats")}>
  <.live_component
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />
</.modal>

I am being pretty naive by trying to simply swap but its not working

<.form :if={@live_action in [:new, :edit]} id="chat-modal" show on_cancel={JS.patch(~p"/chats")}>
  <.live_component
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />
</.form>

sends to url

http://localhost:4000/chats/3/edit?chat[body]=awesome+chater&chat[snowflake]=&chat[image]=&chat[video]=&chat[audio]=&chat[views]=0&chat[likes]=0&chat[rechat]=0

for a balanced data driven Modal UX discussion

1 Like
2

What if you remove the outer .modal tag and just render the live component?

2 Likes
3

trying that now actually

no doubt this is really simple but I am new to the latest version of LiveView and am not able to find this

<.live_component
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />

key :id not found in: nil. If you are using the dot syntax, such as map.field, make sure the left-hand side of the dot is a map
4

fixed, thanks @tomg

easy when you know how :smiley:

  <.live_component :if={@live_action in [:new, :edit]} 
    module={FolkbotWeb.ChatLive.FormComponent}
    id={@chat.id || :new}
    title={@page_title}
    action={@live_action}
    chat={@chat}
    patch={~p"/chats"}
  />
1 Like