init sort

components/ListView.vue

@@ -2,11 +2,16 @@
 import { useTodos, useTodoForm, Todo } from '@/store/todos'
 import { isToday, isPast, isFuture, parseISO } from 'date-fns'
 
+import Draggable from 'vuedraggable'
+
 const props = defineProps<{
   id?: string
 }>()
 
-const { todos, deleteTodo, toggleTodo } = await useTodos(true, props.id)
+const { todos, deleteTodo, toggleTodo, moveTodo } = await useTodos(
+  true,
+  props.id
+)
 const { newTodo, todoParts, addTodo } = useTodoForm(props.id)
 
 const todosToday = computed(() =>
@@ -35,6 +40,10 @@ function handleDelete(todo: Todo) {
   }
   deleteTodo(todo)
 }
+
+function handleMove(event) {
+  console.log('handle move', event)
+}
 </script>
 
 <template>
@@ -67,6 +76,24 @@ function handleDelete(todo: Todo) {
       <AddButton type="submit" />
     </form>
     <h2 class="mb-3">Today</h2>
+    <draggable
+      tag="ul"
+      class="mb-8"
+      :model-value="todosToday"
+      @update:model-value="handleMove"
+      item-key="id"
+    >
+      <template #item="{ element: todo }">
+        <li class="mt-2 first-of-type:mt-0">
+          <TodoItem
+            :todo="todo"
+            @delete="() => handleDelete(todo)"
+            @toggle="() => toggleTodo(todo)"
+          />
+        </li>
+      </template>
+    </draggable>
+
     <ul v-auto-animate class="mb-8">
       <li
         v-for="todo in todosToday"

package.json

@@ -22,6 +22,7 @@
     "date-fns": "^2.29.1",
     "date-parrot": "^0.0.23",
     "luxon": "^3.0.1",
-    "mdi-vue": "^3.0.13"
+    "mdi-vue": "^3.0.13",
+    "vuedraggable": "^4.1.0"
   }
 }

store/todos.ts

@@ -73,6 +73,7 @@ export async function useTodos(subscribe = false, listId?: string) {
     todos,
     deleteTodo: (todo: Todo) => deleteTodo(todo, todos),
     toggleTodo: (todo: Todo) => toggleTodo(todo, todos),
+    moveTodo: (todo: Todo, newIndex: number) => moveTodo(todo, newIndex, todos),
   }
 }
 
@@ -253,3 +254,40 @@ async function deleteTodo(todo: Todo, todos: Ref<Todo[]>) {
     console.error(error)
   }
 }
+
+async function moveTodo(todo: Todo, newIndex: number, todos: Ref<Todo[]>) {
+  const api = useSupabaseClient()
+  const index = todos.value.findIndex(({ id }) => id === todo.id)
+  const leadingTodo = todos.value[newIndex - 1]
+  const trailingTodo = todos.value[newIndex + 1]
+
+  if (!leadingTodo && !trailingTodo) {
+    return
+  }
+
+  // Remove from current position
+  todos.value.splice(index, 1)
+
+  let newRank = 0
+
+  // Add to new position
+  if (leadingTodo && trailingTodo) {
+    newRank = (leadingTodo.rank + trailingTodo.rank) / 2
+    todos.value.splice(newIndex, 0, todo)
+  } else if (leadingTodo) {
+    newRank = leadingTodo.rank + 1
+    todos.value.push(todo)
+  } else {
+    newRank = trailingTodo.rank / 2
+    todos.value.unshift(todo)
+  }
+
+  // Update rank
+  const { error } = await api
+    .from<Todo>('todo')
+    .update({ rank: newRank })
+    .eq('id', todo.id)
+  if (error) {
+    console.error(error)
+  }
+}

yarn.lock

@@ -4101,6 +4101,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+[email protected]:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -4707,6 +4712,13 @@ vue@^3.2.37:
     "@vue/server-renderer" "3.2.37"
     "@vue/shared" "3.2.37"
 
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
+  dependencies:
+    sortablejs "1.14.0"
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"