diff --git a/conversejs/custom/plugins/tasks/muc-task-list-view.js b/conversejs/custom/plugins/tasks/muc-task-list-view.js index 236eef6c..745640fe 100644 --- a/conversejs/custom/plugins/tasks/muc-task-list-view.js +++ b/conversejs/custom/plugins/tasks/muc-task-list-view.js @@ -6,11 +6,15 @@ import { __ } from 'i18n' export default class MUCTaskListView extends CustomElement { static get properties () { return { - model: { type: Object, attribute: true } + model: { type: Object, attribute: true }, + collapsed: { type: Boolean, attribute: false }, + edit: { type: Boolean, attribute: false } } } async initialize () { + this.collapsed = false + this.edit = false if (!this.model) { return } @@ -22,6 +26,34 @@ export default class MUCTaskListView extends CustomElement { return tplMucTaskList(this, this.model) } + async saveTaskList (ev) { + ev?.preventDefault?.() + + const name = ev.target.name.value.trim() + + if ((name ?? '') === '') { return } + + try { + this.querySelectorAll('input[type=submit]').forEach(el => { + el.setAttribute('disabled', true) + el.classList.add('disabled') + }) + + const tasklist = this.model + tasklist.set('name', name) + await tasklist.saveItem() + + this.edit = false + } catch (err) { + console.error(err) + } finally { + this.querySelectorAll('input[type=submit]').forEach(el => { + el.removeAttribute('disabled') + el.classList.remove('disabled') + }) + } + } + async deleteTaskList (ev) { ev?.preventDefault?.() @@ -41,6 +73,24 @@ export default class MUCTaskListView extends CustomElement { ) } } + + toggleTasks () { + this.collapsed = !this.collapsed + } + + async toggleEdit () { + this.edit = !this.edit + if (this.edit) { + await this.updateComplete + const input = this.querySelector('input[name="name"]') + if (input) { + input.focus() + // Placing cursor at the end: + input.selectionStart = input.value.length + input.selectionEnd = input.selectionStart + } + } + } } api.elements.define('livechat-converse-muc-task-list', MUCTaskListView) diff --git a/conversejs/custom/plugins/tasks/muc-task-lists-view.js b/conversejs/custom/plugins/tasks/muc-task-lists-view.js index b3cd10d0..bf129a62 100644 --- a/conversejs/custom/plugins/tasks/muc-task-lists-view.js +++ b/conversejs/custom/plugins/tasks/muc-task-lists-view.js @@ -3,6 +3,8 @@ import { api } from '@converse/headless/core' import tplMucTaskLists from './templates/muc-task-lists' import { __ } from 'i18n' +import './styles/muc-task-lists.scss' + export default class MUCTaskListsView extends CustomElement { static get properties () { return { diff --git a/conversejs/custom/plugins/tasks/styles/muc-task-lists.scss b/conversejs/custom/plugins/tasks/styles/muc-task-lists.scss new file mode 100644 index 00000000..73833b9d --- /dev/null +++ b/conversejs/custom/plugins/tasks/styles/muc-task-lists.scss @@ -0,0 +1,33 @@ +.conversejs { + livechat-converse-muc-task-lists { + padding: 1em; + width: 100%; + } + + livechat-converse-muc-task-list { + width: 100%; + + .task-list-description { + border: 1px solid var(--chatroom-head-bg-color); + display: flex; + flex-flow: row nowrap; + justify-content: space-around; + padding: 0.25em; + column-gap: 0.25em; + width: 100%; + + button { + border: 0; + } + + .task-list-name { + flex-grow: 2; + } + } + + .task-list-tasks { + padding-left: 2em; + width: 100%; + } + } +} diff --git a/conversejs/custom/plugins/tasks/task-list.js b/conversejs/custom/plugins/tasks/task-list.js index ebb747d3..4ff72f4e 100644 --- a/conversejs/custom/plugins/tasks/task-list.js +++ b/conversejs/custom/plugins/tasks/task-list.js @@ -16,6 +16,12 @@ class ChatRoomTaskList extends Model { }) ?? [] } + async saveItem () { + console.log('Saving task list ' + this.get('id') + '...') + await this.collection.chatroom.taskManager.saveItem(this, { name }) + console.log('Task list ' + this.get('id') + ' created.') + } + async deleteItem () { return this.collection.chatroom.taskManager.deleteItem(this) } diff --git a/conversejs/custom/plugins/tasks/templates/muc-task-list.js b/conversejs/custom/plugins/tasks/templates/muc-task-list.js index 06b4a3f2..ae06217f 100644 --- a/conversejs/custom/plugins/tasks/templates/muc-task-list.js +++ b/conversejs/custom/plugins/tasks/templates/muc-task-list.js @@ -7,17 +7,52 @@ export default function tplMucTaskList (el, tasklist) { // eslint-disable-next-line no-undef const i18nDelete = __(LOC_task_list_delete) return html` -
- Tasklist: ${tasklist.get('name')} - - - +
+ ${el.collapsed + ? html` + ` + : html` + ` + } + ${!el.edit + ? html` +
+ ${tasklist.get('name')} +
+ + + + + + ` + : html` +
+
+ + + +
+
` + }
-
- ${ - repeat(tasks, (task) => task.get('id'), (task) => { +
+ ${el.collapsed + ? '' + : repeat(tasks, (task) => task.get('id'), (task) => { return html`` }) } diff --git a/conversejs/custom/plugins/tasks/templates/muc-task-lists.js b/conversejs/custom/plugins/tasks/templates/muc-task-lists.js index 0199e1ae..04a5c754 100644 --- a/conversejs/custom/plugins/tasks/templates/muc-task-lists.js +++ b/conversejs/custom/plugins/tasks/templates/muc-task-lists.js @@ -14,13 +14,11 @@ export default function tplMucTaskLists (el, tasklists) { const i18nTaskListName = __(LOC_task_list_name) return html` -
- ${ - repeat(tasklists, (tasklist) => tasklist.get('id'), (tasklist) => { - return html`` - }) - } -
+ ${ + repeat(tasklists, (tasklist) => tasklist.get('id'), (tasklist) => { + return html`` + }) + }