budgeteer/web/src/pages/BudgetSidebar.vue
2022-02-04 19:54:32 +00:00

46 lines
2.0 KiB
Vue

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
props: ['budgetid', 'accountid'],
})
</script>
<template>
<span class="text-xl">
<router-link to="/dashboard"></router-link>
{{$store.getters.CurrentBudget.Name}}
</span>
<div class="flex flex-col">
<span class="bg-orange-200 rounded-lg m-1 p-1 px-3"><router-link :to="'/budget/'+budgetid">Budget</router-link></span>
<li class="bg-orange-200 rounded-lg m-1 p-1 px-3">Reports (Coming Soon)</li>
<!--<li><router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/all-accounts'">All Accounts</router-link></li>-->
<li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
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>
</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>
</div>
</li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">
Closed Accounts
</li>
<!--<li>
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/accounts'">Edit accounts</router-link>
</li>-->
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">
+ Add Account
</li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">
<router-link :to="'/budget/'+$store.getters.CurrentBudget.ID+'/settings'">Budget-Settings</router-link>
</li>
<!--<li><router-link to="/admin">Admin</router-link></li>-->
</div>
</template>