71 lines
3.1 KiB
Vue
71 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import Currency from "../components/Currency.vue"
|
|
import { useBudgetsStore } from "../stores/budget"
|
|
import { useAccountStore } from "../stores/budget-account"
|
|
import { useSettingsStore } from "../stores/settings"
|
|
|
|
const props = defineProps<{
|
|
budgetid: string,
|
|
accountid: string,
|
|
}>();
|
|
|
|
const ExpandMenu = computed(() => useSettingsStore().Menu.Expand);
|
|
|
|
const budgetStore = useBudgetsStore();
|
|
const CurrentBudgetName = computed(() => budgetStore.CurrentBudgetName);
|
|
const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);
|
|
|
|
const accountStore = useAccountStore();
|
|
const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
|
|
const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
|
|
const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
|
|
const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<span class="m-1 p-1 px-3 text-xl">
|
|
<router-link to="/dashboard">⌂</router-link>
|
|
{{CurrentBudgetName}}
|
|
</span>
|
|
<span class="bg-orange-200 rounded-lg m-1 p-1 px-3 flex flex-col">
|
|
<router-link :to="'/budget/'+budgetid+'/budgeting'">Budget</router-link><br />
|
|
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
|
|
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
|
|
</span>
|
|
<li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
|
|
<div class="flex flex-row justify-between font-bold">
|
|
<span>On-Budget Accounts</span>
|
|
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
|
|
</div>
|
|
<div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
|
|
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
|
|
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
|
|
</div>
|
|
</li>
|
|
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">
|
|
<div class="flex flex-row justify-between font-bold">
|
|
<span>Off-Budget Accounts</span>
|
|
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
|
|
</div>
|
|
<div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
|
|
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
|
|
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
|
|
</div>
|
|
</li>
|
|
<li class="bg-red-200 rounded-lg m-1 p-1 px-3">
|
|
Closed Accounts
|
|
</li>
|
|
<!--<li>
|
|
<router-link :to="'/budget/'+CurrentBudgetID+'/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/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
|
|
</li>
|
|
<!--<li><router-link to="/admin">Admin</router-link></li>-->
|
|
</div>
|
|
</template> |