Append dropped cards instead of relying on server-side rendering to refresh the columns

This implements a simple strategy to optimistically insert cards in columns without waiting for the column refresh. Cards will be placed at the top respecting golden cards.

This uses sorting by "created at" with sorting by "updated at" for the _Not now_ column, so that the treatment everywhere is homogenous.

Author: jorgemanrubia

app/assets/stylesheets/card-columns.css

@@ -426,6 +426,10 @@
     }
   }
 
+  .cards__list:has(> :not(.blank-slate--card)) .card--hide-unless-empty {
+    display: none;
+  }
+
   /* TODO: I think this is legacy now? */
   .cards__heading {
     display: flex;

app/controllers/boards/columns/not_nows_controller.rb

@@ -2,7 +2,7 @@ class Boards::Columns::NotNowsController < ApplicationController
   include BoardScoped
 
   def show
-    set_page_and_extract_portion_from @board.cards.postponed.reverse_chronologically.with_golden_first.preloaded
+    set_page_and_extract_portion_from @board.cards.postponed.latest.preloaded
     fresh_when etag: @page.records
   end
 end

app/controllers/public/boards/columns/not_nows_controller.rb

@@ -1,5 +1,5 @@
 class Public::Boards::Columns::NotNowsController < Public::BaseController
   def show
-    set_page_and_extract_portion_from @board.cards.postponed.reverse_chronologically.with_golden_first
+    set_page_and_extract_portion_from @board.cards.postponed.latest
   end
 end

app/helpers/cards_helper.rb

@@ -1,16 +1,19 @@
 module CardsHelper
-  def card_article_tag(card, id: dom_id(card, :article), **options, &block)
+  def card_article_tag(card, id: dom_id(card, :article), data: {}, **options, &block)
     classes = [
       options.delete(:class),
       ("golden-effect" if card.golden?),
       ("card--postponed" if card.postponed?),
       ("card--active" if card.active?)
     ].compact.join(" ")
 
+    data[:drag_and_drop_top] = true if card.golden? && !card.closed? && !card.postponed?
+
     tag.article \
       id: id,
       style: "--card-color: #{card.color}; view-transition-name: #{id}",
       class: classes,
+      data: data,
       **options,
       &block
   end

app/javascript/controllers/drag_and_drop_controller.js

@@ -39,6 +39,7 @@ export default class extends Controller {
     this.wasDropped = true
     this.#decreaseCounter(this.sourceContainer)
     const sourceContainer = this.sourceContainer
+    this.#insertDraggedItem(container, this.dragItem)
     await this.#submitDropRequest(this.dragItem, container)
     this.#reloadSourceFrame(sourceContainer);
   }
@@ -47,10 +48,6 @@ export default class extends Controller {
     this.dragItem.classList.remove(this.draggedItemClass)
     this.#clearContainerHoverClasses()
 
-    if (this.wasDropped) {
-      this.dragItem.remove()
-    }
-
     this.sourceContainer = null
     this.dragItem = null
     this.wasDropped = false
@@ -68,19 +65,6 @@ export default class extends Controller {
     this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
   }
 
-  async #submitDropRequest(item, container) {
-    const body = new FormData()
-    const id = item.dataset.id
-    const url = container.dataset.dragAndDropUrl.replaceAll("__id__", id)
-
-    return post(url, { body, headers: { Accept: "text/vnd.turbo-stream.html" } })
-  }
-
-  #reloadSourceFrame(sourceContainer) {
-    const frame = sourceContainer.querySelector("[data-drag-and-drop-refresh]")
-    if (frame) frame.reload()
-  }
-
   #decreaseCounter(sourceContainer) {
     const counterElement = sourceContainer.querySelector("[data-drag-and-drop-counter]")
     if (counterElement) {
@@ -94,4 +78,29 @@ export default class extends Controller {
       }
     }
   }
+
+  #insertDraggedItem(container, item) {
+    const itemContainer = container.querySelector("[data-drag-drop-item-container]")
+    const topItems = itemContainer.querySelectorAll("[data-drag-and-drop-top]")
+    const lastTopItem = topItems[topItems.length - 1]
+
+    if (lastTopItem) {
+      lastTopItem.after(item)
+    } else {
+      itemContainer.prepend(item)
+    }
+  }
+
+  async #submitDropRequest(item, container) {
+    const body = new FormData()
+    const id = item.dataset.id
+    const url = container.dataset.dragAndDropUrl.replaceAll("__id__", id)
+
+    return post(url, { body, headers: { Accept: "text/vnd.turbo-stream.html" } })
+  }
+
+  #reloadSourceFrame(sourceContainer) {
+    const frame = sourceContainer.querySelector("[data-drag-and-drop-refresh]")
+    if (frame) frame.reload()
+  }
 }

app/views/boards/columns/_empty_placeholder.html.erb

@@ -0,0 +1,6 @@
+<div class="cards__list" data-drag-drop-item-container>
+  <div class="card blank-slate blank-slate--card card--hide-unless-empty">
+    <p class="txt-align-center card--hide-unless-empty">Drag cards here</p>
+    <p class="txt-align-center blank-slate-for-grid card--hide-unless-empty">Nothing here</p>
+  </div>
+</div>

app/views/boards/columns/_list.html.erb

@@ -1,3 +1,3 @@
-<div class="cards__list">
+<div class="cards__list" data-drag-drop-item-container >
   <%= render "cards/display/previews", cards: cards, draggable: draggable %>
 </div>

app/views/boards/columns/closeds/show.html.erb

@@ -17,12 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-        </div>
-      </div>
+      <%= render "boards/columns/empty_placeholder" %>
     <% end %>
   <% end %>
 </section>

app/views/boards/columns/not_nows/show.html.erb

@@ -17,12 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-        </div>
-      </div>
+      <%= render "boards/columns/empty_placeholder" %>
     <% end %>
   <% end %>
 </section>

app/views/boards/columns/show.html.erb

@@ -17,12 +17,7 @@
         <%= render "boards/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="cards__list">
-        <div class="card blank-slate blank-slate--card">
-          <p class="txt-align-center">Drag cards here</p>
-          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
-        </div>
-      </div>
+      <%= render "boards/columns/empty_placeholder" %>
     <% end %>
   <% end %>
 </section>