marzban-dev
122 lines
4.0 KiB
Vue
122 lines
4.0 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import useGetCategories from "~/composables/api/product/useGetCategories";
|
|
|
|
// state
|
|
|
|
const { data: categories, suspense } = useGetCategories();
|
|
|
|
const search = ref("");
|
|
const debouncedSearch = refDebounced(search, 300);
|
|
|
|
// computed
|
|
|
|
const filteredCategories = computed(() => {
|
|
|
|
if (debouncedSearch.value.length > 0) {
|
|
return categories.value!.map((cat) => {
|
|
const copyOfCategory = { ...cat };
|
|
copyOfCategory.subcategorys = copyOfCategory.subcategorys.filter((subcat) => {
|
|
return subcat.name.includes(debouncedSearch.value);
|
|
});
|
|
|
|
return copyOfCategory;
|
|
});
|
|
}
|
|
|
|
return categories.value!;
|
|
});
|
|
|
|
// ssr
|
|
|
|
await useAsyncData(async () => {
|
|
|
|
const response = await suspense();
|
|
|
|
if (response.isError) {
|
|
throw createError({
|
|
statusCode: 500,
|
|
statusMessage: `Error in categories page prefetch`
|
|
});
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="py-[5rem] flex gap-6 justify-between items-center">
|
|
<span class="typo-h-3 text-black">دسته بندی ها</span>
|
|
<Input
|
|
class="max-w-[400px] w-full rounded-full"
|
|
variant="outlined"
|
|
placeholder="جستجو..."
|
|
v-model="search"
|
|
>
|
|
<template #endItem>
|
|
<div class="flex items-center gap-1">
|
|
<Icon
|
|
class="translate-y-[-1px]"
|
|
name="ci:search"
|
|
size="24"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Input>
|
|
</div>
|
|
<Transition name="fade" mode="out-in">
|
|
<div
|
|
class="flex flex-col gap-20"
|
|
v-if="filteredCategories.some(cat => cat.subcategorys.length > 0)"
|
|
>
|
|
|
|
<template v-for="mainCategory in filteredCategories">
|
|
<div
|
|
class="flex flex-col gap-12"
|
|
v-if="mainCategory.subcategorys.length > 0"
|
|
>
|
|
<div class="w-full flex items-center justify-between gap-8">
|
|
<div class="flex items-center gap-2">
|
|
<!-- <img :src="mainCategory.icon" alt="" class="w-[30px] opacity-50" />-->
|
|
<span class="typo-h-5">
|
|
{{ mainCategory.name }}
|
|
</span>
|
|
</div>
|
|
<div class="h-px w-full bg-slate-200" />
|
|
</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>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<div v-else class="flex w-full mt-12">
|
|
<div
|
|
class="flex-col flex-grow py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
|
|
>
|
|
<Icon name="bi:search" size="50" class="**:fill-gray-500" />
|
|
<span class="text-lg text-gray-500">
|
|
دسته بندی یافت نشد :(
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|