Task lists WIP:

* front-end: task are no more in a dialog

conversejs/builtin.ts

@@ -190,6 +190,13 @@ async function initConverse (
     params.livechat_mini_muc_head = true // we must replace the muc-head by the custom buttons toolbar.
   }
 
+  if (chatIncludeMode === 'peertube-video' || chatIncludeMode === 'peertube-fullpage') {
+    // We enable task list only if we are in the peertube interface.
+    // Technically it would work in 'chat-only' mode, but i don't want to add too many things to test
+    // (and i now there is some CSS bugs in the task list).
+    params.livechat_task_list_enabled = true
+  }
+
   try {
     if (window.reconnectConverse) { // this is set in the livechatSpecificsPlugin
       window.reconnectConverse(params)

conversejs/custom/plugins/tasks/components/muc-task-app-view.js

@@ -0,0 +1,31 @@
+import { api } from '@converse/headless/core'
+import { CustomElement } from 'shared/components/element.js'
+import { tplMUCTaskApp } from '../templates/muc-task-app.js'
+
+import '../styles/muc-task-app.scss'
+
+/**
+ * Custom Element to display the Task Application.
+ */
+export default class MUCTaskApp extends CustomElement {
+  static get properties () {
+    return {
+      model: { type: Object, attribute: true }, // mucModel
+      show: { type: Boolean, attribute: false }
+    }
+  }
+
+  async initialize () {
+    this.show = false
+  }
+
+  render () {
+    return tplMUCTaskApp(this, this.model)
+  }
+
+  toggleApp () {
+    this.show = !this.show
+  }
+}
+
+api.elements.define('livechat-converse-muc-task-app', MUCTaskApp)

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

@@ -1,6 +1,6 @@
 import { CustomElement } from 'shared/components/element.js'
 import { api } from '@converse/headless/core'
-import tplMucTaskList from './templates/muc-task-list'
+import tplMucTaskList from '../templates/muc-task-list'
 import { __ } from 'i18n'
 
 export default class MUCTaskListView extends CustomElement {
@@ -69,9 +69,7 @@ export default class MUCTaskListView extends CustomElement {
     // eslint-disable-next-line no-undef
     const i18nConfirmDelete = __(LOC_task_list_delete_confirm)
 
-    // FIXME: when tasks are in a modal, api.confirm replaces the modal. This is not ok.
-    // const result = await api.confirm(i18nConfirmDelete)
-    const result = confirm(i18nConfirmDelete)
+    const result = await api.confirm(i18nConfirmDelete)
     if (!result) { return }
 
     try {

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

@@ -1,10 +1,10 @@
 import { CustomElement } from 'shared/components/element.js'
 import { api } from '@converse/headless/core'
-import tplMucTaskLists from './templates/muc-task-lists'
+import tplMucTaskLists from '../templates/muc-task-lists'
 import { __ } from 'i18n'
 
-import './styles/muc-task-lists.scss'
-import './styles/muc-task-drag.scss'
+import '../styles/muc-task-lists.scss'
+import '../styles/muc-task-drag.scss'
 
 export default class MUCTaskListsView extends CustomElement {
   currentDraggedTask = null

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

@@ -1,9 +1,9 @@
 import { CustomElement } from 'shared/components/element.js'
 import { api } from '@converse/headless/core'
-import { tplMucTask } from './templates/muc-task'
+import { tplMucTask } from '../templates/muc-task'
 import { __ } from 'i18n'
 
-import './styles/muc-tasks.scss'
+import '../styles/muc-tasks.scss'
 
 export default class MUCTaskView extends CustomElement {
   static get properties () {
@@ -78,9 +78,7 @@ export default class MUCTaskView extends CustomElement {
     // eslint-disable-next-line no-undef
     const i18nConfirmDelete = __(LOC_task_delete_confirm)
 
-    // FIXME: when tasks are in a modal, api.confirm replaces the modal. This is not ok.
-    // const result = await api.confirm(i18nConfirmDelete)
-    const result = confirm(i18nConfirmDelete)
+    const result = await api.confirm(i18nConfirmDelete)
     if (!result) { return }
 
     try {

conversejs/custom/plugins/tasks/index.js

@@ -4,12 +4,10 @@ import { ChatRoomTaskList } from './task-list.js'
 import { ChatRoomTasks } from './tasks.js'
 import { getHeadingButtons, initOrDestroyChatRoomTaskLists } from './utils.js'
 import { XMLNS_TASK, XMLNS_TASKLIST } from './constants.js'
-import './muc-task-view.js' // FIXME: here or in another file?
-import './muc-task-list-view.js' // FIXME: here or in another file?
-import './muc-task-lists-view.js' // FIXME: here or in another file?
-import './modals/muc-task-lists.js' // FIXME: here or in another file?
-
-// TODO: add a client disco feature (using api.listen.on('addClientFeatures' ...)).
+import './components/muc-task-view.js' // FIXME: here or in another file?
+import './components/muc-task-list-view.js' // FIXME: here or in another file?
+import './components/muc-task-lists-view.js' // FIXME: here or in another file?
+import './components/muc-task-app-view.js' // FIXME: here or in another file?
 
 converse.plugins.add('livechat-converse-tasks', {
   dependencies: ['converse-muc', 'converse-disco'], // TODO: add converse-pubsub
@@ -19,6 +17,10 @@ converse.plugins.add('livechat-converse-tasks', {
     _converse.ChatRoomTaskList = ChatRoomTaskList
     _converse.ChatRoomTasks = ChatRoomTasks
 
+    _converse.api.settings.extend({
+      livechat_task_list_enabled: false
+    })
+
     _converse.api.listen.on('chatRoomInitialized', muc => {
       muc.session.on('change:connection_status', _session => {
         // When joining a room, initializing the TaskLists object (if user has access),

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

@@ -1,18 +0,0 @@
-import BaseModal from '../../../../src/plugins/modal/modal.js'
-import { api } from '../../../../src/headless/core.js'
-import { html } from 'lit'
-import { __ } from 'i18n'
-
-export default class mucTaskListsModal extends BaseModal {
-  renderModal () {
-    const muc = this.model
-    return html`<livechat-converse-muc-task-lists .model=${muc.tasklists}></livechat-converse-muc-task-lists>`
-  }
-
-  getModalTitle () {
-    // eslint-disable-next-line no-undef
-    return __(LOC_tasks)
-  }
-}
-
-api.elements.define('livechat-converse-muc-task-lists-modal', mucTaskListsModal)

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

@@ -0,0 +1,33 @@
+.conversejs {
+  livechat-converse-muc-task-app {
+    border: var(--occupants-border-left);
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 0 1 100%;
+    padding: var(--occupants-padding);
+
+    .livechat-converse-muc-app-header {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      font-family: var(--heading-font);
+      padding-left: 0;
+      margin-right: 1em;
+      width: 100%;
+
+      h5 {
+        display: inline;
+        color: var(--groupchats-header-color-dark);
+      }
+
+      .livechat-converse-muc-app-close {
+        border: 0;
+      }
+    }
+
+    .livechat-converse-muc-app-body {
+      padding-right: 2em; // let some place for the scrollbar.
+      overflow-y: auto;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { html } from 'lit'
+import { __ } from 'i18n'
+
+export function tplMUCTaskApp (el, mucModel) {
+  if (!mucModel) { return html`` } // should not happen
+  if (!mucModel.tasklists) { return html`` } // too soon, not initialized.
+
+  if (!el.show) {
+    el.style.display = 'none'
+    return html``
+  }
+
+  el.style.display = ''
+
+  // eslint-disable-next-line no-undef
+  const i18nTasks = __(LOC_tasks)
+  return html`
+    <div class="livechat-converse-muc-app-header">
+      <h5>${i18nTasks}</h5>
+      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp}>
+          <converse-icon class="fa fa-times" size="1em"></converse-icon>
+      </button>
+    </div>
+    <div class="livechat-converse-muc-app-body">
+      <livechat-converse-muc-task-lists .model=${mucModel.tasklists}></livechat-converse-muc-task-lists>
+    </div>`
+}

conversejs/custom/plugins/tasks/utils.js

@@ -20,9 +20,9 @@ export function getHeadingButtons (view, buttons) {
     i18n_text: __(LOC_tasks),
     handler: async (ev) => {
       ev.preventDefault()
-      ev.stopPropagation()
-      // opening the muc task lists view:
-      api.modal.show('livechat-converse-muc-task-lists-modal', { model: muc })
+      // opening or closing the muc task app:
+      const taskAppEl = ev.target.closest('converse-root').querySelector('livechat-converse-muc-task-app')
+      taskAppEl.toggleApp()
     },
     a_class: '',
     icon_class: 'fa-list', // FIXME
@@ -89,6 +89,11 @@ export function initOrDestroyChatRoomTaskLists (mucModel) {
     return _destroyChatRoomTaskLists(mucModel)
   }
 
+  if (!api.settings.get('livechat_task_list_enabled')) {
+    // Feature disabled, no need to handle tasks.
+    return _destroyChatRoomTaskLists(mucModel)
+  }
+
   if (mucModel.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
     return _destroyChatRoomTaskLists(mucModel)
   }

conversejs/custom/templates/muc-chatarea.js

@@ -0,0 +1,13 @@
+import { api } from '@converse/headless/core'
+import tplMUCChatarea from '../../src/plugins/muc-views/templates/muc-chatarea.js'
+import { html } from 'lit'
+
+export default (o) => {
+  return html`
+    ${
+      o?.model && api.settings.get('livechat_task_list_enabled')
+        ? html`<livechat-converse-muc-task-app .model=${o.model}></livechat-converse-muc-task-app>`
+        : ''
+    }
+    ${tplMUCChatarea(o)}`
+}

conversejs/custom/webpack.livechat.js

@@ -37,6 +37,7 @@ module.exports = merge(prod, {
       './templates/muc-bottom-panel.js': path.resolve('custom/templates/muc-bottom-panel.js'),
       './templates/muc-head.js': path.resolve(__dirname, 'custom/templates/muc-head.js'),
       '../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'),
+      './templates/muc-chatarea.js': path.resolve('custom/templates/muc-chatarea.js'),
 
       '../templates/icons.js': path.resolve(__dirname, 'custom/shared/components/font-awesome.js'),
 

conversejs/lib/plugins/livechat-specific.ts

@@ -85,7 +85,8 @@ export const livechatSpecificsPlugin = {
         'livechat_external_auth_oidc_buttons',
         'livechat_external_auth_reconnect_mode',
         'livechat_mini_muc_head',
-        'livechat_specific_external_authent'
+        'livechat_specific_external_authent',
+        'livechat_task_list_enabled'
       ]) {
         _converse.api.settings.set(k, params[k])
       }