working on editing of tasks

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/task/View.svelte

@@ -4,7 +4,9 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { api } from '../../urls.svelte.js';
 
+    import LineEditor from '../../Components/LineEditor.svelte';
     import TaskList from '../../Components/TaskList.svelte';
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
 
     const router = useTinyRouter();
     let { id } = $props();
@@ -14,6 +16,7 @@
     let children = $state(null);
     let estimated_time = $state({sum:0});
     let dummy = $derived(updateOn(id));
+    let showSettings = $state(false);
 
     $effect(() => updateOn(id));
 
@@ -90,47 +93,69 @@
         if (!task.parent_task_id) return;
         router.navigate(`/task/${task.parent_task_id}/view`)
     }
+
+    async function update(data){
+        const url = api(`task/${id}`);
+        const resp = await fetch(url,{
+            credentials:'include',
+            method:'PATCH',
+            body:JSON.stringify(data)
+        });
+        if (resp.ok){
+            error = null;
+            //task = await resp.json();
+            return true;
+        } else {
+            error = await resp.text();
+            return false;
+        }
+    }
 </script>
 
 {#if error}
 <span class="error">{error}</span>
 {/if}
 {#if task}
-<table>
+<table class="task">
     <tbody>
         {#if project}
         <tr>
             <th>{t('project')}</th>
-            <td class="project name" onclick={gotoProject}>{project.name}</td>
+            <td class="project" onclick={gotoProject}>{project.name}</td>
         </tr>
         {/if}
         {#if task.parent}
         <tr>
             <th>{t('parent_task')}</th>
-            <td class="parent task" onclick={gotoParent}>{task.parent.name}</td>
+            <td class="parent" onclick={gotoParent}>{task.parent.name}</td>
         </tr>
         {/if}
         <tr>
             <th>{t('task')}</th>
-            <td class="task name" >{task.name}</td>
+            <td class="name">
+                <LineEditor bind:value={task.name} editable={true} onSet={val => update({name:val})} />
+                <button class="symbol" onclick={() => showSettings = true}></button>
+            </td>
         </tr>
         {#if task.description.rendered}
         <tr>
             <th>{t('description')}</th>
-            <td class="task description">{@html task.description.rendered}</td>
+            <td class="description">
+                <MarkdownEditor bind:value={task.description} editable={true} onSet={val => update({description:val})} />
+            </td>
         </tr>
         {/if}
 
         {#if task.start_date}
         <tr>
             <th>{t('start_date')}</th>
-            <td class="task start date">{task.start_date}</td>
+            <td class="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>
+            <td class="due date">{task.due_date}</td>
         </tr>
         {/if}
         {#if task.estimated_time}
@@ -141,7 +166,7 @@
         {/if}
         <tr>
             <th>{t('members')}</th>
-            <td>
+            <td class="members">
                 <ul>
                     {#each Object.values(task.members) as member}
                     <li>{member.user.name} ({t('permission_'+member.permission.name.toLowerCase())})</li>
@@ -151,7 +176,7 @@
         </tr>
         <tr>
             <th>{t('subtasks')}</th>
-            <td class="task children">
+            <td class="children">
                 <button onclick={addChild} >{t('add_subtask')}</button>
                 {#if children}
                 <TaskList tasks={children} {estimated_time} />