95 lines
3.2 KiB
Vue
95 lines
3.2 KiB
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 { useAccountStore } from "../stores/budget-account";
|
|
|
|
interface Date {
|
|
Year: number,
|
|
Month: number,
|
|
}
|
|
|
|
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(),
|
|
}));
|
|
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}}
|
|
{{end}}*/
|
|
</script>
|
|
|
|
<template>
|
|
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
|
|
<div>
|
|
<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>
|
|
<th>Group</th>
|
|
<th>Category</th>
|
|
<th></th>
|
|
<th></th>
|
|
<th>Leftover</th>
|
|
<th>Assigned</th>
|
|
<th>Activity</th>
|
|
<th>Available</th>
|
|
</tr>
|
|
<tr v-for="category in Categories">
|
|
<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>
|
|
</tr>
|
|
</table>
|
|
</template> |