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

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
Parsa Nazer
2025-01-29 23:54:42 +03:30
parent 3ca94f7ca0 16b5e27c6e
commit 698c5d0a6f
3 changed files with 67 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/products/FilterProducts.vue
+38 -31
View File
@@ -1,10 +1,10 @@
<script setup lang="ts">
// imports
import useGetCategories from "~/composables/api/product/useGetCategories";
import useGetProducts, {
type GetProductsFilters,
} from "~/composables/api/products/useGetProducts";
import { useParams } from "~/composables/global/useParams";
import { PRODUCT_RANGE } from "~/constants";
// state
@@ -24,36 +24,43 @@ const in_stock = ref(JSON.parse(params.in_stock) ?? false);
const sliderValueDebounced = refDebounced(sliderValue, 1000);
const options = [
{
name: "میوه",
children: [
{ name: "سیب" },
{ name: "موز" },
{ name: "پرتقال" },
{ name: "طالبی" },
{ name: "انگور" },
{ name: "هندوانه" },
{ name: "خربزه" },
{ name: "گلابی" },
],
},
{
name: "سبزیجات",
children: [
{ name: "کلم" },
{ name: "بروکلی" },
{ name: "هویج" },
{ name: "کاهو" },
{ name: "اسفناج" },
{ name: "چوی بوک" },
{ name: "گل کلم" },
{ name: "سیب زمینی" },
],
},
];
// queries
const { isPending: productsIsPending } = useGetProducts(params);
const filters = computed(() => {
return {
sort: params.sort ?? "newest",
search: params.search ?? "",
price_gte: params.price_gte ?? PRODUCT_RANGE.min,
price_lte: params.price_lte ?? PRODUCT_RANGE.max,
in_stock: params.in_stock ?? false,
has_discount: params.has_discount ?? false,
category: params.category ?? undefined,
page: params.page ?? 1,
};
});
const { data: categories, suspense } = useGetCategories();
await useAsyncData(async () => {
await suspense();
});
const { isPending: productsIsPending } = useGetProducts(filters);
// computed
const allCategories = computed(() => {
return categories.value!.map((category) => {
return {
name: category.name,
children: category.subcategorys.map((sub) => {
return {
name: sub.name,
};
}),
};
});
});
// methods
@@ -130,7 +137,7 @@ watch(
<Icon name="ci:grid" size="24" />
دسته بندی
</div>
<ComboBox :options="options" v-model="params.category" />
<ComboBox :options="allCategories" v-model="params.category" />
</div>
<div class="flex flex-col w-full gap-5">
frontend/composables/api/products/useGetProducts.ts
+4 -25
View File
@@ -20,22 +20,11 @@ export type GetProductsFilters = {
// composable
const useGetProducts = (params?: GetProductsFilters) => {
const useGetProducts = (params?: ComputedRef<GetProductsFilters>) => {
// state
const { $axios: axios } = useNuxtApp();
const {
search,
sort,
in_stock,
has_discount,
category,
price_gte,
price_lte,
page,
} = toRefs(params as GetProductsFilters);
// methods
const handleGetProducts = async (params?: GetProductsFilters) => {
@@ -50,7 +39,7 @@ const useGetProducts = (params?: GetProductsFilters) => {
category: params?.category,
price_gte: params?.price_gte,
price_lte: params?.price_lte,
offset: params?.page ? Number(params.page) * 9 - 9 : 0,
offset: Number(params?.page) * 9 - 9,
limit: 9,
},
}
@@ -61,18 +50,8 @@ const useGetProducts = (params?: GetProductsFilters) => {
return useQuery({
staleTime: 60 * 1000,
queryKey: [
QUERY_KEYS.products,
search,
sort,
in_stock,
has_discount,
category,
price_gte,
price_lte,
page,
],
queryFn: () => handleGetProducts(params),
queryKey: [QUERY_KEYS.products, params],
queryFn: () => handleGetProducts(params?.value),
});
};
frontend/pages/products.vue
+25 -17
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// import
import useGetProducts, {
@@ -9,17 +8,19 @@ import { PRODUCT_RANGE } from "~/constants";
// state
const params: GetProductsFilters = useUrlSearchParams("history", {
initialValue: {
search: "",
sort: "newest",
price_gte: PRODUCT_RANGE.min,
price_lte: PRODUCT_RANGE.max,
in_stock: false,
has_discount: false,
category: "",
page: "1",
},
const params: GetProductsFilters = useUrlSearchParams("history");
const filters = computed(() => {
return {
sort: params.sort ?? "newest",
search: params.search ?? "",
price_gte: params.price_gte ?? PRODUCT_RANGE.min,
price_lte: params.price_lte ?? PRODUCT_RANGE.max,
in_stock: params.in_stock ?? false,
has_discount: params.has_discount ?? false,
category: params.category ?? undefined,
page: params.page ?? 1,
};
});
const search = ref(params.search ?? "");
@@ -31,7 +32,7 @@ provide("params", params);
// queries
const { data, isLoading: productsIsLoading } = useGetProducts(params);
const { data, isLoading: productsIsLoading } = useGetProducts(filters);
const products = computed(() => {
return data.value?.results.flat();
@@ -55,17 +56,17 @@ watch(
<template>
<div class="w-full container flex flex-col">
<div class="w-full flex justify-end items-center py-[5rem]">
<div class="w-full flex justify-end items-end py-[5rem]">
<div
class="flex flex-col items-start gap-[1.5rem] text-black w-full"
>
<!-- <div class="flex-center gap-[.75rem]">
<div class="flex-center gap-[.75rem]">
<span>خانه</span>
<span>/</span>
<span>محصولات</span>
<span>/</span>
<span>همه</span>
</div> -->
</div>
<h1 class="typo-h-3">لیست محصولات</h1>
</div>
@@ -86,7 +87,14 @@ watch(
</div>
</template>
</Input>
<FilterButton />
<!-- <Suspense>
<FilterButton />
<template #fallback>
<Skeleton
class="!w-[10.35rem] !h-[3.35rem] !rounded-full"
/>
</template>
</Suspense> -->
</div>
</div>
<ul