marzban-dev
118 lines
3.8 KiB
Vue
118 lines
3.8 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);
|
|
|
|
const selectedCategory = ref("همه دسته ها");
|
|
|
|
// computed
|
|
|
|
const mainCategoriesMenu = computed(() => {
|
|
const categoriesList = categories.value
|
|
? categories.value.map((category) => category.name)
|
|
: [];
|
|
categoriesList.unshift("همه دسته ها");
|
|
|
|
return categoriesList;
|
|
});
|
|
|
|
const filteredCategories = computed(() => {
|
|
if (categories.value) {
|
|
return categories.value
|
|
.flatMap((mainCategory) => mainCategory.subcategorys)
|
|
.filter((category) => {
|
|
if (selectedCategory.value === "همه دسته ها") {
|
|
return category.name.includes(debouncedSearch.value);
|
|
}
|
|
|
|
return (
|
|
category.name.includes(debouncedSearch.value) &&
|
|
category.parent === selectedCategory.value
|
|
);
|
|
});
|
|
}
|
|
return [];
|
|
});
|
|
|
|
// ssr
|
|
|
|
const response = await suspense();
|
|
|
|
if (response.isError) {
|
|
throw createError({
|
|
statusCode: 500,
|
|
statusMessage: `Error in categories page prefetch`,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="pt-20 pb-8 sm:py-20 flex gap-12 sm:gap-6 justify-between items-center max-sm:flex-col max-sm:items-start">
|
|
<span class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</span>
|
|
<div class="flex items-center gap-4 sm:gap-8 max-sm:w-full">
|
|
<Input
|
|
class="max-w-[400px] w-full rounded-full h-[38px] lg:h-[50px]"
|
|
variant="outlined"
|
|
placeholder="جستجو..."
|
|
v-model="search"
|
|
>
|
|
<template #endItem>
|
|
<div class="flex items-center gap-1">
|
|
<Icon
|
|
class="translate-y-[-1px] size-[18px] lg:size-[24px]"
|
|
name="ci:search"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Input>
|
|
|
|
<Select
|
|
class="whitespace-nowrap max-sm:w-full"
|
|
:options="mainCategoriesMenu"
|
|
variant="outlined"
|
|
placeholder="انتخاب کنید"
|
|
v-model="selectedCategory"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Transition name="fade" mode="out-in">
|
|
<div
|
|
v-if="filteredCategories.length > 0"
|
|
v-auto-animate
|
|
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-8 w-full"
|
|
>
|
|
<CategoryCard
|
|
v-for="category in filteredCategories"
|
|
:key="category.id"
|
|
:id="category.id"
|
|
:category="category.name"
|
|
:picture="category.image"
|
|
:count="20"
|
|
description="یک دسته بندی تست"
|
|
dark-layer
|
|
/>
|
|
</div>
|
|
|
|
<div v-else class="flex w-full sm:mt-12">
|
|
<div
|
|
class="flex-col flex-grow py-32 sm:py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
|
|
>
|
|
<Icon name="bi:search" class="**:fill-gray-500 size-[40px] sm:size-[50px]" />
|
|
<span class="text-lg text-gray-500">
|
|
دسته بندی یافت نشد :(
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|