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

14
src/components/settings/RecurrentyCreateUpdate.vue
View File

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

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"