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

Extract BudgetingSummary

Browse Source
This commit is contained in:
Jan Bader 2022-09-11 20:26:13 +00:00
parent b2542fa6d1
commit ca964f1c5f
2 changed files with 67 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/components/BudgetingSummary.vue Normal file
View File

@ -0,0 +1,65 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { useAccountStore } from '../stores/budget-account';
import Currency from './Currency.vue';
const props = defineProps<{
year:number,
month:number
}>();
const accountStore = useAccountStore();
const budgeted = computed(() => accountStore.GetBudgeted(props.year, props.month))
</script>
<template>
<h1>Budget for {{ month + 1 }}/{{ year }}</h1>
<table class="inline-block">
<tr>
<td>
Available last month:
</td>
<td class="text-right">
<Currency :value="accountStore.Available-accountStore.OverspentLastMonth+budgeted.Assigned+budgeted.Deassigned" />
</td>
</tr>
<tr>
<td>
Overspent last month:
</td>
<td class="text-right">
<Currency :value="accountStore.OverspentLastMonth" />
</td>
</tr>
<tr>
<td>
Budgeted this month:
</td>
<td class="text-right">
<Currency :value="budgeted.Assigned+budgeted.Deassigned" />
</td>
<td class="text-sm pl-2">
= <Currency :value="budgeted.Assigned" /> - <Currency :value="-budgeted.Deassigned" />
</td>
</tr>
<tr class="font-bold">
<td class="py-2">
Available balance:
</td>
<td class="text-right">
<Currency :value="accountStore.Available" />
</td>
</tr>
<tr>
<td>
Activity:
</td>
<td class="text-right">
<Currency :value="budgeted.Income + budgeted.Spent" />
</td>
<td class="text-sm pl-2">
= <Currency :value="budgeted.Income" /> - <Currency :value="-1 * budgeted.Spent" />
</td>
</tr>
</table>
</template>

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

@ -7,6 +7,7 @@ import { useSessionStore } from "../stores/session";
import Input from "../components/Input.vue"; import Input from "../components/Input.vue";
import { POST } from "../api"; import { POST } from "../api";
import CreateCategory from "../dialogs/CreateCategory.vue"; import CreateCategory from "../dialogs/CreateCategory.vue";
import BudgetingSummary from "../components/BudgetingSummary.vue";
const props = defineProps<{ const props = defineProps<{
budgetid: string, budgetid: string,
@ -72,60 +73,10 @@ function assignedChanged(e : Event, category : Category){
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})); JSON.stringify({Assigned: category.Assigned}));
} }
const budgeted = computed(() => accountStore.GetBudgeted(selected.value.Year, selected.value.Month))
</script> </script>
<template> <template>
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1> <BudgetingSummary :year="selected.Year" :month="selected.Month" />
<table class="inline-block">
<tr>
<td>
Available last month:
</td>
<td class="text-right">
<Currency :value="accountStore.Available-accountStore.OverspentLastMonth+budgeted.Assigned+budgeted.Deassigned" />
</td>
</tr>
<tr>
<td>
Overspent last month:
</td>
<td class="text-right">
<Currency :value="accountStore.OverspentLastMonth" />
</td>
</tr>
<tr>
<td>
Budgeted this month:
</td>
<td class="text-right">
<Currency :value="budgeted.Assigned+budgeted.Deassigned" />
</td>
<td class="text-sm pl-2">
= <Currency :value="budgeted.Assigned" /> - <Currency :value="-budgeted.Deassigned" />
</td>
</tr>
<tr class="font-bold">
<td class="py-2">
Available balance:
</td>
<td class="text-right">
<Currency :value="accountStore.Available" />
</td>
</tr>
<tr>
<td>
Activity:
</td>
<td class="text-right">
<Currency :value="budgeted.Income + budgeted.Spent" />
</td>
<td class="text-sm pl-2">
= <Currency :value="budgeted.Income" /> - <Currency :value="-1 * budgeted.Spent" />
</td>
</tr>
</table>
<div> <div>
<router-link <router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month" :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"