Umbrella/frontend/src/routes/task/View.svelte

<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}