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

Run prettier
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Jan Bader 2022-03-15 12:49:53 +00:00
parent d8d713f841
commit 61a534610f
42 changed files with 1485 additions and 1187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/.eslintrc.js
View File

@ -2,16 +2,16 @@ module.exports = {
extends: [ extends: [
// add more generic rulesets here, such as: // add more generic rulesets here, such as:
// 'eslint:recommended', // 'eslint:recommended',
'plugin:vue/vue3-recommended', "plugin:vue/vue3-recommended",
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x. // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
], ],
rules: { rules: {
// override/add rules settings here, such as: // override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error' // 'vue/no-unused-vars': 'error'
}, },
"parser": "vue-eslint-parser", parser: "vue-eslint-parser",
"parserOptions": { parserOptions: {
"parser": "@typescript-eslint/parser", parser: "@typescript-eslint/parser",
"sourceType": "module" sourceType: "module",
} },
} };

3
web/index.html
View File

@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full"> <body
class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

2
web/postcss.config.js
View File

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

20
web/src/App.vue
View File

@ -30,18 +30,28 @@ export default defineComponent({
<router-view name="sidebar"></router-view> <router-view name="sidebar"></router-view>
<div class="flex-1 overflow-auto"> <div class="flex-1 overflow-auto">
<div class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14"> <div
class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14">
<span <span
class="flex-1 font-bold text-5xl -my-3 hidden md:inline" class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
@click="toggleMenuSize" @click="toggleMenuSize"
>≡</span> >≡</span
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span> >
<span
class="flex-1 font-bold text-5xl -my-3 md:hidden"
@click="toggleMenu"
>≡</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">Dashboard</router-link> <router-link class="mx-4" v-if="LoggedIn" to="/dashboard"
<router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link> >Dashboard</router-link
>
<router-link class="mx-4" v-if="!LoggedIn" to="/login"
>Login</router-link
>
<a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a> <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
</div> </div>
</div> </div>

10
web/src/api.ts
View File

@ -1,13 +1,13 @@
import { useSessionStore } from "./stores/session"; import { useSessionStore } from "./stores/session";
export const BASE_URL = "/api/v1" export const BASE_URL = "/api/v1";
export function GET(path: string) { export function GET(path: string) {
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
return fetch(BASE_URL + path, { return fetch(BASE_URL + path, {
headers: sessionStore.AuthHeaders, headers: sessionStore.AuthHeaders,
}) });
}; }
export function POST(path: string, body: FormData | string | null) { export function POST(path: string, body: FormData | string | null) {
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
@ -15,12 +15,12 @@ export function POST(path: string, body: FormData | string | null) {
method: "POST", method: "POST",
headers: sessionStore.AuthHeaders, headers: sessionStore.AuthHeaders,
body: body, body: body,
}) });
} }
export function DELETE(path: string) { export function DELETE(path: string) {
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
return fetch(BASE_URL + path, { return fetch(BASE_URL + path, {
method: "DELETE", method: "DELETE",
headers: sessionStore.AuthHeaders, headers: sessionStore.AuthHeaders,
}) });
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -31,6 +31,5 @@ function selectAll(event: FocusEvent) {
ref="input" ref="input"
v-bind:value="dateToYYYYMMDD(modelValue)" v-bind:value="dateToYYYYMMDD(modelValue)"
@input="updateValue" @input="updateValue"
@focus="selectAll" @focus="selectAll" />
/>
</template> </template>

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

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

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

@ -40,21 +40,26 @@ function submitDialog() {
</button> </button>
<div <div
v-if="visible" v-if="visible"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
> <div
<div class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black"> class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black">
<div class="mt-3 text-center"> <div class="mt-3 text-center">
<h3 class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{{ buttonText }}</h3> <h3
class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
{{ buttonText }}
</h3>
<slot></slot> <slot></slot>
<div class="grid grid-cols-2 gap-6"> <div class="grid grid-cols-2 gap-6">
<button <button
@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" 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</button> Close
</button>
<button <button
@click="submitDialog" @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">
>Save</button> Save
</button>
</div> </div>
</div> </div>
</div> </div>

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

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

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

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

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

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

3
web/src/date.ts
View File

@ -1,5 +1,6 @@
export function formatDate(date: Date): string { export function formatDate(date: Date): string {
return date.toLocaleDateString(undefined, { // you can use undefined as first argument return date.toLocaleDateString(undefined, {
// you can use undefined as first argument
year: "numeric", year: "numeric",
month: "2-digit", month: "2-digit",
day: "2-digit", day: "2-digit",

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

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

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

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

79
web/src/main.ts
View File

@ -1,32 +1,37 @@
import { createApp } from 'vue' import { createApp } from "vue";
import App from './App.vue' import App from "./App.vue";
import './index.css' import "./index.css";
import router from './router' import router from "./router";
import { createPinia } from 'pinia' import { createPinia } from "pinia";
import { useBudgetsStore } from './stores/budget'; import { useBudgetsStore } from "./stores/budget";
import { useAccountStore } from './stores/budget-account' import { useAccountStore } from "./stores/budget-account";
import PiniaLogger from './pinia-logger' import PiniaLogger from "./pinia-logger";
import { useSessionStore } from './stores/session' import { useSessionStore } from "./stores/session";
const app = createApp(App) const app = createApp(App);
app.use(router) app.use(router);
const pinia = createPinia() const pinia = createPinia();
pinia.use(PiniaLogger({ pinia.use(
PiniaLogger({
expanded: false, expanded: false,
showDuration: true showDuration: true,
})) })
app.use(pinia) );
app.mount('#app') app.use(pinia);
app.mount("#app");
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
const budgetStore = useBudgetsStore(); const budgetStore = useBudgetsStore();
await budgetStore.SetCurrentBudget((<string>to.params.budgetid)); await budgetStore.SetCurrentBudget(<string>to.params.budgetid);
const accountStore = useAccountStore(); const accountStore = useAccountStore();
await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid)); await accountStore.SetCurrentAccount(
<string>to.params.budgetid,
<string>to.params.accountid
);
next(); next();
}) });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
@ -35,20 +40,18 @@ router.beforeEach((to, from, next) => {
if (token != null) { if (token != null) {
const jwt = parseJwt(token); const jwt = parseJwt(token);
if (jwt.exp > Date.now() / 1000) if (jwt.exp > Date.now() / 1000) loggedIn = true;
loggedIn = true;
} }
if (to.matched.some(record => record.meta.requiresAuth)) { if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!loggedIn) { if (!loggedIn) {
next({ path: '/login' }); next({ path: "/login" });
} else { } else {
next(); next();
} }
} else if (to.matched.some((record) => record.meta.hideForAuth)) {
} else if (to.matched.some(record => record.meta.hideForAuth)) {
if (loggedIn) { if (loggedIn) {
next({ path: '/dashboard' }); next({ path: "/dashboard" });
} else { } else {
next(); next();
} }
@ -58,15 +61,19 @@ router.beforeEach((to, from, next) => {
}); });
function parseJwt(token: string) { function parseJwt(token: string) {
var base64Url = token.split('.')[1]; var base64Url = token.split(".")[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) { var jsonPayload = decodeURIComponent(
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); atob(base64)
}).join('')); .split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload); return JSON.parse(jsonPayload);
}; }
1646426130;
1646426130 1646512855755;
1646512855755

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

@ -50,7 +50,8 @@ function createReconcilationTransaction() {
<EditAccount /> <EditAccount />
</div> </div>
<div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm"> <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"> <span class="rounded-lg p-1 whitespace-nowrap flex-1">
Working: Working:
<Currency :value="accounts.CurrentAccount?.WorkingBalance" /> <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
@ -64,33 +65,36 @@ function createReconcilationTransaction() {
<span <span
class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1" class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
v-if="!transactions.Reconciling" v-if="!transactions.Reconciling"
@click="transactions.Reconciling = true" @click="transactions.Reconciling = true">
>
Reconciled: Reconciled:
<Currency :value="accounts.CurrentAccount?.ReconciledBalance" /> <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
</span> </span>
<span v-if="transactions.Reconciling" class="contents"> <span v-if="transactions.Reconciling" class="contents">
<Button @click="submitReconcilation" <Button
@click="submitReconcilation"
class="bg-blue-500 p-1 whitespace-nowrap flex-1"> class="bg-blue-500 p-1 whitespace-nowrap flex-1">
My current balance is&nbsp; My current balance is&nbsp;
<Currency :value="transactions.ReconcilingBalance" /> <Currency :value="transactions.ReconcilingBalance" />
</Button> </Button>
<Button @click="createReconcilationTransaction" <Button
@click="createReconcilationTransaction"
class="bg-orange-500 p-1 whitespace-nowrap flex-1"> class="bg-orange-500 p-1 whitespace-nowrap flex-1">
No, it's: No, it's:
<Input <Input
class="text-right w-20 bg-transparent dark:bg-transparent border-b-2" class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
type="number" type="number"
v-model="TargetReconcilingBalance" v-model="TargetReconcilingBalance" />
/>
(Difference (Difference
<Currency <Currency
:value="transactions.ReconcilingBalance - TargetReconcilingBalance" :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />)
/>)
</Button> </Button>
<Button class="bg-red-500 p-1 flex-1" @click="cancelReconcilation">Cancel</Button> <Button
class="bg-red-500 p-1 flex-1"
@click="cancelReconcilation"
>Cancel</Button
>
</span> </span>
</div> </div>
</div> </div>
@ -103,31 +107,34 @@ function createReconcilationTransaction() {
<td>Memo</td> <td>Memo</td>
<td class="text-right">Amount</td> <td class="text-right">Amount</td>
<td style="width: 80px;"> <td style="width: 80px;">
<Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" /> <Input
v-if="transactions.Reconciling"
type="checkbox"
@input="setReconciled" />
</td> </td>
</tr> </tr>
<TransactionInputRow <TransactionInputRow
class="hidden md:table-row" class="hidden md:table-row"
:budgetid="budgetid" :budgetid="budgetid"
:accountid="accountid" :accountid="accountid" />
/>
<TransactionRow <TransactionRow
v-for="(transaction, index) in transactions.TransactionsList" v-for="(transaction, index) in transactions.TransactionsList"
:key="transaction.ID" :key="transaction.ID"
:transactionid="transaction.ID" :transactionid="transaction.ID"
:index="index" :index="index" />
/>
</table> </table>
<div class="md:hidden"> <div class="md:hidden">
<Modal> <Modal>
<template v-slot:placeholder> <template v-slot:placeholder>
<Button class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2">+</Button> <Button
class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
>+</Button
>
</template> </template>
<TransactionInputRow <TransactionInputRow
class="grid grid-cols-2" class="grid grid-cols-2"
:budgetid="budgetid" :budgetid="budgetid"
:accountid="accountid" :accountid="accountid" />
/>
</Modal> </Modal>
</div> </div>
</template> </template>

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

@ -24,18 +24,20 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<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"> <div class="flex flex-col mt-14 md:mt-0">
<span <span
class="m-2 p-1 px-3 h-10 overflow-hidden" class="m-2 p-1 px-3 h-10 overflow-hidden"
:class="[ExpandMenu ? 'text-2xl' : 'text-md']" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
<router-link to="/dashboard" style="font-size:150%"
>⌂</router-link
> >
<router-link to="/dashboard" style="font-size:150%">⌂</router-link>
{{ CurrentBudgetName }} {{ CurrentBudgetName }}
</span> </span>
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col"> <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
<router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link> <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'"
>Budget</router-link
>
<br /> <br />
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>--> <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>--> <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
@ -43,21 +45,33 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3"> <li class="bg-slate-200 dark:bg-slate-700 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>On-Budget Accounts</span> <span>On-Budget Accounts</span>
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" /> <Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="OnBudgetAccountsBalance" />
</div> </div>
<div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between"> <div
v-for="account in OnBudgetAccounts"
class="flex flex-row justify-between">
<AccountWithReconciled :account="account" /> <AccountWithReconciled :account="account" />
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" /> <Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="account.ClearedBalance" />
</div> </div>
</li> </li>
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3"> <li class="bg-slate-200 dark:bg-slate-700 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>Off-Budget Accounts</span> <span>Off-Budget Accounts</span>
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" /> <Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="OffBudgetAccountsBalance" />
</div> </div>
<div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between"> <div
v-for="account in OffBudgetAccounts"
class="flex flex-row justify-between">
<AccountWithReconciled :account="account" /> <AccountWithReconciled :account="account" />
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" /> <Currency
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
:value="account.ClearedBalance" />
</div> </div>
</li> </li>
<!-- <!--
@ -72,7 +86,9 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
<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'">Budget-Settings</router-link> <router-link :to="'/budget/' + CurrentBudgetID + '/settings'"
>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>

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

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

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

@ -14,10 +14,14 @@ const BudgetsList = useSessionStore().BudgetsList;
<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 v-bind:to="'/budget/'+budget.ID+'/budgeting'" class="contents"> <router-link
v-bind:to="'/budget/'+budget.ID+'/budgeting'"
class="contents">
<!--<svg class="w-24"></svg>--> <!--<svg class="w-24"></svg>-->
<p class="w-24 text-center text-6xl"></p> <p class="w-24 text-center text-6xl"></p>
<span class="text-lg">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span> <span class="text-lg"
>{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span
>
</router-link> </router-link>
</Card> </Card>
<NewBudget /> <NewBudget />

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

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

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

@ -29,15 +29,24 @@ function formSubmit(e: MouseEvent) {
<template> <template>
<div> <div>
<Input type="text" v-model="login.user" <Input
type="text"
v-model="login.user"
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" v-model="login.password" <Input
type="password"
v-model="login.password"
placeholder="Password" placeholder="Password"
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" />
</div> </div>
<div>{{ error }}</div> <div>{{ error }}</div>
<button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Login</button> <button
type="submit"
@click="formSubmit"
class="bg-blue-300 rounded-lg p-2 w-48">
Login
</button>
<p> <p>
New user? New user?
<router-link to="/register">Register</router-link> instead! <router-link to="/register">Register</router-link> instead!

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

@ -29,18 +29,29 @@ function formSubmit(e: MouseEvent) {
<template> <template>
<div> <div>
<Input type="text" v-model="login.name" <Input
type="text"
v-model="login.name"
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" v-model="login.email" <Input
type="text"
v-model="login.email"
placeholder="Email" placeholder="Email"
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" v-model="login.password" <Input
type="password"
v-model="login.password"
placeholder="Password" placeholder="Password"
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" />
</div> </div>
<div>{{ error }}</div> <div>{{ error }}</div>
<button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Register</button> <button
type="submit"
@click="formSubmit"
class="bg-blue-300 rounded-lg p-2 w-48">
Register
</button>
<p> <p>
Existing user? Existing user?
<router-link to="/login">Login</router-link> instead! <router-link to="/login">Login</router-link> instead!

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

@ -72,7 +72,6 @@ function ynabExport() {
saveAs(blob, timeStamp + " " + CurrentBudgetName.value + " - Transactions.tsv"); saveAs(blob, timeStamp + " " + CurrentBudgetName.value + " - Transactions.tsv");
}) })
} }
</script> </script>
<template> <template>
@ -81,19 +80,36 @@ function ynabExport() {
<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">Clear Budget</h2>
<p>This removes transactions and assignments to start from 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">Clear budget</Button> <Button class="bg-red-500 py-2" @click="clearBudget"
>Clear budget</Button
>
</Card> </Card>
<Card class="flex-col p-3"> <Card class="flex-col p-3">
<h2 class="text-lg font-bold">Delete Budget</h2> <h2 class="text-lg font-bold">Delete Budget</h2>
<p>This deletes the whole bugdet including all transactions, assignments, accounts and categories. Not undoable!</p> <p>
<Button class="bg-red-500 py-2" @click="deleteBudget">Delete budget</button> This deletes the whole bugdet including all transactions,
assignments, accounts and categories. Not undoable!
</p>
<Button class="bg-red-500 py-2" @click="deleteBudget"
>Delete budget</Button
>
</Card> </Card>
<Card class="flex-col p-3"> <Card class="flex-col p-3">
<h2 class="text-lg font-bold">Fix all historic negative category-balances</h2> <h2 class="text-lg font-bold">
<p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p> Fix all historic negative category-balances
<Button class="bg-orange-500 py-2" @click="cleanNegative">Fix negative</button> </h2>
<p>
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>
<Card class="flex-col p-3"> <Card class="flex-col p-3">
<h2 class="text-lg font-bold">Import YNAB Budget</h2> <h2 class="text-lg font-bold">Import YNAB Budget</h2>
@ -101,22 +117,35 @@ function ynabExport() {
<div> <div>
<label for="transactions_file"> <label for="transactions_file">
Transaktionen: Transaktionen:
<input type="file" @change="gotTransactions" accept="text/*" /> <input
type="file"
@change="gotTransactions"
accept="text/*" />
</label> </label>
<br /> <br />
<label for="assignments_file"> <label for="assignments_file">
Budget: Budget:
<input type="file" @change="gotAssignments" accept="text/*" /> <input
type="file"
@change="gotAssignments"
accept="text/*" />
</label> </label>
</div> </div>
<Button class="bg-blue-500 py-2" :disabled="filesIncomplete" @click="ynabImport">Importieren</Button> <Button
class="bg-blue-500 py-2"
:disabled="filesIncomplete"
@click="ynabImport"
>Importieren</Button
>
</Card> </Card>
<Card class="flex-col p-3"> <Card class="flex-col p-3">
<h2 class="text-lg font-bold">Export as YNAB TSV</h2> <h2 class="text-lg font-bold">Export as YNAB TSV</h2>
<div class="flex flex-row"> <div class="flex flex-row">
<Button class="bg-blue-500 py-2" @click="ynabExport">Export</Button> <Button class="bg-blue-500 py-2" @click="ynabExport"
>Export</Button
>
</div> </div>
</Card> </Card>
</div> </div>

56
web/src/pinia-logger.ts
View File

@ -1,4 +1,9 @@
import { PiniaPluginContext, StoreGeneric, _ActionsTree, _StoreOnActionListenerContext } from 'pinia'; import {
PiniaPluginContext,
StoreGeneric,
_ActionsTree,
_StoreOnActionListenerContext,
} from "pinia";
const cloneDeep = <T>(obj: T): T => { const cloneDeep = <T>(obj: T): T => {
try { try {
@ -8,9 +13,9 @@ const cloneDeep = <T>(obj: T): T => {
} }
}; };
const formatTime = (date = new Date()) => { const formatTime = (date = new Date()) => {
const hours = date.getHours().toString().padStart(2, '0'); const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, "0");
const seconds = date.getSeconds().toString().padStart(2, '0'); const seconds = date.getSeconds().toString().padStart(2, "0");
return `${hours}:${minutes}:${seconds}`; return `${hours}:${minutes}:${seconds}`;
}; };
@ -18,12 +23,16 @@ const formatTime = (date = new Date()) => {
export interface PiniaLoggerOptions { export interface PiniaLoggerOptions {
disabled?: boolean; disabled?: boolean;
expanded?: boolean; expanded?: boolean;
showDuration?: boolean showDuration?: boolean;
showStoreName?: boolean; showStoreName?: boolean;
logErrors?: boolean; logErrors?: boolean;
} }
export type PiniaActionListenerContext = _StoreOnActionListenerContext<StoreGeneric, string, _ActionsTree>; export type PiniaActionListenerContext = _StoreOnActionListenerContext<
StoreGeneric,
string,
_ActionsTree
>;
const defaultOptions: PiniaLoggerOptions = { const defaultOptions: PiniaLoggerOptions = {
logErrors: true, logErrors: true,
@ -33,7 +42,9 @@ const defaultOptions: PiniaLoggerOptions = {
showDuration: false, showDuration: false,
}; };
export const PiniaLogger = (config = defaultOptions) => (ctx: PiniaPluginContext) => { export const PiniaLogger =
(config = defaultOptions) =>
(ctx: PiniaPluginContext) => {
const options = { const options = {
...defaultOptions, ...defaultOptions,
...config, ...config,
@ -41,28 +52,43 @@ export const PiniaLogger = (config = defaultOptions) => (ctx: PiniaPluginContext
if (options.disabled) return; if (options.disabled) return;
ctx.store.$onAction((action: PiniaActionListenerContext) => { ctx.store.$onAction((action: PiniaActionListenerContext) => {
const startTime = Date.now(); const startTime = Date.now();
const prevState = cloneDeep(ctx.store.$state); const prevState = cloneDeep(ctx.store.$state);
const log = (isError?: boolean, error?: any) => { const log = (isError?: boolean, error?: any) => {
const endTime = Date.now(); const endTime = Date.now();
const duration = endTime - startTime + 'ms'; const duration = endTime - startTime + "ms";
const nextState = cloneDeep(ctx.store.$state); const nextState = cloneDeep(ctx.store.$state);
const storeName = action.store.$id; const storeName = action.store.$id;
const title = `${formatTime()} action 🍍 ${options.showStoreName ? `[${storeName}] ` : ''}${action.name} ${isError ? `failed after ` : ''}in ${duration}`; const title = `${formatTime()} action 🍍 ${
options.showStoreName ? `[${storeName}] ` : ""
}${action.name} ${
isError ? `failed after ` : ""
}in ${duration}`;
console[options.expanded ? 'group' : 'groupCollapsed'](`%c${title}`, `font-weight: bold; ${isError ? 'color: #ed4981;' : ''}`); console[options.expanded ? "group" : "groupCollapsed"](
console.log('%cprev state', 'font-weight: bold; color: grey;', prevState); `%c${title}`,
console.log('%caction', 'font-weight: bold; color: #69B7FF;', { `font-weight: bold; ${isError ? "color: #ed4981;" : ""}`
);
console.log(
"%cprev state",
"font-weight: bold; color: grey;",
prevState
);
console.log("%caction", "font-weight: bold; color: #69B7FF;", {
type: action.name, type: action.name,
args: action.args.length > 0 ? { ...action.args } : undefined, args:
action.args.length > 0 ? { ...action.args } : undefined,
...(options.showStoreName && { store: action.store.$id }), ...(options.showStoreName && { store: action.store.$id }),
...(options.showDuration && { duration }), ...(options.showDuration && { duration }),
...(isError && { error }), ...(isError && { error }),
}); });
console.log('%cnext state', 'font-weight: bold; color: #4caf50;', nextState); console.log(
"%cnext state",
"font-weight: bold; color: #4caf50;",
nextState
);
console.groupEnd(); console.groupEnd();
}; };

87
web/src/router/index.ts
View File

@ -1,30 +1,75 @@
import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-router' import {
import Dashboard from '../pages/Dashboard.vue'; createRouter,
import Login from '../pages/Login.vue'; createWebHistory,
import Index from '../pages/Index.vue'; RouteLocationNormalized,
import Register from '../pages/Register.vue'; } from "vue-router";
import Account from '@/pages/Account.vue'; import Dashboard from "../pages/Dashboard.vue";
import Settings from '../pages/Settings.vue'; import Login from "../pages/Login.vue";
import Budgeting from '../pages/Budgeting.vue'; import Index from "../pages/Index.vue";
import BudgetSidebar from '../pages/BudgetSidebar.vue'; import Register from "../pages/Register.vue";
import Account from "@/pages/Account.vue";
import Settings from "../pages/Settings.vue";
import Budgeting from "../pages/Budgeting.vue";
import BudgetSidebar from "../pages/BudgetSidebar.vue";
const routes = [ const routes = [
{ path: "/", name: "Index", component: Index }, { path: "/", name: "Index", component: Index },
{ path: "/dashboard", name: "Dashboard", component: Dashboard, meta: { requiresAuth: true } }, {
{ path: "/login", name: "Login", component: Login, meta: { hideForAuth: true } }, path: "/dashboard",
{ path: "/register", name: "Register", component: Register, meta: { hideForAuth: true } }, name: "Dashboard",
{ path: "/budget/:budgetid/budgeting", name: "Budget", redirect: (to : RouteLocationNormalized) => component: Dashboard,
'/budget/' + to.params.budgetid + '/budgeting/' + new Date().getFullYear() + '/' + new Date().getMonth(), meta: { requiresAuth: true },
meta: { requiresAuth: true }
}, },
{ path: "/budget/:budgetid/budgeting/:year/:month", name: "Budget with date", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } }, {
{ path: "/budget/:budgetid/Settings", name: "Budget Settings", components: { default: Settings, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } }, path: "/login",
{ path: "/budget/:budgetid/account/:accountid", name: "Account", components: { default: Account, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } }, name: "Login",
] component: Login,
meta: { hideForAuth: true },
},
{
path: "/register",
name: "Register",
component: Register,
meta: { hideForAuth: true },
},
{
path: "/budget/:budgetid/budgeting",
name: "Budget",
redirect: (to: RouteLocationNormalized) =>
"/budget/" +
to.params.budgetid +
"/budgeting/" +
new Date().getFullYear() +
"/" +
new Date().getMonth(),
meta: { requiresAuth: true },
},
{
path: "/budget/:budgetid/budgeting/:year/:month",
name: "Budget with date",
components: { default: Budgeting, sidebar: BudgetSidebar },
props: true,
meta: { requiresAuth: true },
},
{
path: "/budget/:budgetid/Settings",
name: "Budget Settings",
components: { default: Settings, sidebar: BudgetSidebar },
props: true,
meta: { requiresAuth: true },
},
{
path: "/budget/:budgetid/account/:accountid",
name: "Account",
components: { default: Account, sidebar: BudgetSidebar },
props: true,
meta: { requiresAuth: true },
},
];
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes, routes,
}) });
export default router export default router;

172
web/src/stores/budget-account.ts
View File

@ -1,41 +1,41 @@
import { defineStore } from "pinia" import { defineStore } from "pinia";
import { GET, POST } from "../api"; import { GET, POST } from "../api";
import { useBudgetsStore } from "./budget"; import { useBudgetsStore } from "./budget";
import { useSessionStore } from "./session"; import { useSessionStore } from "./session";
import { useTransactionsStore } from "./transactions"; import { useTransactionsStore } from "./transactions";
interface State { interface State {
Accounts: Map<string, Account> Accounts: Map<string, Account>;
CurrentAccountID: string | null CurrentAccountID: string | null;
Categories: Map<string, Category> Categories: Map<string, Category>;
Months: Map<number, Map<number, Map<string, Category>>> Months: Map<number, Map<number, Map<string, Category>>>;
Assignments: [] Assignments: [];
} }
export interface Account { export interface Account {
ID: string ID: string;
Name: string Name: string;
OnBudget: boolean OnBudget: boolean;
IsOpen: boolean IsOpen: boolean;
ClearedBalance: number ClearedBalance: number;
WorkingBalance: number WorkingBalance: number;
ReconciledBalance: number ReconciledBalance: number;
Transactions: string[] Transactions: string[];
LastReconciled: NullDate LastReconciled: NullDate;
} }
interface NullDate { interface NullDate {
Valid: boolean Valid: boolean;
Time: Date Time: Date;
} }
export interface Category { export interface Category {
ID: string ID: string;
Group: string Group: string;
Name: string Name: string;
AvailableLastMonth: number AvailableLastMonth: number;
Assigned: number Assigned: number;
Activity: number Activity: number;
} }
export const useAccountStore = defineStore("budget/account", { export const useAccountStore = defineStore("budget/account", {
@ -53,12 +53,16 @@ export const useAccountStore = defineStore("budget/account", {
AllCategoriesForMonth: (state) => (year: number, month: number) => { AllCategoriesForMonth: (state) => (year: number, month: number) => {
const yearMap = state.Months.get(year); const yearMap = state.Months.get(year);
const monthMap = yearMap?.get(month); const monthMap = yearMap?.get(month);
return [...monthMap?.values() || []]; return [...(monthMap?.values() || [])];
}, },
GetCategoryAvailable(state) { GetCategoryAvailable(state) {
return (category: Category): number => { return (category: Category): number => {
return category.AvailableLastMonth + Number(category.Assigned) + category.Activity; return (
} category.AvailableLastMonth +
Number(category.Assigned) +
category.Activity
);
};
}, },
GetIncomeCategoryID(state) { GetIncomeCategoryID(state) {
const budget = useBudgetsStore(); const budget = useBudgetsStore();
@ -67,15 +71,15 @@ export const useAccountStore = defineStore("budget/account", {
GetIncomeAvailable(state) { GetIncomeAvailable(state) {
return (year: number, month: number) => { return (year: number, month: number) => {
const IncomeCategoryID = this.GetIncomeCategoryID; const IncomeCategoryID = this.GetIncomeCategoryID;
if (IncomeCategoryID == null) if (IncomeCategoryID == null) return 0;
return 0;
const categories = this.AllCategoriesForMonth(year, month); const categories = this.AllCategoriesForMonth(year, month);
const category = categories.filter(x => x.ID == IncomeCategoryID)[0]; const category = categories.filter(
if (category == null) (x) => x.ID == IncomeCategoryID
return 0; )[0];
if (category == null) return 0;
return category.AvailableLastMonth; return category.AvailableLastMonth;
} };
}, },
CategoryGroupsForMonth(state) { CategoryGroupsForMonth(state) {
return (year: number, month: number) => { return (year: number, month: number) => {
@ -83,8 +87,7 @@ export const useAccountStore = defineStore("budget/account", {
const categoryGroups = []; const categoryGroups = [];
let prev = undefined; let prev = undefined;
for (const category of categories) { for (const category of categories) {
if (category.ID == this.GetIncomeCategoryID) if (category.ID == this.GetIncomeCategoryID) continue;
continue;
if (prev == undefined || category.Group != prev.Name) { if (prev == undefined || category.Group != prev.Name) {
prev = { prev = {
@ -93,81 +96,110 @@ export const useAccountStore = defineStore("budget/account", {
AvailableLastMonth: category.AvailableLastMonth, AvailableLastMonth: category.AvailableLastMonth,
Activity: category.Activity, Activity: category.Activity,
Assigned: category.Assigned, Assigned: category.Assigned,
} };
categoryGroups.push({ categoryGroups.push({
...prev, ...prev,
Expand: prev.Name != "Hidden Categories", Expand: prev.Name != "Hidden Categories",
}); });
} else { } else {
categoryGroups[categoryGroups.length-1].Available += this.GetCategoryAvailable(category); categoryGroups[categoryGroups.length - 1].Available +=
categoryGroups[categoryGroups.length-1].AvailableLastMonth += category.AvailableLastMonth; this.GetCategoryAvailable(category);
categoryGroups[categoryGroups.length-1].Activity += category.Activity; categoryGroups[
categoryGroups[categoryGroups.length-1].Assigned += category.Assigned; categoryGroups.length - 1
].AvailableLastMonth += category.AvailableLastMonth;
categoryGroups[categoryGroups.length - 1].Activity +=
category.Activity;
categoryGroups[categoryGroups.length - 1].Assigned +=
category.Assigned;
continue; continue;
} }
} }
return categoryGroups; return categoryGroups;
} };
}, },
CategoriesForMonthAndGroup(state) { CategoriesForMonthAndGroup(state) {
return (year: number, month: number, group: string) => { return (year: number, month: number, group: string) => {
const categories = this.AllCategoriesForMonth(year, month); const categories = this.AllCategoriesForMonth(year, month);
return categories.filter(x => x.Group == group); return categories.filter((x) => x.Group == group);
} };
}, },
GetAccount(state) { GetAccount(state) {
return (accountid: string) => { return (accountid: string) => {
return this.Accounts.get(accountid); return this.Accounts.get(accountid);
} };
}, },
CurrentAccount(state): Account | undefined { CurrentAccount(state): Account | undefined {
if (state.CurrentAccountID == null) if (state.CurrentAccountID == null) return undefined;
return undefined;
return this.GetAccount(state.CurrentAccountID); return this.GetAccount(state.CurrentAccountID);
}, },
OnBudgetAccounts(state) { OnBudgetAccounts(state) {
return [...state.Accounts.values()].filter(x => x.OnBudget); return [...state.Accounts.values()].filter((x) => x.OnBudget);
}, },
OnBudgetAccountsBalance(state): number { OnBudgetAccountsBalance(state): number {
return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0); return this.OnBudgetAccounts.reduce(
(prev, curr) => prev + Number(curr.ClearedBalance),
0
);
}, },
OffBudgetAccounts(state) { OffBudgetAccounts(state) {
return [...state.Accounts.values()].filter(x => !x.OnBudget); return [...state.Accounts.values()].filter((x) => !x.OnBudget);
}, },
OffBudgetAccountsBalance(state): number { OffBudgetAccountsBalance(state): number {
return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0); return this.OffBudgetAccounts.reduce(
(prev, curr) => prev + Number(curr.ClearedBalance),
0
);
}, },
}, },
actions: { actions: {
async SetCurrentAccount(budgetid: string, accountid: string) { async SetCurrentAccount(budgetid: string, accountid: string) {
if (budgetid == null) if (budgetid == null) return;
return;
this.CurrentAccountID = accountid; this.CurrentAccountID = accountid;
if (accountid == null) if (accountid == null) return;
return;
const account = this.GetAccount(accountid)!; const account = this.GetAccount(accountid)!;
useSessionStore().setTitle(account.Name); useSessionStore().setTitle(account.Name);
await this.FetchAccount(account); await this.FetchAccount(account);
}, },
async FetchAccount(account: Account) { async FetchAccount(account: Account) {
const result = await GET("/account/" + account.ID + "/transactions"); const result = await GET(
"/account/" + account.ID + "/transactions"
);
const response = await result.json(); const response = await result.json();
const transactionsStore = useTransactionsStore() const transactionsStore = useTransactionsStore();
const transactions = transactionsStore.AddTransactions(response.Transactions); const transactions = transactionsStore.AddTransactions(
response.Transactions
);
account.Transactions = transactions; account.Transactions = transactions;
}, },
async FetchMonthBudget(budgetid: string, year: number, month: number) { async FetchMonthBudget(budgetid: string, year: number, month: number) {
const result = await GET("/budget/" + budgetid + "/" + year + "/" + (month + 1)); const result = await GET(
"/budget/" + budgetid + "/" + year + "/" + (month + 1)
);
const response = await result.json(); const response = await result.json();
if (response.Categories == undefined || response.Categories.length <= 0) if (
response.Categories == undefined ||
response.Categories.length <= 0
)
return; return;
this.addCategoriesForMonth(year, month, response.Categories); this.addCategoriesForMonth(year, month, response.Categories);
}, },
async EditAccount(accountid: string, name: string, onBudget: boolean, isOpen: boolean) { async EditAccount(
const result = await POST("/account/" + accountid, JSON.stringify({ name: name, onBudget: onBudget, isOpen: isOpen })); accountid: string,
name: string,
onBudget: boolean,
isOpen: boolean
) {
const result = await POST(
"/account/" + accountid,
JSON.stringify({
name: name,
onBudget: onBudget,
isOpen: isOpen,
})
);
const response = await result.json(); const response = await result.json();
useBudgetsStore().MergeBudgetingData(response); useBudgetsStore().MergeBudgetingData(response);
@ -175,10 +207,17 @@ export const useAccountStore = defineStore("budget/account", {
this.Accounts.delete(accountid); this.Accounts.delete(accountid);
} }
}, },
addCategoriesForMonth(year: number, month: number, categories: Category[]): void { addCategoriesForMonth(
year: number,
month: number,
categories: Category[]
): void {
this.$patch((state) => { this.$patch((state) => {
const yearMap = state.Months.get(year) || new Map<number, Map<string, Category>>(); const yearMap =
const monthMap = yearMap.get(month) || new Map<string, Category>(); state.Months.get(year) ||
new Map<number, Map<string, Category>>();
const monthMap =
yearMap.get(month) || new Map<string, Category>();
for (const category of categories) { for (const category of categories) {
monthMap.set(category.ID, category); monthMap.set(category.ID, category);
} }
@ -188,8 +227,7 @@ export const useAccountStore = defineStore("budget/account", {
}); });
}, },
logout() { logout() {
this.$reset() this.$reset();
}, },
} },
});
})

20
web/src/stores/budget.ts
View File

@ -4,17 +4,16 @@ import { useAccountStore } from "./budget-account";
import { Budget, useSessionStore } from "./session"; import { Budget, useSessionStore } from "./session";
interface State { interface State {
CurrentBudgetID: string | null, CurrentBudgetID: string | null;
} }
export const useBudgetsStore = defineStore('budget', { export const useBudgetsStore = defineStore("budget", {
state: (): State => ({ state: (): State => ({
CurrentBudgetID: null, CurrentBudgetID: null,
}), }),
getters: { getters: {
CurrentBudget(): Budget | undefined { CurrentBudget(): Budget | undefined {
if (this.CurrentBudgetID == null) if (this.CurrentBudgetID == null) return undefined;
return undefined;
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
return sessionStore.Budgets.get(this.CurrentBudgetID); return sessionStore.Budgets.get(this.CurrentBudgetID);
@ -27,7 +26,7 @@ export const useBudgetsStore = defineStore('budget', {
ImportYNAB(formData: FormData) { ImportYNAB(formData: FormData) {
return POST( return POST(
"/budget/" + this.CurrentBudgetID + "/import/ynab", "/budget/" + this.CurrentBudgetID + "/import/ynab",
formData, formData
); );
}, },
async NewBudget(budgetName: string): Promise<void> { async NewBudget(budgetName: string): Promise<void> {
@ -43,8 +42,7 @@ export const useBudgetsStore = defineStore('budget', {
async SetCurrentBudget(budgetid: string): Promise<void> { async SetCurrentBudget(budgetid: string): Promise<void> {
this.CurrentBudgetID = budgetid; this.CurrentBudgetID = budgetid;
if (budgetid == null) if (budgetid == null) return;
return
await this.FetchBudget(budgetid); await this.FetchBudget(budgetid);
}, },
@ -59,12 +57,14 @@ export const useBudgetsStore = defineStore('budget', {
const existingAccount = accounts.Accounts.get(account.ID); const existingAccount = accounts.Accounts.get(account.ID);
account.Transactions = existingAccount?.Transactions ?? []; account.Transactions = existingAccount?.Transactions ?? [];
if (account.LastReconciled.Valid) if (account.LastReconciled.Valid)
account.LastReconciled.Time = new Date(account.LastReconciled.Time); account.LastReconciled.Time = new Date(
account.LastReconciled.Time
);
accounts.Accounts.set(account.ID, account); accounts.Accounts.set(account.ID, account);
} }
for (const category of response.Categories || []) { for (const category of response.Categories || []) {
accounts.Categories.set(category.ID, category); accounts.Categories.set(category.ID, category);
} }
}, },
} },
}) });

50
web/src/stores/session.ts
View File

@ -1,32 +1,41 @@
import { StorageSerializers, useStorage } from '@vueuse/core'; import { StorageSerializers, useStorage } from "@vueuse/core";
import { defineStore } from 'pinia' import { defineStore } from "pinia";
import { POST } from '../api'; import { POST } from "../api";
interface State { interface State {
Session: Session | null Session: Session | null;
Budgets: Map<string, Budget>, Budgets: Map<string, Budget>;
} }
interface Session { interface Session {
Token: string Token: string;
User: string User: string;
} }
export interface Budget { export interface Budget {
ID: string ID: string;
Name: string Name: string;
AvailableBalance: number AvailableBalance: number;
IncomeCategoryID: string IncomeCategoryID: string;
} }
export const useSessionStore = defineStore('session', { export const useSessionStore = defineStore("session", {
state: () => ({ state: () => ({
Session: useStorage<Session | null>('session', null, undefined, { serializer: StorageSerializers.object }), Session: useStorage<Session | null>("session", null, undefined, {
Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>(), undefined, { serializer: StorageSerializers.map }), serializer: StorageSerializers.object,
}),
Budgets: useStorage<Map<string, Budget>>(
"budgets",
new Map<string, Budget>(),
undefined,
{ serializer: StorageSerializers.map }
),
}), }),
getters: { getters: {
BudgetsList: (state) => [...state.Budgets.values()], BudgetsList: (state) => [...state.Budgets.values()],
AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session?.Token}), AuthHeaders: (state) => ({
Authorization: "Bearer " + state.Session?.Token,
}),
LoggedIn: (state) => state.Session != null, LoggedIn: (state) => state.Session != null,
}, },
actions: { actions: {
@ -37,7 +46,7 @@ export const useSessionStore = defineStore('session', {
this.Session = { this.Session = {
User: x.User, User: x.User,
Token: x.Token, Token: x.Token,
} };
for (const budget of x.Budgets) { for (const budget of x.Budgets) {
this.Budgets.set(budget.ID, budget); this.Budgets.set(budget.ID, budget);
} }
@ -49,7 +58,10 @@ export const useSessionStore = defineStore('session', {
return result; return result;
}, },
async register(login: any) { async register(login: any) {
const response = await POST("/user/register", JSON.stringify(login)); const response = await POST(
"/user/register",
JSON.stringify(login)
);
const result = await response.json(); const result = await response.json();
this.loginSuccess(result); this.loginSuccess(result);
return result; return result;
@ -58,5 +70,5 @@ export const useSessionStore = defineStore('session', {
this.Session = null; this.Session = null;
this.Budgets.clear(); this.Budgets.clear();
}, },
} },
}) });

12
web/src/stores/settings.ts
View File

@ -2,17 +2,17 @@ import { useStorage } from "@vueuse/core";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
interface State { interface State {
Menu: MenuSettings Menu: MenuSettings;
} }
interface MenuSettings { interface MenuSettings {
Show: boolean | null, Show: boolean | null;
Expand: boolean | null, Expand: boolean | null;
} }
export const useSettingsStore = defineStore('settings', { export const useSettingsStore = defineStore("settings", {
state: () => ({ state: () => ({
Menu: useStorage<MenuSettings>('settings', { Menu: useStorage<MenuSettings>("settings", {
Show: null, Show: null,
Expand: false, Expand: false,
}), }),
@ -24,5 +24,5 @@ export const useSettingsStore = defineStore('settings', {
toggleMenuSize() { toggleMenuSize() {
this.Menu.Expand = !this.Menu.Expand; this.Menu.Expand = !this.Menu.Expand;
}, },
} },
}); });

79
web/src/stores/transactions.ts
View File

@ -1,26 +1,26 @@
import { defineStore } from "pinia" import { defineStore } from "pinia";
import { POST } from "../api"; import { POST } from "../api";
import { useAccountStore } from "./budget-account"; import { useAccountStore } from "./budget-account";
interface State { interface State {
Transactions: Map<string, Transaction> Transactions: Map<string, Transaction>;
Reconciling: boolean Reconciling: boolean;
} }
export interface Transaction { export interface Transaction {
ID: string ID: string;
Date: Date Date: Date;
TransferAccount: string TransferAccount: string;
CategoryGroup: string CategoryGroup: string;
Category: string Category: string;
CategoryID: string | undefined CategoryID: string | undefined;
Memo: string Memo: string;
Status: string Status: string;
GroupID: string GroupID: string;
Payee: string Payee: string;
PayeeID: string | undefined PayeeID: string | undefined;
Amount: number Amount: number;
Reconciled: boolean Reconciled: boolean;
} }
export const useTransactionsStore = defineStore("budget/transactions", { export const useTransactionsStore = defineStore("budget/transactions", {
@ -30,8 +30,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
}), }),
getters: { getters: {
ReconcilingBalance(state): number { ReconcilingBalance(state): number {
const accountsStore = useAccountStore() const accountsStore = useAccountStore();
let reconciledBalance = accountsStore.CurrentAccount!.ReconciledBalance; let reconciledBalance =
accountsStore.CurrentAccount!.ReconciledBalance;
for (const transaction of this.TransactionsList) { for (const transaction of this.TransactionsList) {
if (transaction.Reconciled) if (transaction.Reconciled)
reconciledBalance += transaction.Amount; reconciledBalance += transaction.Amount;
@ -39,9 +40,9 @@ export const useTransactionsStore = defineStore("budget/transactions", {
return reconciledBalance; return reconciledBalance;
}, },
TransactionsList(state): Transaction[] { TransactionsList(state): Transaction[] {
const accountsStore = useAccountStore() const accountsStore = useAccountStore();
return accountsStore.CurrentAccount!.Transactions.map(x => { return accountsStore.CurrentAccount!.Transactions.map((x) => {
return this.Transactions.get(x)! return this.Transactions.get(x)!;
}); });
}, },
}, },
@ -59,25 +60,30 @@ export const useTransactionsStore = defineStore("budget/transactions", {
}, },
SetReconciledForAllTransactions(value: boolean) { SetReconciledForAllTransactions(value: boolean) {
for (const transaction of this.TransactionsList) { for (const transaction of this.TransactionsList) {
if (transaction.Status == "Reconciled") if (transaction.Status == "Reconciled") continue;
continue;
transaction.Reconciled = value; transaction.Reconciled = value;
} }
}, },
async SubmitReconcilation(reconciliationTransactionAmount: number) { async SubmitReconcilation(reconciliationTransactionAmount: number) {
const accountsStore = useAccountStore() const accountsStore = useAccountStore();
const account = accountsStore.CurrentAccount!; const account = accountsStore.CurrentAccount!;
const reconciledTransactions = this.TransactionsList.filter(x => x.Reconciled); const reconciledTransactions = this.TransactionsList.filter(
(x) => x.Reconciled
);
for (const transaction of reconciledTransactions) { for (const transaction of reconciledTransactions) {
account.ReconciledBalance += transaction.Amount; account.ReconciledBalance += transaction.Amount;
transaction.Status = "Reconciled"; transaction.Status = "Reconciled";
transaction.Reconciled = false; transaction.Reconciled = false;
} }
const result = await POST("/account/" + accountsStore.CurrentAccountID + "/reconcile", JSON.stringify({ const result = await POST(
transactionIDs: reconciledTransactions.map(x => x.ID), "/account/" + accountsStore.CurrentAccountID + "/reconcile",
reconciliationTransactionAmount: reconciliationTransactionAmount.toString(), JSON.stringify({
})); transactionIDs: reconciledTransactions.map((x) => x.ID),
reconciliationTransactionAmount:
reconciliationTransactionAmount.toString(),
})
);
const response = await result.json(); const response = await result.json();
const recTrans = response.ReconciliationTransaction; const recTrans = response.ReconciliationTransaction;
if (recTrans) { if (recTrans) {
@ -86,20 +92,19 @@ export const useTransactionsStore = defineStore("budget/transactions", {
} }
}, },
logout() { logout() {
this.$reset() this.$reset();
}, },
async saveTransaction(payload: string) { async saveTransaction(payload: string) {
const accountsStore = useAccountStore() const accountsStore = useAccountStore();
const result = await POST("/transaction/new", payload); const result = await POST("/transaction/new", payload);
const response = await result.json() as Transaction; const response = (await result.json()) as Transaction;
this.AddTransactions([response]); this.AddTransactions([response]);
accountsStore.CurrentAccount?.Transactions.unshift(response.ID); accountsStore.CurrentAccount?.Transactions.unshift(response.ID);
}, },
async editTransaction(transactionid: string, payload: string) { async editTransaction(transactionid: string, payload: string) {
const result = await POST("/transaction/" + transactionid, payload); const result = await POST("/transaction/" + transactionid, payload);
const response = await result.json() as Transaction; const response = (await result.json()) as Transaction;
this.AddTransactions([response]); this.AddTransactions([response]);
} },
} },
});
})

7
web/tailwind.config.js
View File

@ -1,10 +1,7 @@
module.exports = { module.exports = {
content: [ content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [],
} };

26
web/vite.config.js
View File

@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import path from 'path' import path from "path";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
@ -9,21 +9,21 @@ export default defineConfig({
vue(), vue(),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
], ],
define: { 'process.env': {} }, define: { "process.env": {} },
resolve: { resolve: {
alias: { alias: {
'@': path.resolve(__dirname, 'src'), "@": path.resolve(__dirname, "src"),
}, },
}, },
server: { server: {
host: '0.0.0.0', host: "0.0.0.0",
proxy: { proxy: {
'/api': { "/api": {
target: 'http://10.0.0.162:1323/', target: "http://10.0.0.162:1323/",
changeOrigin: true changeOrigin: true,
} },
} },
} },
/* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
resolve: { resolve: {
extensions: [ extensions: [
@ -37,4 +37,4 @@ export default defineConfig({
] ]
}, },
*/ */
}) });