peertube-plugin-livechat/conversejs/custom/plugins/tasks/components/muc-task-lists-view.js

140 lines
4.5 KiB
JavaScript

// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
//
// SPDX-License-Identifier: AGPL-3.0-only
import { api } from '@converse/headless'
import tplMucTaskLists from '../templates/muc-task-lists'
import { __ } from 'i18n'
import { DraggablesCustomElement } from '../../../shared/components/draggables/index.js'
import '../styles/muc-task-lists.scss'
export default class MUCTaskListsView extends DraggablesCustomElement {
static get properties () {
return {
model: { type: Object, attribute: true },
create_tasklist_error_message: { type: String, attribute: false }
}
}
async initialize () {
this.create_tasklist_error_message = ''
if (!this.model) {
return
}
this.draggableTagName = 'livechat-converse-muc-task'
this.droppableTagNames = ['livechat-converse-muc-task', 'livechat-converse-muc-task-list']
this.droppableAlwaysBottomTagNames = ['livechat-converse-muc-task-list']
// 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())
return super.initialize()
}
render () {
return tplMucTaskLists(this, this.model)
}
async submitCreateTaskList (ev) {
ev.preventDefault()
const name = ev.target.name.value.trim()
if (this.create_tasklist_error_message) {
this.create_tasklist_error_message = ''
}
if ((name ?? '') === '') { return }
try {
this.querySelectorAll('input[type=submit]').forEach(el => {
el.setAttribute('disabled', true)
el.classList.add('disabled')
})
await this.model.createTaskList({
name
})
this.querySelector('input[name=name]').value = ''
} catch (err) {
console.error(err)
// eslint-disable-next-line no-undef
this.create_tasklist_error_message = __(LOC_task_list_create_error)
} finally {
this.querySelectorAll('input[type=submit]').forEach(el => {
el.removeAttribute('disabled')
el.classList.remove('disabled')
})
}
}
isATaskEl (target) {
return target.nodeName?.toLowerCase() === 'livechat-converse-muc-task'
}
isATaskListEl (target) {
return target.nodeName?.toLowerCase() === 'livechat-converse-muc-task-list'
}
_dropDone (draggedEl, droppedOnEl, onTopHalf) {
super._dropDone(...arguments)
console.log('[livechat task drag&drop] Task dropped...')
const task = draggedEl.model
let newOrder, targetTasklist
if (this.isATaskListEl(droppedOnEl)) {
// We dropped on a task list, we must add as first entry.
newOrder = 0
targetTasklist = droppedOnEl.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(droppedOnEl)) {
// We dropped on a task, we must get its order (+1 if !onTopHalf)
const droppedOnTask = droppedOnEl.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'))
}
newOrder = droppedOnTask.get('order') ?? 0
if (!onTopHalf) { 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
}
this._saveOrders(targetTasklist.getTasks(), task, newOrder)
}
}
api.elements.define('livechat-converse-muc-task-lists', MUCTaskListsView)