implemented removal of transactions

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

frontend/src/routes/accounting/account.svelte

@@ -9,9 +9,9 @@
 
 	let { id }       = $props();
 	let account      = $state(null);
+	let filter       = $state([]);
 	let transactions = $state([]);
 	let users        = {};
-
 	let sums         = {};
 
 	function calcSums(){
@@ -27,6 +27,18 @@
 		}
 	}
 
+	function addToFilter(tag){
+		filter.push(tag);
+	}
+
+	function checker(taglist, filter){
+		return filter.every(tag => taglist.includes(tag));
+	}
+
+	function dropTag(tag){
+		filter = filter.filter(x => x != tag);
+	}
+
 	async function load(){
 		let url = api(`accounting/${id}`);
 		let res = await get(url);
@@ -51,6 +63,17 @@
 	.amount{ text-align: right }
 </style>
 
+{#if filter.length > 0}
+<fieldset>
+	<legend>{t('filter by tags')}</legend>
+	<div class="taglist">
+		{#each filter as tag,i}
+		<span class="tag">{tag}&nbsp;<button onclick={() => dropTag(tag)} class="symbol"></button></span>
+		{/each}
+	</div>
+</fieldset>
+
+{/if}
 {#if account}
 <fieldset>
 	<legend>{account.name}</legend>
@@ -68,7 +91,9 @@
 		</thead>
 		<tbody>
 			{#each transactions as transaction, i}
-			<Transaction {account} {transaction} {users} />
+			{#if checker(transaction.tags,filter)}
+			<Transaction {account} {addToFilter} {transaction} {users} />
+			{/if}
 			{/each}
 			<tr>
 				<td>

frontend/src/routes/accounting/transaction.svelte

@@ -4,7 +4,9 @@
 
 	import { api, drop, patch, post } from '../../urls.svelte';
 	import { error, yikes } from '../../warn.svelte';
+	import { t }  from '../../translations.svelte';
 	let { account, addToFilter = tag => {}, transaction, users } = $props();
+	let hidden = $state(false);
 
 	async function dropTag(tag){
 		var url = api(`accounting/transaction/${transaction.id}/tag`)
@@ -47,6 +49,7 @@
 		if (res.ok) {
 			yikes();
 			transaction.tags.push(tag.display);
+			transaction.tags.sort();
 			return true;
 		}
 		error(res);
@@ -54,7 +57,9 @@
 	}
 
 	async function setAmount(amount){
-		return await update({amount});
+		let result = await update({amount});
+		hidden = (amount == 0);
+		return result;
 	}
 	async function setDate(date){
 		return await update({date});
@@ -85,6 +90,7 @@
 	}
 </script>
 
+{#if !hidden}
 <tr>
 	<td>
 		<LineEditor type="date" wrapper="span" editable="true" value={transaction.date} onSet={setDate} />
@@ -92,10 +98,10 @@
 	{#each Object.entries(users) as [id,user]}
 	<td class="amount">
 		{#if id == transaction.source.id}
-		-<LineEditor type="number" wrapper="span" editable="true" value={(+transaction.amount).toFixed(2)} onSet={setAmount} />&nbsp;{account.currency}
+		-<LineEditor type="number" wrapper="span" editable="true" value={(+transaction.amount).toFixed(2)} onSet={setAmount} title={t('Set to zero in order to drop the transaction')} />&nbsp;{account.currency}
 		{/if}
 		{#if id == transaction.destination.id}
-		<LineEditor type="number" wrapper="span" editable="true" value={(+transaction.amount).toFixed(2)} onSet={setAmount} />&nbsp;{account.currency}
+		<LineEditor type="number" wrapper="span" editable="true" value={(+transaction.amount).toFixed(2)} onSet={setAmount} title={t('Set to zero in order to drop the transaction')} />&nbsp;{account.currency}
 		{/if}
 	</td>
 	{/each}
@@ -121,3 +127,4 @@
 	    </span>
 	</td>
 </tr>
+{/if}