Alan Dew

Stack used: Rails 6

Gems used: Apartment, Devise, Vue, vuedraggable, acts_as_list

Hi guys! I'm trying to create a "Trello" type app (following the Vue.js Trello Clone in Rails screencast). Right now, I'm trying to implement vuedraggable, but since i'm still learning Rails and first time using Apartment it's driving me crazy!

So here is my problem: I have 3 List columns right now. I want to be able to drag each List column around, and update their position, so that when I refresh my page they keep the updated position. Right now, when I drag my columns it works great live, but the position modification isn't saved correctly. When I refresh my page, the columns take their inital position, so their position aren't saved correctly. I guess since I'm using Apartment, I'm not using the right method to save it.

Here is my Lists Controller :

class ListsController < ApplicationController
  before_action :set_list, only: %i[show edit update destroy move]

  def move
    @list.insert_at(list_params[:position].to_i)
    render action: :show
  end

  private

  def set_list
    @list = List.find(params[:id])
  end

  def list_params
    params.require(:list).permit(:name, :position)
  end
end

And here is my Vue component :

<template>
  <draggable v-model="lists" group=".lists" class="row dragArea" @end="listMoved">
    <div v-for="(list, index) in lists" class="col-3 mr-5">
      <h5>{{ list.name }}</h5>
      <hr />

      <div v-for="(card, index) in list.cards" class="card card-body mb-3">
        {{ card.name }}
      </div>

      <div class="card card-body">
        <textarea v-model="messages[list.id]" class="form-control"></textarea>
        <button v-on:click="submitMessages(list.id)" class="btn btn-secondary">Ajouter</button>
      </div>
    </div>
  </draggable>
</template>

<script>
import Rails from '@rails/ujs';
import draggable from 'vuedraggable';

export default {
  components: {draggable},

  props: ['original_lists'],

  data: function() {
    return {
      messages: {},
      lists: this.original_lists
    };
  },

  methods: {
    listMoved: function(event) {
      var data = new FormData
      data.append("list[position]", event.newIndex + 1)
      Rails.ajax({
        beforeSend: () => true,
        url: `/lists/${this.lists[event.newIndex].id}/move`,
        type: "PATCH",
        data: data,
        dataType: "json",
      })
    },
  }
};
</script>

<style scoped>
.dragArea{
  min-height: 10px;
}
</style>

And here is what's logged in my terminal when moving (dragging) the first List column in third position:

Started PATCH "/lists/1/move" for 127.0.0.1 at 2019-12-09 18:54:17 +0100
   (0.0ms)  SELECT sqlite_version(*)
  ↳ config/initializers/apartment/apartment.rb:52:in `block (2 levels) in <main>'
   (0.1ms)  SELECT "users"."subdomain" FROM "users"
  ↳ config/initializers/apartment/apartment.rb:52:in `block (2 levels) in <main>'
   (0.0ms)  SELECT sqlite_version(*)
Processing by ListsController#move as JSON
  Parameters: {"list"=>{"position"=>"3"}, "id"=>"1"}
  List Load (0.1ms)  SELECT "lists".* FROM "lists" WHERE "lists"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/lists_controller.rb:76:in `set_list'
   (0.0ms)  begin transaction
  ↳ app/controllers/lists_controller.rb:68:in `move'
  List Load (0.1ms)  SELECT "lists".* FROM "lists" WHERE "lists"."id" = ? LIMIT ?   [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/lists_controller.rb:68:in `move'
  List Load (0.1ms)  SELECT "lists".* FROM "lists" WHERE (1 = 1) AND ("lists"."position" IS NOT NULL) ORDER BY "lists"."position" DESC LIMIT ?  [["LIMIT", 1]]
  ↳ app/controllers/lists_controller.rb:68:in `move'
  List Update All (0.0ms)  UPDATE "lists" SET "position" = ("lists"."position" - 1), "updated_at" = '2019-12-09 17:54:17.046407' WHERE (1 = 1) AND ("lists".id != 1) AND ("lists"."position" > 1) AND ("lists"."position" <= 3)
  ↳ app/controllers/lists_controller.rb:68:in `move'
   (0.0ms)  commit transaction
  ↳ app/controllers/lists_controller.rb:68:in `move'
  Rendering lists/show.html.erb within layouts/application
  Rendered lists/show.html.erb within layouts/application (Duration: 0.2ms | Allocations: 85)
[Webpacker] Everything's up-to-date. Nothing to do
  User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 3], ["LIMIT", 1]]
  ↳ app/views/shared/_header.html.erb:13
  Rendered shared/_header.html.erb (Duration: 1.9ms | Allocations: 1584)
Completed 200 OK in 13ms (Views: 6.9ms | ActiveRecord: 0.6ms | Allocations: 10514)
   (0.1ms)  SELECT "users"."subdomain" FROM "users"
  ↳ config/initializers/apartment/apartment.rb:52:in `block (2 levels) in <main>'
   (0.0ms)  SELECT sqlite_version(*)