Wire buttons with view

lib/music_library_web/live/collection_live/index.ex

@@ -63,11 +63,13 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
 
   defp apply_action(socket, :index, params) do
     query = params["query"] || ""
+    order = params["order"] || "alphabetical"
     total_records = Collection.search_records_count(query)
 
     record_list_params =
       @default_records_list_params
       |> merge_query(query)
+      |> merge_order(order)
       |> merge_pagination(params, total_records)
 
     offset = page_to_offset(record_list_params.page, record_list_params.page_size)
@@ -138,6 +140,10 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
     Map.put(record_list_params, :query, query)
   end
 
+  defp merge_order(record_list_params, order) do
+    Map.put(record_list_params, :order, parse_order(order))
+  end
+
   defp merge_pagination(record_list_params, params, total_records) do
     record_list_params
     |> Map.put(:page, parse_int_or_default(params["page"], record_list_params.page))
@@ -154,10 +160,23 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
     String.to_integer(value)
   end
 
-  defp back_path(record_list_params) do
+  defp parse_order("alphabetical"), do: :alphabetical
+  defp parse_order("purchase"), do: :purchase
+
+  defp order_path(record_list_params, order) do
     qs =
       record_list_params
       |> Map.take([:query, :page, :page_size])
+      |> Map.put(:order, order)
+      |> Enum.filter(fn {_, v} -> v not in ["", nil] end)
+
+    ~p"/collection?#{qs}"
+  end
+
+  defp back_path(record_list_params) do
+    qs =
+      record_list_params
+      |> Map.take([:query, :page, :page_size, :order])
       |> Enum.filter(fn {_, v} -> v not in ["", nil] end)
 
     ~p"/collection?#{qs}"

lib/music_library_web/live/collection_live/index.html.heex

@@ -10,8 +10,8 @@
 
   <div class="flex items-center justify-between gap-6 mt-8">
     <span class="isolate inline-flex rounded-md shadow-sm">
-      <button
-        type="button"
+      <.link
+        patch={order_path(@record_list_params, :alphabetical)}
         class={[
           "relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-xs sm:text-sm text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10",
           @record_list_params.order == :alphabetical && "font-bold"
@@ -19,9 +19,9 @@
       >
         <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
         {gettext("A->Z")}
-      </button>
-      <button
-        type="button"
+      </.link>
+      <.link
+        patch={order_path(@record_list_params, :purchase)}
         class={[
           "relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-xs sm:text-sm text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10",
           @record_list_params.order == :purchase && "font-bold"
@@ -34,7 +34,7 @@
           data-slot="icon"
         />
         {gettext("Purchase")}
-      </button>
+      </.link>
     </span>
 
     <p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400">

priv/gettext/default.pot

@@ -31,7 +31,7 @@ msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:14
 #: lib/music_library_web/live/artist_live/show.html.heex:73
-#: lib/music_library_web/live/collection_live/index.ex:79
+#: lib/music_library_web/live/collection_live/index.ex:81
 #: lib/music_library_web/live/collection_live/show.ex:115
 #: lib/music_library_web/live/collection_live/show.ex:132
 #, elixir-autogen, elixir-format
@@ -59,8 +59,8 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:125
-#: lib/music_library_web/live/collection_live/index.ex:132
+#: lib/music_library_web/live/collection_live/index.ex:127
+#: lib/music_library_web/live/collection_live/index.ex:134
 #: lib/music_library_web/live/stats_live/index.ex:53
 #: lib/music_library_web/live/stats_live/index.ex:59
 #: lib/music_library_web/live/wishlist_live/index.ex:121
@@ -186,7 +186,7 @@ msgstr ""
 msgid "Purchased on"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:117
+#: lib/music_library_web/live/collection_live/index.ex:119
 #: lib/music_library_web/live/stats_live/index.ex:45
 #: lib/music_library_web/live/wishlist_live/index.ex:113
 #, elixir-autogen, elixir-format