106 lines
3.9 KiB
Vue
106 lines
3.9 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import Currency from "../components/Currency.vue";
|
|
import { useBudgetsStore } from "../stores/budget";
|
|
import { Account, useAccountStore } from "../stores/budget-account";
|
|
import { useSettingsStore } from "../stores/settings";
|
|
import AccountWithReconciled from "../components/AccountWithReconciled.vue";
|
|
|
|
const settings = useSettingsStore();
|
|
const ExpandMenu = computed(() => settings.Menu.Expand);
|
|
const ShowMenu = computed(() => settings.Menu.Show);
|
|
|
|
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="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
|
|
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
|
|
>
|
|
<div class="flex flex-col mt-14 md:mt-0">
|
|
<span
|
|
class="m-2 p-1 px-3 h-10 overflow-hidden"
|
|
:class="[ExpandMenu ? 'text-2xl' : 'text-md']"
|
|
>
|
|
<router-link
|
|
to="/dashboard"
|
|
style="font-size: 150%"
|
|
>⌂</router-link>
|
|
{{ CurrentBudgetName }}
|
|
</span>
|
|
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
|
|
<router-link :to="'/budget/' + CurrentBudgetID + '/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-slate-200 dark:bg-slate-700 my-2 p-2 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"
|
|
:key="account.ID"
|
|
class="flex flex-row justify-between"
|
|
>
|
|
<AccountWithReconciled :account="account" />
|
|
<Currency
|
|
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
|
:value="account.ClearedBalance"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 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"
|
|
:key="account.ID"
|
|
class="flex flex-row justify-between"
|
|
>
|
|
<AccountWithReconciled :account="account" />
|
|
<Currency
|
|
:class="ExpandMenu ? 'md:inline' : 'md:hidden'"
|
|
:value="account.ClearedBalance"
|
|
/>
|
|
</div>
|
|
</li>
|
|
<!--
|
|
<li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
|
|
<div class="flex flex-row justify-between font-bold">
|
|
<span>Closed Accounts</span>
|
|
</div>
|
|
+ Add Account
|
|
</li>
|
|
-->
|
|
<!--<li>
|
|
<router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
|
|
</li>-->
|
|
<li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
|
|
<router-link :to="'/budget/' + CurrentBudgetID + '/settings'">
|
|
Budget-Settings
|
|
</router-link>
|
|
</li>
|
|
<!--<li><router-link to="/admin">Admin</router-link></li>-->
|
|
</div>
|
|
</div>
|
|
</template>
|