minor bugfix in wiki index

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

frontend/src/Components/MarkdownEditor.svelte

@@ -8,6 +8,7 @@
         onclick  = evt => {},
         onSet    = newVal => {return true;},
         simple   = false,
+        store_id = null,
         type     = 'div',
         value    = $bindable({source:null,rendered:null})
     } = $props();
@@ -15,6 +16,7 @@
     let editing   = $state(false);
     let editValue = $state({source:value.source,rendered:value.rendered});
     let start     = 0;
+    let stored_source = $state(store_id ? localStorage.getItem(store_id) : null);
     let timer     = null;
 
     async function applyEdit(){
@@ -27,6 +29,7 @@
     }
 
     function doSave(){
+        if (store_id) localStorage.removeItem(store_id);
         if (simple){
             onSet(editValue.source);
         } else applyEdit();
@@ -50,6 +53,7 @@
             body       : editValue.source
         });
         editValue.rendered = await resp.text();
+        if (store_id) localStorage.setItem(store_id,editValue.source);
     }
 
     function typed(ev){
@@ -100,13 +104,37 @@
         measured(evt, evt.timeStamp - start);
     }
 
+    function restore(ev){
+        editValue.source = stored_source;
+        stored_source = null;
+        render();
+    }
+
     activeField.subscribe((val) => resetEdit());
     if (simple) startEdit();
 </script>
 
+<style>
+    .markdown{
+        position: relative;
+    }
+    #restore_markdown{
+        position: absolute;
+        right: 50%;
+        top: -10px;
+        background: orange;
+        color: black;
+        padding: 5px;
+        border-radius: 5px;
+    }
+</style>
+
 <div class="markdown {editing?'editing':''}">
 {#if editing}
     <span class="hint">{@html t('markdown_supported')}</span>
+    {#if stored_source}
+    <span id="restore_markdown" onclick={restore} class="hint">{t('unsaved_content')}</span>
+    {/if}
     <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
     <div class="preview">{@html target(editValue.rendered)}</div>
     {#if !simple}
@@ -118,4 +146,4 @@
 {:else}
     <svelte:element this={type} {onclick} {oncontextmenu} class={{editable}} title={t('right_click_to_edit')} >{@html target(value.rendered)}</svelte:element>
 {/if}
-</div>
+</div>

frontend/src/routes/project/Kanban.svelte

@@ -10,6 +10,7 @@
     import Card              from './KanbanCard.svelte';
     import LineEditor        from '../../Components/LineEditor.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
+    import TaskForm          from '../task/Add.svelte';
 
 	let eventSource      = null;
     let connectionStatus = 'disconnected';
@@ -26,7 +27,7 @@
     let users        = [];
     let columns      = $derived(project.allowed_states?Object.keys(project.allowed_states).length+1:1);
     let info         = $state(null);
-
+    let task_form    = $state(false);
     let stateList = {};
     $effect(() => updateUrl(filter_input));
 
@@ -120,7 +121,9 @@
             if (method != 'delete') processTask(json.task);
 
             // show notification
-            if (json.user.id != user.id) {
+            if (json.user.id == user.id) {
+                if (method == 'create') task_form = false; // task has been created by current user
+            } else {
                 let term = "user_updated_entity";
                 if (method == 'create') term = "user_created_entity";
                 if (method == 'delete') term = "user_deleted_entity";
@@ -249,6 +252,9 @@
         }
     }
 
+    function show_task_form(project_id,assignee,state_id){
+        task_form = {project_id,assignee,state_id};
+    }
 
     function updateUrl(){
         let url = window.location.origin + window.location.pathname;
@@ -267,6 +273,12 @@
 </svelte:head>
 
 {#if project}
+{#if task_form}
+<div class="overlay">
+    <TaskForm assignee={task_form.assignee} on_abort={ev => {task_form = false;}} project_id={task_form.project_id} state_id={task_form.state_id} />
+</div>
+{/if} <!-- task form -->
+
 <h1 onclick={ev => router.navigate(`/project/${project.id}/view`)}>{project.name}</h1>
 {/if}
 {#if info}
@@ -300,8 +312,8 @@
                     <Card onclick={e => openTask(task.id)} ondragstart={ev => dragged=task} {task} tag_colors={project.tag_colors} />
                     {/if}
                 {/each}
-                <div class="add_task">
-                    <LineEditor value={t('add_object',{object:t('task')})} editable={true} onSet={(name) => create(name,u.id,state)}/>
+                <div class="add_task" onclick={ev => show_task_form(project.id,u.id,+state)}>
+                    {t('add_object',{object:t('task')})}
                 </div>
             </div>
         {/each}
@@ -310,4 +322,4 @@
 <div class="archive {highlight.archive?'hover':''}" ondragover={hover_archive} ondragleave={e => delete highlight.archive} ondrop={do_archive} >
 {t('hide')}
 </div>
-{/if}
+{/if} <!-- project -->

frontend/src/routes/task/Add.svelte

@@ -2,7 +2,7 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
+    import { api, get }      from '../../urls.svelte.js';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
@@ -11,15 +11,16 @@
     import PermissionEditor  from '../../Components/PermissionEditor.svelte';
     import Tags              from '../tags/TagList.svelte';
 
-    let { project_id = null, parent_task_id } = $props();
+    let { assignee = null, on_abort = null, project_id = null, parent_task_id = null, state_id = null } = $props();
     let project          = $state(null);
     let extendedSettings = $state(false);
     let parent_task      = $state(null);
     let task = $state({
         name           : '',
-        description    : { source : '', rendered : '' },
+        description    : { source:'',rendered:''},
         due_date       : null,
         est_time       : null,
+        members        : {},
         no_index       : false,
         show_closed    : false,
         start_date     : null,
@@ -41,32 +42,43 @@
         ///  TODO: ?
     }
 
+    async function getCandidates(text){
+        const origin = parent_task ? parent_task.members : project.members;
+        const candidates = Object.values(origin)
+            .filter(member => member.user.name.toLowerCase().includes(text.toLowerCase()))
+            .map(member => [member.user.id,member.user.name]);
+        return Object.fromEntries(candidates);
+    }
+
     async function load(){
         if (parent_task_id) await loadParent();
         if (project_id) loadProject();
+        if (state_id)   task.status   = { code : +state_id };
         loadTags();
     }
 
     async function loadParent(){
         const url  = api(`task/${parent_task_id}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok){
             parent_task         = await resp.json();
             task.parent_task_id = +parent_task_id;
-            project_id          = parent_task.project_id;
+            project_id          = +parent_task.project_id;
             yikes();
             project             = null; // TODO
-        } else {
-            error(resp);
-        }
+        } else error(resp);
     }
 
     async function loadProject(){
         const url  = api(`project/${project_id}`);
-        const resp = await fetch(url,{credentials:'include'});
+        const resp = await get(url);
         if (resp.ok){
             project           = await resp.json();
             task.project_id   = +project_id;
+            if (assignee && project.members[assignee]){
+                task.members[assignee] = project.members[assignee];
+                task.members[assignee].permission = { name : "ASSIGNEE", code : 3 }
+            }
             yikes();
         } else {
             error(resp);
@@ -78,21 +90,12 @@
         if (project_id) url = api(`tags/project/${project_id}`);
         if (parent_task_id) url = api(`tags/task/${parent_task_id}`);
         if (url) {
-            const resp = await fetch(url,{credentials:'include'});
+            const resp = await get(url);
             if (resp.ok) task.tags = await resp.json();
         }
     }
 
-    async function getCandidates(text){
-        const origin = parent_task ? parent_task.members : project.members;
-        const candidates = Object.values(origin)
-            .filter(member => member.user.name.toLowerCase().includes(text.toLowerCase()))
-            .map(member => [member.user.id,member.user.name]);
-        return Object.fromEntries(candidates);
-    }
-
-
-    function onkeydown(e){
+     function onkeydown(e){
         if (e.ctrlKey && e.keyCode === 83) {
             e.preventDefault();
             saveTask();
@@ -107,10 +110,13 @@
             body        : JSON.stringify(task)
         });
         if (resp.ok) {
-            task = await resp.json();
-            if (task.parent_task_id){
-                router.navigate(`/task/${task.parent_task_id}/view`);
-            } else router.navigate(`/task/${task.id}/view`);
+            localStorage.removeItem(`task/${task.id}/description`);
+            if (!assignee) { // if assignee is set, this form was opened within an external context. hence we don`t want to navigate somewhere else!
+                task = await resp.json();
+                if (task.parent_task_id){
+                    router.navigate(`/task/${task.parent_task_id}/view`);
+                } else router.navigate(`/task/${task.id}/view`);
+            }
             yikes();
         } else {
             error(resp);
@@ -130,119 +136,76 @@
 
 <fieldset>
     <legend>{t('add_object',{object:t('task')})}</legend>
-    <table {onkeydown}>
-        <tbody>
-            <tr>
-                <th>
-                    {t('name')}
-                </th>
-                <td>
-                    <input bind:value={task.name} autofocus>
-                </td>
-            </tr>
-            {#if project}
-            <tr>
-                <th>
-                    {t('project')}
-                </th>
-                <td>
-                    {project.name}
-                </td>
-            </tr>
-            {/if}
-            {#if parent_task}
-            <tr>
-                <th>
-                    {t('parent_task')}
-                </th>
-                <td>
-                    {parent_task.name}
-                </td>
-            </tr>
-            {/if}
+    <div class="task grid2">
+        <div>{t('name')}</div>
+        <div>
+            <input bind:value={task.name} autofocus>
+        </div>
 
-            <tr>
-                <th>
-                    {t('description')}
-                </th>
-                <td>
-                    <MarkdownEditor bind:value={task.description} simple={true} />
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {t('tags')}
-                </th>
-                <td>
-                    <Tags module="task" bind:tags={task.tags} />
-                </td>
-            </tr>
-            {#if extendedSettings}
-            <tr>
-                <th>
-                    {t('members')}
-                </th>
-                <td>
-                    <PermissionEditor members={task.members} {addMember} {getCandidates} {dropMember} />
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {t('estimated_time')}
-                </th>
-                <td>
-                    <input type="number" bind:value={task.est_time} /> {t('hours')}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {t('start_date')}
-                </th>
-                <td>
-                    <input type="date" bind:value={task.start_date} />
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {t('due_date')}
-                </th>
-                <td>
-                    <input type="date" bind:value={task.due_date} />
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {t('subtasks')}
-                </th>
-                <td>
-                    <label>
-                        <input type="checkbox" bind:checked={task.show_closed} >
-                        {t('display_closed_tasks')}
-                    </label>
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {t('index_page')}
-                </th>
-                <td>
-                    <label>
-                        <input type="checkbox" bind:checked={task.no_index} >
-                        {t('hide_on_index_page')}
-                    </label>
-                </td>
-            </tr>
-            {:else}
-            <tr>
-                <th>
-                    {t('extended_settings')}
-                </th>
-                <td>
-                    <button onclick={toggleSettings}>{t('show')}</button>
-                </td>
-            </tr>
-            {/if}
-        </tbody>
-    </table>
+        {#if project}
+        <div>{t('project')}</div>
+        <a href="/project/{project.id}/view">{project.name}</a>
+        {/if}
+
+        {#if parent_task}
+        <div>{t('parent_task')}</div>
+        <div>{parent_task.name}</div>
+        {/if}
+
+        <div>{t('description')}</div>
+        <div>
+            <MarkdownEditor bind:value={task.description} simple={true} store_id="task/add_to/{project_id}"/>
+        </div>
+        <div>{t('tags')}</div>
+        <div>
+            <Tags module="task" bind:tags={task.tags} />
+        </div>
+
+        {#if extendedSettings}
+        <div>{t('members')}</div>
+        <div>
+            <PermissionEditor members={task.members} {addMember} {dropMember} {getCandidates} />
+        </div>
+
+        <div>{t('estimated_time')}</div>
+        <div>
+            <input type="number" bind:value={task.est_time} /> {t('hours')}
+        </div>
+
+        <div>{t('start_date')}</div>
+        <div>
+            <input type="date" bind:value={task.start_date} />
+        </div>
+
+        <div>{t('due_date')}</div>
+        <div>
+            <input type="date" bind:value={task.due_date} />
+        </div>
+
+        <div>{t('subtasks')}</div>
+        <div>
+            <label>
+                <input type="checkbox" bind:checked={task.show_closed} >
+                {t('display_closed_tasks')}
+            </label>
+        </div>
+
+        <div>
+            {t('index_page')}
+        </div>
+        <label>
+            <input type="checkbox" bind:checked={task.no_index} >
+            {t('hide_on_index_page')}
+        </label>
+        {:else}
+        <div>{t('extended_settings')}</div>
+        <div>
+            <button onclick={toggleSettings}>{t('show')}</button>
+        </div>
+        {/if}
+    </div>
     <button onclick={saveTask}>{t('save_object',{object:t('task')})}</button>
-</fieldset>
+    {#if on_abort}
+    <button onclick={on_abort}>{t('abort')}</button>
+    {/if}
+</fieldset>

frontend/src/routes/task/View.svelte

@@ -241,7 +241,7 @@
     </div>
     {#if task.description}
     <div>{t('description')}</div>
-    <MarkdownEditor bind:value={task.description} editable={true} onSet={val => update({description:val})} />
+    <MarkdownEditor store_id="task/{task.id}/description" bind:value={task.description} editable={true} onSet={val => update({description:val})} />
     {/if}
     {#if !showSettings && task.start_date}
         <div>{t('start_date')}</div>
@@ -270,7 +270,7 @@
 
         <div>{t('members')}</div>
         <div>
-            <PermissionEditor members={task.members} {updatePermission} {addMember} {dropMember} {getCandidates} />
+            <PermissionEditor members={task.members} {addMember} {dropMember} {getCandidates} {updatePermission} />
         </div>
         <div>{t('start_date')}</div>
         <div>

frontend/src/routes/wiki/AddPage.svelte

@@ -22,6 +22,7 @@
         });
         if (res.ok){
             yikes();
+            localStorage.removeItem('wiki/new/content');
             router.navigate(`/wiki/${title}/view`);
         } else {
             error(res);
@@ -60,7 +61,7 @@
     </label>
     <label>
         {t('content')}
-        <Markdown bind:value={content} simple={true} />
+        <Markdown bind:value={content} simple={true} store_id="wiki/new/content" />
         <button type="submit">{t('save')}</button>
     </label>
 </form>

frontend/src/routes/wiki/Index.svelte

@@ -39,6 +39,6 @@
 
 <h2>{lastLetter = page.charAt(0).toUpperCase()||page.charAt(0).toUpperCase()}</h2>
 {/if}
-<a class="wikilink" href={`/wiki/${page}/view`} {onclick} >{page}</a>
+<a class="wikilink" href={`/wiki/${encodeURIComponent(page)}/view`} {onclick} >{page}</a>
 {/each}
 {/if}

frontend/src/routes/wiki/View.svelte

@@ -188,7 +188,7 @@
     </table>
     {/if}
     {/if}
-    <MarkdownEditor {editable} value={page.content} onSet={s => patch({content:s})} />
+    <MarkdownEditor {editable} value={page.content} onSet={s => patch({content:s})} store_id="wiki/{page.id}/description" />
     <TagList module="wiki" id={page.id} user_list={Object.keys(page.members).map(id => +id)} />
     <div class="notes">
         <h3>{t('notes')}</h3>

translations/src/main/resources/de.json

@@ -399,6 +399,7 @@
   "unit_price": "Preis/Einheit",
   "unknown_item_location": "Artikel {0} von {1} {2} ist verknüpft mit unbekanntem Lagerort {3}!",
   "unlink": "Trennen",
+  "unsaved_content": "Hier klicken, um ungespeicherte Änderungen zu laden",
   "update": "aktualisieren",
   "UPDATE_USERS" : "Nutzer aktualisieren",
   "upload_file": "Datei hochladen",

translations/src/main/resources/en.json

@@ -399,6 +399,7 @@
   "unit_price": "price/unit",
   "unknown_item_location": "Item {0} of {1} {2} refers to location {3}, which is unknown!",
   "unlink": "unlink",
+  "unsaved_content": "Click here to load unsaved changes",
   "update": "update",
   "UPDATE_USERS" : "update users",
   "upload_file": "upload file",

web/src/main/resources/web/css/bloodshed.css

@@ -45,7 +45,7 @@ fieldset[tabindex="0"]{
     overflow: hidden;
 }
 
-fieldset[tabindex="0"]:focus-within{
+fieldset[tabindex="0"]:hover{
     max-height: unset;
 }
 
@@ -91,6 +91,26 @@ td, tr{
   border-radius: 6px;
 }
 
+.info {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	font-size: 14px;
+	z-index: 200;
+	padding: 3px;
+}
+
+.overlay {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	padding: 40px 10px 10px;
+	background: rgba(0,0,0,0.9);
+	z-index: 50;
+}
+
 .warn {
     padding: 5px;
     border-radius: 6px;

web/src/main/resources/web/css/default.css

@@ -183,6 +183,17 @@ td, tr{
 	padding: 3px;
 }
 
+.overlay {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	padding: 40px 10px 10px;
+	background: rgba(0,0,0,0.9);
+	z-index: 50;
+}
+
 .warn {
     padding: 5px;
     border-radius: 6px;

web/src/main/resources/web/css/winter.css

@@ -91,6 +91,26 @@ td, tr{
   border-radius: 6px;
 }
 
+.info {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	font-size: 14px;
+	z-index: 200;
+	padding: 3px;
+}
+
+.overlay {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	padding: 40px 10px 10px;
+	background: rgba(255,255,255,0.9);
+	z-index: 50;
+}
+
 .warn {
     padding: 5px;
     border-radius: 6px;
@@ -235,6 +255,7 @@ textarea{
 .message.settings label{
 	display: block;
 }
+
 .message.settings td{
 	vertical-align: middle;
 }