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

import { CustomElement } from 'shared/components/element.js'
import { api } from '@converse/headless/core'
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

  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
    }

    // 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()

    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')
      })
    }
  }

  _getParentTaskEl (target) {
    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()
    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) {
    // The draggable=true is on a livechat-converse-muc-task child
    const possibleTaskEl = ev.target.parentElement
    if (!this._isATaskEl(possibleTaskEl)) { return }
    console.log('[livechat task drag&drop] Starting to drag a task...')
    this.currentDraggedTask = possibleTaskEl
    this._resetDropOver()
  }

  _handleDragOver (ev) {
    if (!this.currentDraggedTask) { 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?
    // 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 taskOrTaskListEl = this._getParentTaskOrTaskListEl(ev.target)
    if (!taskOrTaskListEl) { return }
    taskOrTaskListEl.classList.remove('livechat-drag-bottom-half', 'livechat-drag-top-half')
  }

  _handleDragEnd (_ev) {
    this.currentDraggedTask = null
    this._resetDropOver()
  }

  _handleDrop (_ev) {
    if (!this.currentDraggedTask) { return }

    const droppedOnEl = document.querySelector('.livechat-drag-bottom-half, .livechat-drag-top-half')
    const droppedOntaskOrTaskListEl = this._getParentTaskOrTaskListEl(droppedOnEl)
    if (!droppedOntaskOrTaskListEl) { return }

    console.log('[livechat task drag&drop] Task dropped...')

    const task = this.currentDraggedTask.model

    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 (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)

    console.log('[livechat task drag&drop] Reordering tasks...')
    let currentOrder = newOrder + 1
    for (const t of targetTasklist.getTasks()) {
      if (t === 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++
      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('[livechat task drag&drop] 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)