jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Move sidebar layout to BudgetSidebar

Browse Source
This commit is contained in:
Jan Bader 2022-03-04 20:55:14 +00:00
parent 3795150508
commit d89e702669
2 changed files with 59 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/App.vue
View File

@ -8,7 +8,6 @@ import { useSettingsStore } from "./stores/settings";
export default defineComponent({
computed: {
...mapState(useBudgetsStore, ["CurrentBudgetName"]),
...mapState(useSettingsStore, ["Menu"]),
...mapState(useSessionStore, ["LoggedIn"]),
},
methods: {
@ -27,15 +26,10 @@ export default defineComponent({
</script>
<template>
<div class="flex flex-col md:flex-row flex-1">
<div
:class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
>
<div class="flex flex-col md:flex-row flex-1 h-screen">
<router-view name="sidebar"></router-view>
</div>
<div class="flex-1">
<div class="flex-1 overflow-auto">
<div class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14">
<span
class="flex-1 font-bold text-5xl -my-3 hidden md:inline"

99
web/src/pages/BudgetSidebar.vue
View File

@ -5,7 +5,9 @@ import { useBudgetsStore } from "../stores/budget"
import { Account, useAccountStore } from "../stores/budget-account"
import { useSettingsStore } from "../stores/settings"
const ExpandMenu = computed(() => useSettingsStore().Menu.Expand);
const settings = useSettingsStore();
const ExpandMenu = computed(() => settings.Menu.Expand);
const ShowMenu = computed(() => settings.Menu.Show);
const budgetStore = useBudgetsStore();
const CurrentBudgetName = computed(() => budgetStore.CurrentBudgetName);
@ -17,63 +19,76 @@ const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
function isRecentlyReconciled(account : Account) {
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) {
function getAccountName(account: Account) {
const reconciledMarker = isRecentlyReconciled(account) ? "" : " *";
return account.Name + reconciledMarker;
}
</script>
<template>
<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" 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>
<!--
<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" 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>
-->
<!--<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>
</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>