Working on my project, I have integrated a Rails API backend with the acts_as_list gem and a Vue frontend utilizing the Vue Draggable package.
The drag and drop functionality is functioning as expected, with a PUT request being sent to the server. However, there are some strange occurrences that I've noticed:
Scenario 1: When I drag an item from position 1 to position 2, expecting them to switch places, the PUT request is sent but the actual update does not occur.
Scenario 2: If I move an item from position 1 to position 3, causing positions 2 and 3 to shift accordingly, sometimes I see the update reflected on the server but not consistently.
I am seeking a solution where the entire list gets updated upon dragging an item.
TodoList.vue
<template>
<div class="todos-container" v-if='trips.loaded'>
<draggable
:list='todoList'
:options='{animation:150}'
tag='ul'
class='list-group'
@change='changed(todoList, $event)'
>
<transition-group type='transition'>
<li v-for='(todo, index) in todoList' :key='todo.id' class='list-group-item'>
<v-icon class='drag-handle'>drag_handle</v-icon>
<v-checkbox
v-model="todoList[index].completed"
:ripple='false'
:label='`${todo.title}`'
color='primary'
@change='handleTodoClick(todo, index)'
/>
<v-icon class='remove-todo' @click='handleTodoDelete(todo, index)'>close</v-icon>
</li>
</transition-group>
</draggable>
</div>
</todo-list-styles>
</template>
<script>
import { mapActions } from 'vuex';
import draggable from 'vuedraggable';
export default {
props: {
trips: {
type : Object,
},
index: {
type : Number,
required: true,
}
},
computed: {
todoList() {
return this.trips.data[this.index].todos;
}
},
methods: {
...mapActions('trips', [
'updateTodoPosition'
]),
handleTodoClick: function(todo, index) {
console.log('checked')
},
handleTodoDelete: function(todo, index) {
console.log('clicked');
},
changed: function(todoList, $event) {
const {oldIndex, newIndex} = $event.moved;
const todo = todoList[newIndex];
const payload = {
oldIndex,
newIndex,
todo,
};
this.updateTodoPosition(payload);
},
},
components: {
draggable,
},
}
</script>
Params
Started PUT "/2/update_todo_position" for 127.0.0.1 at 2019-05-13 08:46:09 -0500
Processing by V1::TripsController#update_todo_position as */*
Parameters: {"oldIndex"=>0, "newIndex"=>2, "todo"=>{"id"=>2, "title"=>"Book Car Rental", "completed"=>true, "position"=>2}, "todo_id"=>"2", "trip"=>{"oldIndex"=>0, "newIndex"=>2, "todo"=>{"id"=>2, "title"=>"Book Car Rental", "completed"=>true, "position"=>2}}}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
TodoItem Load (0.2ms) SELECT "todo_items".* FROM "todo_items" WHERE "todo_items"."id" = $1 LIMIT $2 [["id", 2], ["LIMIT", 1]]
(0.2ms) BEGIN
CACHE User Load (0.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
UpcomingHike Load (0.3ms) SELECT "upcoming_hikes".* FROM "upcoming_hikes" WHERE "upcoming_hikes"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
(0.2ms) COMMIT
Completed 200 OK in 5ms (ActiveRecord: 1.1ms)
trips_controller.rb
module V1
class TripsController < ApplicationController
...
def update_todo_position
# TODO: Figure out why position being saved is incorrect
todo = TodoItem.find(params[:todo][:id])
todo.update!(position: params[:newIndex])
head :ok
end
...
end
end