Reorder record sets via drag and drop

assets/js/app.js

@@ -26,6 +26,7 @@ import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import FormatNumberHook from "./hooks/format-number";
 import UniversalSearchNavigationHook from "./hooks/universal-search-navigation";
 import RecordPickerNavigationHook from "./hooks/record-picker-navigation";
+import SortableListHook from "./hooks/sortable-list";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 import banner from "./banner";
@@ -34,6 +35,7 @@ let Hooks = FluxonHooks;
 Hooks.FormatNumber = FormatNumberHook;
 Hooks.UniversalSearchNavigation = UniversalSearchNavigationHook;
 Hooks.RecordPickerNavigation = RecordPickerNavigationHook;
+Hooks.SortableList = SortableListHook;
 Hooks.LiveToast = createLiveToastHook();
 
 const csrfToken = document

assets/js/hooks/sortable-list.js

@@ -0,0 +1,44 @@
+import Sortable from "sortablejs";
+
+export default {
+  mounted() {
+    this.initSortable();
+  },
+
+  updated() {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+    this.initSortable();
+  },
+
+  destroyed() {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+  },
+
+  initSortable() {
+    this.sortable = Sortable.create(this.el, {
+      animation: 150,
+      handle: "[data-sortable-handle]",
+      draggable: "[data-sortable-item]",
+      ghostClass: "opacity-30",
+      dragClass: "shadow-lg",
+      onEnd: () => {
+        const items = this.el.querySelectorAll("[data-sortable-item]");
+        const recordIds = Array.from(items).map(
+          (item) => item.dataset.recordId
+        );
+
+        const payload = { record_ids: recordIds };
+        const setId = this.el.dataset.setId;
+        if (setId) {
+          payload.set_id = setId;
+        }
+
+        this.pushEvent("reorder", payload);
+      },
+    });
+  },
+};

assets/package-lock.json

@@ -7,7 +7,8 @@
       "dependencies": {
         "barcode-detector": "^3.0.0",
         "canvas-confetti": "^1.9.3",
-        "live_toast": "file:../deps/live_toast"
+        "live_toast": "file:../deps/live_toast",
+        "sortablejs": "^1.15.6"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.16"
@@ -86,6 +87,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
+      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
+      "license": "MIT"
+    },
     "node_modules/tagged-tag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",

assets/package.json

@@ -2,7 +2,8 @@
   "dependencies": {
     "barcode-detector": "^3.0.0",
     "canvas-confetti": "^1.9.3",
-    "live_toast": "file:../deps/live_toast"
+    "live_toast": "file:../deps/live_toast",
+    "sortablejs": "^1.15.6"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16"

lib/music_library/record_sets.ex

@@ -116,6 +116,22 @@ defmodule MusicLibrary.RecordSets do
     {:ok, get_record_set!(record_set.id)}
   end
 
+  def reorder_records_in_set(%RecordSet{} = record_set, ordered_record_ids)
+      when is_list(ordered_record_ids) do
+    Repo.transaction(fn ->
+      ordered_record_ids
+      |> Enum.with_index()
+      |> Enum.each(fn {record_id, position} ->
+        from(i in RecordSetItem,
+          where: i.record_set_id == ^record_set.id and i.record_id == ^record_id
+        )
+        |> Repo.update_all(set: [position: position])
+      end)
+    end)
+
+    {:ok, get_record_set!(record_set.id)}
+  end
+
   def move_record_in_set(%RecordSet{} = record_set, record_id, direction)
       when direction in [:up, :down] do
     items =

lib/music_library_web/live/record_set_live/index.ex

@@ -62,7 +62,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
   end
 
   defp apply_fallback_index(socket, params) do
-    if get_in(socket.assigns, [:streams, :record_sets]) == nil do
+    if socket.assigns[:record_sets] == nil do
       socket
       |> apply_action(:index, params)
     else
@@ -84,7 +84,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
     |> assign(:list_params, list_params)
     |> assign(:page_title, gettext("Record Sets"))
     |> assign(:record_set, nil)
-    |> stream(:record_sets, sets, reset: true)
+    |> assign(:record_sets, sets)
   end
 
   def back_path(list_params) do
@@ -98,29 +98,24 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
 
   @impl true
   def handle_info(
-        {MusicLibraryWeb.RecordSetLive.Form, {:created, record_set}},
+        {MusicLibraryWeb.RecordSetLive.Form, {:created, _record_set}},
         socket
       ) do
-    {:noreply,
+    {:noreply, load_and_assign_sets(socket, socket.assigns.list_params)}
-     socket
-     |> stream_insert(:record_sets, record_set, at: 0)
-     |> load_and_assign_sets(socket.assigns.list_params)}
   end
 
   def handle_info(
         {MusicLibraryWeb.RecordSetLive.Form, {:updated, record_set}},
         socket
       ) do
-    {:noreply, stream_insert(socket, :record_sets, record_set)}
+    {:noreply, update_record_set_in_list(socket, record_set)}
   end
 
   def handle_info(
         {MusicLibraryWeb.RecordSetLive.RecordPicker, {:added, record_set}},
         socket
       ) do
-    {:noreply,
+    {:noreply, update_record_set_in_list(socket, record_set)}
-     socket
-     |> stream_insert(:record_sets, record_set)}
   end
 
   @impl true
@@ -138,31 +133,44 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
     record_set = RecordSets.get_record_set!(id)
     {:ok, _} = RecordSets.delete_record_set(record_set)
 
-    {:noreply,
+    {:noreply, load_and_assign_sets(socket, socket.assigns.list_params)}
-     socket
-     |> stream_delete(:record_sets, record_set)
-     |> load_and_assign_sets(socket.assigns.list_params)}
   end
 
   def handle_event("remove_record", %{"set-id" => set_id, "record-id" => record_id}, socket) do
     record_set = RecordSets.get_record_set!(set_id)
     {:ok, updated_set} = RecordSets.remove_record_from_set(record_set, record_id)
 
-    {:noreply, stream_insert(socket, :record_sets, updated_set)}
+    {:noreply, update_record_set_in_list(socket, updated_set)}
   end
 
   def handle_event("move_up", %{"set-id" => set_id, "record-id" => record_id}, socket) do
     record_set = RecordSets.get_record_set!(set_id)
     {:ok, updated_set} = RecordSets.move_record_in_set(record_set, record_id, :up)
 
-    {:noreply, stream_insert(socket, :record_sets, updated_set)}
+    {:noreply, update_record_set_in_list(socket, updated_set)}
   end
 
   def handle_event("move_down", %{"set-id" => set_id, "record-id" => record_id}, socket) do
     record_set = RecordSets.get_record_set!(set_id)
     {:ok, updated_set} = RecordSets.move_record_in_set(record_set, record_id, :down)
 
-    {:noreply, stream_insert(socket, :record_sets, updated_set)}
+    {:noreply, update_record_set_in_list(socket, updated_set)}
+  end
+
+  def handle_event("reorder", %{"set_id" => set_id, "record_ids" => record_ids}, socket) do
+    record_set = RecordSets.get_record_set!(set_id)
+    {:ok, updated_set} = RecordSets.reorder_records_in_set(record_set, record_ids)
+
+    {:noreply, update_record_set_in_list(socket, updated_set)}
+  end
+
+  defp update_record_set_in_list(socket, updated_set) do
+    record_sets =
+      Enum.map(socket.assigns.record_sets, fn set ->
+        if set.id == updated_set.id, do: updated_set, else: set
+      end)
+
+    assign(socket, :record_sets, record_sets)
   end
 
   defp parse_order("alphabetical"), do: :alphabetical

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

@@ -35,10 +35,11 @@
   </div>
 
   <div class="mt-6 space-y-6">
-    <ul phx-update="stream" id="record-sets-list" class="space-y-6">
+    <ul id="record-sets-list" class="space-y-6">
       <li
+        :if={@record_sets == []}
         id="no-record-sets"
-        class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
+        class="p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
       >
         <.icon name="hero-rectangle-stack" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
         <p class="text-zinc-600 dark:text-zinc-400">
@@ -47,8 +48,8 @@
       </li>
 
       <li
-        :for={{dom_id, record_set} <- @streams.record_sets}
+        :for={record_set <- @record_sets}
-        id={dom_id}
+        id={"record-set-#{record_set.id}"}
         class="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4"
       >
         <div class="flex items-baseline justify-between mb-3">
@@ -106,9 +107,16 @@
           </div>
         </div>
 
-        <div class="flex flex-wrap items-start gap-3 md:overflow-x-auto pb-2">
+        <div
+          class="flex flex-wrap items-start gap-3 md:overflow-x-auto pb-2"
+          id={"record-set-#{record_set.id}-items"}
+          phx-hook="SortableList"
+          data-set-id={record_set.id}
+        >
           <div
             :for={item <- record_set.items}
+            data-sortable-item
+            data-record-id={item.record.id}
             class={[
               "flex-none w-24 sm:w-32 group relative",
               is_nil(item.record.purchased_at) &&
@@ -135,6 +143,16 @@
                 width={256}
               />
             </.link>
+            <div
+              data-sortable-handle
+              class="absolute top-1 left-1 hidden group-hover:flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5 cursor-grab active:cursor-grabbing"
+            >
+              <.icon
+                name="hero-bars-2"
+                class="size-3.5 text-zinc-800 dark:text-zinc-200"
+                aria-hidden="true"
+              />
+            </div>
             <div class="absolute top-1 right-1 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
               <.dropdown
                 id={"item-actions-#{record_set.id}-#{item.record.id}"}

lib/music_library_web/live/record_set_live/show.ex

@@ -76,6 +76,13 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
     {:noreply, assign(socket, :record_set, updated_set)}
   end
 
+  def handle_event("reorder", %{"record_ids" => record_ids}, socket) do
+    {:ok, updated_set} =
+      RecordSets.reorder_records_in_set(socket.assigns.record_set, record_ids)
+
+    {:noreply, assign(socket, :record_set, updated_set)}
+  end
+
   defp page_title(:show, record_set), do: record_set.name
   defp page_title(:edit, record_set), do: gettext("Edit") <> " · " <> record_set.name
   defp page_title(:add_record, record_set), do: gettext("Add Record") <> " · " <> record_set.name

lib/music_library_web/live/record_set_live/show.html.heex

@@ -73,10 +73,13 @@
         :if={@record_set.items != []}
         class="grid grid-cols-2 sm:grid-cols-4 gap-4"
         id="record-set-records"
+        phx-hook="SortableList"
       >
         <div
           :for={item <- @record_set.items}
           id={"record-#{item.record.id}"}
+          data-sortable-item
+          data-record-id={item.record.id}
           class={[
             "group relative",
             is_nil(item.record.purchased_at) &&
@@ -103,6 +106,16 @@
               width={512}
             />
           </.link>
+          <div
+            data-sortable-handle
+            class="absolute top-1 left-1 hidden group-hover:flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5 cursor-grab active:cursor-grabbing"
+          >
+            <.icon
+              name="hero-bars-2"
+              class="size-3.5 text-zinc-800 dark:text-zinc-200"
+              aria-hidden="true"
+            />
+          </div>
           <div class="absolute top-1 right-1 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
             <.dropdown
               id={"item-actions-#{item.record.id}"}

test/music_library/record_sets_test.exs

@@ -176,6 +176,26 @@ defmodule MusicLibrary.RecordSetsTest do
     end
   end
 
+  describe "reorder_records_in_set/2" do
+    test "reorders records according to the given order" do
+      {set, [r1, r2, r3]} = record_set_with_records(3)
+
+      {:ok, updated} = RecordSets.reorder_records_in_set(set, [r3.id, r1.id, r2.id])
+
+      ids_in_order = Enum.map(updated.items, & &1.record.id)
+      assert ids_in_order == [r3.id, r1.id, r2.id]
+    end
+
+    test "no-ops when order is unchanged" do
+      {set, [r1, r2, r3]} = record_set_with_records(3)
+
+      {:ok, updated} = RecordSets.reorder_records_in_set(set, [r1.id, r2.id, r3.id])
+
+      ids_in_order = Enum.map(updated.items, & &1.record.id)
+      assert ids_in_order == [r1.id, r2.id, r3.id]
+    end
+  end
+
   describe "move_record_in_set/3" do
     test "moves a record up" do
       {set, [r1, r2 | _]} = record_set_with_records(3)

test/music_library_web/live/record_set_live/index_test.exs

@@ -119,6 +119,23 @@ defmodule MusicLibraryWeb.RecordSetLive.IndexTest do
     end
   end
 
+  describe "Drag-and-drop reorder" do
+    test "reorders records via reorder event", %{conn: conn} do
+      {set, [r1, r2, r3]} = record_set_with_records(3)
+
+      {:ok, view, _html} = live(conn, ~p"/record-sets")
+
+      render_hook(view, "reorder", %{
+        "set_id" => set.id,
+        "record_ids" => [r3.id, r1.id, r2.id]
+      })
+
+      updated = RecordSets.get_record_set!(set.id)
+      ids_in_order = Enum.map(updated.items, & &1.record.id)
+      assert ids_in_order == [r3.id, r1.id, r2.id]
+    end
+  end
+
   describe "Reorder records" do
     test "moves a record left (up)", %{conn: conn} do
       {set, [r1, r2 | _]} = record_set_with_records(3)

test/music_library_web/live/record_set_live/show_test.exs

@@ -81,6 +81,20 @@ defmodule MusicLibraryWeb.RecordSetLive.ShowTest do
     end
   end
 
+  describe "Drag-and-drop reorder" do
+    test "reorders records via reorder event", %{conn: conn} do
+      {set, [r1, r2, r3]} = record_set_with_records(3)
+
+      {:ok, view, _html} = live(conn, ~p"/record-sets/#{set}")
+
+      render_hook(view, "reorder", %{"record_ids" => [r3.id, r1.id, r2.id]})
+
+      updated = RecordSets.get_record_set!(set.id)
+      ids_in_order = Enum.map(updated.items, & &1.record.id)
+      assert ids_in_order == [r3.id, r1.id, r2.id]
+    end
+  end
+
   describe "Delete set" do
     test "deletes set and navigates to index", %{conn: conn} do
       set = record_set(%{name: "To Delete"})