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

<script>
    import { t }  from '../../translations.svelte.js';
    import { api } from '../../urls.svelte.js';
    import { user } from '../../user.svelte.js';
    import { onMount } from 'svelte';

    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
    import MemberEditor from '../../Components/MemberEditor.svelte';

    let { project_id = null } = $props();
    let error = $state(null);
    let project = $state(null)
    let task = $state({
        name : '',
        description : { source : '', rendered : '' },
        members : {}
    });

    function load(){
        if (project_id) loadProject();
    }

    function addMember(member){
        for (let uid of Object.keys(member)) task.members[uid] = project.members[uid];
    }

    function dropMember(member){
        delete task.members[member.user.id];
        console.log({drop:member.user.id});
    }

    async function loadProject(){
        var url = api(`project/${project_id}`);
        const resp = await fetch(url,{credentials:'include'});
        if (resp.ok){
            project = await resp.json();
            task.project_id = project_id;
            task.members = JSON.parse(JSON.stringify(project.members)); // deep copy
            error = null;
        } else {
            error = await resp.text();
        }
    }

    async function getCandidates(text){
        const candidates = Object.values(project.members)
            .filter(member => member.user.name.toLowerCase().includes(text.toLowerCase()))
            .map(member => [member.user.id,member.user.name]);
        return Object.fromEntries(candidates);
    }

    async function saveTask(){
        var url = api('task/add');
        const resp = await fetch(url,{
            credentials:'include',
            method:'POST',
            body: JSON.stringify(task)
        });
        if (resp.ok) {
            task = await resp.json();
            router.navigate(`/task/${task.id}/view`);
            error = null;
        } else {
            error = await resp.text();
        }
    }

    onMount(load);
</script>


<fieldset>
    <legend>Add Task</legend>
    <table>
        <tbody>
            <tr>
                <th>
                    {t('name')}
                </th>
                <td>
                    <input bind:value={task.name}>
                </td>
            </tr>
            {#if project}
            <tr>
                <th>
                    {t('project')}
                </th>
                <td>
                    {project.name}
                </td>
            </tr>
            {/if}
            <tr>
                <th>
                    {t('description')}
                </th>
                <td>
                    <MarkdownEditor bind:value={task.description} start_open={true}/>
                </td>
            </tr>
            <tr>
                <th>
                    {t('members')}
                </th>
                <td>
                    <MemberEditor members={task.members} {addMember} {getCandidates} {dropMember} />
                </td>
            </tr>
        </tbody>
    </table>
    <button onclick={saveTask}>{t('save_task')}</button>
</fieldset>