jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Run eslint with autofix

Browse Source
This commit is contained in:
Jan Bader 2022-03-15 12:55:22 +00:00
parent d717ef1b4d
commit 3ea90a5ebe
24 changed files with 812 additions and 644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
web/src/App.vue
View File

@ -26,39 +26,50 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="flex flex-col md:flex-row flex-1 h-screen"> <div class="flex flex-col md:flex-row flex-1 h-screen">
<router-view name="sidebar"></router-view> <router-view name="sidebar" />
<div class="flex-1 overflow-auto"> <div class="flex-1 overflow-auto">
<div <div
class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14"> class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14"
<span >
class="flex-1 font-bold text-5xl -my-3 hidden md:inline" <span
@click="toggleMenuSize" class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
>≡</span @click="toggleMenuSize"
> >≡</span>
<span <span
class="flex-1 font-bold text-5xl -my-3 md:hidden" class="flex-1 font-bold text-5xl -my-3 md:hidden"
@click="toggleMenu" @click="toggleMenu"
>≡</span >≡</span>
>
<span class="flex-1">{{ CurrentBudgetName }}</span> <span class="flex-1">{{ CurrentBudgetName }}</span>
<div class="flex flex-1 flex-row justify-end -mx-4"> <div class="flex flex-1 flex-row justify-end -mx-4">
<router-link class="mx-4" v-if="LoggedIn" to="/dashboard" <router-link
>Dashboard</router-link v-if="LoggedIn"
> class="mx-4"
<router-link class="mx-4" v-if="!LoggedIn" to="/login" to="/dashboard"
>Login</router-link >
> Dashboard
<a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a> </router-link>
</div> <router-link
</div> v-if="!LoggedIn"
class="mx-4"
<div class="p-3 pl-6"> to="/login"
<router-view></router-view> >
</div> Login
</router-link>
<a
v-if="LoggedIn"
class="mx-4"
@click="logout"
>Logout</a>
</div> </div>
</div>
<div class="p-3 pl-6">
<router-view />
</div>
</div> </div>
</div>
</template> </template>

22
web/src/components/AccountWithReconciled.vue
View File

@ -19,15 +19,17 @@ function daysSinceLastReconciled() {
</script> </script>
<template> <template>
<span> <span>
<router-link <router-link
:to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"> :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
{{account.Name}} >
</router-link> {{ account.Name }}
<span </router-link>
v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7" <span
class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline"> v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7"
{{daysSinceLastReconciled()}} class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline"
</span> >
{{ daysSinceLastReconciled() }}
</span> </span>
</span>
</template> </template>

48
web/src/components/Autocomplete.vue
View File

@ -81,29 +81,29 @@ function clear() {
</script> </script>
<template> <template>
<div> <div>
<Input <Input
type="text" v-if="id == undefined"
class="border-b-2 border-black" v-model="SearchQuery"
@keypress="keypress" type="text"
v-if="id == undefined" class="border-b-2 border-black"
v-model="SearchQuery" /> @keypress="keypress"
<span />
@click="clear" <span
v-if="id != undefined" v-if="id != undefined"
class="bg-gray-300 dark:bg-gray-700" class="bg-gray-300 dark:bg-gray-700"
>{{ text }}</span @click="clear"
> >{{ text }}</span>
<div <div
v-if="Suggestions.length > 0" v-if="Suggestions.length > 0"
class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2"> class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2"
<span >
v-for="suggestion in Suggestions" <span
class="block" v-for="suggestion in Suggestions"
@click="select" class="block"
:value="suggestion.ID" :value="suggestion.ID"
>{{ suggestion.Name }}</span @click="select"
> >{{ suggestion.Name }}</span>
</div>
</div> </div>
</div>
</template> </template>

6
web/src/components/Button.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> <template>
<button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2"> <button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
<slot></slot> <slot />
</button> </button>
</template> </template>

9
web/src/components/Card.vue
View File

@ -1,8 +1,9 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> <template>
<div <div
class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg"> class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg"
<slot></slot> >
</div> <slot />
</div>
</template> </template>

11
web/src/components/Checkbox.vue
View File

@ -3,9 +3,10 @@ const props = defineProps(["modelValue"]);
</script> </script>
<template> <template>
<input <input
type="checkbox" type="checkbox"
:checked="modelValue" :checked="modelValue"
@change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)" class="dark:bg-slate-900"
class="dark:bg-slate-900" /> @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
>
</template> </template>

9
web/src/components/Currency.vue
View File

@ -15,9 +15,8 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
</script> </script>
<template> <template>
<span <span
class="text-right" class="text-right"
:class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass" :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
>{{ formattedValue }} €</span >{{ formattedValue }} €</span>
>
</template> </template>

13
web/src/components/DateInput.vue
View File

@ -26,10 +26,11 @@ function selectAll(event: FocusEvent) {
</script> </script>
<template> <template>
<Input <Input
type="date" ref="input"
ref="input" type="date"
v-bind:value="dateToYYYYMMDD(modelValue)" :value="dateToYYYYMMDD(modelValue)"
@input="updateValue" @input="updateValue"
@focus="selectAll" /> @focus="selectAll"
/>
</template> </template>

9
web/src/components/Input.vue
View File

@ -3,8 +3,9 @@ const props = defineProps(["modelValue"]);
</script> </script>
<template> <template>
<input <input
:value="modelValue" :value="modelValue"
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)" class="dark:bg-slate-900"
class="dark:bg-slate-900" /> @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
>
</template> </template>

72
web/src/components/Modal.vue
View File

@ -30,38 +30,48 @@ function submitDialog() {
</script> </script>
<template> <template>
<button @click="openDialog"> <button @click="openDialog">
<slot name="placeholder"> <slot name="placeholder">
<Card> <Card>
<p class="w-24 text-center text-6xl">+</p> <p class="w-24 text-center text-6xl">
<span class="text-lg" dark>{{ buttonText }}</span> +
</Card> </p>
</slot> <span
</button> class="text-lg"
dark
>{{ buttonText }}</span>
</Card>
</slot>
</button>
<div
v-if="visible"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
>
<div <div
v-if="visible" class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"> >
<div <div class="mt-3 text-center">
class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black"> <h3
<div class="mt-3 text-center"> class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
<h3 >
class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"> {{ buttonText }}
{{ buttonText }} </h3>
</h3> <slot />
<slot></slot> <div class="grid grid-cols-2 gap-6">
<div class="grid grid-cols-2 gap-6"> <button
<button class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
@click="closeDialog" @click="closeDialog"
class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"> >
Close Close
</button> </button>
<button <button
@click="submitDialog" class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"> @click="submitDialog"
Save >
</button> Save
</div> </button>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>

80
web/src/components/TransactionEditRow.vue
View File

@ -38,38 +38,50 @@ function saveTransaction(e: MouseEvent) {
</script> </script>
<template> <template>
<tr> <tr>
<td class="text-sm"> <td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" /> <DateInput
</td> v-model="TX.Date"
<td> class="border-b-2 border-black"
<Autocomplete />
v-model:text="TX.Payee" </td>
v-model:id="TX.PayeeID" <td>
v-model:type="payeeType" <Autocomplete
model="payees" /> v-model:text="TX.Payee"
</td> v-model:id="TX.PayeeID"
<td> v-model:type="payeeType"
<Autocomplete model="payees"
v-model:text="TX.Category" />
v-model:id="TX.CategoryID" </td>
model="categories" /> <td>
</td> <Autocomplete
<td> v-model:text="TX.Category"
<Input v-model:id="TX.CategoryID"
class="block w-full border-b-2 border-black" model="categories"
type="text" />
v-model="TX.Memo" /> </td>
</td> <td>
<td class="text-right"> <Input
<Input v-model="TX.Memo"
class="text-right block w-full border-b-2 border-black" class="block w-full border-b-2 border-black"
type="currency" type="text"
v-model="TX.Amount" /> />
</td> </td>
<td> <td class="text-right">
<Button class="bg-blue-500" @click="saveTransaction">Save</Button> <Input
</td> v-model="TX.Amount"
<td></td> class="text-right block w-full border-b-2 border-black"
</tr> type="currency"
/>
</td>
<td>
<Button
class="bg-blue-500"
@click="saveTransaction"
>
Save
</Button>
</td>
<td />
</tr>
</template> </template>

86
web/src/components/TransactionInputRow.vue
View File

@ -52,41 +52,53 @@ function saveTransaction(e: MouseEvent) {
</script> </script>
<template> <template>
<tr> <tr>
<label class="md:hidden">Date</label> <label class="md:hidden">Date</label>
<td class="text-sm"> <td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" /> <DateInput
</td> v-model="TX.Date"
<label class="md:hidden">Payee</label> class="border-b-2 border-black"
<td> />
<Autocomplete </td>
v-model:text="TX.Payee" <label class="md:hidden">Payee</label>
v-model:id="TX.PayeeID" <td>
v-model:type="payeeType" <Autocomplete
model="payees" /> v-model:text="TX.Payee"
</td> v-model:id="TX.PayeeID"
<label class="md:hidden">Category</label> v-model:type="payeeType"
<td> model="payees"
<Autocomplete />
v-model:text="TX.Category" </td>
v-model:id="TX.CategoryID" <label class="md:hidden">Category</label>
model="categories" /> <td>
</td> <Autocomplete
<td class="col-span-2"> v-model:text="TX.Category"
<Input v-model:id="TX.CategoryID"
class="block w-full border-b-2 border-black" model="categories"
type="text" />
v-model="TX.Memo" /> </td>
</td> <td class="col-span-2">
<label class="md:hidden">Amount</label> <Input
<td class="text-right"> v-model="TX.Memo"
<Input class="block w-full border-b-2 border-black"
class="text-right block w-full border-b-2 border-black" type="text"
type="currency" />
v-model="TX.Amount" /> </td>
</td> <label class="md:hidden">Amount</label>
<td class="hidden md:table-cell"> <td class="text-right">
<Button class="bg-blue-500" @click="saveTransaction">Save</Button> <Input
</td> v-model="TX.Amount"
</tr> class="text-right block w-full border-b-2 border-black"
type="currency"
/>
</td>
<td class="hidden md:table-cell">
<Button
class="bg-blue-500"
@click="saveTransaction"
>
Save
</Button>
</td>
</tr>
</template> </template>

91
web/src/components/TransactionRow.vue
View File

@ -47,45 +47,58 @@ function getStatusSymbol() {
</script> </script>
<template> <template>
<tr v-if="dateChanged()" class="table-row md:hidden"> <tr
<td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5"> v-if="dateChanged()"
{{ formatDate(TX.Date) }} class="table-row md:hidden"
</td> >
</tr> <td
<tr class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2"
v-if="!edit" colspan="5"
class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}" >
:class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"> {{ formatDate(TX.Date) }}
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">--> </td>
<td class="hidden md:block">{{ formatDate(TX.Date) }}</td> </tr>
<td class="pl-2 md:pl-0"> <tr
{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }} v-if="!edit"
</td> class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
<td> :class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }} >
</td> <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td> <td class="hidden md:block">
<a {{ formatDate(TX.Date) }}
:href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID" </td>
>{{ TX.Memo }}</a <td class="pl-2 md:pl-0">
> {{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
</td> </td>
<td> <td>
<Currency class="block" :value="TX.Amount" /> {{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}
</td> </td>
<td class="text-right"> <td>
{{ TX.GroupID ? "☀" : "" }} <a
{{ getStatusSymbol() }} :href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
<a @click="edit = true;">✎</a> >{{ TX.Memo }}</a>
<Checkbox </td>
v-if="Reconciling && TX.Status != 'Reconciled'" <td>
v-model="TX.Reconciled" /> <Currency
</td> class="block"
</tr> :value="TX.Amount"
<TransactionEditRow />
v-if="edit" </td>
:transactionid="TX.ID" <td class="text-right">
@save="edit = false" /> {{ TX.GroupID ? "☀" : "" }}
{{ getStatusSymbol() }}
<a @click="edit = true;">✎</a>
<Checkbox
v-if="Reconciling && TX.Status != 'Reconciled'"
v-model="TX.Reconciled"
/>
</td>
</tr>
<TransactionEditRow
v-if="edit"
:transactionid="TX.ID"
@save="edit = false"
/>
</template> </template>
<style> <style>

65
web/src/dialogs/EditAccount.vue
View File

@ -42,29 +42,44 @@ function openEditAccount(e : any) {
</script> </script>
<template> <template>
<Modal <Modal
button-text="Edit Account" button-text="Edit Account"
@open="openEditAccount" @open="openEditAccount"
@submit="editAccount"> @submit="editAccount"
<template v-slot:placeholder><span class="ml-2">✎</span></template> >
<div class="mt-2 px-7 py-3"> <template #placeholder>
<Input <span class="ml-2">✎</span>
class="border-2 dark:border-gray-700" </template>
type="text" <div class="mt-2 px-7 py-3">
v-model="accountName" <Input
placeholder="Account name" v-model="accountName"
required /> class="border-2 dark:border-gray-700"
</div> type="text"
<div class="mt-2 px-7 py-3"> placeholder="Account name"
<Checkbox class="border-2" v-model="accountOnBudget" required /> required
<label>On Budget</label> />
</div> </div>
<div class="mt-2 px-7 py-3"> <div class="mt-2 px-7 py-3">
<Checkbox class="border-2" v-model="accountOpen" required /> <Checkbox
<label>Open</label> v-model="accountOnBudget"
</div> class="border-2"
<div v-if="error != ''" class="dark:text-red-300 text-red-700"> required
{{ error }} />
</div> <label>On Budget</label>
</Modal> </div>
<div class="mt-2 px-7 py-3">
<Checkbox
v-model="accountOpen"
class="border-2"
required
/>
<label>Open</label>
</div>
<div
v-if="error != ''"
class="dark:text-red-300 text-red-700"
>
{{ error }}
</div>
</Modal>
</template> </template>

24
web/src/dialogs/NewBudget.vue
View File

@ -11,14 +11,18 @@ function saveBudget() {
</script> </script>
<template> <template>
<Modal button-text="New Budget" @submit="saveBudget"> <Modal
<div class="mt-2 px-7 py-3"> button-text="New Budget"
<Input @submit="saveBudget"
class="border-2" >
type="text" <div class="mt-2 px-7 py-3">
v-model="budgetName" <Input
placeholder="Budget name" v-model="budgetName"
required /> class="border-2"
</div> type="text"
</Modal> placeholder="Budget name"
required
/>
</div>
</Modal>
</template> </template>

208
web/src/pages/Account.vue
View File

@ -42,101 +42,125 @@ function createReconcilationTransaction() {
</script> </script>
<template> <template>
<div class="grid grid-cols-[1fr_auto]"> <div class="grid grid-cols-[1fr_auto]">
<div> <div>
<h1 class="inline"> <h1 class="inline">
{{ accounts.CurrentAccount?.Name }} {{ accounts.CurrentAccount?.Name }}
</h1> </h1>
<EditAccount /> <EditAccount />
</div>
<div
class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
Working:
<Currency :value="accounts.CurrentAccount?.WorkingBalance" />
</span>
<span class="rounded-lg p-1 whitespace-nowrap flex-1">
Cleared:
<Currency :value="accounts.CurrentAccount?.ClearedBalance" />
</span>
<span
class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
v-if="!transactions.Reconciling"
@click="transactions.Reconciling = true">
Reconciled:
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
</span>
<span v-if="transactions.Reconciling" class="contents">
<Button
@click="submitReconcilation"
class="bg-blue-500 p-1 whitespace-nowrap flex-1">
My current balance is&nbsp;
<Currency :value="transactions.ReconcilingBalance" />
</Button>
<Button
@click="createReconcilationTransaction"
class="bg-orange-500 p-1 whitespace-nowrap flex-1">
No, it's:
<Input
class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
type="number"
v-model="TargetReconcilingBalance" />
(Difference
<Currency
:value="transactions.ReconcilingBalance - TargetReconcilingBalance" />)
</Button>
<Button
class="bg-red-500 p-1 flex-1"
@click="cancelReconcilation"
>Cancel</Button
>
</span>
</div>
</div> </div>
<table> <div
<tr class="font-bold"> class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm"
<td class="hidden md:block" style="width: 90px;">Date</td> >
<td style="max-width: 150px;">Payee</td> <span class="rounded-lg p-1 whitespace-nowrap flex-1">
<td style="max-width: 200px;">Category</td> Working:
<td>Memo</td> <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
<td class="text-right">Amount</td> </span>
<td style="width: 80px;">
<Input <span class="rounded-lg p-1 whitespace-nowrap flex-1">
v-if="transactions.Reconciling" Cleared:
type="checkbox" <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
@input="setReconciled" /> </span>
</td>
</tr> <span
<TransactionInputRow v-if="!transactions.Reconciling"
class="hidden md:table-row" class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
:budgetid="budgetid" @click="transactions.Reconciling = true"
:accountid="accountid" /> >
<TransactionRow Reconciled:
v-for="(transaction, index) in transactions.TransactionsList" <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
:key="transaction.ID" </span>
:transactionid="transaction.ID"
:index="index" /> <span
</table> v-if="transactions.Reconciling"
<div class="md:hidden"> class="contents"
<Modal> >
<template v-slot:placeholder> <Button
<Button class="bg-blue-500 p-1 whitespace-nowrap flex-1"
class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2" @click="submitReconcilation"
>+</Button >
> My current balance is&nbsp;
</template> <Currency :value="transactions.ReconcilingBalance" />
<TransactionInputRow </Button>
class="grid grid-cols-2"
:budgetid="budgetid" <Button
:accountid="accountid" /> class="bg-orange-500 p-1 whitespace-nowrap flex-1"
</Modal> @click="createReconcilationTransaction"
>
No, it's:
<Input
v-model="TargetReconcilingBalance"
class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
type="number"
/>
(Difference
<Currency
:value="transactions.ReconcilingBalance - TargetReconcilingBalance"
/>)
</Button>
<Button
class="bg-red-500 p-1 flex-1"
@click="cancelReconcilation"
>Cancel</Button>
</span>
</div> </div>
</div>
<table>
<tr class="font-bold">
<td
class="hidden md:block"
style="width: 90px;"
>
Date
</td>
<td style="max-width: 150px;">
Payee
</td>
<td style="max-width: 200px;">
Category
</td>
<td>Memo</td>
<td class="text-right">
Amount
</td>
<td style="width: 80px;">
<Input
v-if="transactions.Reconciling"
type="checkbox"
@input="setReconciled"
/>
</td>
</tr>
<TransactionInputRow
class="hidden md:table-row"
:budgetid="budgetid"
:accountid="accountid"
/>
<TransactionRow
v-for="(transaction, index) in transactions.TransactionsList"
:key="transaction.ID"
:transactionid="transaction.ID"
:index="index"
/>
</table>
<div class="md:hidden">
<Modal>
<template #placeholder>
<Button
class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
>
+
</Button>
</template>
<TransactionInputRow
class="grid grid-cols-2"
:budgetid="budgetid"
:accountid="accountid"
/>
</Modal>
</div>
</template> </template>
<style> <style>

10
web/src/pages/Admin.vue
View File

@ -8,9 +8,9 @@ onMounted(() => {
</script> </script>
<template> <template>
<h1>Danger Zone</h1> <h1>Danger Zone</h1>
<div class="budget-item"> <div class="budget-item">
<button>Clear database</button> <button>Clear database</button>
<p>This removes all data and starts from scratch. Not undoable!</p> <p>This removes all data and starts from scratch. Not undoable!</p>
</div> </div>
</template> </template>

129
web/src/pages/BudgetSidebar.vue
View File

@ -22,59 +22,66 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
</script> </script>
<template> <template>
<div <div
:class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']" :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"> class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
<div class="flex flex-col mt-14 md:mt-0"> >
<span <div class="flex flex-col mt-14 md:mt-0">
class="m-2 p-1 px-3 h-10 overflow-hidden" <span
:class="[ExpandMenu ? 'text-2xl' : 'text-md']"> class="m-2 p-1 px-3 h-10 overflow-hidden"
<router-link to="/dashboard" style="font-size:150%" :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
>⌂</router-link >
> <router-link
{{ CurrentBudgetName }} to="/dashboard"
</span> style="font-size:150%"
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col"> >⌂</router-link>
<router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'" {{ CurrentBudgetName }}
>Budget</router-link </span>
> <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
<br /> <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>--> <br>
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>--> <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
</span> <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3"> </span>
<div class="flex flex-row justify-between font-bold"> <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
<span>On-Budget Accounts</span> <div class="flex flex-row justify-between font-bold">
<Currency <span>On-Budget Accounts</span>
:class="ExpandMenu ? 'md:inline' : 'md:hidden'" <Currency
:value="OnBudgetAccountsBalance" /> :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
</div> :value="OnBudgetAccountsBalance"
<div />
v-for="account in OnBudgetAccounts" </div>
class="flex flex-row justify-between"> <div
<AccountWithReconciled :account="account" /> v-for="account in OnBudgetAccounts"
<Currency class="flex flex-row justify-between"
:class="ExpandMenu ? 'md:inline' : 'md:hidden'" >
:value="account.ClearedBalance" /> <AccountWithReconciled :account="account" />
</div> <Currency
</li> :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3"> :value="account.ClearedBalance"
<div class="flex flex-row justify-between font-bold"> />
<span>Off-Budget Accounts</span> </div>
<Currency </li>
:class="ExpandMenu ? 'md:inline' : 'md:hidden'" <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
:value="OffBudgetAccountsBalance" /> <div class="flex flex-row justify-between font-bold">
</div> <span>Off-Budget Accounts</span>
<div <Currency
v-for="account in OffBudgetAccounts" :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
class="flex flex-row justify-between"> :value="OffBudgetAccountsBalance"
<AccountWithReconciled :account="account" /> />
<Currency </div>
:class="ExpandMenu ? 'md:inline' : 'md:hidden'" <div
:value="account.ClearedBalance" /> v-for="account in OffBudgetAccounts"
</div> class="flex flex-row justify-between"
</li> >
<!-- <AccountWithReconciled :account="account" />
<Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="account.ClearedBalance"
/>
</div>
</li>
<!--
<li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3"> <li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
<div class="flex flex-row justify-between font-bold"> <div class="flex flex-row justify-between font-bold">
<span>Closed Accounts</span> <span>Closed Accounts</span>
@ -82,15 +89,15 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
+ Add Account + Add Account
</li> </li>
--> -->
<!--<li> <!--<li>
<router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link> <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
</li>--> </li>-->
<li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3"> <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
<router-link :to="'/budget/' + CurrentBudgetID + '/settings'" <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">
>Budget-Settings</router-link Budget-Settings
> </router-link>
</li> </li>
<!--<li><router-link to="/admin">Admin</router-link></li>--> <!--<li><router-link to="/admin">Admin</router-link></li>-->
</div>
</div> </div>
</div>
</template> </template>

160
web/src/pages/Budgeting.vue
View File

@ -75,79 +75,91 @@ function assignedChanged(e : Event, category : Category){
</script> </script>
<template> <template>
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1> <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
<span <span>Available balance:
>Available balance: <Currency
<Currency :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
:value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
/></span> /></span>
<div> <div>
<router-link <router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month" :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
>&lt;&lt;</router-link >
>&nbsp; &lt;&lt;
<router-link </router-link>&nbsp;
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month" <router-link
>Current Month</router-link :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
>&nbsp; >
<router-link Current Month
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month" </router-link>&nbsp;
>&gt;&gt;</router-link <router-link
> :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
</div> >
<div &gt;&gt;
class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5" </router-link>
id="content"> </div>
<span class="hidden sm:block"></span> <div
<span class="hidden lg:block text-right">Leftover</span> id="content"
<span class="hidden sm:block text-right">Assigned</span> class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5"
<span class="hidden sm:block text-right">Activity</span> >
<span class="hidden sm:block text-right">Available</span> <span class="hidden sm:block" />
<template v-for="group in GroupsForMonth"> <span class="hidden lg:block text-right">Leftover</span>
<span <span class="hidden sm:block text-right">Assigned</span>
class="text-lg font-bold mt-2" <span class="hidden sm:block text-right">Activity</span>
@click="toggleGroup(group)" <span class="hidden sm:block text-right">Available</span>
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span <template v-for="group in GroupsForMonth">
> <span
<Currency class="text-lg font-bold mt-2"
:value="group.AvailableLastMonth" @click="toggleGroup(group)"
class="hidden lg:block mt-2" >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span>
positive-class="text-slate-500" <Currency
negative-class="text-red-700 dark:text-red-400" /> :value="group.AvailableLastMonth"
<Currency class="hidden lg:block mt-2"
:value="group.Assigned" positive-class="text-slate-500"
class="hidden sm:block mx-2 mt-2 text-right" negative-class="text-red-700 dark:text-red-400"
positive-class="text-slate-500" />
negative-class="text-red-700 dark:text-red-400" /> <Currency
<Currency :value="group.Assigned"
:value="group.Activity" class="hidden sm:block mx-2 mt-2 text-right"
class="hidden sm:block mt-2" positive-class="text-slate-500"
positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400"
negative-class="text-red-700 dark:text-red-400" /> />
<Currency <Currency
:value="group.Available" :value="group.Activity"
class="mt-2" class="hidden sm:block mt-2"
positive-class="text-slate-500" positive-class="text-slate-500"
negative-class="text-red-700 dark:text-red-400" /> negative-class="text-red-700 dark:text-red-400"
<template />
v-for="category in GetCategories(group.Name)" <Currency
v-if="getGroupState(group)"> :value="group.Available"
<span class="mt-2"
class="whitespace-nowrap overflow-hidden" positive-class="text-slate-500"
>{{ category.Name }}</span negative-class="text-red-700 dark:text-red-400"
> />
<Currency <template
:value="category.AvailableLastMonth" v-for="category in GetCategories(group.Name)"
class="hidden lg:block" /> v-if="getGroupState(group)"
<Input >
type="number" <span
v-model="category.Assigned" class="whitespace-nowrap overflow-hidden"
@input="(evt) => assignedChanged(evt, category)" >{{ category.Name }}</span>
class="hidden sm:block mx-2 text-right" /> <Currency
<Currency :value="category.Activity" class="hidden sm:block" /> :value="category.AvailableLastMonth"
<Currency class="hidden lg:block"
:value="accountStore.GetCategoryAvailable(category)" /> />
</template> <Input
</template> v-model="category.Assigned"
</div> type="number"
class="hidden sm:block mx-2 text-right"
@input="(evt) => assignedChanged(evt, category)"
/>
<Currency
:value="category.Activity"
class="hidden sm:block"
/>
<Currency
:value="accountStore.GetCategoryAvailable(category)"
/>
</template>
</template>
</div>
</template> </template>

29
web/src/pages/Dashboard.vue
View File

@ -11,19 +11,18 @@ const BudgetsList = useSessionStore().BudgetsList;
</script> </script>
<template> <template>
<h1>Budgets</h1> <h1>Budgets</h1>
<div class="grid md:grid-cols-2 gap-6"> <div class="grid md:grid-cols-2 gap-6">
<Card v-for="budget in BudgetsList"> <Card v-for="budget in BudgetsList">
<router-link <router-link
v-bind:to="'/budget/'+budget.ID+'/budgeting'" :to="'/budget/'+budget.ID+'/budgeting'"
class="contents"> class="contents"
<!--<svg class="w-24"></svg>--> >
<p class="w-24 text-center text-6xl"></p> <!--<svg class="w-24"></svg>-->
<span class="text-lg" <p class="w-24 text-center text-6xl" />
>{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span <span class="text-lg">{{ budget.Name }}{{ budget.ID == budgetid ? " *" : "" }}</span>
> </router-link>
</router-link> </Card>
</Card> <NewBudget />
<NewBudget /> </div>
</div>
</template> </template>

26
web/src/pages/Index.vue
View File

@ -1,13 +1,23 @@
<script lang="ts" setup></script> <script lang="ts" setup></script>
<template> <template>
<div> <div>
<div class="font-bold" id="content"> <div
Willkommen bei Budgeteer, der neuen App für's Budget! id="content"
</div> class="font-bold"
<div class="container col-md-4" id="login"> >
<router-link to="/login">Login</router-link> or Willkommen bei Budgeteer, der neuen App für's Budget!
<router-link to="/login">register</router-link>
</div>
</div> </div>
<div
id="login"
class="container col-md-4"
>
<router-link to="/login">
Login
</router-link> or
<router-link to="/login">
register
</router-link>
</div>
</div>
</template> </template>

51
web/src/pages/Login.vue
View File

@ -28,27 +28,32 @@ function formSubmit(e: MouseEvent) {
</script> </script>
<template> <template>
<div> <div>
<Input <Input
type="text" v-model="login.user"
v-model="login.user" type="text"
placeholder="Username" placeholder="Username"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" /> class="border-2 border-black rounded-lg block px-2 my-2 w-48"
<Input />
type="password" <Input
v-model="login.password" v-model="login.password"
placeholder="Password" type="password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" /> placeholder="Password"
</div> class="border-2 border-black rounded-lg block px-2 my-2 w-48"
<div>{{ error }}</div> />
<button </div>
type="submit" <div>{{ error }}</div>
@click="formSubmit" <button
class="bg-blue-300 rounded-lg p-2 w-48"> type="submit"
Login class="bg-blue-300 rounded-lg p-2 w-48"
</button> @click="formSubmit"
<p> >
New user? Login
<router-link to="/register">Register</router-link> instead! </button>
</p> <p>
New user?
<router-link to="/register">
Register
</router-link> instead!
</p>
</template> </template>

62
web/src/pages/Register.vue
View File

@ -28,32 +28,38 @@ function formSubmit(e: MouseEvent) {
</script> </script>
<template> <template>
<div> <div>
<Input <Input
type="text" v-model="login.name"
v-model="login.name" type="text"
placeholder="Name" placeholder="Name"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" /> class="border-2 border-black rounded-lg block px-2 my-2 w-48"
<Input />
type="text" <Input
v-model="login.email" v-model="login.email"
placeholder="Email" type="text"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" /> placeholder="Email"
<Input class="border-2 border-black rounded-lg block px-2 my-2 w-48"
type="password" />
v-model="login.password" <Input
placeholder="Password" v-model="login.password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" /> type="password"
</div> placeholder="Password"
<div>{{ error }}</div> class="border-2 border-black rounded-lg block px-2 my-2 w-48"
<button />
type="submit" </div>
@click="formSubmit" <div>{{ error }}</div>
class="bg-blue-300 rounded-lg p-2 w-48"> <button
Register type="submit"
</button> class="bg-blue-300 rounded-lg p-2 w-48"
<p> @click="formSubmit"
Existing user? >
<router-link to="/login">Login</router-link> instead! Register
</p> </button>
<p>
Existing user?
<router-link to="/login">
Login
</router-link> instead!
</p>
</template> </template>

165
web/src/pages/Settings.vue
View File

@ -75,79 +75,102 @@ function ynabExport() {
</script> </script>
<template> <template>
<div> <div>
<h1>Danger Zone</h1> <h1>Danger Zone</h1>
<div class="grid md:grid-cols-2 gap-6"> <div class="grid md:grid-cols-2 gap-6">
<Card class="flex-col p-3"> <Card class="flex-col p-3">
<h2 class="text-lg font-bold">Clear Budget</h2> <h2 class="text-lg font-bold">
<p> Clear Budget
This removes transactions and assignments to start from </h2>
scratch. Accounts and categories are kept. Not undoable! <p>
</p> This removes transactions and assignments to start from
scratch. Accounts and categories are kept. Not undoable!
</p>
<Button class="bg-red-500 py-2" @click="clearBudget" <Button
>Clear budget</Button class="bg-red-500 py-2"
> @click="clearBudget"
</Card> >
<Card class="flex-col p-3"> Clear budget
<h2 class="text-lg font-bold">Delete Budget</h2> </Button>
<p> </Card>
This deletes the whole bugdet including all transactions, <Card class="flex-col p-3">
assignments, accounts and categories. Not undoable! <h2 class="text-lg font-bold">
</p> Delete Budget
<Button class="bg-red-500 py-2" @click="deleteBudget" </h2>
>Delete budget</Button <p>
> This deletes the whole bugdet including all transactions,
</Card> assignments, accounts and categories. Not undoable!
<Card class="flex-col p-3"> </p>
<h2 class="text-lg font-bold"> <Button
Fix all historic negative category-balances class="bg-red-500 py-2"
</h2> @click="deleteBudget"
<p> >
This restores YNABs functionality, that would substract any Delete budget
overspent categories' balances from next months inflows. </Button>
</p> </Card>
<Button class="bg-orange-500 py-2" @click="cleanNegative" <Card class="flex-col p-3">
>Fix negative</Button <h2 class="text-lg font-bold">
> Fix all historic negative category-balances
</Card> </h2>
<Card class="flex-col p-3"> <p>
<h2 class="text-lg font-bold">Import YNAB Budget</h2> This restores YNABs functionality, that would substract any
overspent categories' balances from next months inflows.
</p>
<Button
class="bg-orange-500 py-2"
@click="cleanNegative"
>
Fix negative
</Button>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">
Import YNAB Budget
</h2>
<div> <div>
<label for="transactions_file"> <label for="transactions_file">
Transaktionen: Transaktionen:
<input <input
type="file" type="file"
@change="gotTransactions" accept="text/*"
accept="text/*" /> @change="gotTransactions"
</label> >
<br /> </label>
<label for="assignments_file"> <br>
Budget: <label for="assignments_file">
<input Budget:
type="file" <input
@change="gotAssignments" type="file"
accept="text/*" /> accept="text/*"
</label> @change="gotAssignments"
</div> >
</label>
<Button
class="bg-blue-500 py-2"
:disabled="filesIncomplete"
@click="ynabImport"
>Importieren</Button
>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">Export as YNAB TSV</h2>
<div class="flex flex-row">
<Button class="bg-blue-500 py-2" @click="ynabExport"
>Export</Button
>
</div>
</Card>
</div> </div>
<Button
class="bg-blue-500 py-2"
:disabled="filesIncomplete"
@click="ynabImport"
>
Importieren
</Button>
</Card>
<Card class="flex-col p-3">
<h2 class="text-lg font-bold">
Export as YNAB TSV
</h2>
<div class="flex flex-row">
<Button
class="bg-blue-500 py-2"
@click="ynabExport"
>
Export
</Button>
</div>
</Card>
</div> </div>
</div>
</template> </template>