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>