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

Use vue's Composition API #10

Merged
jacob1123 merged 4 commits from vue-composition into master 2022-02-14 23:44:01 +01:00
Conversation 0 Commits 4 Files Changed 15 +302 -356
15 changed files with 302 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/api.ts Normal file
View File

@ -0,0 +1,26 @@
import { useSessionStore } from "./stores/session";
export const BASE_URL = "/api/v1"
export function GET(path: string) {
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,
})
}
export function DELETE(path: string) {
const sessionStore = useSessionStore();
return fetch(BASE_URL + path, {
method: "DELETE",
headers: sessionStore.AuthHeaders,
})
}

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

@ -1,6 +1,6 @@
<script lang="ts">
import { defineComponent, PropType } from "vue"
import { useAPI } from "../stores/api";
import { GET } from "../api";
import { useBudgetsStore } from "../stores/budget";
export interface Suggestion {
@ -42,9 +42,8 @@ export default defineComponent({
return;
}
const api = useAPI();
const budgetStore = useBudgetsStore();
api.GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
.then(x=>x.json())
.then(x => {
let suggestions = x || [];

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

@ -1,46 +1,40 @@
<script lang="ts">
import { mapState } from "pinia";
import { defineComponent } from "vue"
<script lang="ts" setup>
import { computed, ref } from "vue"
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
import { useAPI } from "../stores/api";
import { POST } from "../api";
import { useAccountStore } from "../stores/budget-account";
import { useSessionStore } from "../stores/session";
export default defineComponent({
data() {
return {
TransactionDate: new Date().toISOString().substring(0, 10),
Payee: undefined as Suggestion | undefined,
Category: undefined as Suggestion | undefined,
Memo: "",
Amount: 0
}
},
components: { Autocomplete, Currency, TransactionRow },
props: ["budgetid", "accountid"],
computed: {
...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
},
methods: {
saveTransaction(e : MouseEvent) {
const props = defineProps<{
budgetid: string
accountid: string
}>()
const TransactionDate = ref(new Date().toISOString().substring(0, 10));
const Payee = ref<Suggestion | undefined>(undefined);
const Category = ref<Suggestion | undefined>(undefined);
const Memo = ref("");
const Amount = ref(0);
function saveTransaction(e: MouseEvent) {
e.preventDefault();
const api = useAPI();
api.POST("/transaction/new", JSON.stringify({
budget_id: this.budgetid,
account_id: this.accountid,
date: this.$data.TransactionDate,
payee: this.$data.Payee,
category: this.$data.Category,
memo: this.$data.Memo,
amount: this.$data.Amount,
POST("/transaction/new", JSON.stringify({
budget_id: props.budgetid,
account_id: props.accountid,
date: TransactionDate.value,
payee: Payee.value,
category: Category.value,
memo: Memo.value,
amount: Amount,
state: "Uncleared"
}))
.then(x => x.json());
},
}
})
const accountStore = useAccountStore();
const CurrentAccount = accountStore.CurrentAccount;
const TransactionsList = accountStore.TransactionsList;
</script>
<template>
@ -73,16 +67,22 @@ export default defineComponent({
<input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
</td>
<td style="width: 80px;" class="text-right">
<input class="text-right block w-full border-b-2 border-black" type="currency" v-model="Amount" />
<input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="Amount"
/>
</td>
<td style="width: 20px;">
<input type="submit" @click="saveTransaction" value="Save" />
</td>
<td style="width: 20px;"></td>
</tr>
<TransactionRow v-for="(transaction, index) in TransactionsList"
<TransactionRow
v-for="(transaction, index) in TransactionsList"
:transaction="transaction"
:index="index" />
:index="index"
/>
</table>
</template>

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

@ -1,10 +1,8 @@
<script lang="ts">
import { defineComponent } from "vue";
<script lang="ts" setup>
import { onMounted } from 'vue';
export default defineComponent({
mounted() {
onMounted(() => {
document.title = "Budgeteer - Admin";
},
})
</script>

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

@ -1,20 +1,25 @@
<script lang="ts">
import { mapState } from "pinia"
import { defineComponent } from "vue"
<script lang="ts" setup>
import Currency from "../components/Currency.vue"
import { useBudgetsStore } from "../stores/budget"
import { useAccountStore } from "../stores/budget-account"
import { useSettingsStore } from "../stores/settings"
export default defineComponent({
props: ["budgetid", "accountid"],
components: { Currency },
computed: {
...mapState(useSettingsStore, ["ExpandMenu"]),
...mapState(useBudgetsStore, ["CurrentBudgetName", "CurrentBudgetID"]),
...mapState(useAccountStore, ["OnBudgetAccounts", "OnBudgetAccountsBalance", "OffBudgetAccounts", "OffBudgetAccountsBalance"])
}
})
const props = defineProps<{
budgetid: string,
accountid: string,
}>();
const ExpandMenu = useSettingsStore().Menu.Expand;
const budgetStore = useBudgetsStore();
const CurrentBudgetName = budgetStore.CurrentBudgetName;
const CurrentBudgetID = budgetStore.CurrentBudgetID;
const accountStore = useAccountStore();
const OnBudgetAccounts = accountStore.OnBudgetAccounts;
const OffBudgetAccounts = accountStore.OffBudgetAccounts;
const OnBudgetAccountsBalance = accountStore.OnBudgetAccountsBalance;
const OffBudgetAccountsBalance = accountStore.OffBudgetAccountsBalance;
</script>
<template>

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

@ -1,68 +1,48 @@
<script lang="ts">
import { mapState } from "pinia";
import { defineComponent, PropType } from "vue";
<script lang="ts" setup>
import { computed, defineProps, onMounted, PropType, watch, watchEffect } from "vue";
import Currency from "../components/Currency.vue";
import { useBudgetsStore } from "../stores/budget";
import { Category, useAccountStore } from "../stores/budget-account";
import { useAccountStore } from "../stores/budget-account";
interface Date {
Year: number,
Month: number,
}
export default defineComponent({
props: {
budgetid: {} as PropType<string>,
year: {} as PropType<number>,
month: {} as PropType<number>,
},
computed: {
...mapState(useBudgetsStore, ["CurrentBudgetID"]),
Categories() : Category[] {
const accountStore = useAccountStore();
return [...accountStore.CategoriesForMonth(this.selected.Year, this.selected.Month)];
},
previous() : Date {
return {
Year: new Date(this.selected.Year, this.selected.Month - 1, 1).getFullYear(),
Month: new Date(this.selected.Year, this.selected.Month - 1, 1).getMonth(),
};
},
current() : Date {
return {
const props = defineProps<{
budgetid: string,
year: string,
month: string,
}>()
const budgetsStore = useBudgetsStore();
const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
const categoriesForMonth = useAccountStore().CategoriesForMonth;
const Categories = computed(() => {
return [...categoriesForMonth(selected.value.Year, selected.value.Month)];
});
const previous = computed(() => ({
Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(),
Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(),
}));
const current = computed(() => ({
Year: new Date().getFullYear(),
Month: new Date().getMonth(),
};
},
selected() : Date {
return {
Year: this.year ?? this.current.Year,
Month: Number(this.month ?? this.current.Month) + 1
}
},
next() : Date {
return {
Year: new Date(this.selected.Year, Number(this.month) + 1, 1).getFullYear(),
Month: new Date(this.selected.Year, Number(this.month) + 1, 1).getMonth(),
};
}
},
mounted() : Promise<void> {
document.title = "Budgeteer - Budget for " + this.selected.Month + "/" + this.selected.Year;
return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.selected.Year, this.selected.Month);
},
watch: {
year() {
if (this.year != undefined && this.month != undefined)
return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.year, this.month);
},
month() {
if (this.year != undefined && this.month != undefined)
return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.year, this.month);
},
},
components: { Currency }
})
}));
const selected = computed(() => ({
Year: Number(props.year) ?? current.value.Year,
Month: Number(props.month ?? current.value.Month)
}));
const next = computed(() => ({
Year: new Date(selected.value.Year, Number(props.month) + 1, 1).getFullYear(),
Month: new Date(selected.value.Year, Number(props.month) + 1, 1).getMonth(),
}));
watchEffect(() => {
if (props.year != undefined && props.month != undefined)
return useAccountStore().FetchMonthBudget(props.budgetid ?? "", Number(props.year), Number(props.month));
});
/*{{define "title"}}
{{printf "Budget for %s %d" .Date.Month .Date.Year}}
@ -70,7 +50,7 @@ export default defineComponent({
</script>
<template>
<h1>Budget for {{ selected.Month }}/{{ selected.Year }}</h1>
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
<div>
<router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"

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

@ -1,17 +1,13 @@
<script lang="ts">
<script lang="ts" setup>
import NewBudget from '../dialogs/NewBudget.vue';
import Card from '../components/Card.vue';
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import { useSessionStore } from '../stores/session';
export default defineComponent({
props: ["budgetid"],
components: { NewBudget, Card },
computed: {
...mapState(useSessionStore, ["BudgetsList"]),
}
})
const props = defineProps<{
budgetid: string,
}>();
const BudgetsList = useSessionStore().BudgetsList;
</script>
<template>

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

@ -1,9 +1,4 @@
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
})
<script lang="ts" setup>
</script>
<template>

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

@ -1,46 +1,48 @@
<script lang="ts">
import { defineComponent } from "vue";
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useSessionStore } from "../stores/session";
export default defineComponent({
data() {
return {
error: "",
login: {
user: "",
password: ""
},
showPassword: false
}
},
mounted() {
const error = ref("");
const login = ref({ user: "", password: "" });
onMounted(() => {
document.title = "Budgeteer - Login";
},
methods: {
formSubmit(e : MouseEvent) {
});
function formSubmit(e: MouseEvent) {
e.preventDefault();
useSessionStore().login(this.$data.login)
useSessionStore().login(login)
.then(x => {
this.$data.error = "";
this.$router.replace("/dashboard");
error.value = "";
useRouter().replace("/dashboard");
})
.catch(x => this.$data.error = "The entered credentials are invalid!");
.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.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" />
<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!
New user?
<router-link to="/register">Register</router-link>instead!
</p>
</template>

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

@ -1,31 +1,20 @@
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { useSessionStore } from '../stores/session';
export default defineComponent({
data() {
return {
showPassword: false,
error: "",
login: {
email: "",
password: "",
name: "",
}
}
},
methods: {
formSubmit (e : FormDataEvent) {
const error = ref("");
const login = ref({ email: "", password: "", name: "" });
const showPassword = ref(false);
function formSubmit(e: FormDataEvent) {
e.preventDefault();
useSessionStore().register(this.$data.login)
.then(() => this.$data.error = "")
.catch(() => this.$data.error = "Something went wrong!");
useSessionStore().register(login)
.then(() => error.value = "")
.catch(() => error.value = "Something went wrong!");
// TODO display invalidCredentials
// TODO redirect to dashboard on success
}
}
})
</script>
<template>
@ -38,30 +27,35 @@ export default defineComponent({
<v-text-field v-model="login.name" type="text" label="Name" />
</v-col>
<v-col cols="6">
<v-text-field v-model="login.password" label="Password"
<v-text-field
v-model="login.password"
label="Password"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = showPassword"
:error-message="error"
error-count="2"
error />
error
/>
</v-col>
<v-col cols="6">
<v-text-field v-model="login.password" label="Repeat password"
<v-text-field
v-model="login.password"
label="Repeat password"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = showPassword"
:error-message="error"
error-count="2"
error />
error
/>
</v-col>
</v-row>
<div class="form-group">
{{ error }}
</div>
<div class="form-group">{{ error }}</div>
<v-btn type="submit" @click="formSubmit">Register</v-btn>
<p>
Existing user? <router-link to="/login">Login</router-link> instead!
Existing user?
<router-link to="/login">Login</router-link>instead!
</p>
</v-container>
</template>

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

@ -1,67 +1,56 @@
<script lang="ts">
import { defineComponent } from "vue"
import { useAPI } from "../stores/api";
<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import { DELETE, POST } from "../api";
import { useBudgetsStore } from "../stores/budget";
import { useSessionStore } from "../stores/session";
export default defineComponent({
data() {
return {
transactionsFile: undefined as File | undefined,
assignmentsFile: undefined as File | undefined
}
},
computed: {
filesIncomplete() : boolean {
return this.$data.transactionsFile == undefined || this.$data.assignmentsFile == undefined;
}
},
mounted() {
const transactionsFile = ref<File | undefined>(undefined);
const assignmentsFile = ref<File | undefined>(undefined);
const filesIncomplete = computed(() => transactionsFile.value == undefined || assignmentsFile.value == undefined);
onMounted(() => {
document.title = "Budgeteer - Settings";
},
methods: {
gotAssignments(e : Event) {
});
function gotAssignments(e: Event) {
const input = (<HTMLInputElement>e.target);
if (input.files != null)
this.$data.assignmentsFile = input.files[0];
},
gotTransactions(e : Event) {
assignmentsFile.value = input.files[0];
}
function gotTransactions(e: Event) {
const input = (<HTMLInputElement>e.target);
if (input.files != null)
this.$data.transactionsFile = input.files[0];
},
deleteBudget() {
transactionsFile.value = input.files[0];
};
function deleteBudget() {
const currentBudgetID = useBudgetsStore().CurrentBudgetID;
if (currentBudgetID == null)
return;
const api = useAPI();
api.DELETE("/budget/" + currentBudgetID);
DELETE("/budget/" + currentBudgetID);
const budgetStore = useSessionStore();
budgetStore.Budgets.delete(currentBudgetID);
this.$router.push("/")
},
clearBudget() {
useRouter().push("/")
};
function clearBudget() {
const currentBudgetID = useBudgetsStore().CurrentBudgetID;
const api = useAPI();
api.POST("/budget/" + currentBudgetID + "/settings/clear", null)
},
cleanNegative() {
POST("/budget/" + currentBudgetID + "/settings/clear", null)
};
function cleanNegative() {
// <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
},
ynabImport() {
if (this.$data.transactionsFile == undefined || this.$data.assignmentsFile == undefined)
};
function ynabImport() {
if (transactionsFile.value == undefined || assignmentsFile.value == undefined)
return
let formData = new FormData();
formData.append("transactions", this.$data.transactionsFile);
formData.append("assignments", this.$data.assignmentsFile);
formData.append("transactions", transactionsFile.value);
formData.append("assignments", assignmentsFile.value);
const budgetStore = useBudgetsStore();
budgetStore.ImportYNAB(formData);
}
}
})
};
</script>
<template>
@ -126,10 +115,7 @@ export default defineComponent({
</label>
<v-card-actions class="justify-center">
<v-btn
:disabled="filesIncomplete"
@click="ynabImport"
>Importieren</v-btn>
<v-btn :disabled="filesIncomplete" @click="ynabImport">Importieren</v-btn>
</v-card-actions>
</v-card>
</v-col>

28
web/src/stores/api.ts
View File

@ -1,28 +0,0 @@
import { defineStore } from "pinia";
import { useSessionStore } from "./session";
export const useAPI = defineStore("api", {
actions: {
GET(path : string) {
const sessionStore = useSessionStore();
return fetch("/api/v1" + path, {
headers: sessionStore.AuthHeaders,
})
},
POST(path : string, body : FormData | string | null) {
const sessionStore = useSessionStore();
return fetch("/api/v1" + path, {
method: "POST",
headers: sessionStore.AuthHeaders,
body: body,
})
},
DELETE(path : string) {
const sessionStore = useSessionStore();
return fetch("/api/v1" + path, {
method: "DELETE",
headers: sessionStore.AuthHeaders,
})
},
}
});

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

@ -1,5 +1,5 @@
import { defineStore } from "pinia"
import { useAPI } from "./api";
import { GET } from "../api";
import { useSessionStore } from "./session";
interface State {
@ -81,14 +81,12 @@ export const useAccountStore = defineStore("budget/account", {
await this.FetchAccount(accountid);
},
async FetchAccount(accountid : string) {
const api = useAPI();
const result = await api.GET("/account/" + accountid + "/transactions");
const result = await GET("/account/" + accountid + "/transactions");
const response = await result.json();
this.Transactions = response.Transactions;
},
async FetchMonthBudget(budgetid : string, year : number, month : number) {
const api = useAPI();
const result = await api.GET("/budget/" + budgetid + "/" + year + "/" + month);
const result = await GET("/budget/" + budgetid + "/" + year + "/" + month);
const response = await result.json();
this.addCategoriesForMonth(year, month, response.Categories);
},

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

@ -1,5 +1,5 @@
import { defineStore } from "pinia";
import { useAPI } from "./api";
import { GET, POST } from "../api";
import { useAccountStore } from "./budget-account";
import { Budget, useSessionStore } from "./session";
@ -25,15 +25,13 @@ export const useBudgetsStore = defineStore('budget', {
},
actions: {
ImportYNAB(formData: FormData) {
const api = useAPI();
return api.POST(
return POST(
"/budget/" + this.CurrentBudgetID + "/import/ynab",
formData,
);
},
async NewBudget(budgetName: string): Promise<void> {
const api = useAPI();
const result = await api.POST(
const result = await POST(
"/budget/new",
JSON.stringify({ name: budgetName })
);
@ -51,8 +49,7 @@ export const useBudgetsStore = defineStore('budget', {
await this.FetchBudget(budgetid);
},
async FetchBudget(budgetid: string) {
const api = useAPI();
const result = await api.GET("/budget/" + budgetid);
const result = await GET("/budget/" + budgetid);
const response = await result.json();
for (const account of response.Accounts || []) {
useAccountStore().Accounts.set(account.ID, account);

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

@ -1,6 +1,6 @@
import { StorageSerializers, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia'
import { useAPI } from './api';
import { POST } from '../api';
interface State {
Session: Session | null
@ -40,14 +40,12 @@ export const useSessionStore = defineStore('session', {
this.Budgets = x.Budgets;
},
async login(login: any) {
const api = useAPI();
const response = await api.POST("/user/login", JSON.stringify(login));
const response = await POST("/user/login", JSON.stringify(login));
const result = await response.json();
return this.loginSuccess(result);
},
async register(login : any) {
const api = useAPI();
const response = await api.POST("/user/register", JSON.stringify(login));
const response = await POST("/user/register", JSON.stringify(login));
const result = await response.json();
return this.loginSuccess(result);
},