From 239e3e43ac34fd4b4f8c29acb618d16de9e6ad11 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Mon, 10 Nov 2025 09:17:07 +0300
Subject: [PATCH] fix empty category

---
 .../transactions/TransactionCreateUpdate.vue       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/transactions/TransactionCreateUpdate.vue b/src/components/transactions/TransactionCreateUpdate.vue
index fcd8918..a235465 100644
--- a/src/components/transactions/TransactionCreateUpdate.vue
+++ b/src/components/transactions/TransactionCreateUpdate.vue
@@ -29,6 +29,8 @@ const tgApp = window.Telegram.WebApp
 const isCategorySelectorOpened = ref(false);
 
 const categories = ref<Category[]>([]);
+const incomeCategories = computed(() => categories.value.filter(i => i.type == CategoryType.INCOME))
+const expenseCategories = computed(() => categories.value.filter(i => i.type == CategoryType.EXPENSE))
 const transactionId = ref<number | undefined>(route.params.id)
 const mode = computed(() => {
   return transactionId.value ? "edit" : "create"
@@ -270,7 +272,7 @@ onMounted(async () => {
      <span v-if="categories.length == 0" class="card">Looks like you have no created categories yet. <router-link
          to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
 
-    <div v-else class="flex flex-col w-full justify-items-start gap-1">
+    <div v-else class="flex flex-col w-full justify-items-start gap-1 pb-10">
       <ConfirmDialog
           v-if="isDeleteAlertVisible"
           :message="deleteAlertMessage"
@@ -286,7 +288,7 @@ onMounted(async () => {
           <div  v-if="categories.filter(i => i.type == CategoryType.INCOME).length>0" class="flex flex-col w-full">
             <span>Income categories</span>
             <div class="flex card justify-items-start justify-start h-fit">
-              <div v-for="(cat, idx) in categories.filter(i => i.type == CategoryType.INCOME)" :key="cat.id"
+              <div v-for="(cat, idx) in incomeCategories" :key="cat.id"
                    @click="transactionCategory = cat; transactionType = cat.type == 'EXPENSE' ? TransactionType.EXPENSE : TransactionType.INCOME; isCategorySelectorOpened = false"
                    class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
                 <div class="flex flex-row w-full items-center justify-between py-3">
@@ -299,14 +301,14 @@ onMounted(async () => {
                   </div>
                   <i class="pi pi-angle-right !font-extralight"/>
                 </div>
-                <Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
+                <Divider v-if="idx + 1 !== incomeCategories.length" class="!m-0"/>
               </div>
             </div>
           </div>
-          <div v-if="categories.filter(i => i.type == CategoryType.EXPENSE).length>0" class="flex flex-col w-full">
+          <div v-if="incomeCategories.length>0" class="flex flex-col w-full">
             <span>Expense categories</span>
             <div class="flex card justify-items-start justify-start h-fit">
-              <div v-for="(cat, idx) in categories.filter(i => i.type == CategoryType.EXPENSE)" :key="cat.id"
+              <div v-for="(cat, idx) in expenseCategories" :key="cat.id"
                    @click="transactionCategory = cat; transactionType = cat.type == 'EXPENSE' ? TransactionType.EXPENSE : TransactionType.INCOME; isCategorySelectorOpened = false"
                    class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
                 <div class="flex flex-row w-full items-center justify-between py-3">
@@ -319,7 +321,7 @@ onMounted(async () => {
                   </div>
                   <i class="pi pi-angle-right !font-extralight"/>
                 </div>
-                <Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
+                <Divider v-if="idx + 1 !== expenseCategories.length" class="!m-0"/>
               </div>
             </div>
           </div>