Task lists WIP:

* task list template + form
This commit is contained in:
John Livingston
2024-05-06 12:29:25 +02:00
parent d16bdd9a87
commit 9d5d59e9bc
7 changed files with 185 additions and 28 deletions

View File

@ -7,17 +7,52 @@ export default function tplMucTaskList (el, tasklist) {
// 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 class="task-list-description">
${el.collapsed
? html`
<button @click=${el.toggleTasks}>
<converse-icon
color="var(--muc-toolbar-btn-color)"
class="fa fa-angle-double-up"
size="1em"></converse-icon>
</button>`
: html`
<button @click=${el.toggleTasks}>
<converse-icon
color="var(--muc-toolbar-btn-color)"
class="fa fa-angle-double-down"
size="1em"></converse-icon>
</button>`
}
${!el.edit
? html`
<div class="task-list-name">
${tasklist.get('name')}
</div>
<a title="${__('Edit')}"
@click=${el.toggleEdit}
>
<converse-icon class="fa fa-edit" size="1em"></converse-icon>
</a>
<a title="${i18nDelete}"
@click=${el.deleteTaskList}
>
<converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
</a>`
: html`
<div class="task-list-name">
<form @submit=${el.saveTaskList}>
<input type="text" name="name" autofocus 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} />
</form>
</div>`
}
</div>
<div class="">
${
repeat(tasks, (task) => task.get('id'), (task) => {
<div class="task-list-tasks">
${el.collapsed
? ''
: repeat(tasks, (task) => task.get('id'), (task) => {
return html`<livechat-converse-muc-task .model=${task}></livechat-converse-muc-task>`
})
}

View File

@ -14,13 +14,11 @@ 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>
${
repeat(tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
return html`<livechat-converse-muc-task-list .model=${tasklist}></livechat-converse-muc-task-list>`
})
}
<form class="converse-form" @submit=${el.submitCreateTaskList}>
<div class="form-group">
<label>