Add reordering animation

src/components/tasks/mixins/taskList.js

@@ -189,8 +189,7 @@ export default {
 			}
 		},
 		saveTaskPosition(e) {
-			console.log(e.oldIndex, e.newIndex)
-			console.log('elem', this.tasks[e.newIndex].title)
+			this.drag = false
 			
 			const task = this.tasks[e.newIndex]
 			const taskBefore = this.tasks[e.newIndex - 1] ?? null

src/views/list/views/List.vue

@@ -80,24 +80,32 @@
 					class="tasks mt-0"
 					v-if="tasks && tasks.length > 0"
 				>
-					<draggable v-model="tasks" group="tasks" @end="saveTaskPosition">
-						<single-task-in-list
-							:show-list-color="false"
-							:disabled="!canWrite"
-							:key="t.id"
-							:the-task="t"
-							@taskUpdated="updateTasks"
-							task-detail-route="task.detail"
-							v-for="t in tasks"
-						>
-							<div
-								@click="editTask(t.id)"
-								class="icon settings"
-								v-if="!list.isArchived && canWrite"
+					<draggable
+						v-model="tasks"
+						group="tasks"
+						@start="() => drag = true"
+						@end="saveTaskPosition"
+						v-bind="dragOptions"
+					>
+						<transition-group type="transition" :name="!drag ? 'flip-list' : null">
+							<single-task-in-list
+								:show-list-color="false"
+								:disabled="!canWrite"
+								:key="t.id"
+								:the-task="t"
+								@taskUpdated="updateTasks"
+								task-detail-route="task.detail"
+								v-for="t in tasks"
 							>
-								<icon icon="pencil-alt"/>
-							</div>
-						</single-task-in-list>
+								<div
+									@click="editTask(t.id)"
+									class="icon settings"
+									v-if="!list.isArchived && canWrite"
+								>
+									<icon icon="pencil-alt"/>
+								</div>
+							</single-task-in-list>
+						</transition-group>
 					</draggable>
 				</div>
 				<card
@@ -183,6 +191,12 @@ export default {
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 			ctaVisible: false,
+
+			drag: false,
+			dragOptions: {
+				animation: 150,
+				ghostClass: 'ghost',
+			},
 		}
 	},
 	mixins: [
@@ -209,10 +223,8 @@ export default {
 			if (this.tasks.length === 0) {
 				return 0
 			}
-			
-			const p = calculateTaskPosition(null, this.tasks[0].position)
-			console.log('newp', p)
-			return p
+
+			return calculateTaskPosition(null, this.tasks[0].position)
 		},
 		...mapState({
 			canWrite: state => state.currentList.maxRight > Rights.READ,