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

Remove vuex

Browse Source
This commit is contained in:
Jan Bader
2022-02-10 15:49:21 +00:00
parent 8b0e368d58
commit c693625e34
21 changed files with 322 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,53 @@
<script lang="ts">
import { mapState } from "pinia";
import { defineComponent } from "vue";
import { FETCH_MONTH_BUDGET } from "../store/action-types";
import { TITLE } from "../store/mutation-types";
import Currency from "../components/Currency.vue";
import { useBudgetsStore } from "../stores/budget";
import { Category, useAccountStore } from "../stores/budget-account";
interface Date {
Year:Number,
Month:Number,
Year: Number,
Month: Number,
}
export default defineComponent({
mounted() {
this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
document.title = "Budgeteer - Budget for " + this.month + " " + this.year;
return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
},
watch: {
year() {
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
},
month() {
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
},
},
props: ["budgetid", "year", "month"],
computed: {
Categories() {
return this.$store.getters.Categories(this.year, this.month);
...mapState(useBudgetsStore, ["CurrentBudgetID"]),
Categories() : IterableIterator<Category> | undefined {
return useAccountStore().Categories(this.year, this.month);
},
previous() : Date {
previous(): Date {
return {
Year: new Date(this.year, this.month - 1, 1).getFullYear(),
Month: new Date(this.year, this.month - 1, 1).getMonth(),
};
},
current() : Date {
current(): Date {
return {
Year: new Date().getFullYear(),
Month: new Date().getMonth(),
};
},
selected() : Date {
selected(): Date {
return {
Year: this.year,
Month: Number(this.month) + 1
}
},
next() : Date {
next(): Date {
return {
Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
@ -61,13 +63,17 @@ export default defineComponent({
</script>
<template>
<h1>
Budget for {{selected.Month}}/{{selected.Year}}
</h1>
<h1>Budget for {{ selected.Month }}/{{ selected.Year }}</h1>
<div>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + previous.Year + '/' + previous.Month">Previous Month</router-link> -
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + current.Year + '/' + current.Month">Current Month</router-link> -
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + next.Year + '/' + next.Month">Next Month</router-link>
<router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
>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"
>Next Month</router-link>
</div>
<table class="container col-lg-12" id="content">
<tr>
@ -81,14 +87,22 @@ export default defineComponent({
<th>Available</th>
</tr>
<tr v-for="category in Categories">
<td>{{category.Group}}</td>
<td>{{category.Name}}</td>
<td>{{ category.Group }}</td>
<td>{{ category.Name }}</td>
<td></td>
<td></td>
<td class="text-right"><Currency :value="category.AvailableLastMonth" /></td>
<td class="text-right"><Currency :value="category.Assigned" /></td>
<td class="text-right"><Currency :value="category.Activity" /></td>
<td class="text-right"><Currency :value="category.Available" /></td>
<td class="text-right">
<Currency :value="category.AvailableLastMonth" />
</td>
<td class="text-right">
<Currency :value="category.Assigned" />
</td>
<td class="text-right">
<Currency :value="category.Activity" />
</td>
<td class="text-right">
<Currency :value="category.Available" />
</td>
</tr>
</table>
</template>