working on entry form

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

frontend/src/App.svelte

@@ -26,6 +26,7 @@
     import Messages    from "./routes/message/Messages.svelte";
     import MsgSettings from "./routes/message/Settings.svelte";
     import Menu        from "./Components/Menu.svelte";
+    import NewAccount  from "./routes/accounting/new.svelte";
     import NewPage     from "./routes/wiki/AddPage.svelte";
     import Notes       from "./routes/notes/Index.svelte";
     import PollList    from "./routes/poll/Index.svelte";
@@ -90,6 +91,7 @@
         {/if}
         <Route path="/"                            component={User} />
         <Route path="/accounting"                  component={Accounts} />
+        <Route path="/accounting/new"              component={NewAccount} />
         <Route path="/bookmark"                    component={Bookmarks} />
         <Route path="/bookmark/:id/view"           component={Bookmark} />
         <Route path="/calc"                        component={Spreadsheet} />

frontend/src/Components/Autocomplete.svelte

@@ -52,7 +52,6 @@
         candidate = candidates[idx];
         candidates = [];
         selected = [];
-        console.log(candidate);
         onSelect(candidate);
     }
 
@@ -93,6 +92,7 @@
             return false;
         }
 
+        candidate = { display : candidate.display };
         candidates = await getCandidates(candidate.display);
         if (selected>candidates.length) selected = candidates.length;
         return false;
@@ -103,7 +103,7 @@
     span { position : relative }
     select { position : absolute; top: 30px; left: 3px; }
 
-    select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; }
+    select { background: black; color: orange; border: 1px solid orange; border-radius: 5px; z-index: 50; }
     option:checked { background: orange; color: black; }
 </style>
 

frontend/src/routes/accounting/add_entry.svelte

@@ -0,0 +1,99 @@
+<script>
+	import { useTinyRouter } from 'svelte-tiny-router';
+
+	import { t } from '../../translations.svelte';
+	import { api, post } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import { user }  from '../../user.svelte';
+	import Autocomplete from '../../Components/Autocomplete.svelte';
+
+	let { new_account = false } = $props();
+
+	let entry = $state({
+		account : {
+			id       : 0,
+			name     : '',
+			currency : ''
+		},
+		date : new Date().toISOString().substring(0, 10),
+		source : {
+			display: user.name,
+			user_id: user.id
+		},
+		destination : {},
+		amount : 0.0,
+		purpose : {}
+	});
+	let router = useTinyRouter();
+
+	async function save(){
+		let data = {
+			...entry,
+			purpose: entry.purpose.display
+		}
+		let url = api('accounting');
+		let res = await post(url, data);
+		if (res.ok) {
+			yikes();
+			router.navigate('/accounting');
+		} else error(res);
+	}
+</script>
+
+<style>
+	hr{
+		grid-column: 1 / -1;
+		margin: 0.5rem 0;
+        border: 0;
+        height: 1px;
+        align-self: center;
+        background: red;
+	}
+</style>
+
+<fieldset class="grid2">
+	{#if new_account}
+		<legend>{t('create_new_object',{object:t('account')})}</legend>
+		<span>{t('account name')}</span>
+		<input type="text" bind:value={entry.account.name} />
+
+		<span>{t('currency')}</span>
+		<input type="text" bind:value={entry.account.currency} />
+		<hr/>
+	{:else}
+		<legend>{t('add_object',{object:t('entry')})}</legend>
+	{/if}
+
+	<span>{t('date')}</span>
+	<input type="date" value={entry.date} />
+
+	<span>{t('source')}</span>
+	<Autocomplete bind:candidate={entry.source} />
+
+	<span>{t('destination')}</span>
+	<Autocomplete bind:candidate={entry.destination} />
+
+	<span>{t('amount')}</span>
+	<span>
+		<input type="number" bind:value={entry.amount} />&nbsp;{entry.account.currency}
+	</span>
+
+	<span>{t('purpose')}</span>
+	<Autocomplete bind:candidate={entry.purpose} />
+
+	<span></span>
+	<span>
+		<button onclick={save}>{t('save')}</button>
+	</span>
+</fieldset>
+<pre>
+<code>
+{JSON.stringify(entry,null,2)}
+</code>
+</pre>
+
+<pre>
+<code>
+{JSON.stringify(user,null,2)}
+</code>
+</pre>

frontend/src/routes/accounting/index.svelte

@@ -1 +1,16 @@
-<h1>Accounts</h1>
+<script>
+	import { useTinyRouter } from 'svelte-tiny-router';
+	import { t } from '../../translations.svelte';
+
+	const router = useTinyRouter();
+
+	function newAccount(){
+		router.navigate('/accounting/new');
+	}
+</script>
+
+<fieldset>
+	<legend>{t('accounts')}</legend>
+
+	<button onclick={newAccount}>{t('create_new_object',{'object':t('account')})}</button>
+</fieldset>

frontend/src/routes/accounting/new.svelte

@@ -0,0 +1,5 @@
+<script>
+	import EntryForm from './add_entry.svelte';
+</script>
+
+<EntryForm new_account={true} />