diff --git a/conversejs/custom/plugins/tasks/muc-task-list-view.js b/conversejs/custom/plugins/tasks/muc-task-list-view.js index 87821bdf..441a602b 100644 --- a/conversejs/custom/plugins/tasks/muc-task-list-view.js +++ b/conversejs/custom/plugins/tasks/muc-task-list-view.js @@ -28,6 +28,7 @@ export default class MUCTaskListView extends CustomElement { 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()) + this.listenTo(this.model.collection.chatroom.tasks, 'change:list', () => this.requestUpdate()) } render () { diff --git a/conversejs/custom/plugins/tasks/muc-task-lists-view.js b/conversejs/custom/plugins/tasks/muc-task-lists-view.js index 8b436f5a..301fbd8d 100644 --- a/conversejs/custom/plugins/tasks/muc-task-lists-view.js +++ b/conversejs/custom/plugins/tasks/muc-task-lists-view.js @@ -4,6 +4,7 @@ import tplMucTaskLists from './templates/muc-task-lists' import { __ } from 'i18n' import './styles/muc-task-lists.scss' +import './styles/muc-task-drag.scss' export default class MUCTaskListsView extends CustomElement { currentDraggedTask = null @@ -95,10 +96,18 @@ export default class MUCTaskListsView extends CustomElement { return target.closest?.('livechat-converse-muc-task') } + _getParentTaskOrTaskListEl (target) { + return target.closest?.('livechat-converse-muc-task, livechat-converse-muc-task-list') + } + _isATaskEl (target) { return target.nodeName?.toLowerCase() === 'livechat-converse-muc-task' } + isATaskListEl (target) { + return target.nodeName?.toLowerCase() === 'livechat-converse-muc-task-list' + } + _isOnTopHalf (ev, taskEl) { const y = ev.clientY const bounding = taskEl.getBoundingClientRect() @@ -115,30 +124,31 @@ export default class MUCTaskListsView extends CustomElement { // The draggable=true is on a livechat-converse-muc-task child const possibleTaskEl = ev.target.parentElement if (!this._isATaskEl(possibleTaskEl)) { return } - console.log('Starting to drag a task...') + console.log('[livechat task drag&drop] Starting to drag a task...') this.currentDraggedTask = possibleTaskEl this._resetDropOver() } _handleDragOver (ev) { if (!this.currentDraggedTask) { return } - const taskEl = this._getParentTaskEl(ev.target) - if (!taskEl) { return } + const taskOrTaskListEl = this._getParentTaskOrTaskListEl(ev.target) + if (!taskOrTaskListEl) { 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') + // Note: for task list, we always add the task in the task list, so no need to test here. + const topHalf = this._isATaskEl(taskOrTaskListEl) ? this._isOnTopHalf(ev, taskOrTaskListEl) : false + taskOrTaskListEl.classList.add(topHalf ? 'livechat-drag-top-half' : 'livechat-drag-bottom-half') + taskOrTaskListEl.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') + const taskOrTaskListEl = this._getParentTaskOrTaskListEl(ev.target) + if (!taskOrTaskListEl) { return } + taskOrTaskListEl.classList.remove('livechat-drag-bottom-half', 'livechat-drag-top-half') } _handleDragEnd (_ev) { @@ -149,40 +159,79 @@ export default class MUCTaskListsView extends CustomElement { _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 } + const droppedOnEl = document.querySelector('.livechat-drag-bottom-half, .livechat-drag-top-half') + const droppedOntaskOrTaskListEl = this._getParentTaskOrTaskListEl(droppedOnEl) + if (!droppedOntaskOrTaskListEl) { return } - console.log('Task dropped...') + console.log('[livechat task drag&drop] Task dropped...') const task = this.currentDraggedTask.model - const droppedOnTask = taskEl.model - if (task === droppedOnTask) { - console.log('Task dropped on itself, nothing to do') + let newOrder, targetTasklist + if (this.isATaskListEl(droppedOntaskOrTaskListEl)) { + // We dropped on a task list, we must add as first entry. + newOrder = 0 + + targetTasklist = droppedOntaskOrTaskListEl.model + if (task.get('list') !== targetTasklist.get('id')) { + console.log('[livechat task drag&drop] Changing task list...') + task.set('list', targetTasklist.get('id')) + } else if (task.get('order') === newOrder) { + // Just to avoid doing some modifications for nothing... + console.log('[livechat task drag&drop] Task dropped on tasklist, but already first item, nothing to do') + return + } + } else if (this._isATaskEl(droppedOntaskOrTaskListEl)) { + // We dropped on a task, we must get its order (+1 if !onTopHalf) + const droppedOnTask = droppedOntaskOrTaskListEl.model + if (task === droppedOnTask) { + // But of course, if dropped on itself there is nothing to do. + console.log('[livechat task drag&drop] Task dropped on itself, nothing to do') + return + } + + if (task.get('list') !== droppedOnTask.get('list')) { + console.log('[livechat task drag&drop] Changing task list...') + task.set('list', droppedOnTask.get('list')) + } + + const topHalf = droppedOnEl.classList.contains('livechat-drag-top-half') + newOrder = droppedOnTask.get('order') ?? 0 + if (!topHalf) { newOrder = Math.max(0, newOrder + 1) } + + if (typeof newOrder !== 'number' || isNaN(newOrder)) { + console.error( + 'Dropped on a task that has not valid order. ' + + 'Setting order to 0, that will refresh all tasks order, but the user will not have the expected result.' + ) + newOrder = 0 + } + + targetTasklist = this.model.get(droppedOnTask.get('list')) + } else { + console.error('[livechat task drag&drop] Dropped on something that is not valid, aborting') return } - if (task.get('list') !== droppedOnTask.get('list')) { - console.log('Changing task list...') - task.set('list', droppedOnTask.get('list')) + if (typeof newOrder !== 'number' || isNaN(newOrder)) { + console.error('[livechat task drag&drop] Computed new order is not a number, aborting.') + return } + console.log('[livechat task drag&drop] Task new order will be ' + newOrder) - 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...') + console.log('[livechat task drag&drop] 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') + console.log('[livechat task drag&drop] Skipping the currently moved task') continue } + + let order = t.get('order') ?? 0 + if (typeof order !== 'number' || isNaN(order)) { + console.error('[livechat task drag&drop] Found a task with an invalid order, fixing it.') + order = currentOrder // this will cause the code bellow to increment task order + } if (order < newOrder) { continue } currentOrder++ @@ -198,7 +247,7 @@ export default class MUCTaskListsView extends CustomElement { t.saveItem() // TODO: handle errors? } - console.log('Setting new order on the moved task') + console.log('[livechat task drag&drop] Setting new order on the moved task') task.set('order', newOrder) task.saveItem() // TODO: handle errors? diff --git a/conversejs/custom/plugins/tasks/styles/muc-task-drag.scss b/conversejs/custom/plugins/tasks/styles/muc-task-drag.scss new file mode 100644 index 00000000..01862bc2 --- /dev/null +++ b/conversejs/custom/plugins/tasks/styles/muc-task-drag.scss @@ -0,0 +1,21 @@ +.conversejs { + livechat-converse-muc-task { + &.livechat-drag-bottom-half .task-line { + border-bottom: 4px solid blue; + } + + &.livechat-drag-top-half .task-line { + border-top: 4px solid blue; + } + } + + livechat-converse-muc-task-list { + &.livechat-drag-bottom-half .task-list-line { + border-bottom: 4px solid blue; + } + + &.livechat-drag-top-half .task-list-line { + border-top: 4px solid blue; + } + } +} diff --git a/conversejs/custom/plugins/tasks/styles/muc-tasks.scss b/conversejs/custom/plugins/tasks/styles/muc-tasks.scss index 3651f1e2..68b0bd64 100644 --- a/conversejs/custom/plugins/tasks/styles/muc-tasks.scss +++ b/conversejs/custom/plugins/tasks/styles/muc-tasks.scss @@ -35,13 +35,5 @@ } } } - - &.livechat-drag-bottom-half .task-line { - border-bottom: 4px solid blue; - } - - &.livechat-drag-top-half .task-line { - border-top: 4px solid blue; - } } } diff --git a/conversejs/custom/plugins/tasks/task-list.js b/conversejs/custom/plugins/tasks/task-list.js index 44ef8ffe..777405f3 100644 --- a/conversejs/custom/plugins/tasks/task-list.js +++ b/conversejs/custom/plugins/tasks/task-list.js @@ -36,7 +36,7 @@ class ChatRoomTaskList extends Model { data.list = this.get('id') if (!data.order) { - data.order = 1 + Math.max( + data.order = 0 + Math.max( 0, ...(this.getTasks().map(t => t.get('order') ?? 0).filter(o => !isNaN(o))) )