cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Default collection and wishlist to a grid layout

Browse Source
This commit is contained in:
Claudio Ortolina
2025-10-31 17:55:38 +00:00
parent 583a25bf9d
commit 12272608bc
8 changed files with 282 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/index.ex
+17 -2
View File
@@ -12,13 +12,16 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
@default_records_list_params %{
query: "",
page: 1,
page_size: 50,
page_size: 48,
order: :purchase
}
@impl true
def mount(_params, _session, socket) do
{:ok, assign(socket, :current_section, :collection)}
{:ok,
socket
|> assign(:current_section, :collection)
|> assign(:display, :grid)}
end
@impl true
@@ -124,6 +127,18 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
end
end
def handle_event("set_display", %{"mode" => mode}, socket) do
mode = parse_mode(mode)
{:noreply,
socket
|> assign(:display, mode)
|> load_and_assign_records(socket.assigns.record_list_params)}
end
defp parse_mode("grid"), do: :grid
defp parse_mode("list"), do: :list
defp load_and_assign_records(socket, record_list_params) do
offset = page_to_offset(record_list_params.page, record_list_params.page_size)
lib/music_library_web/live/collection_live/index.html.heex
+39
View File
@@ -52,10 +52,49 @@
{gettext("A->Z")}
</.button>
</.button_group>
<.button_group>
<.button
phx-click="set_display"
phx-value-mode="grid"
size="sm"
class={[
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-squares-2x2"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Grid")}
</.button>
<.button
phx-click="set_display"
phx-value-mode="list"
size="sm"
class={[
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("List")}
</.button>
</.button_group>
</div>
</div>
<.dense_record_grid
:if={@display == :grid}
id="collection"
records={@streams.records}
record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
/>
<.record_list
:if={@display == :list}
records={@streams.records}
record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
lib/music_library_web/live/wishlist_live/index.ex
+14 -1
View File
@@ -11,7 +11,7 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
@default_records_list_params %{
query: "",
page: 1,
page_size: 50,
page_size: 48,
order: :alphabetical
}
@@ -23,6 +23,7 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
socket
|> assign(current_section: :wishlist)
|> assign(:import_query, "")
|> assign(:display, :grid)
|> assign(:current_date, current_date)}
end
@@ -140,6 +141,18 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
end
end
def handle_event("set_display", %{"mode" => mode}, socket) do
mode = parse_mode(mode)
{:noreply,
socket
|> assign(:display, mode)
|> load_and_assign_records(socket.assigns.record_list_params)}
end
defp parse_mode("grid"), do: :grid
defp parse_mode("list"), do: :list
defp load_and_assign_records(socket, record_list_params) do
offset = page_to_offset(record_list_params.page, record_list_params.page_size)
lib/music_library_web/live/wishlist_live/index.html.heex
+39
View File
@@ -39,10 +39,49 @@
{gettext("A->Z")}
</.button>
</.button_group>
<.button_group>
<.button
phx-click="set_display"
phx-value-mode="grid"
size="sm"
class={[
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-squares-2x2"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Grid")}
</.button>
<.button
phx-click="set_display"
phx-value-mode="list"
size="sm"
class={[
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("List")}
</.button>
</.button_group>
</div>
</div>
<.dense_record_grid
:if={@display == :grid}
id="wishlist"
records={@streams.records}
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
/>
<.record_list
:if={@display == :list}
current_date={@current_date}
records={@streams.records}
record_show_path={fn record -> ~p"/wishlist/#{record}" end}