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

---
 .../transactions/TransactionCreateUpdate.vue  | 63 ++++++++++---------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/transactions/TransactionCreateUpdate.vue b/src/components/transactions/TransactionCreateUpdate.vue
index a235465..51c2cce 100644
--- a/src/components/transactions/TransactionCreateUpdate.vue
+++ b/src/components/transactions/TransactionCreateUpdate.vue
@@ -285,7 +285,7 @@ onMounted(async () => {
 
            :style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
         <div class="flex flex-col w-full max-w-md !h-dvh !pb-20">
-          <div  v-if="categories.filter(i => i.type == CategoryType.INCOME).length>0" class="flex flex-col w-full">
+          <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 incomeCategories" :key="cat.id"
@@ -354,49 +354,50 @@ onMounted(async () => {
         <!--                        optionValue="value"-->
         <!--                        class="!w-full  !items-center !justify-center !border-none "/>-->
         <!--        </div>-->
-<!--        <div class="card flex flex-col w-full items-center justify-center">-->
+        <!--        <div class="card flex flex-col w-full items-center justify-center">-->
 
-<!--          <span class="text-lg hidden lg:flex">Вид транзакции</span>-->
-<!--          <SelectButton v-model="transactionKind" :options="optionsKind" optionLabel="label"-->
-<!--                        optionValue="value"-->
-<!--                        class="!w-full  !items-center !justify-center !border-none "/>-->
-<!--        </div>-->
+        <!--          <span class="text-lg hidden lg:flex">Вид транзакции</span>-->
+        <!--          <SelectButton v-model="transactionKind" :options="optionsKind" optionLabel="label"-->
+        <!--                        optionValue="value"-->
+        <!--                        class="!w-full  !items-center !justify-center !border-none "/>-->
+        <!--        </div>-->
       </div>
-      <div class="flex flex-col w-full justify-items-start">
-        <label class="!font-semibold  text-gray-600 pl-2">Transaction name</label>
-        <div class="flex card !justify-start !items-start !p-4 !pl-5 ">
-          <input class="font-extralight  w-full focus:outline-0" placeholder="Name"
-                 @input="transactionComment?.length ==0 ? isCommentError = true : isCommentError=false"
-                 v-model="transactionComment"/>
+      <div class="flex flex-row w-full justify-between gap-4 ">
+        <div class="flex flex-col w-full justify-items-start">
+          <label class="!font-semibold  text-gray-600 pl-2">Transaction comment</label>
+          <div class="flex card !justify-start !items-start !p-[1.11rem] !pl-5 ">
+            <input class="font-extralight  w-full focus:outline-0" placeholder="Comment"
+                   @input="transactionComment?.length ==0 ? isCommentError = true : isCommentError=false"
+                   v-model="transactionComment"/>
+          </div>
+          <span v-if="isCommentError" class="text-sm !text-red-500 font-extralight">Comment couldn't be empty.</span>
+
         </div>
-        <span v-if="isCommentError" class="text-sm !text-red-500 font-extralight">Comment couldn't be empty.</span>
-
-      </div>
-      <div class="flex flex-col w-full justify-items-start">
-        <label class="!font-semibold  text-gray-600 pl-2">Transaction category</label>
-        <div class="flex card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
-             @click="isCategorySelectorOpened = true; isCategoryError=false;">
-          <div class="flex flex-row w-full gap-2 items-center justify-between">
-            <div v-if="transactionCategory" class="flex flex-row gap-2 items-center">
-              <span class="!text-3xl ">{{ transactionCategory.icon }}</span>
-              <div class="flex flex-col ">
+        <div class="flex flex-col w-full justify-items-start">
+          <label class="!font-semibold  text-gray-600 pl-2">Transaction category</label>
+          <div class="flex card !justify-start !items-start !p-3 !pl-5 cursor-pointer"
+               @click="isCategorySelectorOpened = true; isCategoryError=false;">
+            <div class="flex flex-row w-full gap-2 items-center justify-between">
+              <div v-if="transactionCategory" class="flex flex-row gap-2 items-center">
+                <span class="!text-3xl ">{{ transactionCategory.icon }}</span>
+                <div class="flex flex-col ">
               <span class=" !">{{ transactionCategory.name }}
               </span>
+                </div>
               </div>
-            </div>
-            <div v-else class="flex flex-row gap-2 items-center">
-              <i class="pi pi-question !text-3xl "></i>
-              <div class="flex flex-col ">
+              <div v-else class="flex flex-row gap-2 items-center">
+                <i class="pi pi-question !text-3xl "></i>
+                <div class="flex flex-col ">
               <span class=" !">Категория не определена
               </span>
+                </div>
               </div>
+              <i class="pi pi-angle-right  !font-extralight"/>
             </div>
-            <i class="pi pi-angle-right  !font-extralight"/>
           </div>
+          <span v-if="isCategoryError" class="text-sm text-red-500 font-extralight">Category should be selected</span>
         </div>
-        <span v-if="isCategoryError" class="text-sm text-red-500 font-extralight">Category should be selected</span>
       </div>
-
       <div class="flex !flex-col w-full justify-items-start">
         <label class="!font-semibold text-gray-600 !pl-2">Transaction date</label>
         <div class="card flex justify-center">