add optional task list option and documentation

This commit is contained in:
vhsdream
2024-10-11 23:28:49 -04:00
parent 379d556916
commit 0d34902e45
2 changed files with 38 additions and 7 deletions

View File

@@ -15,9 +15,12 @@ Allowed fields: `["projects", "tasks7d", "tasksOverdue", "tasksInProgress"]`.
"Tasks In Progress" lists the number of tasks with a progress percentage above 0% and below 100%.
A list of the next 5 tasks ordered by due date is disabled by default, but can be enabled with the `enableTaskList` option.
```yaml
widget:
type: vikunja
url: http[s]://vikunja.host.or.ip[:port]
key: vikunjaapikey
enableTaskList: true # optional, defaults to false
```

View File

@@ -30,6 +30,11 @@ function getInProgress(task) {
return task.inProgress === true;
}
// filter out Tasks with a bogus due date
function getDue(task) {
return new Date(task.dueDate).getTime() > new Date("0001-01-01T00:00:00Z").getTime();
}
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
@@ -62,12 +67,35 @@ export default function Component({ service }) {
const inProgress = tasksData.filter(getInProgress);
return (
// <>
<Container service={service}>
<Block label="vikunja.projects" value={t("common.number", { value: projects.length })} />
<Block label="vikunja.tasks7d" value={t("common.number", { value: tasks7d.length })} />
<Block label="vikunja.tasksOverdue" value={t("common.number", { value: overdue.length })} />
<Block label="vikunja.tasksInProgress" value={t("common.number", { value: inProgress.length })} />
</Container>
<>
<Container service={service}>
<Block label="vikunja.projects" value={t("common.number", { value: projects.length })} />
<Block label="vikunja.tasks7d" value={t("common.number", { value: tasks7d.length })} />
<Block label="vikunja.tasksOverdue" value={t("common.number", { value: overdue.length })} />
<Block label="vikunja.tasksInProgress" value={t("common.number", { value: inProgress.length })} />
</Container>
{widget.enableTaskList &&
tasksData
?.filter(getDue)
.slice(0, 5)
.map((task) => (
<div
key={task.id}
className="text-theme-700 dark:text-theme-200 relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex"
>
<div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
<div className="absolute w-full h-4 whitespace-nowrap text-ellipsis overflow-hidden text-left">
{task.title}
</div>
</div>
<div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
{t("common.relativeDate", {
value: task.dueDate,
formatParams: { value: { style: "narrow", numeric: "auto" } },
})}
</div>
</div>
))}
</>
);
}