working on autocomplete fields

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

frontend/src/Components/Autocomplete.svelte

@@ -4,6 +4,7 @@
 
 
     let {
+        id            = null,
         autofocus     = false,
         getCandidates = dummyGetCandidates,
         onCommit      = dummyOnCommit,
@@ -108,7 +109,7 @@
 </style>
 
 <span>
-    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} />
+    <input type="text" bind:value={candidate.display} {onkeyup} autofocus={autofocus} {id} />
     {#if candidates && candidates.length > 0}
     <select bind:value={selected} {ondblclick} multiple tabindex="-1">
         {#each candidates as candidate,i}

frontend/src/routes/accounting/account.svelte

@@ -8,9 +8,11 @@
 
 	let { id }       = $props();
 	let account      = $state(null);
-	let transactions = [];
+	let transactions = $state([]);
 	let users        = {};
 
+	let sums         = {};
+
 	async function load(){
 		let url = api(`accounting/${id}`);
 		let res = await get(url);
@@ -20,10 +22,13 @@
 			transactions = json.transactions;
 			users        = json.user_list;
 			account      = json.account;
-			console.log(users);
 		} else error(res);
 	}
 
+	function onSave(){
+		load();
+	}
+
 	onMount(load);
 </script>
 {#if account}
@@ -47,27 +52,47 @@
 				{#each Object.entries(users) as [id,user]}
 				<td>
 				{#if id == transaction.source.id}
+				{sums[id] = -transaction.amount + (sums[id]?sums[id]:0)}
 				{-transaction.amount} {account.currency}
 				{/if}
 				{#if id == transaction.destination.id}
+				{sums[id] = transaction.amount + (sums[id]?sums[id]:0)}
 				{transaction.amount} {account.currency}
 				{/if}
 				</td>
 				{/each}
 				<td>
 				{#if !transaction.source.id}
-				{transaction.source.value}
+				{sums[0] = -transaction.amount + (sums[0]?sums[0]:0)}
+				← {transaction.source.value}
 				{/if}
 				{#if !transaction.destination.id}
-				{transaction.destination.value}
+				{sums[0] = transaction.amount + (sums[0]?sums[0]:0)}
+				→ {transaction.destination.value}
 				{/if}
 				</td>
 				<td>{transaction.purpose}</td>
 			</tr>
 			{/each}
+			<tr>
+				<td>
+					<br/>
+					{t('sums')}
+				</td>
+				{#each Object.entries(users) as [id,user]}
+				<th>
+					{user.name}<br/>
+					{sums[id]} {account.currency}
+				</th>
+				{/each}
+				<td>
+					<br/>
+					{sums[0]} {account.currency}
+				</td>
+			</tr>
 		</tbody>
 	</table>
 </fieldset>
 
-<EntryForm {account} />
+<EntryForm {account} {onSave} />
 {/if}

frontend/src/routes/accounting/add_entry.svelte

@@ -12,7 +12,7 @@
 		name     : '',
 		currency : ''
 	};
-	let { account = defaultAccount, new_account = false } = $props();
+	let { account = defaultAccount, new_account = false, onSave = () => {} } = $props();
 
 	let entry = $state({
 		account,
@@ -27,12 +27,22 @@
 	});
 	let router = useTinyRouter();
 
+	function mapDisplay(object){
+		if (object.display){
+			return object;
+		} else if (object.name) {
+			return {...object, display: object.name};
+		} else {
+		    return { display : object }
+		}
+	}
+
 	async function getTerminal(text,url){
 		var res = await post(url,text);
         if (res.ok){
             yikes();
             const input = await res.json();
-            return Object.values(input).map(user => { return {...user, display: user.name}});
+            return Object.values(input).map(mapDisplay);
         } else {
             error(res);
             return {};
@@ -44,6 +54,11 @@
 		return await getTerminal(text,url);
 	}
 
+	async function getPurposes(text) {
+		var url = api('accounting/purposes');
+		return await getTerminal(text,url);
+	}
+
 	async function getSources(text){
 		var url = api('accounting/sources');
 		return await getTerminal(text,url);
@@ -58,7 +73,8 @@
 		let res = await post(url, data);
 		if (res.ok) {
 			yikes();
-			router.navigate('/accounting');
+			onSave();
+			document.getElementById('date-input').focus();
 		} else error(res);
 	}
 </script>
@@ -74,6 +90,8 @@
 	}
 </style>
 
+<span class="warn">TODO: Tagging von Umsätzen</span>
+
 <fieldset class="grid2">
 	{#if new_account}
 		<legend>{t('create_new_object',{object:t('account')})}</legend>
@@ -95,11 +113,11 @@
 
 	<span>{t('date')}</span>
 	<span>
-		<input type="date" value={entry.date} />
+		<input type="date" bind:value={entry.date} id="date-input" />
 	</span>
 
 	<span>{t('source')}</span>
-	<Autocomplete bind:candidate={entry.source} getCandidates={getSources} />
+	<Autocomplete bind:candidate={entry.source} getCandidates={getSources} id="source-input" />
 
 	<span>{t('destination')}</span>
 	<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} />
@@ -110,10 +128,10 @@
 	</span>
 
 	<span>{t('purpose')}</span>
-	<Autocomplete bind:candidate={entry.purpose} />
+	<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} />
 
 	<span></span>
 	<span>
 		<button onclick={save}>{t('save')}</button>
 	</span>
-</fieldset>
+</fieldset>