11 changed files with 213 additions and 14 deletions
@ -0,0 +1,121 @@
@@ -0,0 +1,121 @@
|
||||
<script> |
||||
import { t } from '../../translations.svelte.js'; |
||||
import { onMount } from 'svelte'; |
||||
import { useTinyRouter } from 'svelte-tiny-router'; |
||||
|
||||
import TaskList from '../../Components/TaskList.svelte'; |
||||
|
||||
const router = useTinyRouter(); |
||||
let { id } = $props(); |
||||
let task = $state(null); |
||||
let project = $state(null); |
||||
let error = $state(null); |
||||
let children = $state(null); |
||||
let estimated_time = $state({sum:0}); |
||||
let dummy = $derived(updateOn(id)); |
||||
|
||||
$effect(() => updateOn(id)); |
||||
|
||||
function updateOn(id){ |
||||
loadTask(); |
||||
} |
||||
|
||||
async function loadChildren(){ |
||||
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/list`; |
||||
var data = { |
||||
parent_task_id:+task.id, |
||||
show_closed: task.show_closed |
||||
}; |
||||
const resp = await fetch(url,{ |
||||
credentials:'include', |
||||
method:'POST', |
||||
body:JSON.stringify(data) |
||||
}); |
||||
if (resp.ok){ |
||||
children = await resp.json(); |
||||
error = null; |
||||
} else { |
||||
error = await resp.text(); |
||||
} |
||||
} |
||||
|
||||
async function loadProject(){ |
||||
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${task.project_id}`; |
||||
const resp = await fetch(url,{credentials:'include'}); |
||||
if (resp.ok){ |
||||
project = await resp.json(); |
||||
error = null; |
||||
} else { |
||||
error = await resp.text(); |
||||
} |
||||
} |
||||
|
||||
async function loadTask(){ |
||||
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/${id}`; |
||||
const resp = await fetch(url,{credentials:'include'}); |
||||
if (resp.ok){ |
||||
task = await resp.json(); |
||||
error = null; |
||||
project = null; |
||||
children = null; |
||||
loadChildren(); |
||||
if (task.project_id) loadProject(); |
||||
} else { |
||||
error = await resp.text(); |
||||
} |
||||
} |
||||
|
||||
function gotoProject(){ |
||||
if (!project) return; |
||||
router.navigate(`/project/${project.id}/view`) |
||||
} |
||||
|
||||
onMount(loadTask); |
||||
</script> |
||||
|
||||
{#if error} |
||||
<span class="error">{error}</span> |
||||
{/if} |
||||
{#if task} |
||||
<table> |
||||
<tbody> |
||||
{#if project} |
||||
<tr> |
||||
<th>{t('project')}</th> |
||||
<td class="project name" onclick={gotoProject}>{project.name}</td> |
||||
</tr> |
||||
{/if} |
||||
<tr> |
||||
<th>{t('task')}</th> |
||||
<td class="task name">{task.name}</td> |
||||
</tr> |
||||
{#if task.description.rendered} |
||||
<tr> |
||||
<th>{t('description')}</th> |
||||
<td class="task description">{@html task.description.rendered}</td> |
||||
</tr> |
||||
{/if} |
||||
|
||||
{#if task.start_date} |
||||
<tr> |
||||
<th>{t('start_date')}</th> |
||||
<td class="task start date">{task.start_date}</td> |
||||
</tr> |
||||
{/if} |
||||
{#if task.due_date} |
||||
<tr> |
||||
<th>{t('due_date')}</th> |
||||
<td class="task due date">{task.due_date}</td> |
||||
</tr> |
||||
{/if} |
||||
{#if children} |
||||
<tr> |
||||
<th>{t('subtasks')}</th> |
||||
<td class="task children"> |
||||
<TaskList tasks={children} {estimated_time} /> |
||||
</td> |
||||
</tr> |
||||
{/if} |
||||
</tbody> |
||||
</table> |
||||
{/if} |
||||
Loading…
Reference in new issue