working on task members

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

frontend/src/Components/Autocomplete.svelte

@@ -2,7 +2,10 @@
     import { t } from '../translations.svelte.js'
     import { tick } from "svelte";
 
-    let { getOptionsFor = text => {}, onSelect = text => [] } = $props();
+    let {
+        getCandidates = text => {},
+        onSelect = text => []
+    } = $props();
 
     let text = $state('')
     let options = $state({});
@@ -35,7 +38,8 @@
         } else if (key.length<2){
             text += evt.key
         }
-        options = await getOptionsFor(text);
+        options = await getCandidates(text);
+        console.log({options:options})
         await tick();
         for (let o of select.getElementsByTagName('option')) o.selected = false;
     }

frontend/src/Components/MarkdownEditor.svelte

@@ -4,12 +4,12 @@
 
     let {
         editable = true,
-        editing = false,
+        start_open = false,
         value = $bindable({source:null,rendered:null}),
         onSet = (newVal) => {}
     } = $props();
 
-    //let editing = $state(false);
+    let editing = $state(false);
 
     let editValue = $state({source:value.source,rendered:value.rendered});
 
@@ -49,10 +49,11 @@
         if (ev.keyCode == 27) resetEdit();
 
         if (timer) clearTimeout(timer);
-        timer = setTimeout(render,1000);
+        timer = setTimeout(render,500);
     }
 
     activeField.subscribe((val) => resetEdit());
+    if (start_open) startEdit();
 </script>
 
 <style>

frontend/src/Components/MemberEditor.svelte

@@ -5,6 +5,7 @@
     import PermissionSelector from './PermissionSelector.svelte';
     let {
         members,
+        getCandidates = text => {},
         updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`),
         dropMember       = (member)   => console.log(`no handler for dropMember(${member})`),
         addMember        = (entry)    => console.log(`no handler for addMember(${entry})`)
@@ -24,21 +25,6 @@
         }
     }
 
-    async function getOptionsFor(text){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/search`;
-        var resp = await fetch(url,{
-            credentials: 'include',
-            method: 'POST',
-            body: text
-        });
-        if (resp.ok){
-            var json = await resp.json();
-            return Object.fromEntries(Object.values(json).map(user => [user.id,user.name]));
-        } else {
-            return [];
-        }
-    }
-
     function onSelect(entry){
         addMember(entry);
     }
@@ -68,7 +54,7 @@
         <tr>
             <td>{t('add_member')}</td>
             <td>
-                <Autocomplete {getOptionsFor} {onSelect} />
+                <Autocomplete {getCandidates} {onSelect} />
             </td>
         </tr>
         </tbody>

frontend/src/routes/project/View.svelte

@@ -35,6 +35,21 @@
         update({drop_member:member.user.id});
     }
 
+    async function getCandidates(text){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/search`;
+        var resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: text
+        });
+        if (resp.ok){
+            var json = await resp.json();
+            return Object.fromEntries(Object.values(json).map(user => [user.id,user.name]));
+        } else {
+            return [];
+        }
+    }
+
     async function loadProject(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${id}`;
         const resp = await fetch(url,{credentials:'include'});
@@ -155,7 +170,7 @@
 {#if showSettings}
 <fieldset class="project settings">
     <legend>{t('settings')}</legend>
-    <MemberEditor members={project.members} {updatePermission} {addMember} {dropMember} />
+    <MemberEditor members={project.members} {updatePermission} {addMember} {dropMember} {getCandidates} />
     <fieldset>
         <legend>{t('miscellaneous_settings')}</legend>
         <label>

frontend/src/routes/task/Add.svelte

@@ -1,34 +1,51 @@
 <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 : 'new_task', rendered : '' }
+        description : { source : 'new_task', rendered : '' },
+        members : {}
     });
 
     function load(){
         if (project_id) loadProject();
     }
 
+    function addMember(member){
+        for (let uid of Object.keys(member)){
+            task.members[uid] = project.members[uid];
+        }
+    }
+
     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 = project.members;
             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);
+    }
+
     onMount(load);
 </script>
 
@@ -60,7 +77,15 @@
                     {t('description')}
                 </th>
                 <td>
-                    <MarkdownEditor bind:value={task.description} editing={true}/>
+                    <MarkdownEditor bind:value={task.description} start_open={true}/>
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    {t('members')}
+                </th>
+                <td>
+                    <MemberEditor members={task.members} {addMember} {getCandidates}/>
                 </td>
             </tr>
         </tbody>

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

@@ -35,7 +35,7 @@ button{
     border-color: yellow red red yellow;
 }
 footer {
-  position: sticky;
+  position: fixed;
   bottom: 0;
   width: 100%;
   text-align: center;