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

new changes

Browse Source
This commit is contained in:
Mamalizz
2025-04-21 23:32:20 +03:30
parent e73acf9f8c
commit e2f951581f
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/products.vue
+27 -23
View File
@@ -1,9 +1,7 @@
<script setup lang="ts">
// import
import useGetProducts, {
type GetProductsFilters,
} from "~/composables/api/products/useGetProducts";
import useGetProducts, { type GetProductsFilters } from "~/composables/api/products/useGetProducts";
import { PRODUCT_RANGE } from "~/constants";
// state
@@ -59,12 +57,8 @@ watch(
<template>
<div class="w-full container flex flex-col">
<div
class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
>
<div
class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full"
>
<div class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5">
<div class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full">
<!-- <div class="flex-center gap-[.75rem]">
<span class="text-xs lg:text-sm">خانه</span>
<span class="text-xs lg:text-sm">/</span>
@@ -75,9 +69,7 @@ watch(
<h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
</div>
<div
class="w-full flex items-center justify-between lg:justify-end gap-4"
>
<div class="w-full flex items-center justify-between lg:justify-end gap-4">
<Input
placeholder="جست و جو محصول ..."
v-model="search"
@@ -96,9 +88,7 @@ watch(
<Suspense>
<FilterButton />
<template #fallback>
<Skeleton
class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl"
/>
<Skeleton class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl" />
</template>
</Suspense>
</div>
@@ -107,24 +97,35 @@ watch(
v-if="productsIsLoading"
class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8 w-full"
>
<div class="w-full flex flex-col gap-3" v-for="i in 8" :key="i">
<div
class="w-full flex flex-col gap-3"
v-for="i in 8"
:key="i"
>
<Skeleton
v-for="i in 3"
:key="i"
class="w-full"
:class="{
'!h-[11.75rem] lg:!h-[22.5rem] !rounded-2xl': i == 1,
'!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [
2, 3,
].includes(i),
'!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [2, 3].includes(i),
'!w-1/2': i == 2,
}"
/>
</div>
</ul>
<div v-else class="w-full h-max">
<div v-if="!products!.length" class="flex flex-grow w-full">
<Placeholder title="محصولی یافت نشد :(" icon="bi:search" />
<div
v-else
class="w-full h-max"
>
<div
v-if="!products!.length"
class="flex flex-grow w-full"
>
<Placeholder
title="محصولی یافت نشد :("
icon="bi:search"
/>
</div>
<ProductsGrid
:with-header="false"
@@ -135,7 +136,10 @@ watch(
v-if="data && paginationData && data.count > 10"
class="w-full flex-center py-10"
>
<Pagination :items="paginationData" :total="data.count" />
<Pagination
:items="paginationData"
:total="data.count"
/>
</div>
</div>
</div>