Add sortable component

Author: manuthecoder

app/javascript/controllers/sortable_controller.js

@@ -4,11 +4,13 @@ import { Sortable, Plugins, Draggable } from '@shopify/draggable'
 export default class extends Controller {
   static values = {
     appendTo: String,
+    handle: String,
   }
 
   connect() {
     this.sortable = new Sortable(this.element, {
       draggable: '.draggable',
+      handle: this.handleValue,
       mirror: {
         constrainDimensions: true,
         appendTo: this.appendToValue,

app/views/events/settings/_donation_tiers.html.erb

@@ -26,26 +26,34 @@
   <div data-accordion-target="content" class="rounded-xl">
     <div class="field mt-5">
       <%= form_with(url: event_donation_tiers_path(event), local: true, method: :patch) do |form| %>
-        <% event.donation_tiers.each do |tier| %>
-          <div class="card shadow-none border bg-gray-50 flex items-start gap-2 mb-2">
-            <div class="flex-1">
-              <div class="flex gap-2 w-full">
-                <input type="text" class="flex-1 !max-w-full" placeholder="Tier name" name="tiers[<%= tier.id %>][name]" value="<%= tier.name %>" required>
-                <div class="flex items-center gap-2 border rounded-md px-3 input min-w-0 p-0 max-w-[200px]">
-                  $
-                  <input type="text" class="!border-none !px-0" style="max-width: 95px" placeholder="Monthly cost" name="tiers[<%= tier.id %>][amount_cents]" value="<%= tier.amount_cents / 100 %>" required>
-                  /month
+        <ul
+          class="list-none p-0 m-0 flex flex-col gap-2"
+          data-controller="sortable event-sort"
+          data-sortable-append-to-value="body"
+          data-sortable-handle-value=".draggable-handle"
+          data-event-sort-organizer-positions-value="<%= event.donation_tiers.pluck(:id).to_json %>"
+          data-action="sortable:stop->event-sort#sort">
+          <% event.donation_tiers.each do |tier| %>
+            <div class="draggable card shadow-none border bg-gray-50 flex items-start gap-2 mb-2 transition-none">
+              <div class="flex-1">
+                <div class="flex gap-2 w-full">
+                  <input type="text" class="flex-1 !max-w-full" placeholder="Tier name" name="tiers[<%= tier.id %>][name]" value="<%= tier.name %>" required>
+                  <div class="flex items-center gap-2 border rounded-md px-3 input min-w-0 p-0 max-w-[200px]">
+                    $
+                    <input type="text" class="!border-none !px-0" style="max-width: 95px" placeholder="Monthly cost" name="tiers[<%= tier.id %>][amount_cents]" value="<%= tier.amount_cents / 100 %>" required>
+                    /month
+                  </div>
                 </div>
+                <textarea class="w-100 max-w-full mt-1" placeholder="Description" name="tiers[<%= tier.id %>][description]"><%= tier.description %></textarea>
               </div>
-              <textarea class="w-100 max-w-full mt-1" placeholder="Description" name="tiers[<%= tier.id %>][description]"><%= tier.description %></textarea>
-            </div>
 
-            <div class="flex flex-col gap-1">
-              <%= pop_icon_to "drag-indicator", "#" %>
-              <%= pop_icon_to "delete", event_donation_tiers_path(event, tier), method: :delete, data: { turbo_confirm: "Are you sure?" } %>
+              <div class="flex flex-col gap-1">
+                <%= pop_icon_to "drag-indicator", "#", class: "draggable-handle cursor-move" %>
+                <%= pop_icon_to "delete", event_donation_tiers_path(event, tier), method: :delete, data: { turbo_confirm: "Are you sure?" } %>
+              </div>
             </div>
-          </div>
-        <% end %>
+          <% end %>
+        </ul>
 
         <div class="flex gap-3 mt-4">
           <button type="button" class="btn bg-muted flex-1 gap-2" onclick="document.getElementById('createTier').requestSubmit();">