diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/home/components/CategoryDynamic.jsx | 50 | ||||
| -rw-r--r-- | src/lib/home/components/CategoryPilihan.jsx | 3 | ||||
| -rw-r--r-- | src/lib/product/components/CategorySection.jsx | 11 | ||||
| -rw-r--r-- | src/lib/product/components/ProductSearch.jsx | 35 |
4 files changed, 70 insertions, 29 deletions
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index fa1df286..bbba2ceb 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -2,38 +2,58 @@ import React, { useEffect, useState } from 'react'; import useCategoryManagement from '../hooks/useCategoryManagement'; import NextImage from 'next/image'; import Link from "next/link"; -import router from 'next/router'; import { createSlug } from '@/core/utils/slug'; +import odooApi from '@/core/api/odooApi'; const CategoryDynamic = () => { const { categoryManagement } = useCategoryManagement(); + const [categoryData, setCategoryData] = useState({}); + const [subCategoryData, setSubCategoryData] = useState({}); + + useEffect(() => { + const fetchCategoryData = async () => { + if (categoryManagement && categoryManagement.data) { + const updatedCategoryData = {}; + const updatedSubCategoryData = {}; + + for (const category of categoryManagement.data) { + // Calculate level 1 products + const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`); + // console.log("countLevel1.child",countLevel1) + + updatedCategoryData[category.categoryIdI] = countLevel1.numFound; + + + // Calculate level 2 products for each sub-category + for (const subCategory of countLevel1.children) { + updatedSubCategoryData[subCategory.id] = subCategory.numFound; + } + } - const calculateLevel3Products = (category) => { - return category.childFrontendIdI.reduce((total, child) => total + (child.numFound || 0), 0); - }; + setCategoryData(updatedCategoryData); + setSubCategoryData(updatedSubCategoryData); + } + }; - const calculateLevel2Products = (category) => { - return category.categories.reduce((total, subCategory) => { - const level3Products = calculateLevel3Products(subCategory); - return total + (subCategory.numFound || 0) + level3Products; - }, 0); - }; + fetchCategoryData(); + }, [categoryManagement, categoryData]); + return ( <div> {categoryManagement && categoryManagement.data?.map((category) => { - const countLevel2 = calculateLevel2Products(category); - + const countLevel1 = categoryData[category.categoryIdI] || 0; + return ( <div key={category.id}> <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'> <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div> - <p className='text-gray_r-10 text-sm'>{countLevel2} Produk tersedia</p> + <p className='text-gray_r-10 text-sm'>{countLevel1} Produk tersedia</p> <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold">Lihat Semua</Link> </div> <div className='grid grid-cols-3 gap-2'> {category.categories.map((subCategory) => { - const countLevel3 = calculateLevel3Products(subCategory); + const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; return ( <div key={subCategory.id} className='border rounded justify-start items-start'> @@ -48,7 +68,7 @@ const CategoryDynamic = () => { /> <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'> <div className='font-semibold text-lg mr-2'>{subCategory.name}</div> - <p className='text-gray_r-10 text-sm'>{(subCategory.numFound || 0) + countLevel3} Produk</p> + <p className='text-gray_r-10 text-sm'>{countLevel2} Produk tersedia</p> <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.idLevel2)} className="!text-red-500 font-semibold">Lihat Semua</Link> </div> </div> diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 54807686..ea78b349 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -10,7 +10,6 @@ import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton' const CategoryPilihan = ({ id, categories }) => { const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); - return ( <section> <div className='flex flex-row items-center mb-4'> @@ -38,7 +37,7 @@ const CategoryPilihan = ({ id, categories }) => { )} </div> <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 "> - {categories.map((category) => ( + {categories?.map((category) => ( <div className="KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group"> <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '> <div className="group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible"> diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 14a39e7e..2af3db10 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -13,23 +13,16 @@ import { HeartIcon, } from '@heroicons/react/24/outline'; import { useState } from 'react'; // Import useState +import { getIdFromSlug } from '@/core/utils/slug' const CategorySection = ({ categories }) => { const { isDesktop, isMobile } = useDevice(); - const router = useRouter(); const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility - let teks = router.query.slug; - let hasil = teks?.match(/(\d+)$/)[0]; - - const breadcrumbs = useQuery( - `category-breadcrumbs/${hasil}`, - async () => await odooApi('GET', `/api/v1/category/${hasil}/category-breadcrumb`) - ); - const handleToggleCategories = () => { setIsOpenCategory(!isOpenCategory); }; + const displayedCategories = isOpenCategory ? categories : categories.slice(0, 10); diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index c4970b21..b5c1e87d 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -28,6 +28,7 @@ import SideBanner from '~/modules/side-banner'; import FooterBanner from '~/modules/footer-banner'; import CategorySection from './CategorySection'; import { getIdFromSlug } from '@/core/utils/slug' +import { data } from 'autoprefixer'; const ProductSearch = ({ query, @@ -63,6 +64,7 @@ const ProductSearch = ({ const [categoryValues, setCategory] = useState( query?.category?.split(',') || [] ); + const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null); const [priceTo, setPriceTo] = useState(query?.priceTo || null); @@ -71,6 +73,9 @@ const ProductSearch = ({ const productRows = limit; const productFound = productSearch.data?.response.numFound; const [dataCategories, setDataCategories] = useState([]) + const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) + const dataId = [] + // console.log("dataCategories",dataCategories) const categoryId = getIdFromSlug(prefixUrl) @@ -103,7 +108,7 @@ const ProductSearch = ({ }); } }, [productFound, query, spellings]); - + let id = [] useEffect(() => { const checkIfBrand = async () => { const brand = await axios( @@ -123,13 +128,37 @@ const ProductSearch = ({ useEffect(() => { const loadCategories = async () => { - const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) + const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) if(getCategories){ setDataCategories(getCategories) } } loadCategories() + + const loadProduct = async () => { + const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`) + console.log("getCategoriesId",getCategoriesId) + if(getCategoriesId){ + setDataCategoriesProduct(getCategoriesId) + } + } + loadProduct() }, []) + collectIds(dataCategoriesProduct); + +// Fungsi rekursif untuk menambahkan ID dari kategori dan subkategori ke array dataId +function collectIds(category) { + if (category && category.id) { + dataId.push(category.id); + } + if (Array.isArray(category.children)) { + for (const child of category.children) { + collectIds(child); + } + } +} + +console.log("dataID",dataId) const brands = []; for ( @@ -275,7 +304,7 @@ const ProductSearch = ({ }; const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - + console.log("query?.category?.split(',')",query.fq) return ( <> <MobileView> |