marzban-dev
92 lines
2.7 KiB
Vue
92 lines
2.7 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!.filter((cat) =>
|
|
cat.name.includes(debouncedSearch.value)
|
|
);
|
|
}
|
|
|
|
return categories.value!;
|
|
});
|
|
|
|
// lifecycle
|
|
|
|
onServerPrefetch(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"
|
|
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
|
|
v-if="filteredCategories.length !== 0"
|
|
v-auto-animate
|
|
class="grid grid-cols-3 gap-4 w-full mt-12"
|
|
>
|
|
<CategoryCard
|
|
v-for="category in filteredCategories"
|
|
:key="category.id"
|
|
:id="category.id"
|
|
:category="category.name"
|
|
picture="/img/product-1.jpg"
|
|
:count="20"
|
|
description="یک دسته بندی تستasdasd"
|
|
dark-layer
|
|
/>
|
|
</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>
|