Merge branch 'refactor/autocomplete' into dev

frontend/src/Components/Autocomplete.svelte

@@ -2,59 +2,114 @@
     import { t }    from '../translations.svelte.js'
     import { tick } from "svelte";
 
+
     let {
-        getCandidates = async text => { conole.log('no handler for getCandidates('+text+')'); return {};},
-        onSelect      = text => []
+        getCandidates = dummyGetCandidates,
+        onCommit      = dummyOnCommit,
+        onSelect      = dummyOnSelect,
     } = $props();
 
-    const ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
-    let options  = $state({});
-    let text     = $state('')
+    const ignore   = ['ArrowLeft','ArrowRight'];
+    let candidate  = $state({ display : '' });
+    let selected   = $state([]);
+    let candidates = $derived(getCandidates(candidate.display));
+
+    async function dummyGetCandidates(text){
+        console.warn(`getCandidates(${text}) not overridden!`);
+        if (!text) return [];
+        return [
+            {
+                display     : 'candidate 1',
+                explanation : 'candidates need to have a display field'
+            },
+            {
+                display    : 'candidate 2',
+                additional : 'other fields are optional',
+                more       : 'and may be domain specific'
+            },
+            { display : text }
+        ];
+    }
+
+    function dummyOnCommit(candidate){
+        // if Enter is pressed on the input field, this method gets called with
+        // either the selected candidate or
+        // an anonymous object with the entered text in the display field
+        console.warn(`onCommit(${JSON.stringify(candidate)}) not overridden!`);
+    }
+
+    function dummyOnSelect(candidate){
+        console.warn(`${candidate.display} selected, but onSelect not overridden!`)
+    }
 
     async function ondblclick(evt){
         const select = evt.target;
-        const key    = select.value;
-        text         = options[key];
-        let result   = {};
-        result[key]  = text;
-        options      = {};
-        text         = '';
-        onSelect(result);
+        const idx    = select.value;
+        candidate = candidates[idx];
+        candidates = [];
+        selected = [];
+        console.log(candidate);
+        onSelect(candidate);
     }
 
-    async function onkeyup(evt){
-        const select = evt.target;
-        const key    = evt.key;
-        if (ignore.includes(key)) return;
-        if (key == 'ArrowDown'){
-            if (select.selectedIndex == 0) select.selectedIndex=1;
-            return;
+    async function onkeyup(ev){
+        if (ignore.includes(ev.key)) return;
+        if (ev.key == 'ArrowDown'){
+            ev.preventDefault();
+            selected = selected.length < 1 ? [0] : [selected[0]+1]
+            if (selected[0] >= candidates.length) selected = [0];
+            return false;
         }
-        if (key == 'Enter'){
-            ondblclick(evt);
-            return;
+        if (ev.key == 'ArrowUp'){
+            ev.preventDefault();
+            selected = selected.length < 1 ? [-1] : [selected[0]-1]
+            if (selected[0] < 0) selected = [candidates.length-1];
+            return false;
         }
-        if (key == 'Backspace'){
-            text  = text.substring(0,text.length-1)
-        } else if (key.length<2){
-            text += evt.key
+        if (ev.key == 'Enter'|| ev.key == 'Tab'){
+            ev.preventDefault();
+            if (selected.length>0) {
+                candidate = candidates[selected[0]];
+                candidates = [];
+                selected = [];
+                onSelect(candidate);
+                return false;
+            }
+            if (ev.key == 'Enter') {
+                candidates = [];
+                selected = [];
+                onCommit(candidate);
+            }
+            return false;
         }
-        options = await getCandidates(text);
-        await tick();
-        for (let o of select.getElementsByTagName('option')) o.selected = false;
+        if (ev.key == 'Escape'){
+            ev.preventDefault();
+            candidates = [];
+            selected = [];
+            return false;
+        }
+
+        candidates = await getCandidates(candidate.display);
+        if (selected>candidates.length) selected = candidates.length;
+        return false;
     }
 </script>
 
 <style>
-    select{
-        min-width: 200px;
-    }
+    div { position : relative }
+    select { position : absolute; top: 30px; left: 3px; }
+
+    select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; }
+    option:checked { background: orange; color: black; }
 </style>
-{#if options}
-<select size={Object.keys(options).length<2?2:Object.keys(options).length+1} {onkeyup} {ondblclick} width="40">
-    <option>{text}</option>
-    {#each Object.entries(options) as [val,caption]}
-    <option value={val}>{caption}</option>
-    {/each}
-</select>
-{/if}
+
+<div>
+    <input type="text" bind:value={candidate.display} {onkeyup} />
+    {#if candidates && candidates.length > 0}
+    <select bind:value={selected} {ondblclick} multiple tabindex="-1">
+        {#each candidates as candidate,i}
+        <option value={i}>{candidate.display}</option>
+        {/each}
+    </select>
+    {/if}
+</div>

frontend/src/Components/PermissionEditor.svelte

@@ -1,8 +1,9 @@
 <script>
     import { onMount }        from 'svelte';
 
-    import { api }            from '../urls.svelte';
+    import { api, get, post }            from '../urls.svelte';
     import { t }              from '../translations.svelte';
+    import { error, yikes } from '../warn.svelte';
 
     import Autocomplete       from './Autocomplete.svelte';
     import PermissionSelector from './PermissionSelector.svelte';
@@ -27,7 +28,7 @@
         });
         if (resp.ok){
             var json = await resp.json();
-            return Object.fromEntries(Object.values(json).map(user => [user.id,user.name]));
+            return Object.values(json).map(user => { return {...user,display:user.name}; });
         } else {
             return [];
         }
@@ -35,16 +36,10 @@
 
     async function loadPermissions(){
         const url  = api('task/permissions');
-        const resp = await fetch(url,{credentials: 'include'});
+        const resp = await get(url);
         if (resp.ok){
             permissions = await resp.json();
-        } else {
-            message = await resp.text();
-        }
-    }
-
-    function onSelect(entry){
-        addMember(entry);
+        } else error(resp);
     }
 
     onMount(loadPermissions);
@@ -66,7 +61,7 @@
     <tr>
         <td>{t('add_object',{object:t('member')})}</td>
         <td>
-            <Autocomplete {getCandidates} {onSelect} />
+            <Autocomplete {getCandidates} onSelect={addMember} />
         </td>
     </tr>
     </tbody>

frontend/src/Components/UserSelector.svelte

@@ -16,9 +16,7 @@
     }
 
     function onSelect(entry){
-        for (let [k,v] of Object.entries(entry)){
-            users[k] = {name:v,id:k};
-        }
+        users[entry.id] = entry;
     }
 
     let sortedUsers = $derived.by(() => Object.values(users).sort((a, b) => a.name.localeCompare(b.name)));

frontend/src/routes/bookmark/Index.svelte

@@ -37,9 +37,7 @@
         if (resp.ok){
             yikes();
             const input = await resp.json();
-            return Object.fromEntries(
-                Object.entries(input).map(([key, value]) => [key, value.name])
-            );
+            return Object.values(input).map(user => {return {...user,display:user.name}});
         } else {
             error(resp);
             return {};

frontend/src/routes/company/Editor.svelte

@@ -22,9 +22,7 @@
         if (resp.ok){
             yikes();
             const input = await resp.json();
-            return Object.fromEntries(
-                Object.entries(input).map(([key, value]) => [key, value.name])
-            );
+            return Object.values(input).map(user => { return {...user, display: user.name}});
         } else {
             error(resp);
             return {};

frontend/src/routes/poll/Edit.svelte

@@ -20,7 +20,7 @@
 	let members = $state([]);
 
 	function addMember(member){
-		for (let [id,name] of Object.entries(member)) update_permissions({user_id:+id,permission:4});
+		update_permissions({user_id:+member.id,permission:4});
 		return true;
 	}
 

frontend/src/routes/project/View.svelte

@@ -28,9 +28,8 @@
     let new_state = $state({code:null,name:null})
     let state_available=$derived(new_state.name && new_state.code && !project.allowed_states[new_state.code]);
 
-    async function addMember(entry){
-        const ids = Object.keys(entry);
-        if (ids) update({new_member:+ids.pop()});
+    async function addMember(user){
+        return await update({new_member:+user.id});
     }
 
     async function addState(){
@@ -67,21 +66,6 @@
         update({drop_member:member.user.id});
     }
 
-    async function getCandidates(text){
-        const url  = api('user/search');
-        const 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 handleCreate(evt){
         let json = JSON.parse(evt.data);
         json.event = 'create';
@@ -242,7 +226,7 @@
     </label>
     <div class="em">{t('members')}</div>
     <div class="em">
-        <PermissionEditor members={project.members} {updatePermission} {addMember} {dropMember} {getCandidates} />
+        <PermissionEditor members={project.members} {updatePermission} {addMember} {dropMember} />
     </div>
     {#if project.allowed_states}
     {#each Object.keys(project.allowed_states) as key,idx}

frontend/src/routes/task/Add.svelte

@@ -29,7 +29,8 @@
     let router = useTinyRouter();
 
     function addMember(member){
-        for (let uid of Object.keys(member)) task.members[uid] = project.members[uid];
+        let uid = member.id;
+        task.members[uid] = project.members[uid];
     }
 
     function flat(json){
@@ -44,10 +45,9 @@
 
     async function getCandidates(text){
         const origin = parent_task ? parent_task.members : project.members;
-        const candidates = Object.values(origin)
+        return Object.values(origin)
             .filter(member => member.user.name.toLowerCase().includes(text.toLowerCase()))
-            .map(member => [member.user.id,member.user.name]);
-        return Object.fromEntries(candidates);
+            .map(member => {return { ...member.user,display:member.user.name}});
     }
 
     async function load(){

frontend/src/routes/task/View.svelte

@@ -37,9 +37,8 @@
         router.navigate(`/task/${id}/add_subtask`);
     }
 
-    async function addMember(entry){
-        const ids = Object.keys(entry);
-        if (ids) update({new_member:+ids.pop()});
+    async function addMember(newMember){
+        return await update({new_member:+newMember.id});
     }
 
     async function addTime(){
@@ -64,10 +63,10 @@
 
     async function getCandidates(text){
         const origin     = task.parent ? task.parent.members : project.members;
-        const candidates = Object.values(origin)
+        return Object.values(origin)
             .filter(member => member.user.name.toLowerCase().includes(text.toLowerCase()))
-            .map(member => [member.user.id,member.user.name]);
-        return Object.fromEntries(candidates);
+            .map(member => { return {...member.user,display:member.user.name}});
+
     }
 
     function gotoKanban(){
@@ -177,6 +176,8 @@
         });
         if (resp.ok){
             yikes();
+            let json = await resp.json();
+            if (json.members) task.members = json.members;
             return true;
         } else {
             error(resp);

frontend/src/routes/wiki/View.svelte

@@ -22,9 +22,8 @@
 
     async function addMember(entry){
         let newMembers = JSON.parse(JSON.stringify(page.members));
-        for (var id of Object.keys(entry)){
-            if (!newMembers[id]) newMembers[id] = { permission : {name:'READ_ONLY'} };
-        }
+        let id = entry.id;
+        if (!newMembers[id]) newMembers[id] = { permission : {name:'READ_ONLY'} };
         return patch({members:newMembers});
     }
 
@@ -74,7 +73,7 @@
         });
         if (resp.ok){
             var json = await resp.json();
-            return Object.fromEntries(Object.values(json).filter(nonMember).map(user => [user.id,user.name]));
+            return Object.values(json).filter(nonMember).map(user => { return {...user,display:user.name}});
         } else {
             return [];
         }