joao.dubas/slax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): toggle room/user list with Phoenix.LiveView.JS

Browse Source
This commit is contained in:
João Paulo Dubas 2024-12-24 00:05:13 +00:00
parent 84c106989b
commit cd45664a63
Signed by: joao.dubas
SSH Key Fingerprint: SHA256:V1mixgOGRc/YMhGx/DNkOSmJxgA2vHNrDZEk3wt/kOA
1 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
lib/slax_web/live/chat_room_live.ex
View File

@ -22,7 +22,7 @@ defmodule SlaxWeb.ChatRoomLive do
</div> </div>
<div clas="mt-4 overflow-auto"> <div clas="mt-4 overflow-auto">
<div class="flex items-center h-8 px-3 group"> <div class="flex items-center h-8 px-3 group">
<span class="ml-2 leading-none font-medium text-sm">Rooms</span> <.toggler on_click={toggle_rooms()} dom_id="rooms-toggler" text="Rooms" />
</div> </div>
<div id="rooms-list"> <div id="rooms-list">
<.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} /> <.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} />
@ -46,7 +46,7 @@ defmodule SlaxWeb.ChatRoomLive do
<div class="mt-4"> <div class="mt-4">
<div class="flex items-center h-8 px-3 group"> <div class="flex items-center h-8 px-3 group">
<div class="flex items-center flex-grow focus:outline-none"> <div class="flex items-center flex-grow focus:outline-none">
<span class="ml-2 leading-none font-medium text-sm">Users</span> <.toggler on_click={toggle_users()} dom_id="users-toggler" text="Users" />
</div> </div>
</div> </div>
</div> </div>
@ -422,6 +422,37 @@ defmodule SlaxWeb.ChatRoomLive do
""" """
end end
attr :dom_id, :string, required: true
attr :on_click, JS, required: true
attr :text, :string, required: true
defp toggler(assigns) do
~H"""
<button id={@dom_id} phx-click={@on_click} class="flex items-center flex-grow focus:outline-none">
<.icon id={@dom_id <> "-chevron-down"} name="hero-chevron-down" class="h-4 w-4" />
<.icon
id={@dom_id <> "-chevron-right"}
name="hero-chevron-right"
class="h-4 w-4"
style="display: none;"
/>
<span class="ml-2 leading-none font-medium text-sm">{@text}</span>
</button>
"""
end
defp toggle_rooms do
JS.toggle(to: "#rooms-toggler-chevron-down")
|> JS.toggle(to: "#rooms-toggler-chevron-right")
|> JS.toggle(to: "#rooms-list")
end
defp toggle_users do
JS.toggle(to: "#users-toggler-chevron-down")
|> JS.toggle(to: "#users-toggler-chevron-right")
|> JS.toggle(to: "#users-list")
end
attr :current_user, User, required: true attr :current_user, User, required: true
attr :dom_id, :string, required: true attr :dom_id, :string, required: true
attr :message, Message, required: true attr :message, Message, required: true