heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-01-29 03:29:07 +03:30
parent e2fd289cd9
commit 30ebc75a18
1 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/category.vue
+37 -25
View File
@@ -17,11 +17,12 @@ const filteredCategories = computed(() => {
if (debouncedSearch.value.length > 0) { if (debouncedSearch.value.length > 0) {
return categories.value!.map((cat) => { return categories.value!.map((cat) => {
cat.subcategorys = cat.subcategorys.filter((subcat) => { const copyOfCategory = { ...cat };
copyOfCategory.subcategorys = copyOfCategory.subcategorys.filter((subcat) => {
return subcat.name.includes(debouncedSearch.value); return subcat.name.includes(debouncedSearch.value);
}); });
return cat; return copyOfCategory;
}); });
} }
@@ -66,32 +67,43 @@ await useAsyncData(async () => {
</Input> </Input>
</div> </div>
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<div v-if="filteredCategories"> <div
<div class="flex flex-col gap-20"
class="flex flex-col gap-6" v-if="filteredCategories.some(cat => cat.subcategorys.length > 0)"
v-for="mainCategory in filteredCategories" >
>
<div class="w-full flex items-center justify-between"> <template v-for="mainCategory in filteredCategories">
<span>
{{ mainCategory.name }}
</span>
</div>
<div <div
v-auto-animate class="flex flex-col gap-12"
class="grid grid-cols-3 gap-4 w-full mt-12" v-if="mainCategory.subcategorys.length > 0"
> >
<CategoryCard <div class="w-full flex items-center justify-between gap-8">
v-for="category in mainCategory.subcategorys" <div class="flex items-center gap-2">
:key="category.id" <!-- <img :src="mainCategory.icon" alt="" class="w-[30px] opacity-50" />-->
:id="category.id" <span class="typo-h-5">
:category="category.name" {{ mainCategory.name }}
:picture="category.icon" </span>
:count="20" </div>
description="یک دسته بندی تستasdasd" <div class="h-px w-full bg-slate-200" />
dark-layer </div>
/> <div
v-auto-animate
class="grid grid-cols-3 gap-4 w-full"
>
<CategoryCard
v-for="category in mainCategory.subcategorys"
:key="category.id"
:id="category.id"
:category="category.name"
:picture="category.image"
:count="20"
description="یک دسته بندی تستasdasd"
dark-layer
/>
</div>
</div> </div>
</div> </template>
</div> </div>
<div v-else class="flex w-full mt-12"> <div v-else class="flex w-full mt-12">