Merge branch 'accounting' into dev

frontend/src/routes/accounting/account.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { api, get } from '../../urls.svelte';
+	import { api, eventStream, get } from '../../urls.svelte';
 	import { error, yikes } from '../../warn.svelte';
 	import { t } from '../../translations.svelte';
 
@@ -9,6 +9,7 @@
 
 	let { id }       = $props();
 	let account      = $state(null);
+	let eventSource      = null;
 	let filter       = $state([]);
 	let transactions = $state([]);
 	let filtered     = $derived(transactions.filter(t => checker(t.tags,filter)));
@@ -27,7 +28,6 @@
 			if (!transaction.destination.id) sums[0] += transaction.amount;
 			if (!transaction.source.id)      sums[0] -= transaction.amount;
 		}
-		window.setTimeout(scrollToBottom,100);
 		return sums;
 	}
 
@@ -50,6 +50,30 @@
 		filter = filter.filter(x => x != tag.toLowerCase());
 	}
 
+    function handleCreateEvent(evt){
+        const event_data = JSON.parse(evt.data);
+        const new_transaction = event_data.transaction;
+        transactions.push(new_transaction);
+		window.setTimeout(scrollToBottom,100);
+    }
+
+	function handleDeleteEvent(evt){
+        const event_data = JSON.parse(evt.data);
+        transactions = transactions.filter(t => t.id != event_data.transaction.id);
+    }
+
+    function handleUpdateEvent(evt){
+        const event_data = JSON.parse(evt.data);
+        const updated_transaction = event_data.transaction;
+        for (var idx in transactions){
+            if (transactions[idx].id == updated_transaction.id) {
+                updated_transaction.tags = transactions[idx].tags;
+                transactions[idx] = updated_transaction;
+                break;
+            }
+        }
+    }
+
 	async function load(){
 		let url = api(`accounting/${id}`);
 		let res = await get(url);
@@ -59,11 +83,15 @@
 			transactions = json.transactions;
 			users        = json.user_list;
 			account      = json.account;
+			try {
+				eventSource = eventStream(handleCreateEvent,handleUpdateEvent,handleDeleteEvent);
+			} catch (ignored) {}
+			window.setTimeout(scrollToBottom,100);
 		} else error(res);
 	}
 
 	function onSave(){
-		load();
+		// load();
 	}
 
 	function scrollToBottom(){
@@ -107,6 +135,7 @@
 				<th>{t('other party')}</th>
 				<th>{t('purpose')}</th>
 				<th>{t('tags')}</th>
+				<th></th>
 			</tr>
 		</thead>
 		<tbody>
@@ -128,7 +157,7 @@
 					<br/>
 					{sums[0].toFixed(2)}&nbsp;{account.currency}
 				</td>
-				<td colspan="2"></td>
+				<td colspan="3"></td>
 			</tr>
 		</tbody>
 	</table>

frontend/src/routes/accounting/transaction.svelte

@@ -8,6 +8,16 @@
 	let { account, addToFilter = tag => {}, transaction, users } = $props();
 	let hidden = $state(false);
 
+	function deleteTransaction(ev){
+		if (confirm(t('confirm_delete',{element:transaction.purpose}))){
+			const url = api(`accounting/transaction/${transaction.id}`);
+			const res = drop(url);
+			if (res.ok){
+				yikes();
+			} else error(res);
+		}
+	}
+
 	async function dropTag(tag){
 		var url = api(`accounting/transaction/${transaction.id}/tag`)
 		var res = await drop(url,{tag});
@@ -127,5 +137,8 @@
 	        <Autocomplete {getCandidates} {onCommit} />
 	    </span>
 	</td>
+	<td class="actions">
+		<button class="symbol" onclick={deleteTransaction}></button>
+	</td>
 </tr>
 {/if}