Formatted frontend code.

2026-03-14 22:33:05 -04:00 · 2026-03-14 22:33:05 -04:00 · 71a783669f
parent 9cb2d562d8
commit 71a783669f
6 changed files with 223 additions and 64 deletions
--- a/web-app/src/pages/CategoryPage.vue
+++ b/web-app/src/pages/CategoryPage.vue
@ -37,7 +37,7 @@ watch(balancesIncludeSubcategories, async () => {
  if (!category.value) return
  balances.value = await new TransactionApiClient(getSelectedProfile(route)).getCategoryBalances(
    category.value.id,
-    balancesIncludeSubcategories.value
+    balancesIncludeSubcategories.value,
  )
 })

@ -60,7 +60,10 @@ async function loadCategory(id: number) {
      parentCategory.value = await api.getCategory(category.value.parentId)
    }
    childCategories.value = await api.getChildCategories(category.value.id)
-    balances.value = await api.getCategoryBalances(category.value.id, balancesIncludeSubcategories.value)
+    balances.value = await api.getCategoryBalances(
+      category.value.id,
+      balancesIncludeSubcategories.value,
+    )
    await fetchPage(1)
  } catch (err) {
    console.error(err)
@ -87,16 +90,32 @@ async function fetchPage(pg: number) {
 }
 </script>
 <template>
-  <AppPage v-if="category" :title="'Category - ' + category.name">
+  <AppPage
+    v-if="category"
+    :title="'Category - ' + category.name"
+  >
    <!-- Initial subtext with color & parent (if available). -->
    <div>
-      <span class="category-color-indicator" :style="{ 'background-color': '#' + category.color }"></span>
-      <span v-if="parentCategory" class="text-muted" style="vertical-align: middle">
+      <span
+        class="category-color-indicator"
+        :style="{ 'background-color': '#' + category.color }"
+      ></span>
+      <span
+        v-if="parentCategory"
+        class="text-muted"
+        style="vertical-align: middle"
+      >
        A subcategory of
-        <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${parentCategory.id}`">{{
-          parentCategory.name }}</RouterLink>.
+        <RouterLink
+          :to="`/profiles/${getSelectedProfile(route)}/categories/${parentCategory.id}`"
+          >{{ parentCategory.name }}</RouterLink
+        >.
      </span>
-      <span v-if="!parentCategory" class="text-muted" style="vertical-align: middle">
+      <span
+        v-if="!parentCategory"
+        class="text-muted"
+        style="vertical-align: middle"
+      >
        This is a top-level category.
      </span>
    </div>
@ -108,8 +127,12 @@ async function fetchPage(pg: number) {
    <div v-if="childCategories.length > 0">
      <h3>Subcategories</h3>
      <ul>
-        <li v-for="child in childCategories" :key="child.id">
-          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${child.id}`">{{ child.name }}
+        <li
+          v-for="child in childCategories"
+          :key="child.id"
+        >
+          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${child.id}`"
+            >{{ child.name }}
          </RouterLink>
        </li>
      </ul>
@ -118,22 +141,36 @@ async function fetchPage(pg: number) {
    <!-- Display total balances. -->
    <div v-if="balances.length > 0">
      <h3>Balances</h3>
-      <div v-for="balance in balances" :key="balance.currency.code">
+      <div
+        v-for="balance in balances"
+        :key="balance.currency.code"
+      >
        USD:
-        <AppBadge>Debits:
+        <AppBadge
+          >Debits:
          <span class="text-positive">{{ formatMoney(balance.debits, balance.currency) }}</span>
        </AppBadge>
-        <AppBadge>Credits:
+        <AppBadge
+          >Credits:
          <span class="text-negative">{{ formatMoney(balance.credits, balance.currency) }}</span>
        </AppBadge>
-        <AppBadge>Balance:
-          <span :class="{ 'text-positive': balance.balance > 0, 'text-negative': balance.balance < 0 }">{{
-            formatMoney(balance.balance, balance.currency) }}</span>
+        <AppBadge
+          >Balance:
+          <span
+            :class="{ 'text-positive': balance.balance > 0, 'text-negative': balance.balance < 0 }"
+            >{{ formatMoney(balance.balance, balance.currency) }}</span
+          >
        </AppBadge>
      </div>
      <FormGroup>
-        <FormControl label="Include Subcategories" v-if="childCategories.length > 0">
-          <input type="checkbox" v-model="balancesIncludeSubcategories" />
+        <FormControl
+          label="Include Subcategories"
+          v-if="childCategories.length > 0"
+        >
+          <input
+            type="checkbox"
+            v-model="balancesIncludeSubcategories"
+          />
        </FormControl>
        <!--
        <FormControl label="After">
@ -151,9 +188,20 @@ async function fetchPage(pg: number) {
      <p class="text-muted font-size-small mt-0">
        Below is a list of all transactions recorded with this category, or any subcategory.
      </p>
-      <PaginationControls :page="relatedTransactionsPage" @update="(pr) => fetchPage(pr.page)" class="align-right" />
-      <TransactionCard v-for="txn in relatedTransactionsPage.items" :key="txn.id" :tx="txn" />
-      <p v-if="relatedTransactionsPage.totalElements === 0" class="text-muted font-italic">
+      <PaginationControls
+        :page="relatedTransactionsPage"
+        @update="(pr) => fetchPage(pr.page)"
+        class="align-right"
+      />
+      <TransactionCard
+        v-for="txn in relatedTransactionsPage.items"
+        :key="txn.id"
+        :tx="txn"
+      />
+      <p
+        v-if="relatedTransactionsPage.totalElements === 0"
+        class="text-muted font-italic"
+      >
        There are no transactions linked to this category.
      </p>
    </div>
--- a/web-app/src/pages/TransactionSearchPage.vue
+++ b/web-app/src/pages/TransactionSearchPage.vue
@ -233,42 +233,83 @@ function loadAllParamValues(key: string): string[] {
  <AppPage title="Transactions">
    <AppForm>
      <FormGroup>
-        <FormControl label="Search" hint="Free-form text search against description, tags, vendor, category, account.">
-          <input v-model="searchQuery" type="text" placeholder="Search for transactions..." />
+        <FormControl
+          label="Search"
+          hint="Free-form text search against description, tags, vendor, category, account."
+        >
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search for transactions..."
+          />
        </FormControl>
      </FormGroup>
      <FormGroup>
        <div class="vueselect-control">
          <h5>Tag</h5>
-          <VueSelect v-model="tagFilters" :options="tagOptions" placeholder="Select tags" is-multi />
+          <VueSelect
+            v-model="tagFilters"
+            :options="tagOptions"
+            placeholder="Select tags"
+            is-multi
+          />
        </div>
        <div class="vueselect-control">
          <h5>Vendor</h5>
-          <VueSelect v-model="vendorFilters" :options="vendorOptions" placeholder="Select vendors" is-multi />
+          <VueSelect
+            v-model="vendorFilters"
+            :options="vendorOptions"
+            placeholder="Select vendors"
+            is-multi
+          />
        </div>
        <div class="vueselect-control">
          <h5>Category</h5>
-          <VueSelect v-model="categoryFilters" :options="categoryOptions" placeholder="Select categories" is-multi />
+          <VueSelect
+            v-model="categoryFilters"
+            :options="categoryOptions"
+            placeholder="Select categories"
+            is-multi
+          />
        </div>
        <div class="vueselect-control">
          <h5>Account</h5>
-          <VueSelect v-model="accountFilters" :options="accountOptions" placeholder="Select accounts" is-multi />
+          <VueSelect
+            v-model="accountFilters"
+            :options="accountOptions"
+            placeholder="Select accounts"
+            is-multi
+          />
        </div>
      </FormGroup>

      <FormGroup>
        <FormControl label="Max Amount">
-          <input v-model="maxAmountFilter" type="number" min="0" step="1" />
+          <input
+            v-model="maxAmountFilter"
+            type="number"
+            min="0"
+            step="1"
+          />
        </FormControl>
        <FormControl label="Min Amount">
-          <input v-model="minAmountFilter" type="number" min="0" step="1" />
+          <input
+            v-model="minAmountFilter"
+            type="number"
+            min="0"
+            step="1"
+          />
        </FormControl>
      </FormGroup>

      <FormGroup>
        <FormControl label="Sort By">
          <select v-model="selectedSort">
-            <option v-for="sortOpt in SORT_PROPERTIES" :key="sortOpt.property" :value="sortOpt.property">
+            <option
+              v-for="sortOpt in SORT_PROPERTIES"
+              :key="sortOpt.property"
+              :value="sortOpt.property"
+            >
              {{ sortOpt.label }}
            </option>
          </select>
@ -281,19 +322,42 @@ function loadAllParamValues(key: string): string[] {
        </FormControl>
      </FormGroup>
      <ButtonBar>
-        <AppButton size="sm" icon="home" @click="goToHome()">Back to Homepage</AppButton>
-        <AppButton size="sm" icon="trash" @click="clearFilters()">Clear Filters</AppButton>
-        <AppButton size="sm" icon="file-export" @click="exportToFile()">Export to CSV</AppButton>
+        <AppButton
+          size="sm"
+          icon="home"
+          @click="goToHome()"
+          >Back to Homepage</AppButton
+        >
+        <AppButton
+          size="sm"
+          icon="trash"
+          @click="clearFilters()"
+          >Clear Filters</AppButton
+        >
+        <AppButton
+          size="sm"
+          icon="file-export"
+          @click="exportToFile()"
+          >Export to CSV</AppButton
+        >
      </ButtonBar>
    </AppForm>

-    <PaginationControls :page="page" @update="(pr) => fetchPage(pr.page, pr.size)" class="align-right" />
+    <PaginationControls
+      :page="page"
+      @update="(pr) => fetchPage(pr.page, pr.size)"
+      class="align-right"
+    />
    <AppBadge size="sm">
      {{ page.totalElements }} search
      {{ page.totalElements == 1 ? 'result' : 'results' }}
      in {{ lastFetchTime }} milliseconds
    </AppBadge>
-    <TransactionCard v-for="txn in page.items" :key="txn.id" :tx="txn" />
+    <TransactionCard
+      v-for="txn in page.items"
+      :key="txn.id"
+      :tx="txn"
+    />
  </AppPage>
 </template>
 <style lang="css" scoped>
@ -302,7 +366,7 @@ function loadAllParamValues(key: string): string[] {
  margin: 0.5rem;
 }

-.vueselect-control>h5 {
+.vueselect-control > h5 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
--- a/web-app/src/pages/home/AccountsModule.vue
+++ b/web-app/src/pages/home/AccountsModule.vue
@ -56,27 +56,47 @@ function exportAccounts() {
 <template>
  <HomeModule title="Accounts">
    <template v-slot:default>
-      <AccountCard v-for="a in accounts" :account="a" :key="a.id" />
+      <AccountCard
+        v-for="a in accounts"
+        :account="a"
+        :key="a.id"
+      />
      <p v-if="accounts.length === 0">
        You haven't added any accounts. Add one to start tracking your finances.
      </p>

      <div>
-        <AppBadge v-for="bal in totalBalances" :key="bal.currency.code">
+        <AppBadge
+          v-for="bal in totalBalances"
+          :key="bal.currency.code"
+        >
          {{ bal.currency.code }} Total:
          <span class="font-mono">{{ formatMoney(bal.balance, bal.currency) }}</span>
        </AppBadge>
-        <AppBadge v-for="debt in totalOwed" :key="debt.currency.code">
+        <AppBadge
+          v-for="debt in totalOwed"
+          :key="debt.currency.code"
+        >
          {{ debt.currency.code }} Debt:
-          <span class="font-mono" :class="{ 'text-negative': debt.balance > 0 }">{{ formatMoney(debt.balance,
-            debt.currency) }}</span>
+          <span
+            class="font-mono"
+            :class="{ 'text-negative': debt.balance > 0 }"
+            >{{ formatMoney(debt.balance, debt.currency) }}</span
+          >
        </AppBadge>
      </div>
    </template>
    <template v-slot:actions>
-      <AppButton icon="plus" @click="router.push(`/profiles/${getSelectedProfile(route)}/add-account`)">Add Account
+      <AppButton
+        icon="plus"
+        @click="router.push(`/profiles/${getSelectedProfile(route)}/add-account`)"
+        >Add Account
      </AppButton>
-      <AppButton icon="download" size="sm" @click="exportAccounts()">
+      <AppButton
+        icon="download"
+        size="sm"
+        @click="exportAccounts()"
+      >
        Export
      </AppButton>
    </template>
--- a/web-app/src/pages/home/AnalyticsModule.vue
+++ b/web-app/src/pages/home/AnalyticsModule.vue
@ -4,9 +4,7 @@ import HomeModule from '@/components/HomeModule.vue'
 import { computed, onMounted, ref } from 'vue'
 import 'chartjs-adapter-date-fns'
 import type { Currency } from '@/api/data'
-import {
-  AnalyticsApiClient,
-} from '@/api/analytics'
+import { AnalyticsApiClient } from '@/api/analytics'
 import type { TimeFrame } from './analytics/util'
 import FormGroup from '@/components/common/form/FormGroup.vue'
 import FormControl from '@/components/common/form/FormControl.vue'
@ -60,30 +58,53 @@ onMounted(async () => {
    <FormGroup>
      <FormControl label="Chart">
        <select v-model="selectedChart">
-          <option v-for="ct in AnalyticsChartTypes" :key="ct.id" :value="ct">
+          <option
+            v-for="ct in AnalyticsChartTypes"
+            :key="ct.id"
+            :value="ct"
+          >
            {{ ct.name }}
          </option>
        </select>
      </FormControl>
    </FormGroup>

-    <BalanceTimeSeriesChart v-if="currency && selectedChart.id === 'account-balances'" title="Account Balances"
-      :currency="currency" :time-frame="timeFrame" :api="analyticsApi" />
+    <BalanceTimeSeriesChart
+      v-if="currency && selectedChart.id === 'account-balances'"
+      title="Account Balances"
+      :currency="currency"
+      :time-frame="timeFrame"
+      :api="analyticsApi"
+    />

-    <CategorySpendPieChart v-if="currency && selectedChart.id === 'category-spend'" :currency="currency"
-      :api="analyticsApi" :time-frame="timeFrame" />
+    <CategorySpendPieChart
+      v-if="currency && selectedChart.id === 'category-spend'"
+      :currency="currency"
+      :api="analyticsApi"
+      :time-frame="timeFrame"
+    />

    <FormGroup>
      <FormControl label="Currency">
-        <select v-model="currency" :disabled="availableCurrencies.length < 2">
-          <option v-for="currency in availableCurrencies" :key="currency.code" :value="currency">
+        <select
+          v-model="currency"
+          :disabled="availableCurrencies.length < 2"
+        >
+          <option
+            v-for="currency in availableCurrencies"
+            :key="currency.code"
+            :value="currency"
+          >
            {{ currency.code }}
          </option>
        </select>
      </FormControl>
      <FormControl label="Time Frame">
        <select v-model="timeFrame">
-          <option :value="{}" selected>
+          <option
+            :value="{}"
+            selected
+          >
            All Time
          </option>
          <option :value="{ start: sub(new Date(), { days: 30 }) }">Last 30 days</option>
--- a/web-app/src/pages/home/analytics/BalanceTimeSeriesChart.vue
+++ b/web-app/src/pages/home/analytics/BalanceTimeSeriesChart.vue
@ -61,14 +61,14 @@ watch(
  () => {
    buildChartData()
  },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 )

 async function buildChartData() {
  const balanceAnalytics = await props.api.getBalanceTimeSeries(
    props.currency.code,
    props.timeFrame.start ? props.timeFrame.start.getTime() : null,
-    props.timeFrame.end ? props.timeFrame.end.getTime() : null
+    props.timeFrame.end ? props.timeFrame.end.getTime() : null,
  )

  const datasets: ChartDataset<'line'>[] = []
@ -101,6 +101,10 @@ async function buildChartData() {
 </script>
 <template>
  <div>
-    <Line v-if="chartData && chartOptions" :data="chartData" :options="chartOptions" />
+    <Line
+      v-if="chartData && chartOptions"
+      :data="chartData"
+      :options="chartOptions"
+    />
  </div>
 </template>
--- a/web-app/src/pages/home/analytics/CategorySpendPieChart.vue
+++ b/web-app/src/pages/home/analytics/CategorySpendPieChart.vue
@ -33,7 +33,7 @@ watch(
  () => {
    buildChartData()
  },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 )

 async function buildChartData() {
@ -41,7 +41,7 @@ async function buildChartData() {
    props.currency.code,
    props.timeFrame.start ? props.timeFrame.start.getTime() : null,
    props.timeFrame.end ? props.timeFrame.end.getTime() : null,
-    null
+    null,
  )
  if (categorySpendData.length === 0) {
    chartData.value = undefined
@ -69,11 +69,13 @@ async function buildChartData() {
 }
 </script>
 <template>
-
  <div>
-    <Pie id="pie" v-if="chartData && chartOptions" :data="chartData" :options="chartOptions" />
-    <p v-if="!chartData">
-      No category spending data is available for this selection of filters.
-    </p>
+    <Pie
+      id="pie"
+      v-if="chartData && chartOptions"
+      :data="chartData"
+      :options="chartOptions"
+    />
+    <p v-if="!chartData">No category spending data is available for this selection of filters.</p>
  </div>
 </template>