From d6aefb61c4046f126d5a8497ab18cfaa3922a0a0 Mon Sep 17 00:00:00 2001 From: John Livingston Date: Sat, 11 May 2024 17:37:20 +0200 Subject: [PATCH] Task lists WIP: * front-end: task are no more in a dialog --- conversejs/builtin.ts | 7 ++++ .../tasks/components/muc-task-app-view.js | 31 +++++++++++++++++ .../{ => components}/muc-task-list-view.js | 6 ++-- .../{ => components}/muc-task-lists-view.js | 6 ++-- .../tasks/{ => components}/muc-task-view.js | 8 ++--- conversejs/custom/plugins/tasks/index.js | 14 ++++---- .../plugins/tasks/modals/muc-task-lists.js | 18 ---------- .../plugins/tasks/styles/muc-task-app.scss | 33 +++++++++++++++++++ .../plugins/tasks/templates/muc-task-app.js | 27 +++++++++++++++ conversejs/custom/plugins/tasks/utils.js | 11 +++++-- conversejs/custom/templates/muc-chatarea.js | 13 ++++++++ conversejs/custom/webpack.livechat.js | 1 + conversejs/lib/plugins/livechat-specific.ts | 3 +- 13 files changed, 138 insertions(+), 40 deletions(-) create mode 100644 conversejs/custom/plugins/tasks/components/muc-task-app-view.js rename conversejs/custom/plugins/tasks/{ => components}/muc-task-list-view.js (94%) rename conversejs/custom/plugins/tasks/{ => components}/muc-task-lists-view.js (98%) rename conversejs/custom/plugins/tasks/{ => components}/muc-task-view.js (91%) delete mode 100644 conversejs/custom/plugins/tasks/modals/muc-task-lists.js create mode 100644 conversejs/custom/plugins/tasks/styles/muc-task-app.scss create mode 100644 conversejs/custom/plugins/tasks/templates/muc-task-app.js create mode 100644 conversejs/custom/templates/muc-chatarea.js diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts index 5ba1be28..2a59ee92 100644 --- a/conversejs/builtin.ts +++ b/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) diff --git a/conversejs/custom/plugins/tasks/components/muc-task-app-view.js b/conversejs/custom/plugins/tasks/components/muc-task-app-view.js new file mode 100644 index 00000000..35d43d08 --- /dev/null +++ b/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) diff --git a/conversejs/custom/plugins/tasks/muc-task-list-view.js b/conversejs/custom/plugins/tasks/components/muc-task-list-view.js similarity index 94% rename from conversejs/custom/plugins/tasks/muc-task-list-view.js rename to conversejs/custom/plugins/tasks/components/muc-task-list-view.js index 441a602b..310f88db 100644 --- a/conversejs/custom/plugins/tasks/muc-task-list-view.js +++ b/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 { diff --git a/conversejs/custom/plugins/tasks/muc-task-lists-view.js b/conversejs/custom/plugins/tasks/components/muc-task-lists-view.js similarity index 98% rename from conversejs/custom/plugins/tasks/muc-task-lists-view.js rename to conversejs/custom/plugins/tasks/components/muc-task-lists-view.js index 301fbd8d..7750e586 100644 --- a/conversejs/custom/plugins/tasks/muc-task-lists-view.js +++ b/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 diff --git a/conversejs/custom/plugins/tasks/muc-task-view.js b/conversejs/custom/plugins/tasks/components/muc-task-view.js similarity index 91% rename from conversejs/custom/plugins/tasks/muc-task-view.js rename to conversejs/custom/plugins/tasks/components/muc-task-view.js index 05867184..dda25ae8 100644 --- a/conversejs/custom/plugins/tasks/muc-task-view.js +++ b/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 { diff --git a/conversejs/custom/plugins/tasks/index.js b/conversejs/custom/plugins/tasks/index.js index 4d8b2c1a..97d80241 100644 --- a/conversejs/custom/plugins/tasks/index.js +++ b/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), diff --git a/conversejs/custom/plugins/tasks/modals/muc-task-lists.js b/conversejs/custom/plugins/tasks/modals/muc-task-lists.js deleted file mode 100644 index a0d1d488..00000000 --- a/conversejs/custom/plugins/tasks/modals/muc-task-lists.js +++ /dev/null @@ -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`` - } - - getModalTitle () { - // eslint-disable-next-line no-undef - return __(LOC_tasks) - } -} - -api.elements.define('livechat-converse-muc-task-lists-modal', mucTaskListsModal) diff --git a/conversejs/custom/plugins/tasks/styles/muc-task-app.scss b/conversejs/custom/plugins/tasks/styles/muc-task-app.scss new file mode 100644 index 00000000..3dd3f5e3 --- /dev/null +++ b/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; + } + } +} diff --git a/conversejs/custom/plugins/tasks/templates/muc-task-app.js b/conversejs/custom/plugins/tasks/templates/muc-task-app.js new file mode 100644 index 00000000..d5ce3a6a --- /dev/null +++ b/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` +
+
${i18nTasks}
+ +
+
+ +
` +} diff --git a/conversejs/custom/plugins/tasks/utils.js b/conversejs/custom/plugins/tasks/utils.js index bdd1cea5..0303e915 100644 --- a/conversejs/custom/plugins/tasks/utils.js +++ b/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) } diff --git a/conversejs/custom/templates/muc-chatarea.js b/conversejs/custom/templates/muc-chatarea.js new file mode 100644 index 00000000..b170afd3 --- /dev/null +++ b/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`` + : '' + } + ${tplMUCChatarea(o)}` +} diff --git a/conversejs/custom/webpack.livechat.js b/conversejs/custom/webpack.livechat.js index 930edbb7..8170dd5a 100644 --- a/conversejs/custom/webpack.livechat.js +++ b/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'), diff --git a/conversejs/lib/plugins/livechat-specific.ts b/conversejs/lib/plugins/livechat-specific.ts index ffd7882c..f3efa82a 100644 --- a/conversejs/lib/plugins/livechat-specific.ts +++ b/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]) }