improving usability by proposing tags

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

frontend/src/routes/accounting/add_entry.svelte

@@ -29,8 +29,35 @@
 	});
 	let router = useTinyRouter();
 
-	async function getTerminal(text,url){
-		var res = await post(url,text);
+	async function dst_selected(destination){
+		destination = JSON.parse(JSON.stringify(destination));
+		let source  = JSON.parse(JSON.stringify(entry.source));
+		const url   = api(`accounting/${entry.account.id}/tags`)
+		const res   = await post(url,{source,destination});
+		if (res.ok) {
+			yikes();
+			const json = await res.json();
+			entry.tags = json;
+		} else error(res);
+	}
+
+	function focusOnEnter(ev,id){
+		if (ev.key == 'Enter') document.getElementById(id).focus();
+	}
+
+	async function getAccountTags(text){
+		if (!text) return [];
+		const url = api(`accounting/${entry.account.id}/tags`)
+		return await getProposals(text,url);
+	}
+
+	async function getDestinations(text){
+		const url = api('accounting/destinations');
+		return await getProposals(text,url);
+	}
+
+	async function getProposals(text,url){
+		const res = await post(url,text);
         if (res.ok){
             yikes();
             const input = await res.json();
@@ -41,25 +68,19 @@
         }
 	}
 
-	async function getAccountTags(text){
-		if (!text) return [];
-		var url = api(`accounting/${entry.account.id}/tags`)
-		return await getTerminal(text,url);
-	}
-
-	async function getDestinations(text){
-		var url = api('accounting/destinations');
-		return await getTerminal(text,url);
-	}
 
 	async function getPurposes(text) {
-		var url = api('accounting/purposes');
-		return await getTerminal(text,url);
+		const url = api('accounting/purposes');
+		return await getProposals(text,url);
 	}
 
 	async function getSources(text){
-		var url = api('accounting/sources');
-		return await getTerminal(text,url);
+		const url = api('accounting/sources');
+		return await getProposals(text,url);
+	}
+
+	function gotoTags(purpose){
+		document.getElementById('new_tag_input');
 	}
 
 	function mapDisplay(object){
@@ -131,15 +152,15 @@
 	<Autocomplete bind:candidate={entry.source} getCandidates={getSources} id="source-input" />
 
 	<span>{t('destination')}</span>
-	<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} />
+	<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} onSelect={dst_selected} />
 
 	<span>{t('amount')}</span>
 	<span>
-		<input type="number" bind:value={entry.amount} />&nbsp;{entry.account.currency}
+		<input type="number" bind:value={entry.amount} onkeyup={e => focusOnEnter(e,'purpose_input')} />&nbsp;{entry.account.currency}
 	</span>
 
 	<span>{t('purpose')}</span>
-	<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} />
+	<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} onCommit={gotoTags} id="purpose_input" />
 
 	<span>{t('tags')}</span>
 	<Tags getCandidates={getAccountTags} module={null} bind:tags={entry.tags} onEmptyCommit={save} />

frontend/src/routes/tags/TagList.svelte

@@ -112,6 +112,6 @@
     </span>
     {/each}
     <span class="tag editor">
-        <Autocomplete {getCandidates} {onCommit} {onSelect} />
+        <Autocomplete {getCandidates} {onCommit} {onSelect} id="new_tag_input" />
     </span>
 </div>