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

83 lines
2.9 KiB
JavaScript
Raw Normal View History

2024-05-23 09:42:14 +00:00
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
//
// SPDX-License-Identifier: AGPL-3.0-only
2024-04-30 15:11:10 +00:00
import { html } from 'lit'
2024-04-30 16:30:44 +00:00
import { repeat } from 'lit/directives/repeat.js'
2024-05-05 22:13:20 +00:00
import { __ } from 'i18n'
2024-05-06 13:57:42 +00:00
import { tplMucAddTaskForm } from './muc-task'
2024-04-30 15:11:10 +00:00
2024-05-05 22:13:20 +00:00
export default function tplMucTaskList (el, tasklist) {
2024-04-30 16:30:44 +00:00
const tasks = tasklist.getTasks()
2024-05-05 22:13:20 +00:00
// eslint-disable-next-line no-undef
const i18nDelete = __(LOC_task_list_delete)
2024-05-06 13:57:42 +00:00
// eslint-disable-next-line no-undef
const i18nCreateTask = __(LOC_task_create)
// eslint-disable-next-line no-undef
const i18nTaskListName = __(LOC_task_list_name)
2024-04-30 16:30:44 +00:00
return html`
<div class="task-list-line draggables-line">
${el.collapsed
? html`
2024-05-06 13:57:42 +00:00
<button @click=${el.toggleTasks} class="task-list-toggle-tasks">
<converse-icon
color="var(--muc-toolbar-btn-color)"
2024-05-07 07:16:16 +00:00
class="fa fa-angle-right"
size="1em"></converse-icon>
</button>`
: html`
2024-05-06 13:57:42 +00:00
<button @click=${el.toggleTasks} class="task-list-toggle-tasks">
<converse-icon
color="var(--muc-toolbar-btn-color)"
2024-05-07 07:16:16 +00:00
class="fa fa-angle-down"
size="1em"></converse-icon>
</button>`
}
${!el.edit
? html`
<div class="task-list-name">
2024-05-07 07:16:16 +00:00
<a @click=${el.toggleTasks}>${tasklist.get('name')}</a>
</div>
2024-05-06 13:57:42 +00:00
<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>
2024-05-06 13:57:42 +00:00
</button>
<button class="task-list-action" title="${i18nDelete}"
@click=${el.deleteTaskList}
>
<converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
2024-05-06 13:57:42 +00:00
</button>`
: html`
<div class="task-list-name">
2024-05-06 13:57:42 +00:00
<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')}" />
2024-05-06 13:57:42 +00:00
<input type="button" class="btn btn-secondary button-cancel"
value="${__('Cancel')}" @click=${el.toggleEdit}
/>
</form>
</div>`
}
2024-04-30 16:30:44 +00:00
</div>
<div class="task-list-tasks">
${el.collapsed
? ''
: repeat(tasks, (task) => task.get('id'), (task) => {
2024-05-09 11:54:42 +00:00
return html`<livechat-converse-muc-task .model=${task}></livechat-converse-muc-task>`
2024-04-30 16:30:44 +00:00
})
}
2024-05-06 13:57:42 +00:00
</div>
${!el.add_task_form_opened
? ''
: tplMucAddTaskForm(el, tasklist)
}`
2024-04-30 15:11:10 +00:00
}