implemented adding notes to projects and tasks

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

frontend/src/Components/MarkdownEditor.svelte

@@ -51,7 +51,12 @@
         if (simple) {
             value.source = editValue.source;
             value.rendered = editValue.rendered;
-        } else if (ev.keyCode == 13 && ev.ctrlKey) applyEdit();
+        }
+        if (ev.keyCode == 13 && ev.ctrlKey){
+            if (simple){
+                onSet(editValue.source);
+            } else applyEdit();
+        }
         if (ev.keyCode == 27) resetEdit();
 
         if (timer) clearTimeout(timer);

frontend/src/routes/notes/List.svelte

@@ -2,16 +2,16 @@
     import { onMount } from 'svelte';
     import { api } from '../../urls.svelte.js';
     import { t } from '../../translations.svelte.js';
-
+    import { user } from '../../user.svelte.js';
     import Editor from '../../Components/MarkdownEditor.svelte';
 
     let error = $state(null);
     let { module = null, entity_id = null } = $props();
     let note = $state({source:null,rendered:null});
     let notes = $state(null);
+    let authors = $state(null);
 
-    async function onclick(){
-        alert(note.source);
+    async function saveNote(){
         const url = api(`notes/${module}/${entity_id}`);
         const resp = await fetch(url,{
             credentials:'include',
@@ -19,8 +19,15 @@
             body:note.source
         });
         if (resp.ok){
+            let newNote = await resp.json();
+            authors[user.id] = user;
+            notes[newNote.id] = newNote;
+            note = {source:'',rendered:''};
+            error = null;
+            return true;
         } else {
             error = await resp.text();
+            return false;
         }
     }
 
@@ -28,7 +35,9 @@
         const url = api(`notes/${module}/${entity_id}`);
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            notes = await resp.json();
+            const data = await resp.json();
+            notes = data.notes;
+            authors = data.authors;
         } else {
             error = await resp.text();
         }
@@ -37,19 +46,31 @@
     onMount(load)
 </script>
 
-<h1>{t('notes')}</h1>
+<style>
+    fieldset{
+        position: relative;
+    }
+    legend.time{
+        position: absolute;
+        top: -19px;
+        right: 20px;
+        background: black;
+    }
+</style>
+
 {#if error}
 <span class="error">{error}</span>
 {/if}
-
 {#if notes}
 {#each Object.entries(notes) as [a,b]}
 <fieldset>
-    <legend>User {b.user_id} – {b.timestamp.replace('T',' ')}</legend>
+    <legend class="author">{authors[b.user_id].name}</legend>
+    <legend class="time">{b.timestamp.replace('T',' ')}</legend>
 {@html b.rendered}
 </fieldset>
 {/each}
 {/if}
-
-<Editor simple={true} bind:value={note} />
-<button {onclick}>{t('save_note')}</button>
+<div class="editor">
+<Editor simple={true} bind:value={note} onSet={saveNote} />
+<button onclick={saveNote}>{t('save_note')}</button>
+</div>

frontend/src/routes/project/View.svelte

@@ -8,6 +8,7 @@
     import LineEditor from '../../Components/LineEditor.svelte';
     import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
     import MemberEditor from '../../Components/MemberEditor.svelte';
+    import Notes from '../notes/List.svelte';
     import StateSelector from '../../Components/StateSelector.svelte';
     import Tags from '../tags/TagList.svelte';
     import TaskList from '../task/TaskList.svelte';
@@ -211,3 +212,7 @@
     </tbody>
 </table>
 {/if}
+<div class="notes">
+    <h3>{t('notes')}</h3>
+    <Notes module="project" entity_id={id} />
+</div>

frontend/src/routes/task/View.svelte

@@ -294,12 +294,10 @@
                 <TagList module="task" {id} user_list={Object.keys(task.members).map(id => +id)} />
             </td>
         </tr>
-        <tr>
-            <th>{t('notes')}</th>
-            <td>
-                <Notes module="task" entity_id={id} />
-            </td>
-        </tr>
     </tbody>
 </table>
-{/if}
+{/if}
+<div class="notes">
+    <h3>{t('notes')}</h3>
+    <Notes module="task" entity_id={id} />
+</div>