preparing for member addition to project:
- implemented Autocomplete
- next up:
- bubble up requested user
- add as member
This commit is contained in:
@@ -2,10 +2,10 @@
|
|||||||
import { t } from '../translations.svelte.js'
|
import { t } from '../translations.svelte.js'
|
||||||
import { tick } from "svelte";
|
import { tick } from "svelte";
|
||||||
|
|
||||||
let { getOptionsFor = text => [], onSelect = text => [] } = $props();
|
let { getOptionsFor = text => {}, onSelect = text => [] } = $props();
|
||||||
|
|
||||||
let text = $state('')
|
let text = $state('')
|
||||||
let options = $state([]);
|
let options = $state({});
|
||||||
|
|
||||||
async function onkeyup(evt){
|
async function onkeyup(evt){
|
||||||
var select = evt.target;
|
var select = evt.target;
|
||||||
@@ -17,9 +17,12 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (key == 'Enter'){
|
if (key == 'Enter'){
|
||||||
text = select.value;
|
let key = select.value;
|
||||||
onSelect(text);
|
text = options[key];
|
||||||
options=[];
|
let result = {};
|
||||||
|
result[key]=text;
|
||||||
|
options={};
|
||||||
|
onSelect(result);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (key == 'Backspace'){
|
if (key == 'Backspace'){
|
||||||
@@ -38,10 +41,10 @@
|
|||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<select size={options.length<2?2:options.length+1} {onkeyup} autofocus width="40">
|
<select size={Object.keys(options).length<2?2:Object.keys(options).length+1} {onkeyup} autofocus width="40">
|
||||||
<option>{text}</option>
|
<option>{text}</option>
|
||||||
{#each options as option,i}
|
{#each Object.entries(options) as [val,caption]}
|
||||||
<option>{option}</option>
|
<option value={val}>{caption}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|||||||
@@ -28,14 +28,7 @@
|
|||||||
});
|
});
|
||||||
if (resp.ok){
|
if (resp.ok){
|
||||||
var json = await resp.json();
|
var json = await resp.json();
|
||||||
if (Array.isArray(json)) return json;
|
return Object.fromEntries(Object.values(json).map(user => [user.id,user.name]));
|
||||||
if (typeof json == 'object'){
|
|
||||||
let names = Object.values(json).map(user => user.name);
|
|
||||||
if (names.length > 10) names.length = 10;
|
|
||||||
return names;
|
|
||||||
}
|
|
||||||
console.warn('not an array:',json);
|
|
||||||
return [];
|
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user