ordering now works properly

b310-digital · Sep 8, 2024 · 04496bf · 04496bf
1 parent 6d8541f
commit 04496bf
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -54,12 +54,13 @@ Hooks.NativeSharingButton = {
 // see https://github.com/drag-drop-touch-js/dragdroptouch for mobile support
 Hooks.Sortable = {
   mounted(){
-    sortable('.sortable')[0].addEventListener('sortupdate', (e) => {
+    sortable('.sortable', {forcePlaceholderSize: true, placeholderClass: 'card-body-mindwendel-idea-ph-class'})[0].addEventListener('sortupdate', (e) => {
       this.pushEventTo(this.el, "change_position", {
-        id: e.detail.item.children[0].dataset.id,
-        brainstorming_id: e.detail.item.children[0].dataset.brainstormingId,
+        id: e.detail.item.dataset.id,
+        brainstorming_id: e.detail.item.dataset.brainstormingId,
         // on the server, positions start with 1 not 0
-        new_position: e.detail.destination.elementIndex + 1
+        new_position: e.detail.destination.elementIndex + 1,
+        old_position: e.detail.origin.elementIndex + 1
       })
     });
   },

diff --git a/assets/scss/_bootstrap_custom.scss b/assets/scss/_bootstrap_custom.scss
@@ -11,3 +11,10 @@
   padding: 0.5rem 0.5rem;
   background-color: inherit;
 }
+
+.card-body-mindwendel-idea-ph-class {
+  @extend .card;
+  @extend .m-3;
+  @extend .shadow-sm;
+  border-style: dashed;
+}
diff --git a/lib/mindwendel/ideas.ex b/lib/mindwendel/ideas.ex
@@ -151,16 +151,30 @@ defmodule Mindwendel.Ideas do
     |> Repo.update_all([])
   end
 
-  def update_ideas_for_brainstorming_by_user_move(brainstorming_id, idea_id, new_position) do
+  def update_ideas_for_brainstorming_by_user_move(brainstorming_id, idea_id, new_position, old_position) do
+    get_idea!(idea_id) |> update_idea(%{order_position: new_position})
+
+    # depending on moving a card bottom up or up to bottom, we need to correct the ordering
+    order = if new_position < old_position, do: [asc: :order_position, desc: :updated_at], else: [asc: :order_position, asc: :updated_at]
+
+    idea_rank_query =
+      from(idea in Idea,
+        where: idea.brainstorming_id == ^brainstorming_id,
+        windows: [o: [order_by: ^order]],
+        select: %{
+          idea_id: idea.id,
+          idea_rank:
+            over(row_number(), :o)
+        }
+      )
+
     from(idea in Idea,
-      where: idea.brainstorming_id == ^brainstorming_id and idea.order_position >= ^new_position and idea.id != ^idea_id,
-      update: [set: [order_position: idea.order_position + 1]]
+      join: idea_ranks in subquery(idea_rank_query),
+      on: idea_ranks.idea_id == idea.id,
+      where: idea.brainstorming_id == ^brainstorming_id,
+      update: [set: [order_position: idea_ranks.idea_rank]]
     )
     |> Repo.update_all([])
-    |> IO.inspect
-
-    from(idea in Idea, where: idea.id == ^idea_id and idea.brainstorming_id == ^brainstorming_id, update: [set: [order_position: ^new_position]])
-    |> Repo.update_all([])
   end
 
   @doc """

diff --git a/lib/mindwendel_web/live/idea_live/index_component.ex b/lib/mindwendel_web/live/idea_live/index_component.ex
@@ -45,8 +45,8 @@ defmodule MindwendelWeb.IdeaLive.IndexComponent do
     {:noreply, socket}
   end
 
-  def handle_event("change_position", %{"id" => id, "brainstorming_id" => brainstorming_id, "new_position" => new_position}, socket) do
-    Ideas.update_ideas_for_brainstorming_by_user_move(brainstorming_id, id, new_position)
+  def handle_event("change_position", %{"id" => id, "brainstorming_id" => brainstorming_id, "new_position" => new_position, "old_position" => old_position}, socket) do
+    Ideas.update_ideas_for_brainstorming_by_user_move(brainstorming_id, id, new_position, old_position)
     Brainstormings.broadcast({:ok, Brainstormings.get_brainstorming!(brainstorming_id)}, :brainstorming_updated)
 
     {:noreply, socket}

diff --git a/lib/mindwendel_web/live/idea_live/index_component.html.heex b/lib/mindwendel_web/live/idea_live/index_component.html.heex
@@ -1,9 +1,9 @@
 <div>
-  <div id="ideas" phx-hook="Sortable" class="row mb-5 sortable">
+  <div id="ideas" phx-hook="Sortable" class="mb-5 sortable d-flex flex-wrap justify-content-center">
     <%= for idea <- @ideas do %>
-      <div class="col-md-6">
         <div
-          class="card mt-3 shadow-sm p-2 rounded IndexComponent__IdeaCard"
+          class="card m-3 shadow-sm p-2 rounded IndexComponent__IdeaCard"
+-         style="width: 394px; cursor: grab;"
           data-testid={idea.id}
           data-id={idea.id}
           data-brainstorming-id={idea.brainstorming_id}
@@ -100,7 +100,6 @@
                 <% end %>
               <% end %>
             </div>
-          </div>
         </div>
       </div>
     <% end %>