85 lines
4.0 KiB
Vue
85 lines
4.0 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);
|
|
|
|
function toggleMenu() {
|
|
useSettingsStore().toggleMenu();
|
|
}
|
|
</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">
|
|
<div class="m-2 md:px-3 p-1">
|
|
<span class="font-bold-my-3 md:hidden font-bold text-5xl pr-3" @click="toggleMenu">≡</span>
|
|
<span class="h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
|
|
<router-link to="/dashboard" class="text-5xl">⌂</router-link>
|
|
{{ CurrentBudgetName }}
|
|
</span>
|
|
</div>
|
|
<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+'/problematic-transactions'">Transactions</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'" class="whitespace-nowrap" :value="OnBudgetAccountsBalance" />
|
|
</div>
|
|
<div v-for="account in OnBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
|
|
<AccountWithReconciled class="whitespace-nowrap overflow-hidden mr-4" :account="account" />
|
|
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :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'" class="whitespace-nowrap" :value="OffBudgetAccountsBalance" />
|
|
</div>
|
|
<div v-for="account in OffBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
|
|
<AccountWithReconciled class="whitespace-nowrap overflow-hidden mr-4" :account="account" />
|
|
<Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" class="whitespace-nowrap" :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>
|