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

Task lists WIP:

Browse Source 
* new icon for the task app
* create task message action
This commit is contained in:
John Livingston 2024-05-12 18:45:51 +02:00
parent 31a95f774d
commit ac47e6314f
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
7 changed files with 147 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,13 @@ import { _converse, converse } from '../../../src/headless/core.js'
import { ChatRoomTaskLists } from './task-lists.js'
import { ChatRoomTaskList } from './task-list.js'
import { ChatRoomTasks } from './tasks.js'
import { getHeadingButtons, initOrDestroyChatRoomTaskLists } from './utils.js'
import { getHeadingButtons, getMessageActionButtons, initOrDestroyChatRoomTaskLists } from './utils.js'
import { XMLNS_TASK, XMLNS_TASKLIST } from './constants.js'
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?
import './modals/pick-task-list.js' // FIXME: here or in another file?
converse.plugins.add('livechat-converse-tasks', {
dependencies: ['converse-muc', 'converse-disco', 'converse-pubsub'],
@ -48,5 +49,8 @@ converse.plugins.add('livechat-converse-tasks', {
// adding the "Tasks" button in the MUC heading buttons:
_converse.api.listen.on('getHeadingButtons', getHeadingButtons)
// Adding buttons on message:
_converse.api.listen.on('getMessageActionButtons', getMessageActionButtons)
}
})

51
conversejs/custom/plugins/tasks/modals/pick-task-list.js Normal file
View File

@ -0,0 +1,51 @@
import BaseModal from 'plugins/modal/modal.js'
import tplPickTaskList from './templates/pick-task-list.js'
import { api } from '@converse/headless/core'
import { __ } from 'i18n'
export default class PickTaskListModal extends BaseModal {
constructor (options) {
super(options)
this.muc = options.muc
this.message = options.message
}
initialize () {
super.initialize(...arguments)
this.addEventListener('shown.bs.modal', () => {
this.querySelector('select[name="tasklist"]').focus()
})
}
getModalTitle () {
// eslint-disable-next-line no-undef
return __(LOC_task_list_pick_title)
}
renderModal () {
return tplPickTaskList(this)
}
onPick (ev) {
ev.preventDefault()
const tlId = ev.target?.tasklist?.value
if (!tlId) { return }
const tasklists = this.muc.tasklists
if (!tasklists) { return }
const tasklist = tasklists.get(tlId)
if (!tasklist) { return }
const message = this.message
tasklist.createTask({
name: message.get('nick'),
description: message.get('body')
}).then(
() => this.modal.hide(),
console.error
)
}
}
api.elements.define('livechat-converse-pick-task-list-modal', PickTaskListModal)

36
conversejs/custom/plugins/tasks/modals/templates/pick-task-list.js Normal file
View File

@ -0,0 +1,36 @@
import { html } from 'lit'
import { repeat } from 'lit/directives/repeat.js'
import { __ } from 'i18n'
export default function (el) {
const muc = el.muc
if (!muc?.tasklists?.length) {
// eslint-disable-next-line no-undef
const i18nEmpty = __(LOC_task_list_pick_empty)
return html`<p class="error">${i18nEmpty}</p>`
}
// eslint-disable-next-line no-undef
const i18nMessage = __(LOC_task_list_pick_message)
return html`
<form class="converse-form converse-form--modal confirm" action="#" @submit=${ev => el.onPick(ev)}>
<div class="form-group">
<select class="form-control" name="tasklist">
${
repeat(muc.tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
return html`<option value="${tasklist.get('id')}">${tasklist.get('name')}</option>`
})
}
</select>
<small class="form-text text-muted">
${i18nMessage}
</small>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">${__('OK')}</button>
<input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>
</div>
</form>`
}

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

@ -25,13 +25,45 @@ export function getHeadingButtons (view, buttons) {
taskAppEl.toggleApp()
},
a_class: '',
icon_class: 'fa-list', // FIXME
icon_class: 'fa-list-check',
name: 'muc-tasks'
})
return buttons
}
export function getMessageActionButtons (messageActionsEl, buttons) {
const messageModel = messageActionsEl.model
if (messageModel.get('type') !== 'groupchat') {
// only on groupchat message.
return buttons
}
const muc = messageModel.collection?.chatbox
if (!muc?.tasklists) {
return buttons
}
// eslint-disable-next-line no-undef
const i18nCreate = __(LOC_task_create)
buttons.push({
i18n_text: i18nCreate,
handler: async (ev) => {
ev.preventDefault()
api.modal.show('livechat-converse-pick-task-list-modal', {
muc,
message: messageModel
}, ev)
},
button_class: '',
icon_class: 'fa fa-list-check',
name: 'muc-task-create-from-message'
})
return buttons
}
function _initChatRoomTaskLists (mucModel) {
if (mucModel.taskManager) {
// already initiliazed
@ -70,6 +102,10 @@ function _initChatRoomTaskLists (mucModel) {
}
)
mucModel.taskManager.start().catch(err => console.log(err))
// We must requestUpdate for all message actions, to add the "create task" button.
// FIXME: this should not be done here (but it is simplier for now)
document.querySelectorAll('converse-message-actions').forEach(el => el.requestUpdate())
}
function _destroyChatRoomTaskLists (mucModel) {
@ -81,6 +117,10 @@ function _destroyChatRoomTaskLists (mucModel) {
// mucModel.tasklists.unload() FIXME: add a method to unregister from the pubsub, and empty the tasklist.
mucModel.tasklists = undefined
mucModel.tasks = undefined
// We must requestUpdate for all message actions, to remove the "create task" button.
// FIXME: this should not be done here (but it is simplier for now)
document.querySelectorAll('converse-message-actions').forEach(el => el.requestUpdate())
}
export function initOrDestroyChatRoomTaskLists (mucModel) {

9
conversejs/custom/shared/components/font-awesome.js
View File

@ -9,13 +9,10 @@ export default () => {
return html`
${converseJsIcons}
<!--
Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-list" viewBox="0 0 448 512">
<path d="M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"></path>
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<symbol id="icon-list-check" viewBox="0 0 448 512">
<path d="M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
</symbol>
</svg>
`

5
conversejs/loc.keys.js
View File

@ -27,7 +27,10 @@ const locKeys = [
'task_description',
'task_delete',
'task_delete_confirm',
'task_app_info'
'task_app_info',
'task_list_pick_title',
'task_list_pick_empty',
'task_list_pick_message'
]
module.exports = locKeys

6
languages/en.yml
View File

@ -449,3 +449,9 @@ task_delete_confirm: 'Are you sure you want to delete this task?'
task_app_info: |
You can create tasks and task lists, which are shared between all room's admins.
See the livechat streamers documentation for more information.
task_list_pick_title: 'Please choose a task list'
task_list_pick_empty: 'There is no task list for now, please first create one'
task_list_pick_message: |
Once you have chosen a task list, a new task will be created.
To see the task, open the task application using the top menu.
More information in the livechat plugin documentation.