re-implemented new transaction form
Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
import { error, yikes } from '../../warn.svelte';
|
||||
import { t } from '../../translations.svelte';
|
||||
|
||||
import EntryForm from './add_entry.svelte';
|
||||
import EntryForm from './add_entry_new.svelte';
|
||||
import Transaction from './transaction.svelte';
|
||||
|
||||
let { id } = $props();
|
||||
@@ -163,5 +163,5 @@
|
||||
</table>
|
||||
</fieldset>
|
||||
|
||||
<EntryForm {account} {onSave} />
|
||||
<EntryForm {account} {onSave} {users} />
|
||||
{/if}
|
||||
@@ -0,0 +1,205 @@
|
||||
<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';
|
||||
import Tags from '../tags/TagList.svelte';
|
||||
|
||||
let defaultAccount = {
|
||||
id : 0,
|
||||
name : '',
|
||||
currency : ''
|
||||
};
|
||||
let { account = defaultAccount, new_account = false, onSave = () => {}, users } = $props();
|
||||
|
||||
let entry = $state({
|
||||
account,
|
||||
date : new Date().toISOString().substring(0, 10),
|
||||
source : {
|
||||
display: user.name,
|
||||
id: user.id
|
||||
},
|
||||
destination : {},
|
||||
amount : 0.0,
|
||||
purpose : {},
|
||||
tags : []
|
||||
});
|
||||
let router = useTinyRouter();
|
||||
|
||||
async function dst_selected(destination){
|
||||
destination = JSON.parse(JSON.stringify(destination));
|
||||
let source = JSON.parse(JSON.stringify(entry.source));
|
||||
const url = api(`accounting/${entry.account.id}/tags`)
|
||||
const res = await post(url,{source,destination});
|
||||
if (res.ok) {
|
||||
yikes();
|
||||
const json = await res.json();
|
||||
await proposePurpose();
|
||||
entry.tags = json;
|
||||
} else error(res);
|
||||
}
|
||||
|
||||
function focusOnEnter(ev,id){
|
||||
if (ev.key == 'Enter') {
|
||||
proposePurpose();
|
||||
document.getElementById(id).focus();
|
||||
}
|
||||
}
|
||||
|
||||
async function getAccountTags(text){
|
||||
if (!text) return [];
|
||||
const url = api(`accounting/${entry.account.id}/tags`)
|
||||
return await getProposals(text,url);
|
||||
}
|
||||
|
||||
async function getDestinations(text){
|
||||
const url = api('accounting/destinations');
|
||||
return await getProposals(text,url);
|
||||
}
|
||||
|
||||
async function getProposals(text,url){
|
||||
const res = await post(url,text);
|
||||
if (res.ok){
|
||||
yikes();
|
||||
const input = await res.json();
|
||||
return Object.values(input).map(mapDisplay);
|
||||
} else {
|
||||
error(res);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function getPurposes(text) {
|
||||
const url = api('accounting/purposes');
|
||||
return await getProposals(text,url);
|
||||
}
|
||||
|
||||
async function getSources(text){
|
||||
const url = api('accounting/sources');
|
||||
return await getProposals(text,url);
|
||||
}
|
||||
|
||||
function gotoTags(purpose){
|
||||
document.getElementById('new_tag_input');
|
||||
}
|
||||
|
||||
function mapDisplay(object){
|
||||
if (object.display){
|
||||
return object;
|
||||
} else if (object.name) {
|
||||
return {...object, display: object.name};
|
||||
} else {
|
||||
return { display : object }
|
||||
}
|
||||
}
|
||||
|
||||
async function proposePurpose(){
|
||||
console.log('proposePurpose()');
|
||||
const amount = entry.amount;
|
||||
const source = entry.source;
|
||||
const destination = entry.destination;
|
||||
const url = api(`accounting/${account.id}/purposes`);
|
||||
const res = await post(url,{source,destination,amount});
|
||||
if (res.ok) {
|
||||
yikes();
|
||||
var lastTransaction = await res.json();
|
||||
console.log({lastTransaction,users:JSON.parse(JSON.stringify(users))});
|
||||
entry.purpose = { display: lastTransaction.purpose};
|
||||
entry.tags = lastTransaction.tags;
|
||||
if (lastTransaction.source.value){
|
||||
if (users[lastTransaction.source.value]){
|
||||
let user = users[lastTransaction.source.value];
|
||||
entry.source = { id : +lastTransaction.source.value, display : user.name };
|
||||
} else entry.source = { display: lastTransaction.source.value };
|
||||
}
|
||||
if (lastTransaction.destination.value){
|
||||
if (users[lastTransaction.destination.value]){
|
||||
let user = users[lastTransaction.destination.value];
|
||||
entry.destination = { id : +lastTransaction.destination.value, display : user.name };
|
||||
} else entry.destination = { display: lastTransaction.destination.value };
|
||||
}
|
||||
} else error(res);
|
||||
}
|
||||
|
||||
async function save(){
|
||||
let data = {
|
||||
...entry,
|
||||
purpose: entry.purpose.display
|
||||
}
|
||||
let url = api('accounting');
|
||||
let res = await post(url, data);
|
||||
if (res.ok) {
|
||||
yikes();
|
||||
if (new_account){
|
||||
router.navigate('/accounting');
|
||||
return;
|
||||
}
|
||||
//entry.tags = [];
|
||||
onSave();
|
||||
document.getElementById('date-input').focus();
|
||||
} 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 new_transaction">
|
||||
{#if new_account}
|
||||
<legend>{t('create_new_object',{object:t('account')})}</legend>
|
||||
<span style="display:none"></span>
|
||||
<span>{t('account name')}</span>
|
||||
<span>
|
||||
<input type="text" bind:value={entry.account.name} />
|
||||
</span>
|
||||
<span>{t('currency')}</span>
|
||||
<span>
|
||||
<input type="text" bind:value={entry.account.currency} />
|
||||
</span>
|
||||
<hr/>
|
||||
<span style="grid-column-end: span 2">{t('first transaction')}</span>
|
||||
{:else}
|
||||
<legend>{t('add_object',{object:t('transaction')})}</legend>
|
||||
<span style="display:none"></span>
|
||||
{/if}
|
||||
|
||||
<span>{t('date')}</span>
|
||||
<span>
|
||||
<input type="date" bind:value={entry.date} id="date-input" />
|
||||
</span>
|
||||
|
||||
<span>{t('amount')}</span>
|
||||
<span>
|
||||
<input type="number" bind:value={entry.amount} onkeyup={e => focusOnEnter(e,'source-input')} /> {entry.account.currency}
|
||||
</span>
|
||||
|
||||
<span>{t('source')}</span>
|
||||
<Autocomplete bind:candidate={entry.source} getCandidates={getSources} id="source-input" />
|
||||
|
||||
<span>{t('destination')}</span>
|
||||
<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} onSelect={dst_selected} />
|
||||
|
||||
|
||||
<span>{t('purpose')}</span>
|
||||
<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} onCommit={gotoTags} id="purpose_input" />
|
||||
|
||||
<span>{t('tags')}</span>
|
||||
<Tags getCandidates={getAccountTags} module={null} bind:tags={entry.tags} onEmptyCommit={save} />
|
||||
|
||||
<span></span>
|
||||
<span>
|
||||
<button onclick={save}>{t('save')}</button>
|
||||
</span>
|
||||
</fieldset>
|
||||
Reference in New Issue
Block a user