Ran npm update and format.

web-app/src/pages/TransactionPage.vue

@@ -10,12 +10,12 @@ import PropertiesTable from '@/components/PropertiesTable.vue'
 import TagLabel from '@/components/TagLabel.vue'
 import { showAlert, showConfirm } from '@/util/alert'
 import { onMounted, ref, type Ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 import AttachmentRow from '@/components/common/AttachmentRow.vue'
 import LineItemCard from '@/components/LineItemCard.vue'
 import AppBadge from '@/components/common/AppBadge.vue'
 import ButtonBar from '@/components/common/ButtonBar.vue'
 import { AccountApiClient } from '@/api/account'
+import { useRoute, useRouter } from 'vue-router'
 
 interface BalanceDiff {
   before: number
@@ -87,34 +87,65 @@ async function deleteTransaction() {
 }
 </script>
 <template>
-  <AppPage :title="'Transaction ' + transaction.id" v-if="transaction">
+  <AppPage
+    :title="'Transaction ' + transaction.id"
+    v-if="transaction"
+  >
     <!-- Top-row with some badges for amount, vendor, and category. -->
     <div>
-      <AppBadge size="lg" class="font-mono">
+      <AppBadge
+        size="lg"
+        class="font-mono"
+      >
         {{ transaction.currency.code }} {{ formatMoney(transaction.amount, transaction.currency) }}
       </AppBadge>
-      <AppBadge size="md" v-if="transaction.vendor">
+      <AppBadge
+        size="md"
+        v-if="transaction.vendor"
+      >
         {{ transaction.vendor.name }}
       </AppBadge>
-      <CategoryLabel v-if="transaction.category" :category="transaction.category" :clickable="true" />
-      <AppBadge size="sm" v-if="transaction.internalTransfer">
+      <CategoryLabel
+        v-if="transaction.category"
+        :category="transaction.category"
+        :clickable="true"
+      />
+      <AppBadge
+        size="sm"
+        v-if="transaction.internalTransfer"
+      >
         <font-awesome-icon icon="fa-rotate"></font-awesome-icon>
         Internal Transfer
       </AppBadge>
     </div>
     <!-- Second row that lists all tags. -->
-    <div v-if="transaction.tags.length > 0" class="mt-1">
-      <TagLabel v-for="t in transaction.tags" :key="t" :tag="t" />
+    <div
+      v-if="transaction.tags.length > 0"
+      class="mt-1"
+    >
+      <TagLabel
+        v-for="t in transaction.tags"
+        :key="t"
+        :tag="t"
+      />
     </div>
 
     <p>{{ transaction.description }}</p>
 
-    <div v-if="transaction.creditedAccount" class="my-1">
+    <div
+      v-if="transaction.creditedAccount"
+      class="my-1"
+    >
       <strong class="text-negative">Credited</strong> from
-      <RouterLink :to="`/profiles/${getSelectedProfile(route)}/accounts/${transaction.creditedAccount.id}`">
+      <RouterLink
+        :to="`/profiles/${getSelectedProfile(route)}/accounts/${transaction.creditedAccount.id}`"
+      >
         {{ transaction.creditedAccount.name }} (#{{ transaction.creditedAccount.numberSuffix }})
       </RouterLink>
-      <div v-if="creditedAccountBalanceDiff" class="font-size-xsmall">
+      <div
+        v-if="creditedAccountBalanceDiff"
+        class="font-size-xsmall"
+      >
         Balance Before:
         <span class="font-mono">
           {{ formatMoney(creditedAccountBalanceDiff.before, transaction.currency) }}
@@ -126,12 +157,20 @@ async function deleteTransaction() {
       </div>
     </div>
 
-    <div v-if="transaction.debitedAccount" class="my-1">
+    <div
+      v-if="transaction.debitedAccount"
+      class="my-1"
+    >
       <strong class="text-positive">Debited</strong> to
-      <RouterLink :to="`/profiles/${getSelectedProfile(route)}/accounts/${transaction.debitedAccount.id}`">
+      <RouterLink
+        :to="`/profiles/${getSelectedProfile(route)}/accounts/${transaction.debitedAccount.id}`"
+      >
         {{ transaction.debitedAccount.name }} (#{{ transaction.debitedAccount.numberSuffix }})
       </RouterLink>
-      <div v-if="debitedAccountBalanceDiff" class="font-size-xsmall">
+      <div
+        v-if="debitedAccountBalanceDiff"
+        class="font-size-xsmall"
+      >
         Balance Before:
         <span class="font-mono">
           {{ formatMoney(debitedAccountBalanceDiff.before, transaction.currency) }}
@@ -157,21 +196,39 @@ async function deleteTransaction() {
 
     <div v-if="transaction.lineItems.length > 0">
       <h3>Line Items</h3>
-      <LineItemCard v-for="item of transaction.lineItems" :key="item.idx" :line-item="item"
-        :currency="transaction.currency" :total-count="transaction.lineItems.length" :editable="false" />
+      <LineItemCard
+        v-for="item of transaction.lineItems"
+        :key="item.idx"
+        :line-item="item"
+        :currency="transaction.currency"
+        :total-count="transaction.lineItems.length"
+        :editable="false"
+      />
     </div>
 
     <div v-if="transaction.attachments.length > 0">
       <h3>Attachments</h3>
-      <AttachmentRow v-for="a in transaction.attachments" :attachment="a" :key="a.id" disabled />
+      <AttachmentRow
+        v-for="a in transaction.attachments"
+        :attachment="a"
+        :key="a.id"
+        disabled
+      />
     </div>
     <ButtonBar>
-      <AppButton icon="wrench" @click="
-        router.push(`/profiles/${getSelectedProfile(route)}/transactions/${transaction.id}/edit`)
-        ">
+      <AppButton
+        icon="wrench"
+        @click="
+          router.push(`/profiles/${getSelectedProfile(route)}/transactions/${transaction.id}/edit`)
+        "
+      >
         Edit
       </AppButton>
-      <AppButton icon="trash" @click="deleteTransaction()">Delete</AppButton>
+      <AppButton
+        icon="trash"
+        @click="deleteTransaction()"
+        >Delete</AppButton
+      >
     </ButtonBar>
   </AppPage>
 </template>