Task lists WIP:
* new icon for the task app * create task message action
This commit is contained in:
John Livingston
parent
31a95f774d
commit
ac47e6314f
@ -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
51
conversejs/custom/plugins/tasks/modals/pick-task-list.js
Normal 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)
|
||||
@ -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>`
|
||||
}
|
||||
@ -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,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>
|
||||
`
|
||||
|
||||
@ -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
|
||||
|
||||
@ -448,4 +448,10 @@ task_delete: 'Delete task'
|
||||
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.
|
||||
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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user