Task lists WIP:

* task drag and drop (buggy version)

conversejs/custom/plugins/tasks/muc-task-list-view.js

@@ -27,6 +27,7 @@ export default class MUCTaskListView extends CustomElement {
     // FIXME: is there a way to only refresh if the task is part of this list?
     this.listenTo(this.model.collection.chatroom.tasks, 'add', () => this.requestUpdate())
     this.listenTo(this.model.collection.chatroom.tasks, 'remove', () => this.requestUpdate())
+    this.listenTo(this.model.collection.chatroom.tasks, 'sort', () => this.requestUpdate())
   }
 
   render () {

conversejs/custom/plugins/tasks/muc-task-lists-view.js

@@ -6,6 +6,8 @@ import { __ } from 'i18n'
 import './styles/muc-task-lists.scss'
 
 export default class MUCTaskListsView extends CustomElement {
+  currentDraggedTask = null
+
   static get properties () {
     return {
       model: { type: Object, attribute: true },
@@ -23,12 +25,39 @@ export default class MUCTaskListsView extends CustomElement {
     // Adding or removing a new task list: we must update.
     this.listenTo(this.model, 'add', () => this.requestUpdate())
     this.listenTo(this.model, 'remove', () => this.requestUpdate())
+    this.listenTo(this.model, 'sort', () => this.requestUpdate())
+
+    this._handleDragStartBinded = this._handleDragStart.bind(this)
+    this._handleDragOverBinded = this._handleDragOver.bind(this)
+    this._handleDragLeaveBinded = this._handleDragLeave.bind(this)
+    this._handleDragEndBinded = this._handleDragEnd.bind(this)
+    this._handleDropBinded = this._handleDrop.bind(this)
   }
 
   render () {
     return tplMucTaskLists(this, this.model)
   }
 
+  connectedCallback () {
+    super.connectedCallback()
+    this.currentDraggedTask = null
+    this.addEventListener('dragstart', this._handleDragStartBinded)
+    this.addEventListener('dragover', this._handleDragOverBinded)
+    this.addEventListener('dragleave', this._handleDragLeaveBinded)
+    this.addEventListener('dragend', this._handleDragEndBinded)
+    this.addEventListener('drop', this._handleDropBinded)
+  }
+
+  disconnectedCallback () {
+    super.disconnectedCallback()
+    this.currentDraggedTask = null
+    this.removeEventListener('dragstart', this._handleDragStartBinded)
+    this.removeEventListener('dragover', this._handleDragOverBinded)
+    this.removeEventListener('dragleave', this._handleDragLeaveBinded)
+    this.removeEventListener('dragend', this._handleDragEndBinded)
+    this.removeEventListener('drop', this._handleDropBinded)
+  }
+
   async submitCreateTaskList (ev) {
     ev.preventDefault()
 
@@ -61,6 +90,118 @@ export default class MUCTaskListsView extends CustomElement {
       })
     }
   }
+
+  _getParentTaskEl (target) {
+    return target.closest?.('livechat-converse-muc-task')
+  }
+
+  _isATaskEl (target) {
+    return target.nodeName?.toLowerCase() === 'livechat-converse-muc-task'
+  }
+
+  _isOnTopHalf (ev, taskEl) {
+    const y = ev.clientY
+    const bounding = taskEl.getBoundingClientRect()
+    return (y <= bounding.y + (bounding.height / 2))
+  }
+
+  _resetDropOver () {
+    document.querySelectorAll('.livechat-drag-bottom-half, .livechat-drag-top-half').forEach(
+      el => el.classList.remove('livechat-drag-bottom-half', 'livechat-drag-top-half')
+    )
+  }
+
+  _handleDragStart (ev) {
+    if (!this._isATaskEl(ev.target)) { return }
+    console.log('Starting to drag a task...')
+    this.currentDraggedTask = ev.target
+    this._resetDropOver()
+  }
+
+  _handleDragOver (ev) {
+    if (!this.currentDraggedTask) { return }
+    const taskEl = this._getParentTaskEl(ev.target)
+    if (!taskEl) { return }
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event says we should preventDefault
+    ev.preventDefault()
+
+    // Are we on the top or bottom part of the taskEl?
+    const topHalf = this._isOnTopHalf(ev, taskEl)
+    taskEl.classList.add(topHalf ? 'livechat-drag-top-half' : 'livechat-drag-bottom-half')
+    taskEl.classList.remove(topHalf ? 'livechat-drag-bottom-half' : 'livechat-drag-top-half')
+  }
+
+  _handleDragLeave (ev) {
+    if (!this.currentDraggedTask) { return }
+    const taskEl = this._getParentTaskEl(ev.target)
+    if (!taskEl) { return }
+    taskEl.classList.remove('livechat-drag-bottom-half', 'livechat-drag-top-half')
+  }
+
+  _handleDragEnd (_ev) {
+    this.currentDraggedTask = null
+    this._resetDropOver()
+  }
+
+  _handleDrop (_ev) {
+    if (!this.currentDraggedTask) { return }
+
+    const draggedEl = document.querySelector('.livechat-drag-bottom-half, .livechat-drag-top-half')
+    const taskEl = this._getParentTaskEl(draggedEl)
+    if (!taskEl) { return }
+
+    console.log('Task dropped...')
+
+    const task = this.currentDraggedTask.model
+    const droppedOnTask = taskEl.model
+
+    if (task === droppedOnTask) {
+      console.log('Task dropped on itself, nothing to do')
+      return
+    }
+
+    if (task.get('list') !== droppedOnTask.get('list')) {
+      console.log('Changing task list...')
+      task.set('list', droppedOnTask.get('list'))
+    }
+
+    const topHalf = draggedEl.classList.contains('livechat-drag-top-half')
+    let newOrder = droppedOnTask.get('order') ?? 0
+    if (!topHalf) { Math.max(0, newOrder++) }
+    console.log('Task new order will be ' + newOrder)
+
+    const targetTasklist = this.model.get(droppedOnTask.get('list'))
+
+    console.log('Reordering tasks...')
+    let currentOrder = newOrder + 1
+    for (const t of targetTasklist.getTasks()) {
+      const order = t.get('order') ?? 0
+      if (t === task) {
+        console.log('Skipping the currently moved task')
+        continue
+      }
+      if (order < newOrder) { continue }
+
+      currentOrder++
+      if (order > currentOrder) {
+        console.log(
+          `Task "${t.get('name')}" as already on order greater than ${currentOrder.toString()}, stoping.`
+        )
+        break
+      }
+
+      console.log(`Changing order of task "${t.get('name')}" to ${currentOrder}`)
+      t.set('order', currentOrder)
+      t.saveItem() // TODO: handle errors?
+    }
+
+    console.log('Setting new order on the moved task')
+    task.set('order', newOrder)
+    task.saveItem() // TODO: handle errors?
+
+    this._resetDropOver()
+  }
 }
 
 api.elements.define('livechat-converse-muc-task-lists', MUCTaskListsView)

conversejs/custom/plugins/tasks/styles/muc-tasks.scss

@@ -35,5 +35,13 @@
         }
       }
     }
+
+    &.livechat-drag-bottom-half .task-line {
+      border-bottom: 4px solid blue;
+    }
+
+    &.livechat-drag-top-half .task-line {
+      border-top: 4px solid blue;
+    }
   }
 }

conversejs/custom/plugins/tasks/templates/muc-task-list.js

@@ -67,7 +67,7 @@ export default function tplMucTaskList (el, tasklist) {
       ${el.collapsed
         ? ''
         : repeat(tasks, (task) => task.get('id'), (task) => {
-          return html`<livechat-converse-muc-task .model=${task}></livechat-converse-muc-task>`
+          return html`<livechat-converse-muc-task .model=${task} draggable="true"></livechat-converse-muc-task>`
         })
       }
     </div>