implementd adding and removal of tags to/from transactions

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

frontend/src/routes/accounting/transaction.svelte

@@ -1,8 +1,57 @@
 <script>
 	import LineEditor from '../../Components/LineEditor.svelte';
-	import { api, patch } from '../../urls.svelte';
+    import Autocomplete from '../../Components/Autocomplete.svelte';
+
+	import { api, drop, patch, post } from '../../urls.svelte';
 	import { error, yikes } from '../../warn.svelte';
-	let { account, transaction, users } = $props();
+	let { account, addToFilter = tag => {}, transaction, users } = $props();
+
+	async function dropTag(tag){
+		var url = api(`accounting/transaction/${transaction.id}/tag`)
+		var res = await drop(url,{tag});
+		if (res.ok){
+			yikes();
+			transaction.tags = transaction.tags.filter(t => t != tag);
+			return true;
+		}
+		error(res);
+		return false;
+	}
+
+	async function getCandidates(key){
+		var url = api(`accounting/${account.id}/tags`)
+		var res = await post(url,key);
+        if (res.ok){
+            yikes();
+            const input = await res.json();
+            return Object.values(input).map(mapDisplay);
+        } else {
+            error(res);
+            return {};
+        }
+	}
+
+	function mapDisplay(object){
+		if (object.display){
+			return object;
+		} else if (object.name) {
+			return {...object, display: object.name};
+		} else {
+		    return { display : object }
+		}
+	}
+
+	async function onCommit(tag){
+		let url = api(`accounting/transaction/${transaction.id}`);
+		let res = await patch(url,{tag:tag.display});
+		if (res.ok) {
+			yikes();
+			transaction.tags.push(tag.display);
+			return true;
+		}
+		error(res);
+		return false;
+	}
 
 	async function setAmount(amount){
 		return await update({amount});
@@ -28,6 +77,7 @@
 		let res = await patch(url,changes);
 		if (res.ok){
 			yikes();
+			for (let [k,v] of Object.entries(changes)) transaction[k]=v;
 			return true;
 		}
 		error(res);
@@ -60,7 +110,14 @@
 	<td class="purpose">
 		<LineEditor wrapper="span" editable="true" value={transaction.purpose} onSet={setPurpose} />
 	</td>
-	<td class="tags">
-		{transaction.tags.join(', ')}
+	<td class="taglist">
+		{#each transaction.tags as tag,i}
+		<span class="tag">
+			<span onclick={() => addToFilter(tag)}>{tag}</span>&nbsp;<button onclick={() => dropTag(tag)} class="symbol"></button>
+		</span>
+		{/each}
+		<span class="tag editor">
+	        <Autocomplete {getCandidates} {onCommit} />
+	    </span>
 	</td>
 </tr>

frontend/src/urls.svelte.js

@@ -8,11 +8,13 @@ export function get(url){
     return fetch(url,{ credentials:'include' });
 }
 
-export function drop(url){
-    return fetch(url,{
-        credentials:'include',
-        method:'DELETE'
-    });
+export function drop(url, payload){
+	let data = {
+		credentials:'include',
+		method:'DELETE'
+	};
+	if (payload) data['body'] = JSON.stringify(payload);
+    return fetch(url,data);
 }
 
 export function eventStream(createHandler,updateHandler,deleteHandler){
@@ -54,4 +56,4 @@ export function target(code){
     }
 
     return altered;
-}
+}