80 lines
3.6 KiB
Vue
80 lines
3.6 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"
|
|
|
|
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);
|
|
|
|
function isRecentlyReconciled(account : Account) {
|
|
const now = new Date().getTime();
|
|
const recently = 7 * 24 * 60 * 60 * 1000;
|
|
return new Date(now - recently).getTime() < account.LastReconciled.getTime();
|
|
}
|
|
|
|
function getAccountName(account : Account) {
|
|
const reconciledMarker = isRecentlyReconciled(account) ? "" : " *";
|
|
return account.Name + reconciledMarker;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<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" class="flex flex-row justify-between">
|
|
<router-link :to="'/budget/'+CurrentBudgetID+'/account/'+account.ID">{{getAccountName(account)}}</router-link>
|
|
<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" class="flex flex-row justify-between">
|
|
<router-link :to="'/budget/'+CurrentBudgetID+'/account/'+account.ID">{{getAccountName(account)}}</router-link>
|
|
<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>
|
|
</template>
|