luminic-space/app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

categories search

Browse Source
This commit is contained in:
xds
2025-11-17 21:19:28 +03:00
parent 97af28e059
commit 89b1975d25
2 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/transactions/TransactionCreateUpdate.vue
View File

@@ -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"