150 lines
3.6 KiB
Svelte
150 lines
3.6 KiB
Svelte
<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 = () => {} } = $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 getTerminal(text,url){
|
|
var 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 getAccountTags(text){
|
|
var url = api(`accounting/${entry.account.id}/tags`)
|
|
return await getTerminal(text,url);
|
|
}
|
|
|
|
async function getDestinations(text){
|
|
var url = api('accounting/destinations');
|
|
return await getTerminal(text,url);
|
|
}
|
|
|
|
async function getPurposes(text) {
|
|
var url = api('accounting/purposes');
|
|
return await getTerminal(text,url);
|
|
}
|
|
|
|
async function getSources(text){
|
|
var url = api('accounting/sources');
|
|
return await getTerminal(text,url);
|
|
}
|
|
|
|
function mapDisplay(object){
|
|
if (object.display){
|
|
return object;
|
|
} else if (object.name) {
|
|
return {...object, display: object.name};
|
|
} else {
|
|
return { display : object }
|
|
}
|
|
}
|
|
|
|
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">
|
|
{#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('source')}</span>
|
|
<Autocomplete bind:candidate={entry.source} getCandidates={getSources} id="source-input" />
|
|
|
|
<span>{t('destination')}</span>
|
|
<Autocomplete bind:candidate={entry.destination} getCandidates={getDestinations} />
|
|
|
|
<span>{t('amount')}</span>
|
|
<span>
|
|
<input type="number" bind:value={entry.amount} /> {entry.account.currency}
|
|
</span>
|
|
|
|
<span>{t('purpose')}</span>
|
|
<Autocomplete bind:candidate={entry.purpose} getCandidates={getPurposes} />
|
|
|
|
<span>{t('tags')}</span>
|
|
<Tags getCandidates={getAccountTags} module={null} bind:tags={entry.tags} />
|
|
|
|
<span></span>
|
|
<span>
|
|
<button onclick={save}>{t('save')}</button>
|
|
</span>
|
|
</fieldset> |