Task lists WIP:

* front-end

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

@@ -1,23 +1,28 @@
 import { html } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { __ } from 'i18n'
+import { tplMucAddTaskForm } from './muc-task'
 
 export default function tplMucTaskList (el, tasklist) {
   const tasks = tasklist.getTasks()
   // eslint-disable-next-line no-undef
   const i18nDelete = __(LOC_task_list_delete)
+  // eslint-disable-next-line no-undef
+  const i18nCreateTask = __(LOC_task_create)
+  // eslint-disable-next-line no-undef
+  const i18nTaskListName = __(LOC_task_list_name)
   return html`
     <div class="task-list-description">
       ${el.collapsed
         ? html`
-          <button @click=${el.toggleTasks}>
+          <button @click=${el.toggleTasks} class="task-list-toggle-tasks">
             <converse-icon
               color="var(--muc-toolbar-btn-color)"
               class="fa fa-angle-double-up"
               size="1em"></converse-icon>
           </button>`
         : html`
-          <button @click=${el.toggleTasks}>
+          <button @click=${el.toggleTasks} class="task-list-toggle-tasks">
             <converse-icon
               color="var(--muc-toolbar-btn-color)"
               class="fa fa-angle-double-down"
@@ -29,22 +34,31 @@ export default function tplMucTaskList (el, tasklist) {
           <div class="task-list-name">
             ${tasklist.get('name')}
           </div>
-          <a title="${__('Edit')}"
+          <button class="task-list-action" title="${i18nCreateTask}" @click=${el.openAddTaskForm}>
+            <converse-icon class="fa fa-plus" size="1em"></converse-icon>
+          </button>
+          <button class="task-list-action" title="${__('Edit')}"
             @click=${el.toggleEdit}
           >
             <converse-icon class="fa fa-edit" size="1em"></converse-icon>
-          </a>
-          <a title="${i18nDelete}"
+          </button>
+          <button class="task-list-action" title="${i18nDelete}"
             @click=${el.deleteTaskList}
           >
             <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
-          </a>`
+          </button>`
         : html`
           <div class="task-list-name">
-            <form @submit=${el.saveTaskList}>
-              <input type="text" name="name" autofocus value=${tasklist.get('name')} />
+            <form @submit=${el.saveTaskList} class="converse-form">
+              <input type="text" name="name"
+                placeholder="${__(i18nTaskListName)}"
+                class="form-control"
+                value="${tasklist.get('name')}"
+              />
               <input type="submit" class="btn btn-primary" value="${__('Ok')}" />
-              <input type="reset" class="btn btn-secondary" value="${__('Cancel')}" @click=${el.toggleEdit} />
+              <input type="button" class="btn btn-secondary button-cancel"
+                value="${__('Cancel')}" @click=${el.toggleEdit}
+              />
             </form>
           </div>`
       }
@@ -56,5 +70,9 @@ export default function tplMucTaskList (el, tasklist) {
           return html`<livechat-converse-muc-task .model=${task}></livechat-converse-muc-task>`
         })
       }
-    </div>`
+    </div>
+    ${!el.add_task_form_opened
+      ? ''
+      : tplMucAddTaskForm(el, tasklist)
+    }`
 }

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

@@ -23,7 +23,7 @@ export default function tplMucTaskLists (el, tasklists) {
       <div class="form-group">
         <label>
           ${i18nCreateTaskList}
-          <input type="text" value="" name="name" placeholder="${i18nTaskListName}" />
+          <input type="text" value="" class="form-control" name="name" placeholder="${i18nTaskListName}" />
         </label>
         <input type="submit" value="${i18nAdd}" class="btn btn-primary" />
         ${!el.create_tasklist_error_message

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

@@ -1,6 +1,7 @@
 import { html } from 'lit'
+import { __ } from 'i18n'
 
-export default function tplMucTask (task) {
+export function tplMucTask (task) {
   const done = task.get('done')
   return html`
     <div class="">
@@ -15,3 +16,29 @@ export default function tplMucTask (task) {
       ${task.get('name')}
     </div>`
 }
+
+export function tplMucAddTaskForm (tasklistEl, _tasklist) {
+  const i18nOk = __('Ok')
+  const i18nCancel = __('Cancel')
+  // eslint-disable-next-line no-undef
+  const i18nTaskName = __(LOC_task_name)
+  // eslint-disable-next-line no-undef
+  const i18nTaskDesc = __(LOC_task_description)
+
+  return html`
+    <form class="task-list-add-task converse-form" @submit=${tasklistEl.submitAddTask}>
+      <fieldset class="form-group">
+        <input type="text" name="name"
+          class="form-control" value=""
+          placeholder="${i18nTaskName}"
+        />
+        <textarea class="form-control" name="description" placeholder="${i18nTaskDesc}"></textarea>
+      </fieldset>
+      <fieldset class="form-group">
+        <input type="submit" class="btn btn-primary" value="${i18nOk}" />
+        <input type="button" class="btn btn-secondary button-cancel"
+          value="${i18nCancel}" @click=${tasklistEl.closeAddTaskForm}
+        />
+      </fieldset>
+    </form>`
+}