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

Use Numeric in JSON output

Browse Source
This commit is contained in:
Jan Bader
2022-02-06 22:12:48 +00:00
parent 5763409aa8
commit 487aa89f18
11 changed files with 258 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/Currency.vue Normal file
View File

@ -0,0 +1,12 @@
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: ["value"]
})
</script>
<template>
<span :class="value < 0 ? 'negative' : ''">{{value.toLocaleString(undefined, {minimumFractionDigits: 2,})}} €</span>
</template>

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

@ -14,11 +14,6 @@ export default defineComponent({
},
components: { Autocomplete },
props: ["budgetid", "accountid"],
watch: {
Payee() {
console.log(this.$data.Payee);
}
},
methods: {
saveTransaction(e : MouseEvent) {
e.preventDefault();
@ -34,8 +29,7 @@ export default defineComponent({
}),
headers: this.$store.getters.AuthHeaders,
})
.then(x => x.json())
.then(x => console.log(x));
.then(x => x.json());
},
}
})

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

@ -1,8 +1,10 @@
<script lang="ts">
import { defineComponent } from "vue"
import Currency from "../components/Currency.vue"
export default defineComponent({
props: ['budgetid', 'accountid'],
props: ["budgetid", "accountid"],
components: { Currency }
})
</script>
@ -21,14 +23,14 @@ export default defineComponent({
On-Budget Accounts
<div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<span :class="account.Balance.Int < 0 ? 'negative' : ''">{{(account.Balance.Int / 100).toLocaleString(undefined, {minimumFractionDigits: 2,})}} €</span>
<Currency :value="account.Balance" />
</div>
</li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">
Off-Budget Accounts
<div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<span :class="account.Balance.Int < 0 ? 'negative' : ''">{{account.Balance.Int / 100}}</span>
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<Currency :value="account.Balance" />
</div>
</li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">

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

@ -1,38 +1,53 @@
<script lang="ts">
import { defineComponent } from "vue";
import { FETCH_MONTH_BUDGET } from "../store/action-types";
import { TITLE } from "../store/mutation-types";
import Currency from "../components/Currency.vue";
export default defineComponent({
mounted() {
this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year)
this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
},
watch: {
year() {
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
},
month() {
return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
},
},
props: ["budgetid", "year", "month"],
data() {
return {
Year: this.year || new Date().getFullYear(),
Month: this.month || new Date().getMonth()
}
Year: (this.year || new Date().getFullYear()) as number,
Month: (this.month || new Date().getMonth()) as number
};
},
computed: {
Categories() {
return this.$store.getters.Categories(this.$data.Year, this.$data.Month);
},
previous() {
return {
Year: new Date(this.$data.Year, this.$data.Month - 1, 1).getFullYear(),
Month: new Date(this.$data.Year, this.$data.Month - 1, 1).getMonth(),
}
};
},
current() {
return {
Year: new Date().getFullYear(),
Month: new Date().getMonth(),
}
};
},
next() {
return {
Year: new Date(this.$data.Year, this.$data.Month + 1, 1).getFullYear(),
Month: new Date(this.$data.Year, this.$data.Month + 1, 1).getMonth(),
}
};
}
}
},
components: { Currency }
})
/*{{define "title"}}
@ -42,7 +57,7 @@ export default defineComponent({
<template>
<h1>
Budget for {{current.Month}}/{{current.Year}}
Budget for {{Month}}/{{Year}}
</h1>
<div>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + previous.Year + '/' + previous.Month">Previous Month</router-link> -
@ -60,15 +75,15 @@ export default defineComponent({
<th>Activity</th>
<th>Available</th>
</tr>
<tr v-for="category in $store.getters.Categories(2022, 1)">
<tr v-for="category in Categories">
<td>{{category.Group}}</td>
<td>{{category.Name}}</td>
<td></td>
<td></td>
<td>{{category.AvailableLastMonth}}</td>
<td>{{category.Assigned}}</td>
<td>{{category.Activity}}</td>
<td>{{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>

1
web/src/store/action-types.ts
View File

@ -5,6 +5,7 @@ export const NEW_BUDGET = "New budget";
export const SET_CURRENT_BUDGET = "Set current budget";
export const SET_CURRENT_ACCOUNT = "Set current account";
export const FETCH_BUDGET = "Fetch budget";
export const FETCH_MONTH_BUDGET = "Fetch budget for month";
export const LOGIN = 'Log in';
export const REGISTER = 'Register';
export const FETCH_ACCOUNT = "Fetch account";

33
web/src/store/budget/index.ts
View File

@ -1,11 +1,12 @@
import { Module } from "vuex";
import { FETCH_ACCOUNT, FETCH_BUDGET, SET_CURRENT_ACCOUNT } from "../action-types";
import { FETCH_ACCOUNT, FETCH_BUDGET, FETCH_MONTH_BUDGET, SET_CURRENT_ACCOUNT } from "../action-types";
import { LOGOUT, TITLE } from "../mutation-types";
export interface BudgetState {
Accounts: Map<string, Account>,
CurrentAccountID?: string,
Categories: Map<string, Category>,
Months: Map<number, Map<number, Map<string, Category>>>,
Transactions: [],
Assignments: []
}
@ -28,6 +29,7 @@ export const budgetStore : Module<BudgetState, any> = {
state: {
Accounts: new Map<string, Account>(),
CurrentAccountID: undefined,
Months: new Map<number, Map<number, Map<string, Category>>>(),
Categories: new Map<string, Category>(),
Transactions: [],
Assignments: []
@ -61,6 +63,17 @@ export const budgetStore : Module<BudgetState, any> = {
addCategory(state, category) {
state.Categories.set(category.ID, category);
},
addCategoriesForMonth(state, {year, month, categories}) {
const yearMap = state.Months.get(year) || new Map<number, Map<string, Category>>();
state.Months.set(year, yearMap);
const monthMap = yearMap.get(month) || new Map<string, Category>();
yearMap.set(month, monthMap);
for (const category of categories){
monthMap.set(category.ID, category);
}
},
setCurrentAccountID(state, accountid) {
state.CurrentAccountID = accountid;
},
@ -74,7 +87,8 @@ export const budgetStore : Module<BudgetState, any> = {
return state.Accounts.values();
},
Categories: (state) => (year : number, month : number) => {
return state.Categories.values();
const yearMap = state.Months.get(year);
return yearMap?.get(month)?.values();
},
CurrentAccount(state) : Account | undefined {
if (state.CurrentAccountID == null)
@ -113,5 +127,20 @@ export const budgetStore : Module<BudgetState, any> = {
const response = await result.json();
commit("setTransactions", response.Transactions);
},
async [FETCH_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
const result = await dispatch("GET", { path: "/budget/" + budgetid });
const response = await result.json();
for (const account of response.Accounts || []) {
commit("addAccount", account);
}
for (const category of response.Categories || []) {
commit("addCategory", category);
}
},
async [FETCH_MONTH_BUDGET]({state, commit, dispatch, rootState }, {budgetid, month, year}) {
const result = await dispatch("GET", { path: "/budget/" + budgetid + "/" + year + "/" + month});
const response = await result.json();
commit("addCategoriesForMonth", {year, month, categories: response.Categories})
}
}
}

10
web/src/store/index.ts
View File

@ -130,16 +130,6 @@ export const store = createStore<State>({
await dispatch(FETCH_BUDGET, budgetid)
},
async [FETCH_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
const result = await dispatch("GET", { path: "/budget/" + budgetid });
const response = await result.json();
for (const account of response.Accounts || []) {
commit("addAccount", account);
}
for (const category of response.Categories || []) {
commit("addCategory", category);
}
},
},
getters: {
Budgets(state) {