Run prettier
This commit is contained in:
parent
d8d713f841
commit
61a534610f
@ -1,17 +1,17 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
// add more generic rulesets here, such as:
|
||||
// 'eslint:recommended',
|
||||
'plugin:vue/vue3-recommended',
|
||||
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
|
||||
],
|
||||
rules: {
|
||||
// override/add rules settings here, such as:
|
||||
// 'vue/no-unused-vars': 'error'
|
||||
},
|
||||
"parser": "vue-eslint-parser",
|
||||
"parserOptions": {
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"sourceType": "module"
|
||||
}
|
||||
}
|
||||
extends: [
|
||||
// add more generic rulesets here, such as:
|
||||
// 'eslint:recommended',
|
||||
"plugin:vue/vue3-recommended",
|
||||
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
|
||||
],
|
||||
rules: {
|
||||
// override/add rules settings here, such as:
|
||||
// 'vue/no-unused-vars': 'error'
|
||||
},
|
||||
parser: "vue-eslint-parser",
|
||||
parserOptions: {
|
||||
parser: "@typescript-eslint/parser",
|
||||
sourceType: "module",
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body
|
||||
class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
8
web/src/@types/shims-vue.d.ts
vendored
8
web/src/@types/shims-vue.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
declare module "*.vue" {
|
||||
import { defineComponent } from "vue";
|
||||
const component: ReturnType<typeof defineComponent>;
|
||||
export default component;
|
||||
}
|
||||
import { defineComponent } from "vue";
|
||||
const component: ReturnType<typeof defineComponent>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
@ -26,29 +26,39 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row flex-1 h-screen">
|
||||
<router-view name="sidebar"></router-view>
|
||||
<div class="flex flex-col md:flex-row flex-1 h-screen">
|
||||
<router-view name="sidebar"></router-view>
|
||||
|
||||
<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">
|
||||
<span
|
||||
class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
|
||||
@click="toggleMenuSize"
|
||||
>≡</span>
|
||||
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
|
||||
<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">
|
||||
<span
|
||||
class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
|
||||
@click="toggleMenuSize"
|
||||
>≡</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">
|
||||
<router-link class="mx-4" v-if="LoggedIn" to="/dashboard">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>
|
||||
</div>
|
||||
</div>
|
||||
<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="/login"
|
||||
>Login</router-link
|
||||
>
|
||||
<a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-3 pl-6">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="p-3 pl-6">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import { useSessionStore } from "./stores/session";
|
||||
|
||||
export const BASE_URL = "/api/v1"
|
||||
export const BASE_URL = "/api/v1";
|
||||
|
||||
export function GET(path: string) {
|
||||
const sessionStore = useSessionStore();
|
||||
return fetch(BASE_URL + path, {
|
||||
headers: sessionStore.AuthHeaders,
|
||||
})
|
||||
};
|
||||
const sessionStore = useSessionStore();
|
||||
return fetch(BASE_URL + path, {
|
||||
headers: sessionStore.AuthHeaders,
|
||||
});
|
||||
}
|
||||
|
||||
export function POST(path: string, body: FormData | string | null) {
|
||||
const sessionStore = useSessionStore();
|
||||
return fetch(BASE_URL + path, {
|
||||
method: "POST",
|
||||
headers: sessionStore.AuthHeaders,
|
||||
body: body,
|
||||
})
|
||||
const sessionStore = useSessionStore();
|
||||
return fetch(BASE_URL + path, {
|
||||
method: "POST",
|
||||
headers: sessionStore.AuthHeaders,
|
||||
body: body,
|
||||
});
|
||||
}
|
||||
export function DELETE(path: string) {
|
||||
const sessionStore = useSessionStore();
|
||||
return fetch(BASE_URL + path, {
|
||||
method: "DELETE",
|
||||
headers: sessionStore.AuthHeaders,
|
||||
})
|
||||
}
|
||||
const sessionStore = useSessionStore();
|
||||
return fetch(BASE_URL + path, {
|
||||
method: "DELETE",
|
||||
headers: sessionStore.AuthHeaders,
|
||||
});
|
||||
}
|
||||
|
||||
@ -19,13 +19,15 @@ function daysSinceLastReconciled() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
|
||||
{{account.Name}}
|
||||
</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">
|
||||
{{daysSinceLastReconciled()}}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<span>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
|
||||
{{account.Name}}
|
||||
</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">
|
||||
{{daysSinceLastReconciled()}}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -81,22 +81,29 @@ function clear() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
class="border-b-2 border-black"
|
||||
@keypress="keypress"
|
||||
v-if="id == undefined"
|
||||
v-model="SearchQuery"
|
||||
/>
|
||||
<span @click="clear" 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
|
||||
v-for="suggestion in Suggestions"
|
||||
class="block"
|
||||
@click="select"
|
||||
:value="suggestion.ID"
|
||||
>{{ suggestion.Name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
class="border-b-2 border-black"
|
||||
@keypress="keypress"
|
||||
v-if="id == undefined"
|
||||
v-model="SearchQuery" />
|
||||
<span
|
||||
@click="clear"
|
||||
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
|
||||
v-for="suggestion in Suggestions"
|
||||
class="block"
|
||||
@click="select"
|
||||
:value="suggestion.ID"
|
||||
>{{ suggestion.Name }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
<button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,9 +3,9 @@ const props = defineProps(["modelValue"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="modelValue"
|
||||
@change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
|
||||
class="dark:bg-slate-900">
|
||||
</template>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="modelValue"
|
||||
@change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
|
||||
class="dark:bg-slate-900" />
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
const props = defineProps<{
|
||||
value: number | undefined
|
||||
negativeClass?: string
|
||||
positiveClass?: string
|
||||
@ -15,5 +15,9 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="text-right" :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass">{{ formattedValue }} €</span>
|
||||
</template>
|
||||
<span
|
||||
class="text-right"
|
||||
:class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
|
||||
>{{ formattedValue }} €</span
|
||||
>
|
||||
</template>
|
||||
|
||||
@ -26,11 +26,10 @@ function selectAll(event: FocusEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Input
|
||||
type="date"
|
||||
ref="input"
|
||||
v-bind:value="dateToYYYYMMDD(modelValue)"
|
||||
@input="updateValue"
|
||||
@focus="selectAll"
|
||||
/>
|
||||
</template>
|
||||
<Input
|
||||
type="date"
|
||||
ref="input"
|
||||
v-bind:value="dateToYYYYMMDD(modelValue)"
|
||||
@input="updateValue"
|
||||
@focus="selectAll" />
|
||||
</template>
|
||||
|
||||
@ -3,8 +3,8 @@ const props = defineProps(["modelValue"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
|
||||
class="dark:bg-slate-900">
|
||||
</template>
|
||||
<input
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
|
||||
class="dark:bg-slate-900" />
|
||||
</template>
|
||||
|
||||
@ -30,33 +30,38 @@ function submitDialog() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="openDialog">
|
||||
<slot name="placeholder">
|
||||
<Card>
|
||||
<p class="w-24 text-center text-6xl">+</p>
|
||||
<span 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 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">
|
||||
<h3 class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{{ buttonText }}</h3>
|
||||
<slot></slot>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<button
|
||||
@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</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"
|
||||
>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<button @click="openDialog">
|
||||
<slot name="placeholder">
|
||||
<Card>
|
||||
<p class="w-24 text-center text-6xl">+</p>
|
||||
<span 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
|
||||
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">
|
||||
<h3
|
||||
class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ buttonText }}
|
||||
</h3>
|
||||
<slot></slot>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<button
|
||||
@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
|
||||
</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">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,29 +38,38 @@ function saveTransaction(e: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr>
|
||||
<td class="text-sm">
|
||||
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
|
||||
</td>
|
||||
<td>
|
||||
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
|
||||
</td>
|
||||
<td>
|
||||
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
|
||||
</td>
|
||||
<td>
|
||||
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<Input
|
||||
class="text-right block w-full border-b-2 border-black"
|
||||
type="currency"
|
||||
v-model="TX.Amount"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td class="text-sm">
|
||||
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
|
||||
</td>
|
||||
<td>
|
||||
<Autocomplete
|
||||
v-model:text="TX.Payee"
|
||||
v-model:id="TX.PayeeID"
|
||||
v-model:type="payeeType"
|
||||
model="payees" />
|
||||
</td>
|
||||
<td>
|
||||
<Autocomplete
|
||||
v-model:text="TX.Category"
|
||||
v-model:id="TX.CategoryID"
|
||||
model="categories" />
|
||||
</td>
|
||||
<td>
|
||||
<Input
|
||||
class="block w-full border-b-2 border-black"
|
||||
type="text"
|
||||
v-model="TX.Memo" />
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<Input
|
||||
class="text-right block w-full border-b-2 border-black"
|
||||
type="currency"
|
||||
v-model="TX.Amount" />
|
||||
</td>
|
||||
<td>
|
||||
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
@ -52,32 +52,41 @@ function saveTransaction(e: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr>
|
||||
<label class="md:hidden">Date</label>
|
||||
<td class="text-sm">
|
||||
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
|
||||
</td>
|
||||
<label class="md:hidden">Payee</label>
|
||||
<td>
|
||||
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
|
||||
</td>
|
||||
<label class="md:hidden">Category</label>
|
||||
<td>
|
||||
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
|
||||
</td>
|
||||
<td class="col-span-2">
|
||||
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
|
||||
</td>
|
||||
<label class="md:hidden">Amount</label>
|
||||
<td class="text-right">
|
||||
<Input
|
||||
class="text-right block w-full border-b-2 border-black"
|
||||
type="currency"
|
||||
v-model="TX.Amount"
|
||||
/>
|
||||
</td>
|
||||
<td class="hidden md:table-cell">
|
||||
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<label class="md:hidden">Date</label>
|
||||
<td class="text-sm">
|
||||
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
|
||||
</td>
|
||||
<label class="md:hidden">Payee</label>
|
||||
<td>
|
||||
<Autocomplete
|
||||
v-model:text="TX.Payee"
|
||||
v-model:id="TX.PayeeID"
|
||||
v-model:type="payeeType"
|
||||
model="payees" />
|
||||
</td>
|
||||
<label class="md:hidden">Category</label>
|
||||
<td>
|
||||
<Autocomplete
|
||||
v-model:text="TX.Category"
|
||||
v-model:id="TX.CategoryID"
|
||||
model="categories" />
|
||||
</td>
|
||||
<td class="col-span-2">
|
||||
<Input
|
||||
class="block w-full border-b-2 border-black"
|
||||
type="text"
|
||||
v-model="TX.Memo" />
|
||||
</td>
|
||||
<label class="md:hidden">Amount</label>
|
||||
<td class="text-right">
|
||||
<Input
|
||||
class="text-right block w-full border-b-2 border-black"
|
||||
type="currency"
|
||||
v-model="TX.Amount" />
|
||||
</td>
|
||||
<td class="hidden md:table-cell">
|
||||
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
@ -47,34 +47,45 @@ function getStatusSymbol() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="!edit"
|
||||
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 ? 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="pl-2 md:pl-0">{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}</td>
|
||||
<td>{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}</td>
|
||||
<td>
|
||||
<a
|
||||
:href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
|
||||
>{{ TX.Memo }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<Currency class="block" :value="TX.Amount" />
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{ 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" />
|
||||
<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>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="!edit"
|
||||
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 ? 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="pl-2 md:pl-0">
|
||||
{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
|
||||
</td>
|
||||
<td>
|
||||
{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
:href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
|
||||
>{{ TX.Memo }}</a
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<Currency class="block" :value="TX.Amount" />
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{ 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>
|
||||
|
||||
<style>
|
||||
@ -82,4 +93,4 @@ td {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
export function formatDate(date: Date): string {
|
||||
return date.toLocaleDateString(undefined, { // you can use undefined as first argument
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
}
|
||||
return date.toLocaleDateString(undefined, {
|
||||
// you can use undefined as first argument
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ function editAccount(e : {cancel:boolean}) : boolean {
|
||||
if(CurrentAccount.value?.ClearedBalance != 0 && !accountOpen.value){
|
||||
e.cancel = true;
|
||||
error.value = "Cannot close account with balance";
|
||||
return false;
|
||||
return false;
|
||||
}
|
||||
|
||||
error.value = "";
|
||||
@ -42,35 +42,29 @@ function openEditAccount(e : any) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
|
||||
<template v-slot:placeholder><span class="ml-2">✎</span></template>
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Input
|
||||
class="border-2 dark:border-gray-700"
|
||||
type="text"
|
||||
v-model="accountName"
|
||||
placeholder="Account name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Checkbox
|
||||
class="border-2"
|
||||
v-model="accountOnBudget"
|
||||
required
|
||||
/>
|
||||
<label>On Budget</label>
|
||||
</div>
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Checkbox
|
||||
class="border-2"
|
||||
v-model="accountOpen"
|
||||
required
|
||||
/>
|
||||
<label>Open</label>
|
||||
</div>
|
||||
<div v-if="error != ''" class="dark:text-red-300 text-red-700">
|
||||
{{ error }}
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
<Modal
|
||||
button-text="Edit Account"
|
||||
@open="openEditAccount"
|
||||
@submit="editAccount">
|
||||
<template v-slot:placeholder><span class="ml-2">✎</span></template>
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Input
|
||||
class="border-2 dark:border-gray-700"
|
||||
type="text"
|
||||
v-model="accountName"
|
||||
placeholder="Account name"
|
||||
required />
|
||||
</div>
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Checkbox class="border-2" v-model="accountOnBudget" required />
|
||||
<label>On Budget</label>
|
||||
</div>
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Checkbox class="border-2" v-model="accountOpen" required />
|
||||
<label>Open</label>
|
||||
</div>
|
||||
<div v-if="error != ''" class="dark:text-red-300 text-red-700">
|
||||
{{ error }}
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -11,9 +11,14 @@ function saveBudget() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal button-text="New Budget" @submit="saveBudget">
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
<Modal button-text="New Budget" @submit="saveBudget">
|
||||
<div class="mt-2 px-7 py-3">
|
||||
<Input
|
||||
class="border-2"
|
||||
type="text"
|
||||
v-model="budgetName"
|
||||
placeholder="Budget name"
|
||||
required />
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
@ -3,15 +3,15 @@
|
||||
@tailwind utilities;
|
||||
|
||||
h1 {
|
||||
font-size: 200%;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
123
web/src/main.ts
123
web/src/main.ts
@ -1,72 +1,79 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './index.css'
|
||||
import router from './router'
|
||||
import { createPinia } from 'pinia'
|
||||
import { useBudgetsStore } from './stores/budget';
|
||||
import { useAccountStore } from './stores/budget-account'
|
||||
import PiniaLogger from './pinia-logger'
|
||||
import { useSessionStore } from './stores/session'
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./index.css";
|
||||
import router from "./router";
|
||||
import { createPinia } from "pinia";
|
||||
import { useBudgetsStore } from "./stores/budget";
|
||||
import { useAccountStore } from "./stores/budget-account";
|
||||
import PiniaLogger from "./pinia-logger";
|
||||
import { useSessionStore } from "./stores/session";
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
|
||||
const pinia = createPinia()
|
||||
pinia.use(PiniaLogger({
|
||||
expanded: false,
|
||||
showDuration: true
|
||||
}))
|
||||
app.use(pinia)
|
||||
app.mount('#app')
|
||||
const pinia = createPinia();
|
||||
pinia.use(
|
||||
PiniaLogger({
|
||||
expanded: false,
|
||||
showDuration: true,
|
||||
})
|
||||
);
|
||||
app.use(pinia);
|
||||
app.mount("#app");
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const budgetStore = useBudgetsStore();
|
||||
await budgetStore.SetCurrentBudget((<string>to.params.budgetid));
|
||||
const budgetStore = useBudgetsStore();
|
||||
await budgetStore.SetCurrentBudget(<string>to.params.budgetid);
|
||||
|
||||
const accountStore = useAccountStore();
|
||||
await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
|
||||
next();
|
||||
})
|
||||
const accountStore = useAccountStore();
|
||||
await accountStore.SetCurrentAccount(
|
||||
<string>to.params.budgetid,
|
||||
<string>to.params.accountid
|
||||
);
|
||||
next();
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const sessionStore = useSessionStore();
|
||||
const token = sessionStore.Session?.Token;
|
||||
let loggedIn = false;
|
||||
const sessionStore = useSessionStore();
|
||||
const token = sessionStore.Session?.Token;
|
||||
let loggedIn = false;
|
||||
|
||||
if (token != null) {
|
||||
const jwt = parseJwt(token);
|
||||
if (jwt.exp > Date.now() / 1000)
|
||||
loggedIn = true;
|
||||
}
|
||||
if (token != null) {
|
||||
const jwt = parseJwt(token);
|
||||
if (jwt.exp > Date.now() / 1000) loggedIn = true;
|
||||
}
|
||||
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
if (!loggedIn) {
|
||||
next({ path: '/login' });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
|
||||
} else if (to.matched.some(record => record.meta.hideForAuth)) {
|
||||
if (loggedIn) {
|
||||
next({ path: '/dashboard' });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
if (to.matched.some((record) => record.meta.requiresAuth)) {
|
||||
if (!loggedIn) {
|
||||
next({ path: "/login" });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else if (to.matched.some((record) => record.meta.hideForAuth)) {
|
||||
if (loggedIn) {
|
||||
next({ path: "/dashboard" });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
function parseJwt(token: string) {
|
||||
var base64Url = token.split('.')[1];
|
||||
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
|
||||
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
||||
}).join(''));
|
||||
var base64Url = token.split(".")[1];
|
||||
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
|
||||
var jsonPayload = decodeURIComponent(
|
||||
atob(base64)
|
||||
.split("")
|
||||
.map(function (c) {
|
||||
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
|
||||
})
|
||||
.join("")
|
||||
);
|
||||
|
||||
return JSON.parse(jsonPayload);
|
||||
};
|
||||
return JSON.parse(jsonPayload);
|
||||
}
|
||||
|
||||
|
||||
1646426130
|
||||
1646512855755
|
||||
1646426130;
|
||||
1646512855755;
|
||||
|
||||
@ -42,94 +42,101 @@ function createReconcilationTransaction() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<h1 class="inline">
|
||||
{{ accounts.CurrentAccount?.Name }}
|
||||
</h1>
|
||||
<EditAccount />
|
||||
</div>
|
||||
<div class="grid grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<h1 class="inline">
|
||||
{{ accounts.CurrentAccount?.Name }}
|
||||
</h1>
|
||||
<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>
|
||||
<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 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
|
||||
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
|
||||
<Currency :value="transactions.ReconcilingBalance" />
|
||||
</Button>
|
||||
<span v-if="transactions.Reconciling" class="contents">
|
||||
<Button
|
||||
@click="submitReconcilation"
|
||||
class="bg-blue-500 p-1 whitespace-nowrap flex-1">
|
||||
My current balance is
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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 v-slot: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>
|
||||
<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 v-slot: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>
|
||||
|
||||
<style>
|
||||
@ -140,4 +147,4 @@ table {
|
||||
.negative {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -8,9 +8,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="budget-item">
|
||||
<button>Clear database</button>
|
||||
<p>This removes all data and starts from scratch. Not undoable!</p>
|
||||
</div>
|
||||
</template>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="budget-item">
|
||||
<button>Clear database</button>
|
||||
<p>This removes all data and starts from scratch. Not undoable!</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,45 +22,59 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
: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"
|
||||
>
|
||||
<div class="flex flex-col mt-14 md:mt-0">
|
||||
<span
|
||||
class="m-2 p-1 px-3 h-10 overflow-hidden"
|
||||
:class="[ExpandMenu ? 'text-2xl' : 'text-md']"
|
||||
>
|
||||
<router-link to="/dashboard" style="font-size:150%">⌂</router-link>
|
||||
{{ CurrentBudgetName }}
|
||||
</span>
|
||||
<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>
|
||||
<br />
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
|
||||
</span>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>On-Budget Accounts</span>
|
||||
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>Off-Budget Accounts</span>
|
||||
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<!--
|
||||
<div
|
||||
: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">
|
||||
<div class="flex flex-col mt-14 md:mt-0">
|
||||
<span
|
||||
class="m-2 p-1 px-3 h-10 overflow-hidden"
|
||||
:class="[ExpandMenu ? 'text-2xl' : 'text-md']">
|
||||
<router-link to="/dashboard" style="font-size:150%"
|
||||
>⌂</router-link
|
||||
>
|
||||
{{ CurrentBudgetName }}
|
||||
</span>
|
||||
<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
|
||||
>
|
||||
<br />
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
|
||||
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
|
||||
</span>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>On-Budget Accounts</span>
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="OnBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div
|
||||
v-for="account in OnBudgetAccounts"
|
||||
class="flex flex-row justify-between">
|
||||
<AccountWithReconciled :account="account" />
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="account.ClearedBalance" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>Off-Budget Accounts</span>
|
||||
<Currency
|
||||
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
||||
:value="OffBudgetAccountsBalance" />
|
||||
</div>
|
||||
<div
|
||||
v-for="account in OffBudgetAccounts"
|
||||
class="flex flex-row justify-between">
|
||||
<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">
|
||||
<div class="flex flex-row justify-between font-bold">
|
||||
<span>Closed Accounts</span>
|
||||
@ -68,13 +82,15 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
|
||||
+ Add Account
|
||||
</li>
|
||||
-->
|
||||
<!--<li>
|
||||
<!--<li>
|
||||
<router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
|
||||
</li>-->
|
||||
<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>
|
||||
</li>
|
||||
<!--<li><router-link to="/admin">Admin</router-link></li>-->
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
<!--<li><router-link to="/admin">Admin</router-link></li>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -69,47 +69,85 @@ function getGroupState(group: { Name: string, Expand: boolean }): boolean {
|
||||
function assignedChanged(e : Event, category : Category){
|
||||
const target = e.target as HTMLInputElement;
|
||||
const value = target.valueAsNumber;
|
||||
POST("/budget/"+CurrentBudgetID.value+"/category/" + category.ID + "/" + selected.value.Year + "/" + (selected.value.Month+1),
|
||||
POST("/budget/"+CurrentBudgetID.value+"/category/" + category.ID + "/" + selected.value.Year + "/" + (selected.value.Month+1),
|
||||
JSON.stringify({Assigned: category.Assigned}));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
|
||||
<span>Available balance: <Currency :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)" /></span>
|
||||
<div>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
|
||||
><<</router-link>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
|
||||
>Current Month</router-link>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
|
||||
>>></router-link>
|
||||
</div>
|
||||
<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 lg:block text-right">Leftover</span>
|
||||
<span class="hidden sm:block text-right">Assigned</span>
|
||||
<span class="hidden sm:block text-right">Activity</span>
|
||||
<span class="hidden sm:block text-right">Available</span>
|
||||
<template v-for="group in GroupsForMonth">
|
||||
<span
|
||||
class="text-lg font-bold mt-2"
|
||||
@click="toggleGroup(group)"
|
||||
>{{ (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 :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="accountStore.GetCategoryAvailable(category)" />
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
|
||||
<span
|
||||
>Available balance:
|
||||
<Currency
|
||||
:value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
|
||||
/></span>
|
||||
<div>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
|
||||
><<</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
|
||||
>Current Month</router-link
|
||||
>
|
||||
<router-link
|
||||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
|
||||
>>></router-link
|
||||
>
|
||||
</div>
|
||||
<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 lg:block text-right">Leftover</span>
|
||||
<span class="hidden sm:block text-right">Assigned</span>
|
||||
<span class="hidden sm:block text-right">Activity</span>
|
||||
<span class="hidden sm:block text-right">Available</span>
|
||||
<template v-for="group in GroupsForMonth">
|
||||
<span
|
||||
class="text-lg font-bold mt-2"
|
||||
@click="toggleGroup(group)"
|
||||
>{{ (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
|
||||
: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="accountStore.GetCategoryAvailable(category)" />
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,15 +11,19 @@ const BudgetsList = useSessionStore().BudgetsList;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Budgets</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card v-for="budget in BudgetsList">
|
||||
<router-link v-bind:to="'/budget/'+budget.ID+'/budgeting'" class="contents">
|
||||
<!--<svg class="w-24"></svg>-->
|
||||
<p class="w-24 text-center text-6xl"></p>
|
||||
<span class="text-lg">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span>
|
||||
</router-link>
|
||||
</Card>
|
||||
<NewBudget />
|
||||
</div>
|
||||
<h1>Budgets</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card v-for="budget in BudgetsList">
|
||||
<router-link
|
||||
v-bind:to="'/budget/'+budget.ID+'/budgeting'"
|
||||
class="contents">
|
||||
<!--<svg class="w-24"></svg>-->
|
||||
<p class="w-24 text-center text-6xl"></p>
|
||||
<span class="text-lg"
|
||||
>{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span
|
||||
>
|
||||
</router-link>
|
||||
</Card>
|
||||
<NewBudget />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="font-bold" id="content">
|
||||
Willkommen bei Budgeteer, der neuen App für's Budget!
|
||||
</div>
|
||||
<div class="container col-md-4" id="login">
|
||||
<router-link to="/login">Login</router-link> or <router-link to="/login">register</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="font-bold" id="content">
|
||||
Willkommen bei Budgeteer, der neuen App für's Budget!
|
||||
</div>
|
||||
<div class="container col-md-4" id="login">
|
||||
<router-link to="/login">Login</router-link> or
|
||||
<router-link to="/login">register</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,18 +28,27 @@ function formSubmit(e: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Input type="text" v-model="login.user"
|
||||
placeholder="Username"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input type="password" v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Login</button>
|
||||
<p>
|
||||
New user?
|
||||
<router-link to="/register">Register</router-link> instead!
|
||||
</p>
|
||||
</template>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.user"
|
||||
placeholder="Username"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="password"
|
||||
v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
class="bg-blue-300 rounded-lg p-2 w-48">
|
||||
Login
|
||||
</button>
|
||||
<p>
|
||||
New user?
|
||||
<router-link to="/register">Register</router-link> instead!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -1,48 +1,59 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useSessionStore } from "../stores/session";
|
||||
import Input from "../components/Input.vue";
|
||||
|
||||
const error = ref("");
|
||||
const login = ref({ email: "", password: "", name: "" });
|
||||
const router = useRouter(); // has to be called in setup
|
||||
|
||||
onMounted(() => {
|
||||
useSessionStore().setTitle("Login");
|
||||
});
|
||||
|
||||
function formSubmit(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
useSessionStore().register(login.value)
|
||||
.then(x => {
|
||||
error.value = "";
|
||||
router.replace("/dashboard");
|
||||
return x;
|
||||
})
|
||||
.catch(x => error.value = "The entered credentials are invalid!");
|
||||
|
||||
// TODO display invalidCredentials
|
||||
// TODO redirect to dashboard on success
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Input type="text" v-model="login.name"
|
||||
placeholder="Name"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input type="text" v-model="login.email"
|
||||
placeholder="Email"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input type="password" v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button type="submit" @click="formSubmit" class="bg-blue-300 rounded-lg p-2 w-48">Register</button>
|
||||
<p>
|
||||
Existing user?
|
||||
<router-link to="/login">Login</router-link> instead!
|
||||
</p>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useSessionStore } from "../stores/session";
|
||||
import Input from "../components/Input.vue";
|
||||
|
||||
const error = ref("");
|
||||
const login = ref({ email: "", password: "", name: "" });
|
||||
const router = useRouter(); // has to be called in setup
|
||||
|
||||
onMounted(() => {
|
||||
useSessionStore().setTitle("Login");
|
||||
});
|
||||
|
||||
function formSubmit(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
useSessionStore().register(login.value)
|
||||
.then(x => {
|
||||
error.value = "";
|
||||
router.replace("/dashboard");
|
||||
return x;
|
||||
})
|
||||
.catch(x => error.value = "The entered credentials are invalid!");
|
||||
|
||||
// TODO display invalidCredentials
|
||||
// TODO redirect to dashboard on success
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.name"
|
||||
placeholder="Name"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="text"
|
||||
v-model="login.email"
|
||||
placeholder="Email"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
<Input
|
||||
type="password"
|
||||
v-model="login.password"
|
||||
placeholder="Password"
|
||||
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
|
||||
</div>
|
||||
<div>{{ error }}</div>
|
||||
<button
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
class="bg-blue-300 rounded-lg p-2 w-48">
|
||||
Register
|
||||
</button>
|
||||
<p>
|
||||
Existing user?
|
||||
<router-link to="/login">Login</router-link> instead!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -72,53 +72,82 @@ function ynabExport() {
|
||||
saveAs(blob, timeStamp + " " + CurrentBudgetName.value + " - Transactions.tsv");
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card class="flex-col p-3">
|
||||
<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>
|
||||
<div>
|
||||
<h1>Danger Zone</h1>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<Card class="flex-col p-3">
|
||||
<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>
|
||||
|
||||
<Button class="bg-red-500 py-2" @click="clearBudget">Clear budget</Button>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<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>
|
||||
<Button class="bg-red-500 py-2" @click="deleteBudget">Delete budget</button>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Fix all historic negative category-balances</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 class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Import YNAB Budget</h2>
|
||||
|
||||
<div>
|
||||
<label for="transactions_file">
|
||||
Transaktionen:
|
||||
<input type="file" @change="gotTransactions" accept="text/*" />
|
||||
</label>
|
||||
<br />
|
||||
<label for="assignments_file">
|
||||
Budget:
|
||||
<input type="file" @change="gotAssignments" accept="text/*" />
|
||||
</label>
|
||||
</div>
|
||||
<Button class="bg-red-500 py-2" @click="clearBudget"
|
||||
>Clear budget</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<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>
|
||||
<Button class="bg-red-500 py-2" @click="deleteBudget"
|
||||
>Delete budget</Button
|
||||
>
|
||||
</Card>
|
||||
<Card class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">
|
||||
Fix all historic negative category-balances
|
||||
</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 class="flex-col p-3">
|
||||
<h2 class="text-lg font-bold">Import YNAB Budget</h2>
|
||||
|
||||
<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>
|
||||
<label for="transactions_file">
|
||||
Transaktionen:
|
||||
<input
|
||||
type="file"
|
||||
@change="gotTransactions"
|
||||
accept="text/*" />
|
||||
</label>
|
||||
<br />
|
||||
<label for="assignments_file">
|
||||
Budget:
|
||||
<input
|
||||
type="file"
|
||||
@change="gotAssignments"
|
||||
accept="text/*" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<Button class="bg-blue-500 py-2" @click="ynabExport">Export</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -1,81 +1,107 @@
|
||||
import { PiniaPluginContext, StoreGeneric, _ActionsTree, _StoreOnActionListenerContext } from 'pinia';
|
||||
import {
|
||||
PiniaPluginContext,
|
||||
StoreGeneric,
|
||||
_ActionsTree,
|
||||
_StoreOnActionListenerContext,
|
||||
} from "pinia";
|
||||
|
||||
const cloneDeep = <T>(obj: T): T => {
|
||||
try {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
} catch {
|
||||
return { ...obj };
|
||||
}
|
||||
try {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
} catch {
|
||||
return { ...obj };
|
||||
}
|
||||
};
|
||||
const formatTime = (date = new Date()) => {
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||||
const hours = date.getHours().toString().padStart(2, "0");
|
||||
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||
const seconds = date.getSeconds().toString().padStart(2, "0");
|
||||
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
export interface PiniaLoggerOptions {
|
||||
disabled?: boolean;
|
||||
expanded?: boolean;
|
||||
showDuration?: boolean
|
||||
showStoreName?: boolean;
|
||||
logErrors?: boolean;
|
||||
disabled?: boolean;
|
||||
expanded?: boolean;
|
||||
showDuration?: boolean;
|
||||
showStoreName?: boolean;
|
||||
logErrors?: boolean;
|
||||
}
|
||||
|
||||
export type PiniaActionListenerContext = _StoreOnActionListenerContext<StoreGeneric, string, _ActionsTree>;
|
||||
export type PiniaActionListenerContext = _StoreOnActionListenerContext<
|
||||
StoreGeneric,
|
||||
string,
|
||||
_ActionsTree
|
||||
>;
|
||||
|
||||
const defaultOptions: PiniaLoggerOptions = {
|
||||
logErrors: true,
|
||||
disabled: false,
|
||||
expanded: true,
|
||||
showStoreName: true,
|
||||
showDuration: false,
|
||||
logErrors: true,
|
||||
disabled: false,
|
||||
expanded: true,
|
||||
showStoreName: true,
|
||||
showDuration: false,
|
||||
};
|
||||
|
||||
export const PiniaLogger = (config = defaultOptions) => (ctx: PiniaPluginContext) => {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
...config,
|
||||
};
|
||||
export const PiniaLogger =
|
||||
(config = defaultOptions) =>
|
||||
(ctx: PiniaPluginContext) => {
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
...config,
|
||||
};
|
||||
|
||||
if (options.disabled) return;
|
||||
if (options.disabled) return;
|
||||
|
||||
ctx.store.$onAction((action: PiniaActionListenerContext) => {
|
||||
const startTime = Date.now();
|
||||
const prevState = cloneDeep(ctx.store.$state);
|
||||
|
||||
ctx.store.$onAction((action: PiniaActionListenerContext) => {
|
||||
const startTime = Date.now();
|
||||
const prevState = cloneDeep(ctx.store.$state);
|
||||
const log = (isError?: boolean, error?: any) => {
|
||||
const endTime = Date.now();
|
||||
const duration = endTime - startTime + "ms";
|
||||
const nextState = cloneDeep(ctx.store.$state);
|
||||
const storeName = action.store.$id;
|
||||
const title = `${formatTime()} action 🍍 ${
|
||||
options.showStoreName ? `[${storeName}] ` : ""
|
||||
}${action.name} ${
|
||||
isError ? `failed after ` : ""
|
||||
}in ${duration}`;
|
||||
|
||||
const log = (isError?: boolean, error?: any) => {
|
||||
const endTime = Date.now();
|
||||
const duration = endTime - startTime + 'ms';
|
||||
const nextState = cloneDeep(ctx.store.$state);
|
||||
const storeName = action.store.$id;
|
||||
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.log(
|
||||
"%cprev state",
|
||||
"font-weight: bold; color: grey;",
|
||||
prevState
|
||||
);
|
||||
console.log("%caction", "font-weight: bold; color: #69B7FF;", {
|
||||
type: action.name,
|
||||
args:
|
||||
action.args.length > 0 ? { ...action.args } : undefined,
|
||||
...(options.showStoreName && { store: action.store.$id }),
|
||||
...(options.showDuration && { duration }),
|
||||
...(isError && { error }),
|
||||
});
|
||||
console.log(
|
||||
"%cnext state",
|
||||
"font-weight: bold; color: #4caf50;",
|
||||
nextState
|
||||
);
|
||||
console.groupEnd();
|
||||
};
|
||||
|
||||
console[options.expanded ? 'group' : 'groupCollapsed'](`%c${title}`, `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,
|
||||
args: action.args.length > 0 ? { ...action.args } : undefined,
|
||||
...(options.showStoreName && { store: action.store.$id }),
|
||||
...(options.showDuration && { duration }),
|
||||
...(isError && { error }),
|
||||
});
|
||||
console.log('%cnext state', 'font-weight: bold; color: #4caf50;', nextState);
|
||||
console.groupEnd();
|
||||
};
|
||||
action.after(() => {
|
||||
log();
|
||||
});
|
||||
|
||||
action.after(() => {
|
||||
log();
|
||||
});
|
||||
if (options.logErrors) {
|
||||
action.onError((error) => {
|
||||
log(true, error);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (options.logErrors) {
|
||||
action.onError((error) => {
|
||||
log(true, error);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default PiniaLogger;
|
||||
export default PiniaLogger;
|
||||
|
||||
@ -1,30 +1,75 @@
|
||||
import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-router'
|
||||
import Dashboard from '../pages/Dashboard.vue';
|
||||
import Login from '../pages/Login.vue';
|
||||
import Index from '../pages/Index.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';
|
||||
import {
|
||||
createRouter,
|
||||
createWebHistory,
|
||||
RouteLocationNormalized,
|
||||
} from "vue-router";
|
||||
import Dashboard from "../pages/Dashboard.vue";
|
||||
import Login from "../pages/Login.vue";
|
||||
import Index from "../pages/Index.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 = [
|
||||
{ path: "/", name: "Index", component: Index },
|
||||
{ path: "/dashboard", name: "Dashboard", component: Dashboard, meta: { requiresAuth: true } },
|
||||
{ path: "/login", 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 } },
|
||||
]
|
||||
{ path: "/", name: "Index", component: Index },
|
||||
{
|
||||
path: "/dashboard",
|
||||
name: "Dashboard",
|
||||
component: Dashboard,
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
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({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@ -1,195 +1,233 @@
|
||||
import { defineStore } from "pinia"
|
||||
import { defineStore } from "pinia";
|
||||
import { GET, POST } from "../api";
|
||||
import { useBudgetsStore } from "./budget";
|
||||
import { useSessionStore } from "./session";
|
||||
import { useTransactionsStore } from "./transactions";
|
||||
|
||||
interface State {
|
||||
Accounts: Map<string, Account>
|
||||
CurrentAccountID: string | null
|
||||
Categories: Map<string, Category>
|
||||
Months: Map<number, Map<number, Map<string, Category>>>
|
||||
Assignments: []
|
||||
Accounts: Map<string, Account>;
|
||||
CurrentAccountID: string | null;
|
||||
Categories: Map<string, Category>;
|
||||
Months: Map<number, Map<number, Map<string, Category>>>;
|
||||
Assignments: [];
|
||||
}
|
||||
|
||||
export interface Account {
|
||||
ID: string
|
||||
Name: string
|
||||
OnBudget: boolean
|
||||
IsOpen: boolean
|
||||
ClearedBalance: number
|
||||
WorkingBalance: number
|
||||
ReconciledBalance: number
|
||||
Transactions: string[]
|
||||
LastReconciled: NullDate
|
||||
ID: string;
|
||||
Name: string;
|
||||
OnBudget: boolean;
|
||||
IsOpen: boolean;
|
||||
ClearedBalance: number;
|
||||
WorkingBalance: number;
|
||||
ReconciledBalance: number;
|
||||
Transactions: string[];
|
||||
LastReconciled: NullDate;
|
||||
}
|
||||
|
||||
interface NullDate {
|
||||
Valid: boolean
|
||||
Time: Date
|
||||
Valid: boolean;
|
||||
Time: Date;
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
ID: string
|
||||
Group: string
|
||||
Name: string
|
||||
AvailableLastMonth: number
|
||||
Assigned: number
|
||||
Activity: number
|
||||
ID: string;
|
||||
Group: string;
|
||||
Name: string;
|
||||
AvailableLastMonth: number;
|
||||
Assigned: number;
|
||||
Activity: number;
|
||||
}
|
||||
|
||||
export const useAccountStore = defineStore("budget/account", {
|
||||
state: (): State => ({
|
||||
Accounts: new Map<string, Account>(),
|
||||
CurrentAccountID: null,
|
||||
Months: new Map<number, Map<number, Map<string, Category>>>(),
|
||||
Categories: new Map<string, Category>(),
|
||||
Assignments: [],
|
||||
}),
|
||||
getters: {
|
||||
AccountsList(state) {
|
||||
return [...state.Accounts.values()];
|
||||
},
|
||||
AllCategoriesForMonth: (state) => (year: number, month: number) => {
|
||||
const yearMap = state.Months.get(year);
|
||||
const monthMap = yearMap?.get(month);
|
||||
return [...monthMap?.values() || []];
|
||||
},
|
||||
GetCategoryAvailable(state) {
|
||||
return (category: Category): number => {
|
||||
return category.AvailableLastMonth + Number(category.Assigned) + category.Activity;
|
||||
}
|
||||
},
|
||||
GetIncomeCategoryID(state) {
|
||||
const budget = useBudgetsStore();
|
||||
return budget.CurrentBudget?.IncomeCategoryID;
|
||||
},
|
||||
GetIncomeAvailable(state) {
|
||||
return (year: number, month: number) => {
|
||||
const IncomeCategoryID = this.GetIncomeCategoryID;
|
||||
if (IncomeCategoryID == null)
|
||||
return 0;
|
||||
state: (): State => ({
|
||||
Accounts: new Map<string, Account>(),
|
||||
CurrentAccountID: null,
|
||||
Months: new Map<number, Map<number, Map<string, Category>>>(),
|
||||
Categories: new Map<string, Category>(),
|
||||
Assignments: [],
|
||||
}),
|
||||
getters: {
|
||||
AccountsList(state) {
|
||||
return [...state.Accounts.values()];
|
||||
},
|
||||
AllCategoriesForMonth: (state) => (year: number, month: number) => {
|
||||
const yearMap = state.Months.get(year);
|
||||
const monthMap = yearMap?.get(month);
|
||||
return [...(monthMap?.values() || [])];
|
||||
},
|
||||
GetCategoryAvailable(state) {
|
||||
return (category: Category): number => {
|
||||
return (
|
||||
category.AvailableLastMonth +
|
||||
Number(category.Assigned) +
|
||||
category.Activity
|
||||
);
|
||||
};
|
||||
},
|
||||
GetIncomeCategoryID(state) {
|
||||
const budget = useBudgetsStore();
|
||||
return budget.CurrentBudget?.IncomeCategoryID;
|
||||
},
|
||||
GetIncomeAvailable(state) {
|
||||
return (year: number, month: number) => {
|
||||
const IncomeCategoryID = this.GetIncomeCategoryID;
|
||||
if (IncomeCategoryID == null) return 0;
|
||||
|
||||
const categories = this.AllCategoriesForMonth(year, month);
|
||||
const category = categories.filter(x => x.ID == IncomeCategoryID)[0];
|
||||
if (category == null)
|
||||
return 0;
|
||||
return category.AvailableLastMonth;
|
||||
}
|
||||
},
|
||||
CategoryGroupsForMonth(state) {
|
||||
return (year: number, month: number) => {
|
||||
const categories = this.AllCategoriesForMonth(year, month);
|
||||
const categoryGroups = [];
|
||||
let prev = undefined;
|
||||
for (const category of categories) {
|
||||
if (category.ID == this.GetIncomeCategoryID)
|
||||
continue;
|
||||
const categories = this.AllCategoriesForMonth(year, month);
|
||||
const category = categories.filter(
|
||||
(x) => x.ID == IncomeCategoryID
|
||||
)[0];
|
||||
if (category == null) return 0;
|
||||
return category.AvailableLastMonth;
|
||||
};
|
||||
},
|
||||
CategoryGroupsForMonth(state) {
|
||||
return (year: number, month: number) => {
|
||||
const categories = this.AllCategoriesForMonth(year, month);
|
||||
const categoryGroups = [];
|
||||
let prev = undefined;
|
||||
for (const category of categories) {
|
||||
if (category.ID == this.GetIncomeCategoryID) continue;
|
||||
|
||||
if (prev == undefined || category.Group != prev.Name) {
|
||||
prev = {
|
||||
Name: category.Group,
|
||||
Available: this.GetCategoryAvailable(category),
|
||||
AvailableLastMonth: category.AvailableLastMonth,
|
||||
Activity: category.Activity,
|
||||
Assigned: category.Assigned,
|
||||
}
|
||||
categoryGroups.push({
|
||||
...prev,
|
||||
Expand: prev.Name != "Hidden Categories",
|
||||
});
|
||||
} else {
|
||||
categoryGroups[categoryGroups.length-1].Available += this.GetCategoryAvailable(category);
|
||||
categoryGroups[categoryGroups.length-1].AvailableLastMonth += category.AvailableLastMonth;
|
||||
categoryGroups[categoryGroups.length-1].Activity += category.Activity;
|
||||
categoryGroups[categoryGroups.length-1].Assigned += category.Assigned;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
return categoryGroups;
|
||||
}
|
||||
},
|
||||
CategoriesForMonthAndGroup(state) {
|
||||
return (year: number, month: number, group: string) => {
|
||||
const categories = this.AllCategoriesForMonth(year, month);
|
||||
return categories.filter(x => x.Group == group);
|
||||
}
|
||||
},
|
||||
GetAccount(state) {
|
||||
return (accountid: string) => {
|
||||
return this.Accounts.get(accountid);
|
||||
}
|
||||
},
|
||||
CurrentAccount(state): Account | undefined {
|
||||
if (state.CurrentAccountID == null)
|
||||
return undefined;
|
||||
if (prev == undefined || category.Group != prev.Name) {
|
||||
prev = {
|
||||
Name: category.Group,
|
||||
Available: this.GetCategoryAvailable(category),
|
||||
AvailableLastMonth: category.AvailableLastMonth,
|
||||
Activity: category.Activity,
|
||||
Assigned: category.Assigned,
|
||||
};
|
||||
categoryGroups.push({
|
||||
...prev,
|
||||
Expand: prev.Name != "Hidden Categories",
|
||||
});
|
||||
} else {
|
||||
categoryGroups[categoryGroups.length - 1].Available +=
|
||||
this.GetCategoryAvailable(category);
|
||||
categoryGroups[
|
||||
categoryGroups.length - 1
|
||||
].AvailableLastMonth += category.AvailableLastMonth;
|
||||
categoryGroups[categoryGroups.length - 1].Activity +=
|
||||
category.Activity;
|
||||
categoryGroups[categoryGroups.length - 1].Assigned +=
|
||||
category.Assigned;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
return categoryGroups;
|
||||
};
|
||||
},
|
||||
CategoriesForMonthAndGroup(state) {
|
||||
return (year: number, month: number, group: string) => {
|
||||
const categories = this.AllCategoriesForMonth(year, month);
|
||||
return categories.filter((x) => x.Group == group);
|
||||
};
|
||||
},
|
||||
GetAccount(state) {
|
||||
return (accountid: string) => {
|
||||
return this.Accounts.get(accountid);
|
||||
};
|
||||
},
|
||||
CurrentAccount(state): Account | undefined {
|
||||
if (state.CurrentAccountID == null) return undefined;
|
||||
|
||||
return this.GetAccount(state.CurrentAccountID);
|
||||
},
|
||||
OnBudgetAccounts(state) {
|
||||
return [...state.Accounts.values()].filter(x => x.OnBudget);
|
||||
},
|
||||
OnBudgetAccountsBalance(state): number {
|
||||
return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0);
|
||||
},
|
||||
OffBudgetAccounts(state) {
|
||||
return [...state.Accounts.values()].filter(x => !x.OnBudget);
|
||||
},
|
||||
OffBudgetAccountsBalance(state): number {
|
||||
return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async SetCurrentAccount(budgetid: string, accountid: string) {
|
||||
if (budgetid == null)
|
||||
return;
|
||||
return this.GetAccount(state.CurrentAccountID);
|
||||
},
|
||||
OnBudgetAccounts(state) {
|
||||
return [...state.Accounts.values()].filter((x) => x.OnBudget);
|
||||
},
|
||||
OnBudgetAccountsBalance(state): number {
|
||||
return this.OnBudgetAccounts.reduce(
|
||||
(prev, curr) => prev + Number(curr.ClearedBalance),
|
||||
0
|
||||
);
|
||||
},
|
||||
OffBudgetAccounts(state) {
|
||||
return [...state.Accounts.values()].filter((x) => !x.OnBudget);
|
||||
},
|
||||
OffBudgetAccountsBalance(state): number {
|
||||
return this.OffBudgetAccounts.reduce(
|
||||
(prev, curr) => prev + Number(curr.ClearedBalance),
|
||||
0
|
||||
);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async SetCurrentAccount(budgetid: string, accountid: string) {
|
||||
if (budgetid == null) return;
|
||||
|
||||
this.CurrentAccountID = accountid;
|
||||
this.CurrentAccountID = accountid;
|
||||
|
||||
if (accountid == null)
|
||||
return;
|
||||
const account = this.GetAccount(accountid)!;
|
||||
useSessionStore().setTitle(account.Name);
|
||||
await this.FetchAccount(account);
|
||||
},
|
||||
async FetchAccount(account: Account) {
|
||||
const result = await GET("/account/" + account.ID + "/transactions");
|
||||
const response = await result.json();
|
||||
const transactionsStore = useTransactionsStore()
|
||||
const transactions = transactionsStore.AddTransactions(response.Transactions);
|
||||
account.Transactions = transactions;
|
||||
},
|
||||
async FetchMonthBudget(budgetid: string, year: number, month: number) {
|
||||
const result = await GET("/budget/" + budgetid + "/" + year + "/" + (month + 1));
|
||||
const response = await result.json();
|
||||
if (response.Categories == undefined || response.Categories.length <= 0)
|
||||
return;
|
||||
this.addCategoriesForMonth(year, month, response.Categories);
|
||||
},
|
||||
async EditAccount(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();
|
||||
useBudgetsStore().MergeBudgetingData(response);
|
||||
if (accountid == null) return;
|
||||
const account = this.GetAccount(accountid)!;
|
||||
useSessionStore().setTitle(account.Name);
|
||||
await this.FetchAccount(account);
|
||||
},
|
||||
async FetchAccount(account: Account) {
|
||||
const result = await GET(
|
||||
"/account/" + account.ID + "/transactions"
|
||||
);
|
||||
const response = await result.json();
|
||||
const transactionsStore = useTransactionsStore();
|
||||
const transactions = transactionsStore.AddTransactions(
|
||||
response.Transactions
|
||||
);
|
||||
account.Transactions = transactions;
|
||||
},
|
||||
async FetchMonthBudget(budgetid: string, year: number, month: number) {
|
||||
const result = await GET(
|
||||
"/budget/" + budgetid + "/" + year + "/" + (month + 1)
|
||||
);
|
||||
const response = await result.json();
|
||||
if (
|
||||
response.Categories == undefined ||
|
||||
response.Categories.length <= 0
|
||||
)
|
||||
return;
|
||||
this.addCategoriesForMonth(year, month, response.Categories);
|
||||
},
|
||||
async EditAccount(
|
||||
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();
|
||||
useBudgetsStore().MergeBudgetingData(response);
|
||||
|
||||
if (!isOpen) {
|
||||
this.Accounts.delete(accountid);
|
||||
}
|
||||
},
|
||||
addCategoriesForMonth(year: number, month: number, categories: Category[]): void {
|
||||
this.$patch((state) => {
|
||||
const yearMap = state.Months.get(year) || new Map<number, Map<string, Category>>();
|
||||
const monthMap = yearMap.get(month) || new Map<string, Category>();
|
||||
for (const category of categories) {
|
||||
monthMap.set(category.ID, category);
|
||||
}
|
||||
if (!isOpen) {
|
||||
this.Accounts.delete(accountid);
|
||||
}
|
||||
},
|
||||
addCategoriesForMonth(
|
||||
year: number,
|
||||
month: number,
|
||||
categories: Category[]
|
||||
): void {
|
||||
this.$patch((state) => {
|
||||
const yearMap =
|
||||
state.Months.get(year) ||
|
||||
new Map<number, Map<string, Category>>();
|
||||
const monthMap =
|
||||
yearMap.get(month) || new Map<string, Category>();
|
||||
for (const category of categories) {
|
||||
monthMap.set(category.ID, category);
|
||||
}
|
||||
|
||||
yearMap.set(month, monthMap);
|
||||
state.Months.set(year, yearMap);
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
this.$reset()
|
||||
},
|
||||
}
|
||||
|
||||
})
|
||||
yearMap.set(month, monthMap);
|
||||
state.Months.set(year, yearMap);
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
this.$reset();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -4,67 +4,67 @@ import { useAccountStore } from "./budget-account";
|
||||
import { Budget, useSessionStore } from "./session";
|
||||
|
||||
interface State {
|
||||
CurrentBudgetID: string | null,
|
||||
CurrentBudgetID: string | null;
|
||||
}
|
||||
|
||||
export const useBudgetsStore = defineStore('budget', {
|
||||
state: (): State => ({
|
||||
CurrentBudgetID: null,
|
||||
}),
|
||||
getters: {
|
||||
CurrentBudget(): Budget | undefined {
|
||||
if (this.CurrentBudgetID == null)
|
||||
return undefined;
|
||||
export const useBudgetsStore = defineStore("budget", {
|
||||
state: (): State => ({
|
||||
CurrentBudgetID: null,
|
||||
}),
|
||||
getters: {
|
||||
CurrentBudget(): Budget | undefined {
|
||||
if (this.CurrentBudgetID == null) return undefined;
|
||||
|
||||
const sessionStore = useSessionStore();
|
||||
return sessionStore.Budgets.get(this.CurrentBudgetID);
|
||||
},
|
||||
CurrentBudgetName(state): string {
|
||||
return this.CurrentBudget?.Name ?? "";
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
ImportYNAB(formData: FormData) {
|
||||
return POST(
|
||||
"/budget/" + this.CurrentBudgetID + "/import/ynab",
|
||||
formData,
|
||||
);
|
||||
},
|
||||
async NewBudget(budgetName: string): Promise<void> {
|
||||
const result = await POST(
|
||||
"/budget/new",
|
||||
JSON.stringify({ name: budgetName })
|
||||
);
|
||||
const response = await result.json();
|
||||
const sessionStore = useSessionStore();
|
||||
return sessionStore.Budgets.get(this.CurrentBudgetID);
|
||||
},
|
||||
CurrentBudgetName(state): string {
|
||||
return this.CurrentBudget?.Name ?? "";
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
ImportYNAB(formData: FormData) {
|
||||
return POST(
|
||||
"/budget/" + this.CurrentBudgetID + "/import/ynab",
|
||||
formData
|
||||
);
|
||||
},
|
||||
async NewBudget(budgetName: string): Promise<void> {
|
||||
const result = await POST(
|
||||
"/budget/new",
|
||||
JSON.stringify({ name: budgetName })
|
||||
);
|
||||
const response = await result.json();
|
||||
|
||||
const sessionStore = useSessionStore();
|
||||
sessionStore.Budgets.set(response.ID, response);
|
||||
},
|
||||
async SetCurrentBudget(budgetid: string): Promise<void> {
|
||||
this.CurrentBudgetID = budgetid;
|
||||
const sessionStore = useSessionStore();
|
||||
sessionStore.Budgets.set(response.ID, response);
|
||||
},
|
||||
async SetCurrentBudget(budgetid: string): Promise<void> {
|
||||
this.CurrentBudgetID = budgetid;
|
||||
|
||||
if (budgetid == null)
|
||||
return
|
||||
if (budgetid == null) return;
|
||||
|
||||
await this.FetchBudget(budgetid);
|
||||
},
|
||||
async FetchBudget(budgetid: string) {
|
||||
const result = await GET("/budget/" + budgetid);
|
||||
const response = await result.json();
|
||||
this.MergeBudgetingData(response);
|
||||
},
|
||||
MergeBudgetingData(response: any) {
|
||||
const accounts = useAccountStore();
|
||||
for (const account of response.Accounts || []) {
|
||||
const existingAccount = accounts.Accounts.get(account.ID);
|
||||
account.Transactions = existingAccount?.Transactions ?? [];
|
||||
if(account.LastReconciled.Valid)
|
||||
account.LastReconciled.Time = new Date(account.LastReconciled.Time);
|
||||
accounts.Accounts.set(account.ID, account);
|
||||
}
|
||||
for (const category of response.Categories || []) {
|
||||
accounts.Categories.set(category.ID, category);
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
await this.FetchBudget(budgetid);
|
||||
},
|
||||
async FetchBudget(budgetid: string) {
|
||||
const result = await GET("/budget/" + budgetid);
|
||||
const response = await result.json();
|
||||
this.MergeBudgetingData(response);
|
||||
},
|
||||
MergeBudgetingData(response: any) {
|
||||
const accounts = useAccountStore();
|
||||
for (const account of response.Accounts || []) {
|
||||
const existingAccount = accounts.Accounts.get(account.ID);
|
||||
account.Transactions = existingAccount?.Transactions ?? [];
|
||||
if (account.LastReconciled.Valid)
|
||||
account.LastReconciled.Time = new Date(
|
||||
account.LastReconciled.Time
|
||||
);
|
||||
accounts.Accounts.set(account.ID, account);
|
||||
}
|
||||
for (const category of response.Categories || []) {
|
||||
accounts.Categories.set(category.ID, category);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,62 +1,74 @@
|
||||
import { StorageSerializers, useStorage } from '@vueuse/core';
|
||||
import { defineStore } from 'pinia'
|
||||
import { POST } from '../api';
|
||||
import { StorageSerializers, useStorage } from "@vueuse/core";
|
||||
import { defineStore } from "pinia";
|
||||
import { POST } from "../api";
|
||||
|
||||
interface State {
|
||||
Session: Session | null
|
||||
Budgets: Map<string, Budget>,
|
||||
Session: Session | null;
|
||||
Budgets: Map<string, Budget>;
|
||||
}
|
||||
|
||||
interface Session {
|
||||
Token: string
|
||||
User: string
|
||||
Token: string;
|
||||
User: string;
|
||||
}
|
||||
|
||||
export interface Budget {
|
||||
ID: string
|
||||
Name: string
|
||||
AvailableBalance: number
|
||||
IncomeCategoryID: string
|
||||
ID: string;
|
||||
Name: string;
|
||||
AvailableBalance: number;
|
||||
IncomeCategoryID: string;
|
||||
}
|
||||
|
||||
export const useSessionStore = defineStore('session', {
|
||||
state: () => ({
|
||||
Session: useStorage<Session | null>('session', null, undefined, { serializer: StorageSerializers.object }),
|
||||
Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>(), undefined, { serializer: StorageSerializers.map }),
|
||||
}),
|
||||
getters: {
|
||||
BudgetsList: (state) => [ ...state.Budgets.values() ],
|
||||
AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session?.Token}),
|
||||
LoggedIn: (state) => state.Session != null,
|
||||
},
|
||||
actions: {
|
||||
setTitle(title : string) {
|
||||
document.title = "Budgeteer - " + title;
|
||||
},
|
||||
loginSuccess(x : any) {
|
||||
this.Session = {
|
||||
User: x.User,
|
||||
Token: x.Token,
|
||||
}
|
||||
for (const budget of x.Budgets) {
|
||||
this.Budgets.set(budget.ID, budget);
|
||||
}
|
||||
},
|
||||
async login(login: any) {
|
||||
const response = await POST("/user/login", JSON.stringify(login));
|
||||
const result = await response.json();
|
||||
this.loginSuccess(result);
|
||||
return result;
|
||||
},
|
||||
async register(login : any) {
|
||||
const response = await POST("/user/register", JSON.stringify(login));
|
||||
const result = await response.json();
|
||||
this.loginSuccess(result);
|
||||
return result;
|
||||
},
|
||||
logout() {
|
||||
this.Session = null;
|
||||
this.Budgets.clear();
|
||||
},
|
||||
}
|
||||
})
|
||||
export const useSessionStore = defineStore("session", {
|
||||
state: () => ({
|
||||
Session: useStorage<Session | null>("session", null, undefined, {
|
||||
serializer: StorageSerializers.object,
|
||||
}),
|
||||
Budgets: useStorage<Map<string, Budget>>(
|
||||
"budgets",
|
||||
new Map<string, Budget>(),
|
||||
undefined,
|
||||
{ serializer: StorageSerializers.map }
|
||||
),
|
||||
}),
|
||||
getters: {
|
||||
BudgetsList: (state) => [...state.Budgets.values()],
|
||||
AuthHeaders: (state) => ({
|
||||
Authorization: "Bearer " + state.Session?.Token,
|
||||
}),
|
||||
LoggedIn: (state) => state.Session != null,
|
||||
},
|
||||
actions: {
|
||||
setTitle(title: string) {
|
||||
document.title = "Budgeteer - " + title;
|
||||
},
|
||||
loginSuccess(x: any) {
|
||||
this.Session = {
|
||||
User: x.User,
|
||||
Token: x.Token,
|
||||
};
|
||||
for (const budget of x.Budgets) {
|
||||
this.Budgets.set(budget.ID, budget);
|
||||
}
|
||||
},
|
||||
async login(login: any) {
|
||||
const response = await POST("/user/login", JSON.stringify(login));
|
||||
const result = await response.json();
|
||||
this.loginSuccess(result);
|
||||
return result;
|
||||
},
|
||||
async register(login: any) {
|
||||
const response = await POST(
|
||||
"/user/register",
|
||||
JSON.stringify(login)
|
||||
);
|
||||
const result = await response.json();
|
||||
this.loginSuccess(result);
|
||||
return result;
|
||||
},
|
||||
logout() {
|
||||
this.Session = null;
|
||||
this.Budgets.clear();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -2,27 +2,27 @@ import { useStorage } from "@vueuse/core";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
interface State {
|
||||
Menu: MenuSettings
|
||||
Menu: MenuSettings;
|
||||
}
|
||||
|
||||
interface MenuSettings {
|
||||
Show: boolean | null,
|
||||
Expand: boolean | null,
|
||||
Show: boolean | null;
|
||||
Expand: boolean | null;
|
||||
}
|
||||
|
||||
export const useSettingsStore = defineStore('settings', {
|
||||
state: () => ({
|
||||
Menu: useStorage<MenuSettings>('settings', {
|
||||
Show: null,
|
||||
Expand: false,
|
||||
}),
|
||||
}),
|
||||
actions: {
|
||||
toggleMenu() {
|
||||
this.Menu.Show = !this.Menu.Show;
|
||||
},
|
||||
toggleMenuSize() {
|
||||
this.Menu.Expand = !this.Menu.Expand;
|
||||
},
|
||||
}
|
||||
});
|
||||
export const useSettingsStore = defineStore("settings", {
|
||||
state: () => ({
|
||||
Menu: useStorage<MenuSettings>("settings", {
|
||||
Show: null,
|
||||
Expand: false,
|
||||
}),
|
||||
}),
|
||||
actions: {
|
||||
toggleMenu() {
|
||||
this.Menu.Show = !this.Menu.Show;
|
||||
},
|
||||
toggleMenuSize() {
|
||||
this.Menu.Expand = !this.Menu.Expand;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,105 +1,110 @@
|
||||
import { defineStore } from "pinia"
|
||||
import { defineStore } from "pinia";
|
||||
import { POST } from "../api";
|
||||
import { useAccountStore } from "./budget-account";
|
||||
|
||||
interface State {
|
||||
Transactions: Map<string, Transaction>
|
||||
Reconciling: boolean
|
||||
Transactions: Map<string, Transaction>;
|
||||
Reconciling: boolean;
|
||||
}
|
||||
|
||||
export interface Transaction {
|
||||
ID: string
|
||||
Date: Date
|
||||
TransferAccount: string
|
||||
CategoryGroup: string
|
||||
Category: string
|
||||
CategoryID: string | undefined
|
||||
Memo: string
|
||||
Status: string
|
||||
GroupID: string
|
||||
Payee: string
|
||||
PayeeID: string | undefined
|
||||
Amount: number
|
||||
Reconciled: boolean
|
||||
ID: string;
|
||||
Date: Date;
|
||||
TransferAccount: string;
|
||||
CategoryGroup: string;
|
||||
Category: string;
|
||||
CategoryID: string | undefined;
|
||||
Memo: string;
|
||||
Status: string;
|
||||
GroupID: string;
|
||||
Payee: string;
|
||||
PayeeID: string | undefined;
|
||||
Amount: number;
|
||||
Reconciled: boolean;
|
||||
}
|
||||
|
||||
export const useTransactionsStore = defineStore("budget/transactions", {
|
||||
state: (): State => ({
|
||||
Transactions: new Map<string, Transaction>(),
|
||||
Reconciling: false,
|
||||
}),
|
||||
getters: {
|
||||
ReconcilingBalance(state): number {
|
||||
const accountsStore = useAccountStore()
|
||||
let reconciledBalance = accountsStore.CurrentAccount!.ReconciledBalance;
|
||||
for (const transaction of this.TransactionsList) {
|
||||
if (transaction.Reconciled)
|
||||
reconciledBalance += transaction.Amount;
|
||||
}
|
||||
return reconciledBalance;
|
||||
},
|
||||
TransactionsList(state): Transaction[] {
|
||||
const accountsStore = useAccountStore()
|
||||
return accountsStore.CurrentAccount!.Transactions.map(x => {
|
||||
return this.Transactions.get(x)!
|
||||
});
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
AddTransactions(transactions: Array<Transaction>) {
|
||||
const transactionIds = [] as Array<string>;
|
||||
this.$patch(() => {
|
||||
for (const transaction of transactions) {
|
||||
transaction.Date = new Date(transaction.Date);
|
||||
this.Transactions.set(transaction.ID, transaction);
|
||||
transactionIds.push(transaction.ID);
|
||||
}
|
||||
});
|
||||
return transactionIds;
|
||||
},
|
||||
SetReconciledForAllTransactions(value: boolean) {
|
||||
for (const transaction of this.TransactionsList) {
|
||||
if (transaction.Status == "Reconciled")
|
||||
continue;
|
||||
state: (): State => ({
|
||||
Transactions: new Map<string, Transaction>(),
|
||||
Reconciling: false,
|
||||
}),
|
||||
getters: {
|
||||
ReconcilingBalance(state): number {
|
||||
const accountsStore = useAccountStore();
|
||||
let reconciledBalance =
|
||||
accountsStore.CurrentAccount!.ReconciledBalance;
|
||||
for (const transaction of this.TransactionsList) {
|
||||
if (transaction.Reconciled)
|
||||
reconciledBalance += transaction.Amount;
|
||||
}
|
||||
return reconciledBalance;
|
||||
},
|
||||
TransactionsList(state): Transaction[] {
|
||||
const accountsStore = useAccountStore();
|
||||
return accountsStore.CurrentAccount!.Transactions.map((x) => {
|
||||
return this.Transactions.get(x)!;
|
||||
});
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
AddTransactions(transactions: Array<Transaction>) {
|
||||
const transactionIds = [] as Array<string>;
|
||||
this.$patch(() => {
|
||||
for (const transaction of transactions) {
|
||||
transaction.Date = new Date(transaction.Date);
|
||||
this.Transactions.set(transaction.ID, transaction);
|
||||
transactionIds.push(transaction.ID);
|
||||
}
|
||||
});
|
||||
return transactionIds;
|
||||
},
|
||||
SetReconciledForAllTransactions(value: boolean) {
|
||||
for (const transaction of this.TransactionsList) {
|
||||
if (transaction.Status == "Reconciled") continue;
|
||||
|
||||
transaction.Reconciled = value;
|
||||
}
|
||||
},
|
||||
async SubmitReconcilation(reconciliationTransactionAmount: number) {
|
||||
const accountsStore = useAccountStore()
|
||||
const account = accountsStore.CurrentAccount!;
|
||||
const reconciledTransactions = this.TransactionsList.filter(x => x.Reconciled);
|
||||
for (const transaction of reconciledTransactions) {
|
||||
account.ReconciledBalance += transaction.Amount;
|
||||
transaction.Status = "Reconciled";
|
||||
transaction.Reconciled = false;
|
||||
}
|
||||
const result = await POST("/account/" + accountsStore.CurrentAccountID + "/reconcile", JSON.stringify({
|
||||
transactionIDs: reconciledTransactions.map(x => x.ID),
|
||||
reconciliationTransactionAmount: reconciliationTransactionAmount.toString(),
|
||||
}));
|
||||
const response = await result.json();
|
||||
const recTrans = response.ReconciliationTransaction;
|
||||
if (recTrans) {
|
||||
this.AddTransactions([recTrans]);
|
||||
account.Transactions.unshift(recTrans.ID);
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
this.$reset()
|
||||
},
|
||||
async saveTransaction(payload: string) {
|
||||
const accountsStore = useAccountStore()
|
||||
const result = await POST("/transaction/new", payload);
|
||||
const response = await result.json() as Transaction;
|
||||
this.AddTransactions([response]);
|
||||
accountsStore.CurrentAccount?.Transactions.unshift(response.ID);
|
||||
},
|
||||
async editTransaction(transactionid: string, payload: string) {
|
||||
const result = await POST("/transaction/" + transactionid, payload);
|
||||
const response = await result.json() as Transaction;
|
||||
this.AddTransactions([response]);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
transaction.Reconciled = value;
|
||||
}
|
||||
},
|
||||
async SubmitReconcilation(reconciliationTransactionAmount: number) {
|
||||
const accountsStore = useAccountStore();
|
||||
const account = accountsStore.CurrentAccount!;
|
||||
const reconciledTransactions = this.TransactionsList.filter(
|
||||
(x) => x.Reconciled
|
||||
);
|
||||
for (const transaction of reconciledTransactions) {
|
||||
account.ReconciledBalance += transaction.Amount;
|
||||
transaction.Status = "Reconciled";
|
||||
transaction.Reconciled = false;
|
||||
}
|
||||
const result = await POST(
|
||||
"/account/" + accountsStore.CurrentAccountID + "/reconcile",
|
||||
JSON.stringify({
|
||||
transactionIDs: reconciledTransactions.map((x) => x.ID),
|
||||
reconciliationTransactionAmount:
|
||||
reconciliationTransactionAmount.toString(),
|
||||
})
|
||||
);
|
||||
const response = await result.json();
|
||||
const recTrans = response.ReconciliationTransaction;
|
||||
if (recTrans) {
|
||||
this.AddTransactions([recTrans]);
|
||||
account.Transactions.unshift(recTrans.ID);
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
this.$reset();
|
||||
},
|
||||
async saveTransaction(payload: string) {
|
||||
const accountsStore = useAccountStore();
|
||||
const result = await POST("/transaction/new", payload);
|
||||
const response = (await result.json()) as Transaction;
|
||||
this.AddTransactions([response]);
|
||||
accountsStore.CurrentAccount?.Transactions.unshift(response.ID);
|
||||
},
|
||||
async editTransaction(transactionid: string, payload: string) {
|
||||
const result = await POST("/transaction/" + transactionid, payload);
|
||||
const response = (await result.json()) as Transaction;
|
||||
this.AddTransactions([response]);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}"
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
// this enables stricter inference for data properties on `this`
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
}
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
// this enables stricter inference for data properties on `this`
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
import path from 'path'
|
||||
import path from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
|
||||
],
|
||||
define: { 'process.env': {} },
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://10.0.0.162:1323/',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
/* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
|
||||
plugins: [
|
||||
vue(),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
|
||||
],
|
||||
define: { "process.env": {} },
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://10.0.0.162:1323/",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
/* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
|
||||
resolve: {
|
||||
extensions: [
|
||||
'.js',
|
||||
@ -37,4 +37,4 @@ export default defineConfig({
|
||||
]
|
||||
},
|
||||
*/
|
||||
})
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user