Task lists WIP:

* some front end work.

conversejs/custom/plugins/tasks/muc-task-list-view.js

@@ -1,6 +1,7 @@
 import { CustomElement } from 'shared/components/element.js'
 import { api } from '@converse/headless/core'
 import tplMucTaskList from './templates/muc-task-list'
+import { __ } from 'i18n'
 
 export default class MUCTaskListView extends CustomElement {
   static get properties () {
@@ -18,7 +19,27 @@ export default class MUCTaskListView extends CustomElement {
   }
 
   render () {
-    return tplMucTaskList(this.model)
+    return tplMucTaskList(this, this.model)
+  }
+
+  async deleteTaskList (ev) {
+    ev?.preventDefault?.()
+
+    // 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)
+    if (!result) { return }
+
+    try {
+      await this.model.deleteItem()
+    } catch (err) {
+      api.alert(
+        'error', __('Error'), [__('Error')]
+      )
+    }
   }
 }
 

conversejs/custom/plugins/tasks/task-list.js

@@ -15,6 +15,10 @@ class ChatRoomTaskList extends Model {
       list: taskListId
     }) ?? []
   }
+
+  async deleteItem () {
+    return this.collection.chatroom.taskManager.deleteItem(this)
+  }
 }
 
 export {

conversejs/custom/plugins/tasks/task-lists.js

@@ -1,9 +1,6 @@
 import { Collection } from '@converse/skeletor/src/collection.js'
 import { ChatRoomTaskList } from './task-list'
-import { XMLNS_TASKLIST } from './constants'
 import { initStorage } from '@converse/headless/utils/storage.js'
-import { converse, api } from '@converse/headless/core'
-const { $build } = converse.env
 
 /**
  * A list of {@link _converse.ChatRoomTaskList} instances, representing task lists associated to a MUC.
@@ -37,9 +34,7 @@ class ChatRoomTaskLists extends Collection {
     if (!name) { throw new Error('Missing name') }
 
     console.log('Creating task list ' + name + '...')
-    const item = $build('item').c('tasklist', { xmlns: XMLNS_TASKLIST })
-    item.c('name').t(name)
-    await api.pubsub.publish(this.chatroom.get('jid'), 'livechat-tasks', item)
+    await this.chatroom.taskManager.createItem(this, { name })
     console.log('Task list ' + name + ' created.')
   }
 }

conversejs/custom/plugins/tasks/templates/muc-task-list.js

@@ -1,11 +1,19 @@
 import { html } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
+import { __ } from 'i18n'
 
-export default function tplMucTaskList (tasklist) {
+export default function tplMucTaskList (el, tasklist) {
   const tasks = tasklist.getTasks()
+  // eslint-disable-next-line no-undef
+  const i18nDelete = __(LOC_task_list_delete)
   return html`
     <div class="">
       Tasklist: ${tasklist.get('name')}
+      <a class="" title="${i18nDelete}"
+        @click=${el.deleteTaskList}
+      >
+        <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
+      </a>
     </div>
     <div class="">
       ${

conversejs/custom/plugins/tasks/templates/muc-task-lists.js

@@ -14,6 +14,13 @@ export default function tplMucTaskLists (el, tasklists) {
   const i18nTaskListName = __(LOC_task_list_name)
 
   return html`
+    <div class="">
+      ${
+        repeat(tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
+          return html`<livechat-converse-muc-task-list .model=${tasklist}></livechat-converse-muc-task-list>`
+        })
+      }
+    </div>
     <form class="converse-form" @submit=${el.submitCreateTaskList}>
       <div class="form-group">
         <label>
@@ -26,12 +33,5 @@ export default function tplMucTaskLists (el, tasklists) {
           : html`<div class="invalid-feedback d-block">${el.create_tasklist_error_message}</div>`
         }
       </div>
-    </form>
-    <div class="">
-      ${
-        repeat(tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
-          return html`<livechat-converse-muc-task-list .model=${tasklist}></livechat-converse-muc-task-list>`
-        })
-      }
-    </div>`
+    </form>`
 }