Ordering events with drag and drop

Gemfile

@@ -40,3 +40,5 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "acts_as_list", "~> 1.1"

Gemfile.lock

@@ -75,6 +75,8 @@ GEM
       minitest (>= 5.1)
       mutex_m
       tzinfo (~> 2.0)
+    acts_as_list (1.1.0)
+      activerecord (>= 4.2)
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
@@ -340,6 +342,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  acts_as_list (~> 1.1)
   bootsnap
   brakeman
   bundler-audit

app/javascript/controllers/position_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+import { put, get, post, patch, destroy } from "@rails/request.js"
+
+export default class extends Controller {
+
+  connect() {
+    this.sortable = Sortable.create(this.element, {
+      animation: 150,
+      onEnd: this.updatePosition.bind(this)
+    })
+  }
+
+  async updatePosition(event) {
+    const response = await put('/events', {
+      body: JSON.stringify({
+        sgid: event.item.dataset.sgid,
+        position: event.newIndex + 1
+      })
+    })
+  }
+}

app/packages/planning/controllers/plans/events_controller.rb

@@ -3,7 +3,7 @@
 module Plans
   class EventsController < ApplicationController
     before_action :authenticate_account!
-    before_action :load_plan
+    before_action :load_plan, except: %w(reorder)
     before_action :load_event, only: %w(edit update destroy)
 
     def index
@@ -63,6 +63,18 @@ def destroy
       redirect_to plan_events_path(@plan.id)
     end
 
+    def reorder
+      event = GlobalID::Locator.locate_signed(params[:sgid])
+
+      Event::Reorder.call(
+        plan_id: event.plan_id,
+        event_id: event.id,
+        position: params[:position]
+      )
+
+      head :no_content
+    end
+
     private
 
     def load_event

app/packages/planning/controllers/plans_controller.rb

@@ -71,6 +71,10 @@ def current
       account_id: current_account.id
     ).and_then do |plan|
       @plan = plan
+
+      @events = Event::FindAll
+        .call(plan_id: @plan.id)
+        .value!
     end
   end
 

app/packages/planning/models/event.rb

@@ -4,6 +4,8 @@ class Event < ApplicationRecord
   belongs_to :plan
   belongs_to :picto
 
+  acts_as_list scope: %i(plan_id day_of_the_week)
+
   def to_struct
     CustomStruct
       .new(attributes)

app/packages/planning/operations/event/create.rb

@@ -14,7 +14,7 @@ class Form
 
   def call
     Event
-      .new(plan_id:, picto_id:, title:, day_of_the_week:, position: 0)
+      .new(plan_id:, picto_id:, title:, day_of_the_week:)
       .save_with_response
       .and_then do |event|
         Response.success(event.to_struct)

app/packages/planning/operations/event/find_all.rb

@@ -15,7 +15,7 @@ def execute
     Response.success(
       Event
         .where(plan_id:)
-        .order(:day_of_the_week)
+        .order(:day_of_the_week, :position)
     )
   end
 end

app/packages/planning/operations/event/reorder.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Event::Reorder < CommandHandler::Command
+  class Form
+    include CommandHandler::Form
+
+    attribute :plan_id, :integer
+    attribute :event_id, :integer
+    attribute :position, :integer
+
+    validates :plan_id, presence: true
+    validates :event_id, presence: true
+    validates :position, presence: true
+  end
+
+  delegate :plan_id, :event_id, :position, to: :form
+
+  def execute
+    Event::Find
+      .call(plan_id:, event_id:)
+      .and_then do |_event|
+        Response.success(
+          Event
+            .find(event_id)
+            .insert_at(position)
+        )
+      end
+  end
+end

app/packages/planning/views/plans/current.html.erb

@@ -14,12 +14,14 @@
           <h3 class="text-center mb-4 font-bold uppercase"><%= day_of_week.title %></h3>
         </header>
 
-        <section>
-          <% Event.where(plan_id: @plan.id, day_of_the_week: day_of_week.id).each do |event| %>
-            <div class="flex justify-center items-center">
-              <%= image_tag event.picto.image.variant(:mini_thumb), class: "h-20 w-20" %>
-            </div>
-          <% end %>
+        <section class="flex justify-center items-center">
+          <ul data-controller="position">
+            <% @events.select {|event| event.day_of_the_week == day_of_week.id }.each do |event| %>
+              <%= content_tag :li, data: { sgid: event.to_sgid_param } do %>
+                <%= image_tag event.picto.image.variant(:mini_thumb), class: "h-20 w-20" %>
+              <% end %>
+            <% end %>
+          </ul>
         </section>
       </div>
     <% end %>

config/importmap.rb

@@ -3,8 +3,13 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application"
+
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
-pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.turbo.min.js"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin "@rails/request.js", to: "@rails-request.js" # @0.0.9
+
+pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.turbo.min.js"
+pin "sortablejs", to: "sortablejs.js" # @1.15.2
+
 pin_all_from "app/javascript/controllers", under: "controllers"

config/routes.rb

@@ -20,6 +20,7 @@
     get "disable", on: :member
   end
 
+  put "/events" => "plans/events#reorder"
   get "up" => "rails/health#show", as: :rails_health_check
 
   root "home#index"