From 89b1975d2559832d9dbf3f7ed04fb43f1c9eb961 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Mon, 17 Nov 2025 21:19:28 +0300
Subject: [PATCH] categories search

---
 .../settings/RecurrentyCreateUpdate.vue       | 14 +++++---
 .../transactions/TransactionCreateUpdate.vue  | 35 +++++++++++++++----
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/settings/RecurrentyCreateUpdate.vue b/src/components/settings/RecurrentyCreateUpdate.vue
index 2f14769..f712b91 100644
--- a/src/components/settings/RecurrentyCreateUpdate.vue
+++ b/src/components/settings/RecurrentyCreateUpdate.vue
@@ -21,7 +21,13 @@ const recurrentsStore = useRecurrentsStore();
 
 const isCategorySelectorOpened = ref(false);
 
+const categorySearchQuery = ref<String>("");
 const categories = ref<Category[]>([]);
+const filteredCategories = computed(() => {
+  return categorySearchQuery.value === '' ? categories.value : categories.value.filter(i =>
+      i.name.toLowerCase().includes(categorySearchQuery.value.toLowerCase())
+  );
+});
 const recurrentId = ref<number | undefined>(route.params.id)
 const mode = computed(() => {
   return recurrentId.value ? "edit" : "create"
@@ -250,9 +256,9 @@ onMounted(async () => {
          style="background-color: var(--primary-color); "
          :style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
       <div class="flex w-full max-w-md !pb-24">
-        <div class="flex card justify-items-start justify-start">
-
-          <div v-for="(cat, idx) in categories" :key="cat.id"
+        <div class="flex card justify-items-start justify-start gap-2">
+          <input class="p-2 rounded-xl border border-gray-100  w-full" placeholder="Search categories" v-model="categorySearchQuery">
+          <div v-for="(cat, idx) in filteredCategories" :key="cat.id"
                @click="recurrentCategory = cat; 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">
@@ -265,7 +271,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 !== filteredCategories.length" class="!m-0"/>
           </div>
         </div>
       </div>
diff --git a/src/components/transactions/TransactionCreateUpdate.vue b/src/components/transactions/TransactionCreateUpdate.vue
index 974bc18..fae9491 100644
--- a/src/components/transactions/TransactionCreateUpdate.vue
+++ b/src/components/transactions/TransactionCreateUpdate.vue
@@ -13,6 +13,7 @@ import {CreateTransactionDTO, UpdateTransactionDTO} from "@/models/transaction";
 import {CategoryType, TransactionKind, TransactionKindName, TransactionType, TransactionTypeName} from "@/models/enums";
 import {useTransactionStore} from "@/stores/transactions-store";
 import {categoriesService} from "@/services/categories-service";
+import ex = CSS.ex;
 
 
 const route = useRoute();
@@ -27,11 +28,30 @@ const transactionStore = useTransactionStore()
 const tgApp = window.Telegram.WebApp
 
 const isCategorySelectorOpened = ref(false);
-
+const categorySearchQuery = ref<string>("");
 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 normalizedQuery = computed(() =>
+    categorySearchQuery.value.trim().toLowerCase()
+);
+
+const incomeCategories = computed(() =>
+    categories.value.filter(i =>
+        i.type === CategoryType.INCOME &&
+        (normalizedQuery.value
+            ? i.name.toLowerCase().includes(normalizedQuery.value)
+            : true)
+    )
+);
+
+const expenseCategories = computed(() =>
+    categories.value.filter(i =>
+        i.type === CategoryType.EXPENSE &&
+        (normalizedQuery.value
+            ? i.name.toLowerCase().includes(normalizedQuery.value)
+            : true)
+    )
+);const transactionId = ref<number | undefined>(route.params.id)
 const mode = computed(() => {
   return transactionId.value ? "edit" : "create"
 })
@@ -285,7 +305,10 @@ 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">
+
+          <input class="card p-2 rounded-xl border border-gray-100  w-full" placeholder="Search categories" v-model="categorySearchQuery">
+
+          <div v-if="incomeCategories.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"
@@ -305,7 +328,7 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-          <div v-if="incomeCategories.length>0" class="flex flex-col w-full">
+          <div v-if="expenseCategories.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 expenseCategories" :key="cat.id"