implemented selector for parent task

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

frontend/src/routes/task/ParentSelector.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { onMount } from 'svelte';
+	import { t } from '../../translations.svelte';
+	import { api, get } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import TaskTree from './Tree.svelte';
+
+	let { project, select = o => {}, task } = $props();
+	let tree = $state({});
+
+	async function loadParentCandidates(){
+		let url = api(`task/${task.id}/parent_candidates`);
+		let res = await get(url);
+		if (res.ok){
+			yikes();
+			tree = await res.json();
+		} else error(res);
+	}
+
+	onMount(loadParentCandidates);
+</script>
+
+<div class="overlay parent_selector">
+	<h2>{t('select a new parent for {entity}',{entity:task.name})}</h2>
+	{t('project')}: {project.name}
+	<TaskTree {tree} {select} />
+</div>

frontend/src/routes/task/Tree.svelte

@@ -0,0 +1,23 @@
+<script>
+	let { select = o => {}, tree } = $props();
+
+	let nodes = $derived(Object.values(tree).sort((a,b) => a.name.localeCompare(b.name)))
+
+	function onclick(ev,node){
+		ev.preventDefault();
+		ev.stopPropagation();
+		select(node);
+		return true;
+	}
+</script>
+
+<ul>
+	{#each nodes as node (node.id)}
+	<li onclick={ev => onclick(ev,node)}>
+		{node.name}
+		{#if node.Children}
+		<svelte:self tree={node.Children} {select} />
+		{/if}
+	</li>
+	{/each}
+</ul>

frontend/src/routes/task/View.svelte

@@ -10,6 +10,7 @@
 
     import LineEditor       from '../../Components/LineEditor.svelte';
     import MarkdownEditor   from '../../Components/MarkdownEditor.svelte';
+    import ParentSelector   from './ParentSelector.svelte';
     import PermissionEditor from '../../Components/PermissionEditor.svelte';
     import Notes            from '../notes/RelatedNotes.svelte';
     import StateSelector    from '../../Components/StateSelector.svelte';
@@ -22,6 +23,7 @@
     let children       = $state(null);
     let dummy          = $derived(updateOn(id));
     let est_time = $state({sum:0});
+    let select_parent  = $state(false);
     let project        = $state(null);
     const router       = useTinyRouter();
     let showSettings   = $state(router.fullPath.endsWith('/edit'));
@@ -74,12 +76,6 @@
         router.navigate(`/project/${project.id}/kanban`)
     }
 
-
-    function gotoParent(){
-        if (!task.parent_task_id) return;
-        router.navigate(`/task/${task.parent_task_id}/view`)
-    }
-
     function gotoProject(){
         if (!project) return;
         router.navigate(`/project/${project.id}/view`)
@@ -136,6 +132,19 @@
         } else error(await resp.text());
     }
 
+    function parentClick(ev){
+        ev.preventDefault();
+        if (!task.parent_task_id) return;
+        router.navigate(`/task/${task.parent_task_id}/view`);
+        return false;
+    }
+
+    function parentRightClick(ev){
+        ev.preventDefault();
+        select_parent = true;
+        return false;
+    }
+
     function showClosed(){
         show_closed = !show_closed;
         children = null;
@@ -182,6 +191,11 @@
         loadTask();
     }
 
+    function update_parent(newVal){
+        select_parent = false;
+        update({parent_task_id:newVal.id});
+    }
+
     function updatePermission(user_id,permission){
         let members      = {};
         members[user_id] = permission.code;
@@ -207,13 +221,18 @@
         <button class="symbol" title={t('files')} onclick={showPrjFiles}></button>
     </div>
     {/if}
-    {#if task.parent}
     <div>{t('parent_task')}</div>
     <div class="parent">
-        <a href="#" onclick={gotoParent}>{task.parent.name}</a>
+        {#if select_parent}
+        <ParentSelector {task} {project} select={update_parent} />
+        {:else}
+        {#if task.parent}
+        <a href="/task/{task.parent.id}/view" onclick={parentClick} oncontextmenu={parentRightClick}>{task.parent.name}</a>
         <button class="symbol" title={t('unlink')} onclick={unlink_parent}></button>
+        {/if}
+        <button class="symbol" title={t('edit')} onclick={parentRightClick}></button>
+        {/if}
     </div>
-    {/if}
     <div>{t('task')}</div>
     <div class="name">
         <LineEditor bind:value={task.name} editable={true} onSet={val => update({name:val})} />