104 lines
4.2 KiB
Vue
104 lines
4.2 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, defineProps, onMounted, ref, watchEffect } from "vue";
|
||
import Currency from "../components/Currency.vue";
|
||
import { useBudgetsStore } from "../stores/budget";
|
||
import { useAccountStore } from "../stores/budget-account";
|
||
import { useSessionStore } from "../stores/session";
|
||
import Input from "../components/Input.vue";
|
||
|
||
const props = defineProps<{
|
||
budgetid: string,
|
||
year: string,
|
||
month: string,
|
||
}>()
|
||
|
||
const budgetsStore = useBudgetsStore();
|
||
const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);
|
||
|
||
const accountStore = useAccountStore();
|
||
const categoriesForMonth = accountStore.CategoriesForMonthAndGroup;
|
||
|
||
function GetCategories(group: string) {
|
||
return [...categoriesForMonth(selected.value.Year, selected.value.Month, group)];
|
||
};
|
||
|
||
const groupsForMonth = accountStore.CategoryGroupsForMonth;
|
||
const GroupsForMonth = computed(() => {
|
||
return [...groupsForMonth(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));
|
||
});
|
||
|
||
onMounted(() => {
|
||
useSessionStore().setTitle("Budget for " + selected.value.Month + "/" + selected.value.Year);
|
||
})
|
||
|
||
|
||
const expandedGroups = ref<Map<string, boolean>>(new Map<string, boolean>())
|
||
|
||
function toggleGroup(group: { Name: string, Expand: boolean }) {
|
||
expandedGroups.value.set(group.Name, !(expandedGroups.value.get(group.Name) ?? group.Expand))
|
||
}
|
||
|
||
function getGroupState(group: { Name: string, Expand: boolean }): boolean {
|
||
return expandedGroups.value.get(group.Name) ?? group.Expand;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
|
||
<span>Available balance: <Currency :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)" /></span>
|
||
<div>
|
||
<router-link
|
||
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + 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"
|
||
>>></router-link>
|
||
</div>
|
||
<div class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5" id="content">
|
||
<span class="hidden sm:block"></span>
|
||
<span class="hidden lg:block text-right">Leftover</span>
|
||
<span class="hidden sm:block text-right">Assigned</span>
|
||
<span class="hidden sm:block text-right">Activity</span>
|
||
<span class="hidden sm:block text-right">Available</span>
|
||
<template v-for="group in GroupsForMonth">
|
||
<a
|
||
class="text-lg font-bold col-span-2 sm:col-span-4 lg:col-span-5"
|
||
@click="toggleGroup(group)"
|
||
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</a>
|
||
<template v-for="category in GetCategories(group.Name)" v-if="getGroupState(group)">
|
||
<span class="whitespace-nowrap overflow-hidden">{{ category.Name }}</span>
|
||
<Currency :value="category.AvailableLastMonth" class="hidden lg:block" />
|
||
<Input type="number" v-model="category.Assigned" class="hidden sm:block mx-2 text-right" />
|
||
<Currency :value="category.Activity" class="hidden sm:block" />
|
||
<Currency :value="accountStore.GetCategoryAvailable(category)" />
|
||
</template>
|
||
</template>
|
||
</div>
|
||
</template>
|