matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Task lists WIP:

Browse Source 
* front-end: task are no more in a dialog
This commit is contained in:
John Livingston
2024-05-11 17:37:20 +02:00
parent 8aa12eb575
commit d6aefb61c4
13 changed files with 138 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
conversejs/custom/plugins/tasks/components/muc-task-app-view.js Normal file
View File

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

6
conversejs/custom/plugins/tasks/muc-task-list-view.js → conversejs/custom/plugins/tasks/components/muc-task-list-view.js
View File

@ -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 {

6
conversejs/custom/plugins/tasks/muc-task-lists-view.js → conversejs/custom/plugins/tasks/components/muc-task-lists-view.js
View File

@ -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

8
conversejs/custom/plugins/tasks/muc-task-view.js → conversejs/custom/plugins/tasks/components/muc-task-view.js
View File

@ -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 {

14
conversejs/custom/plugins/tasks/index.js
View File

@ -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),

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

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

33
conversejs/custom/plugins/tasks/styles/muc-task-app.scss Normal file
View File

@ -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;
}
}
}

27
conversejs/custom/plugins/tasks/templates/muc-task-app.js Normal file
View File

@ -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>`
}

11
conversejs/custom/plugins/tasks/utils.js
View File

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