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

Run prettier
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Jan Bader
2022-03-15 12:49:53 +00:00
parent d8d713f841
commit 61a534610f
42 changed files with 1485 additions and 1187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,47 +69,85 @@ function getGroupState(group: { Name: string, Expand: boolean }): boolean {
function assignedChanged(e : Event, category : Category){
const target = e.target as HTMLInputElement;
const value = target.valueAsNumber;
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}));
}
</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"
>&lt;&lt;</router-link>&nbsp;
<router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
>Current Month</router-link>&nbsp;
<router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
>&gt;&gt;</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">
<span
class="text-lg font-bold mt-2"
@click="toggleGroup(group)"
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span>
<Currency :value="group.AvailableLastMonth" class="hidden lg:block mt-2" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<Currency :value="group.Assigned" class="hidden sm:block mx-2 mt-2 text-right" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<Currency :value="group.Activity" class="hidden sm:block mt-2" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<Currency :value="group.Available" class="mt-2" positive-class="text-slate-500" negative-class="text-red-700 dark:text-red-400" />
<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" @input="(evt) => assignedChanged(evt, category)" class="hidden sm:block mx-2 text-right" />
<Currency :value="category.Activity" class="hidden sm:block" />
<Currency :value="accountStore.GetCategoryAvailable(category)" />
</template>
</template>
</div>
<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"
>&lt;&lt;</router-link
>&nbsp;
<router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
>Current Month</router-link
>&nbsp;
<router-link
:to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
>&gt;&gt;</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">
<span
class="text-lg font-bold mt-2"
@click="toggleGroup(group)"
>{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span
>
<Currency
:value="group.AvailableLastMonth"
class="hidden lg:block mt-2"
positive-class="text-slate-500"
negative-class="text-red-700 dark:text-red-400" />
<Currency
:value="group.Assigned"
class="hidden sm:block mx-2 mt-2 text-right"
positive-class="text-slate-500"
negative-class="text-red-700 dark:text-red-400" />
<Currency
:value="group.Activity"
class="hidden sm:block mt-2"
positive-class="text-slate-500"
negative-class="text-red-700 dark:text-red-400" />
<Currency
:value="group.Available"
class="mt-2"
positive-class="text-slate-500"
negative-class="text-red-700 dark:text-red-400" />
<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"
@input="(evt) => assignedChanged(evt, category)"
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>