Applied front end formatting.

web-app/src/components/CategoryDisplayItem.vue

@@ -2,8 +2,8 @@
 import type { TransactionCategoryTree } from '@/api/transaction'
 import AppButton from './common/AppButton.vue'
 import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router'
-import { getSelectedProfile } from '@/api/profile';
+import { getSelectedProfile } from '@/api/profile'
 
 const route = useRoute()
 
@@ -19,30 +19,63 @@ const expanded = ref(false)
 const canExpand = computed(() => props.category.children.length > 0)
 </script>
 <template>
-  <div class="category-display-item" :class="{
+  <div
+    class="category-display-item"
+    :class="{
       'category-display-item-bg-1': category.depth % 2 === 0,
       'category-display-item-bg-2': category.depth % 2 === 1,
-  }">
+    }"
+  >
     <div class="category-display-item-content">
       <div>
         <h4 class="category-display-item-title">
-          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${category.id}`">{{ category.name }}
+          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${category.id}`"
+            >{{ category.name }}
           </RouterLink>
         </h4>
         <p class="category-display-item-description">{{ category.description }}</p>
       </div>
-      <div class="category-display-item-color-indicator" :style="{ 'background-color': '#' + category.color }"></div>
+      <div
+        class="category-display-item-color-indicator"
+        :style="{ 'background-color': '#' + category.color }"
+      ></div>
     </div>
-    <div v-if="editable" style="text-align: right">
+    <div
-      <AppButton icon="chevron-down" v-if="canExpand && !expanded" @click="expanded = true" />
+      v-if="editable"
-      <AppButton icon="chevron-up" v-if="canExpand && expanded" @click="expanded = false" />
+      style="text-align: right"
-      <AppButton icon="wrench" @click="$emit('edited', category.id)" />
+    >
-      <AppButton icon="trash" @click="$emit('deleted', category.id)" />
+      <AppButton
+        icon="chevron-down"
+        v-if="canExpand && !expanded"
+        @click="expanded = true"
+      />
+      <AppButton
+        icon="chevron-up"
+        v-if="canExpand && expanded"
+        @click="expanded = false"
+      />
+      <AppButton
+        icon="wrench"
+        @click="$emit('edited', category.id)"
+      />
+      <AppButton
+        icon="trash"
+        @click="$emit('deleted', category.id)"
+      />
     </div>
     <!-- Nested display item for each child: -->
-    <div style="margin-left: 1rem" v-if="canExpand && expanded">
+    <div
-      <CategoryDisplayItem v-for="child in category.children" :key="child.id" :category="child" :editable="editable"
+      style="margin-left: 1rem"
-        @edited="(c) => $emit('edited', c)" @deleted="(c) => $emit('deleted', c)" />
+      v-if="canExpand && expanded"
+    >
+      <CategoryDisplayItem
+        v-for="child in category.children"
+        :key="child.id"
+        :category="child"
+        :editable="editable"
+        @edited="(c) => $emit('edited', c)"
+        @deleted="(c) => $emit('deleted', c)"
+      />
     </div>
   </div>
 </template>

web-app/src/pages/CategoryPage.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { defaultPage, type Page, type PageRequest } from '@/api/pagination';
+import { defaultPage, type Page, type PageRequest } from '@/api/pagination'
-import { getSelectedProfile } from '@/api/profile';
+import { getSelectedProfile } from '@/api/profile'
-import { TransactionApiClient, type TransactionCategory, type TransactionsListItem } from '@/api/transaction';
+import {
-import AppPage from '@/components/common/AppPage.vue';
+  TransactionApiClient,
-import PaginationControls from '@/components/common/PaginationControls.vue';
+  type TransactionCategory,
-import TransactionCard from '@/components/TransactionCard.vue';
+  type TransactionsListItem,
-import { onMounted, ref, watch } from 'vue';
+} from '@/api/transaction'
-import { useRoute, useRouter } from 'vue-router';
+import AppPage from '@/components/common/AppPage.vue'
-
+import PaginationControls from '@/components/common/PaginationControls.vue'
+import TransactionCard from '@/components/TransactionCard.vue'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
 const router = useRouter()
@@ -19,7 +22,7 @@ const relatedTransactionsPage = ref<Page<TransactionsListItem>>(defaultPage())
 
 watch(
   () => route.params.id,
-  (newId) => loadCategory(parseInt(newId as string))
+  (newId) => loadCategory(parseInt(newId as string)),
 )
 
 onMounted(async () => {
@@ -55,9 +58,9 @@ async function fetchPage(pg: number) {
     sorts: [
       {
         attribute: 'txn.timestamp',
-        dir: 'DESC'
+        dir: 'DESC',
-      }
+      },
-    ]
+    ],
   }
   const params = new URLSearchParams()
   params.append('category', category.value?.id + '')
@@ -66,15 +69,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
-      <span v-if="parentCategory" class="text-muted" style="vertical-align: middle;">
+        class="category-color-indicator"
-        A subcategory of <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${parentCategory.id}`">{{
+        :style="{ 'background-color': '#' + category.color }"
-          parentCategory.name }}</RouterLink>.
+      ></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
+        >.
       </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>
@@ -86,8 +106,12 @@ async function fetchPage(pg: number) {
     <div v-if="childCategories.length > 0">
       <h3>Child Categories</h3>
       <ul>
-        <li v-for="child in childCategories" :key="child.id">
+        <li
-          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${child.id}`">{{ child.name }}
+          v-for="child in childCategories"
+          :key="child.id"
+        >
+          <RouterLink :to="`/profiles/${getSelectedProfile(route)}/categories/${child.id}`"
+            >{{ child.name }}
           </RouterLink>
         </li>
       </ul>
@@ -98,9 +122,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 child category.
       </p>
-      <PaginationControls :page="relatedTransactionsPage" @update="(pr) => fetchPage(pr.page)" class="align-right" />
+      <PaginationControls
-      <TransactionCard v-for="txn in relatedTransactionsPage.items" :key="txn.id" :tx="txn" />
+        :page="relatedTransactionsPage"
-      <p v-if="relatedTransactionsPage.totalElements === 0" class="text-muted font-italic">
+        @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>