Extract AccountWithReconciled

web/src/components/AccountWithReconciled.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useBudgetsStore } from '../stores/budget';
+import { Account } from '../stores/budget-account';
+
+const props = defineProps<{
+  account: Account
+}>();
+
+const budgetStore = useBudgetsStore();
+const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);
+
+const days = 24 * 60 * 60 * 1000;
+function daysSinceLastReconciled() {
+  const now = new Date().getTime();
+  const diff = new Date(now).getTime() - props.account.LastReconciled.Time.getTime();
+  return Math.floor(diff / days);
+}
+</script>
+
+<template>
+  <span>
+  <router-link 
+    :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
+    {{account.Name}}
+  </router-link>
+    <span v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7" class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline">
+      {{daysSinceLastReconciled()}}
+    </span>
+  </span>
+</template>

web/src/pages/BudgetSidebar.vue

@@ -4,6 +4,7 @@ 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);
@@ -18,38 +19,6 @@ const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
 const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
 const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
 const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
-
-const days = 24 * 60 * 60 * 1000;
-function daysSinceLastReconciled(account: Account) {
-  if(!account.LastReconciled.Valid)
-    return false;
-
-  const now = new Date().getTime();
-  const diff = new Date(now).getTime() - account.LastReconciled.Time.getTime();
-  return Math.floor(diff / days);
-  //const recently = 7 * days;
-}
-
-function isRecentlyReconciled(account: Account) {
-  if(!account.LastReconciled.Valid)
-    return false;
-
-  const now = new Date().getTime();
-  const recently = 7 * days;
-  return new Date(now - recently).getTime() < account.LastReconciled.Time.getTime();
-}
-
-function getAccountName(account: Account) {
-  const days = daysSinceLastReconciled(account);
-  if(days === false)
-    return account.Name + " *";
-
-  if(days <= 7)
-    return account.Name;
-
-  //const reconciledMarker = isRecentlyReconciled(account) ? "" : " *";
-  return account.Name + " " + days;
-}
 </script>
 
 <template>
@@ -77,9 +46,7 @@ function getAccountName(account: Account) {
           <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" />
         </div>
         <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
-          <router-link
+          <AccountWithReconciled :account="account" />
-            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
-          >{{ getAccountName(account) }}</router-link>
           <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
@@ -89,9 +56,7 @@ function getAccountName(account: Account) {
           <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" />
         </div>
         <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
-          <router-link
+          <AccountWithReconciled :account="account" />
-            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
-          >{{ getAccountName(account) }}</router-link>
           <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>