From 6b173eaf8a95432316822b1d41b084875adfbd83 Mon Sep 17 00:00:00 2001 From: "tri.susilo" Date: Wed, 8 May 2024 14:47:11 +0700 Subject: [agnes] - Feature category management --- src/lib/category/components/Category.jsx | 79 ++++++++++++++++++++------ src/lib/home/components/CategoryPilihan.jsx | 32 +++++++++++ src/lib/product/components/CategorySection.jsx | 22 +++++++ src/lib/product/components/ProductSearch.jsx | 20 +++++++ 4 files changed, 136 insertions(+), 17 deletions(-) create mode 100644 src/lib/home/components/CategoryPilihan.jsx create mode 100644 src/lib/product/components/CategorySection.jsx (limited to 'src/lib') diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index e6ea5acf..c147a3b3 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -2,10 +2,14 @@ import odooApi from '@/core/api/odooApi' import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import { createSlug } from '@/core/utils/slug' +import { ChevronRightIcon } from '@heroicons/react/24/outline' +import Image from 'next/image' import { useEffect, useState } from 'react' const Category = () => { const [categories, setCategories] = useState([]) + const [openCategories, setOpenCategory] = useState([]); + useEffect(() => { const loadCategories = async () => { @@ -31,7 +35,7 @@ const Category = () => {
{categories?.map((category) => ( -
+
{ {category.name}
-
+
{category.childs.map((child1Category) => ( -
+
{child1Category.name} -
- {child1Category.childs.map((child2Category) => ( - - {child2Category.name} - +
+ {child1Category.childs.map((child2Category, index) => ( + (index < 4) && ( + + {child2Category.name} + + ) ))} + {child1Category.childs.length > 5 && ( +
+ +

Lihat Semua

+ + +
+ )}
))}
+
+
+
+ {category.childs.map((brand, index) => ( + (index < 8 ) && ( +
+ + + +
+ ) + ))} +
+ {category.childs.length > 8 && ( +
+ +

Lihat Semua Brand

+ + +
+ )} +
+
+ +
+
))} diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx new file mode 100644 index 00000000..c506ef29 --- /dev/null +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -0,0 +1,32 @@ +import Image from 'next/image' +import useCategoryHome from '../hooks/useCategoryHome' + +const CategoryPilihan = ({ id, categories }) => { + const { categoryHome } = useCategoryHome({ id }) + + return ( +
+
+

Kategori Pilihan

+

total produk

+
+
+ {categories.map((category) => ( +
+ +
+

{category?.name}

+
+
+ ))} +
+
+ ) +} + +export default CategoryPilihan diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx new file mode 100644 index 00000000..7c347fe8 --- /dev/null +++ b/src/lib/product/components/CategorySection.jsx @@ -0,0 +1,22 @@ +import Image from "next/image" + +const CategorySection = ({ categories }) => { + return ( +
+
+ {categories.map((category) => ( +
+
+ {category?.name} +
+
+

{category?.name}

+
+
+ ))} +
+
+ ) +} + +export default CategorySection \ No newline at end of file diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 08b64c13..253c3703 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -26,6 +26,8 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'; import SideBanner from '~/modules/side-banner'; import FooterBanner from '~/modules/footer-banner'; +import CategorySection from './CategorySection'; +import { getIdFromSlug } from '@/core/utils/slug' const ProductSearch = ({ query, @@ -68,6 +70,10 @@ const ProductSearch = ({ const productStart = productSearch.data?.responseHeader.params.start; const productRows = limit; const productFound = productSearch.data?.response.numFound; + const [dataCategories, setDataCategories] = useState([]) + + const categoryId = getIdFromSlug(prefixUrl) + useEffect(() => { if (productFound == 0 && query.q && !spellings) { @@ -116,6 +122,18 @@ const ProductSearch = ({ } }, [q]); + useEffect(() => { + const loadCategories = async () => { + const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId}) + if(getCategories){ + setDataCategories(getCategories) + } + } + loadCategories() + }, []) + + console.log('Data Category : ', dataCategories) + const brands = []; for ( let i = 0; @@ -409,7 +427,9 @@ const ProductSearch = ({
+
+ {bannerPromotionHeader && bannerPromotionHeader?.image && (
Date: Wed, 3 Jul 2024 08:34:16 +0700 Subject: update category management --- src/lib/home/components/CategoryPilihan.jsx | 38 ++++++++++++++++---------- src/lib/product/components/CategorySection.jsx | 22 +++++++++------ src/lib/product/components/ProductSearch.jsx | 7 ++--- 3 files changed, 39 insertions(+), 28 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index c506ef29..3f1066e2 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -1,30 +1,40 @@ import Image from 'next/image' import useCategoryHome from '../hooks/useCategoryHome' +import Link from '@/core/components/elements/Link/Link' +import { createSlug } from '@/core/utils/slug' const CategoryPilihan = ({ id, categories }) => { const { categoryHome } = useCategoryHome({ id }) - + console.log("id",id) + console.log("categories",categories) return (
-
-

Kategori Pilihan

-

total produk

+
+
Kategori Pilihan
+

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

-
+
{categories.map((category) => ( -
-
- {category?.name} - +
+
+
+
+ {category?.name} +
+

{category?.name}

+
-
-

{category?.name}

+
+ + Lihat semua +
))} -
+
) } diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 7c347fe8..c250efeb 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -1,20 +1,24 @@ import Image from "next/image" +import Link from '@/core/components/elements/Link/Link' +import { createSlug } from '@/core/utils/slug' const CategorySection = ({ categories }) => { return ( -
-
+
+
{categories.map((category) => ( -
-
- {category?.name} -
-
-

{category?.name}

+
+
+
+
+ {category?.name} +
+

{category?.name}

+
))} -
+
) } diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 253c3703..29cf94da 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -74,7 +74,6 @@ const ProductSearch = ({ const categoryId = getIdFromSlug(prefixUrl) - useEffect(() => { if (productFound == 0 && query.q && !spellings) { searchSpellApi({ query: query.q }).then((response) => { @@ -121,18 +120,16 @@ const ProductSearch = ({ checkIfBrand(); } }, [q]); - + useEffect(() => { const loadCategories = async () => { - const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId}) + const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) if(getCategories){ setDataCategories(getCategories) } } loadCategories() }, []) - - console.log('Data Category : ', dataCategories) const brands = []; for ( -- cgit v1.2.3 From 1a70984f3497652b8d8b64d16053c1f2be452bd7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 5 Jul 2024 10:06:49 +0700 Subject: update category management --- src/lib/home/components/CategoryPilihan.jsx | 34 ++++++++++++++++++++++---- src/lib/product/components/CategorySection.jsx | 22 ++++++++--------- 2 files changed, 40 insertions(+), 16 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 3f1066e2..4a1106b0 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -2,17 +2,41 @@ import Image from 'next/image' import useCategoryHome from '../hooks/useCategoryHome' import Link from '@/core/components/elements/Link/Link' import { createSlug } from '@/core/utils/slug' +import { useEffect, useState } from 'react'; +import { bannerApi } from '../../../api/bannerApi'; +const { useQuery } = require('react-query') +import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; + const CategoryPilihan = ({ id, categories }) => { - const { categoryHome } = useCategoryHome({ id }) - console.log("id",id) - console.log("categories",categories) - return ( -
+ const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'index-a-1' })); + + return ( +
Kategori Pilihan

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

+
+ {heroBanner.data && + heroBanner.data?.length > 0 && ( +
+ {/* {heroBanner.data?.map((banner) => ( */} + + {heroBanner.data[0].name} + + {/* ))} */} +
+ + )} +
{categories.map((category) => (
diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index c250efeb..4c66e861 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -1,26 +1,26 @@ import Image from "next/image" -import Link from '@/core/components/elements/Link/Link' +import Link from 'next/link' import { createSlug } from '@/core/utils/slug' const CategorySection = ({ categories }) => { return (
-
+
{categories.map((category) => ( -
-
-
-
- {category?.name} + +
+
+
+ {category?.name} +

{category?.name}

-

{category?.name}

-
+ ))} -
+
) } -export default CategorySection \ No newline at end of file +export default CategorySection -- cgit v1.2.3 From 59cba752134fa41063956569a3f4e7ed2a6d2537 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 8 Jul 2024 08:48:29 +0700 Subject: add dynamic category --- src/lib/home/components/CategoryDynamic.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/lib/home/components/CategoryDynamic.jsx (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx new file mode 100644 index 00000000..59a1858b --- /dev/null +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -0,0 +1,9 @@ +const CategoryDynamic = ({}) =>{ + return( +
+ DISINI CATEGORY DYNAMIC +
+ ) +}; + +export default CategoryDynamic; \ No newline at end of file -- cgit v1.2.3 From 0840f5ccc7493dfa091508db84bad8a21e073268 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 18 Jul 2024 17:24:36 +0700 Subject: update category-management --- src/lib/home/components/CategoryDynamic.jsx | 95 ++++++++++++++++++++++++++--- src/lib/home/hooks/useCategoryManagement.js | 34 +++++++++++ 2 files changed, 122 insertions(+), 7 deletions(-) create mode 100644 src/lib/home/hooks/useCategoryManagement.js (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 59a1858b..e3052d11 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,9 +1,90 @@ -const CategoryDynamic = ({}) =>{ - return( -
- DISINI CATEGORY DYNAMIC -
- ) +import React, { useEffect, useState } from 'react'; +import {fetchProductManagementSolr} from '../hooks/useCategoryManagement'; +import NextImage from 'next/image'; +import Link from "next/link" +import router from 'next/router'; +import { createSlug } from '@/core/utils/slug' + +const CategoryDynamic = () => { + const [promoItems, setPromoItems] = useState([]); + useEffect(() => { + const loadPromo = async () => { + + try { + const items = await fetchProductManagementSolr(); + setPromoItems(items); + + } catch (loadError) { + // console.error("Error loading promo items:", loadError) + } + } + + + loadPromo() + + },[]); + + const image = 'https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' + const handleLink = (name, id) => { + return `/shop/category/${name}/${id}`; }; -export default CategoryDynamic; \ No newline at end of file + console.log("promoItems",promoItems) + + return ( +
+
Kategori Pilihan
+ {/* Render category data */} + {promoItems && promoItems.map((category) => ( +
+
+
{category.name}
+

999 rb+ Produk tersedia

+ Lihat Semua +
+

+ Kategori level 1 : {category.name} - ID level 1 : {category.id} + +

+
+ {category.category_id2.map((index)=> ( +
+

+ id LEVEL 2: {index.id_level_2} - Name LEVEL 2: {index.name} + +

+ {index.child_frontend_id_i.map((x)=> ( +
+

+ id LEVEL 3: {x.id_level_3} - name LEVEL 3: {x.name} + +

+
+ ))} +
+

+
+ ))} +
+
+ ))} +
+ ); +} + +export default CategoryDynamic; diff --git a/src/lib/home/hooks/useCategoryManagement.js b/src/lib/home/hooks/useCategoryManagement.js new file mode 100644 index 00000000..7c01df6e --- /dev/null +++ b/src/lib/home/hooks/useCategoryManagement.js @@ -0,0 +1,34 @@ +export const fetchProductManagementSolr = async () => { + try { + const queryParams = new URLSearchParams({q: 'type_value_s:bundling'}) + const response = await fetch(`/solr/product_category_management/query?q=*:*&q.op=OR&indent=true`); + // console.log("response", response) + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + // console.log("data",data) + const dataManagement = await map(data.response.docs); + // console.log("dataManagement",dataManagement) + return dataManagement; + } catch (error) { + console.error("Error fetching promotion data:", error); + return []; + } +}; + +const map = async (promotions) => { + const result = []; + for (const promotion of promotions) { + const data = { + id: promotion.id, + category_id: promotion.category_id_i, + name: promotion.name_s, + sequence: promotion.sequence_i, + image: promotion.image_s, + category_id2: JSON.parse(promotion.category_id2_s), + }; + result.push(data); + } + return result; +}; -- cgit v1.2.3 From 8564ea1361d40560679df6823b28dfc7e02ab197 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 19 Jul 2024 16:45:46 +0700 Subject: update view category dynamic --- src/lib/home/components/CategoryDynamic.jsx | 81 +++++++++++++---------------- src/lib/home/hooks/useCategoryManagement.js | 2 +- 2 files changed, 38 insertions(+), 45 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index e3052d11..4180438a 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -18,66 +18,59 @@ const CategoryDynamic = () => { // console.error("Error loading promo items:", loadError) } } - - loadPromo() },[]); - - const image = 'https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' - const handleLink = (name, id) => { - return `/shop/category/${name}/${id}`; -}; console.log("promoItems",promoItems) return (
-
Kategori Pilihan
+ {/*
Kategori Pilihan
*/} {/* Render category data */} {promoItems && promoItems.map((category) => (
-
+
{category.name}

999 rb+ Produk tersedia

- Lihat Semua + Lihat Semua
-

- Kategori level 1 : {category.name} - ID level 1 : {category.id} - -

-
+
{category.category_id2.map((index)=> ( -
-

- id LEVEL 2: {index.id_level_2} - Name LEVEL 2: {index.name} - -

- {index.child_frontend_id_i.map((x)=> ( -
-

- id LEVEL 3: {x.id_level_3} - name LEVEL 3: {x.name} - -

-
- ))} +
+
+
+ +
+
{index.name}
+

999 rb+ Produk

+ Lihat Semua +
+
+
+ {index.child_frontend_id_i.map((x)=> ( +
+ + +
+
{x.name}
+
+ +
+ ))}
-

+
))}
diff --git a/src/lib/home/hooks/useCategoryManagement.js b/src/lib/home/hooks/useCategoryManagement.js index 7c01df6e..db4e79e1 100644 --- a/src/lib/home/hooks/useCategoryManagement.js +++ b/src/lib/home/hooks/useCategoryManagement.js @@ -1,7 +1,7 @@ export const fetchProductManagementSolr = async () => { try { const queryParams = new URLSearchParams({q: 'type_value_s:bundling'}) - const response = await fetch(`/solr/product_category_management/query?q=*:*&q.op=OR&indent=true`); + const response = await fetch(`/solr/product_category_management/query?q=*:*&q.op=OR&sort=sequence_i asc&indent=true`); // console.log("response", response) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); -- cgit v1.2.3 From 911e0fdc6beb2f97c7e390a6aec5773202189d68 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 19 Jul 2024 17:07:23 +0700 Subject: update mobile view --- src/lib/home/components/CategoryDynamicMobile.jsx | 69 +++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/lib/home/components/CategoryDynamicMobile.jsx (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx new file mode 100644 index 00000000..a550bd62 --- /dev/null +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from 'react'; +import {fetchProductManagementSolr} 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 { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; + +const CategoryDynamicMobile = () => { + const [promoItems, setPromoItems] = useState([]); + useEffect(() => { + const loadPromo = async () => { + + try { + const items = await fetchProductManagementSolr(); + setPromoItems(items); + + } catch (loadError) { + // console.error("Error loading promo items:", loadError) + } + } + loadPromo() + + },[]); + + console.log("promoItems",promoItems) + + return ( +
+ {/*
Kategori Pilihan
*/} + {/* Render category data */} + {promoItems && promoItems.map((category) => ( +
+
+
{category.name}
+ Lihat Semua +
+ + {category.category_id2.map((index)=> ( + +
+
+
+ +
+
{index.name}
+

999 rb+ Produk

+ Lihat Semua +
+
+
+
+ + ))} + +
+ ))} +
+ ); +} + +export default CategoryDynamicMobile; -- cgit v1.2.3 From d6b459b3ea396775fae25b44d34c8dc724379224 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 20 Jul 2024 11:45:41 +0700 Subject: update mobile view --- src/lib/home/components/CategoryDynamic.jsx | 14 ++-- src/lib/home/components/CategoryDynamicMobile.jsx | 97 +++++++++++++++-------- src/lib/home/components/CategoryPilihan.jsx | 2 +- src/lib/product/components/CategorySection.jsx | 51 +++++++++--- src/lib/product/components/ProductSearch.jsx | 1 + 5 files changed, 111 insertions(+), 54 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 4180438a..244543be 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -26,22 +26,20 @@ const CategoryDynamic = () => { return (
- {/*
Kategori Pilihan
*/} - {/* Render category data */} {promoItems && promoItems.map((category) => (
{category.name}

999 rb+ Produk tersedia

- Lihat Semua + Lihat Semua
{category.category_id2.map((index)=> ( -
+
-
+
{
{index.child_frontend_id_i.map((x)=> (
- + { +const CategoryDynamicMobile = () => { const [promoItems, setPromoItems] = useState([]); + const [selectedCategory, setSelectedCategory] = useState({}); + useEffect(() => { const loadPromo = async () => { - try { const items = await fetchProductManagementSolr(); setPromoItems(items); - + if (items.length > 0) { + const initialSelections = items.reduce((acc, category) => { + if (category.category_id2.length > 0) { + acc[category.id] = category.category_id2[0].id_level_2; + } + return acc; + }, {}); + setSelectedCategory(initialSelections); + } } catch (loadError) { // console.error("Error loading promo items:", loadError) } - } - loadPromo() + }; + loadPromo(); + }, []); - },[]); - - console.log("promoItems",promoItems) + const handleCategoryLevel2Click = (categoryLevel1Id, categoryLevel2Id) => { + setSelectedCategory(prev => ({ + ...prev, + [categoryLevel1Id]: categoryLevel2Id + })); + }; return (
- {/*
Kategori Pilihan
*/} - {/* Render category data */} {promoItems && promoItems.map((category) => (
-
{category.name}
- Lihat Semua +
{category.name}
+ Lihat Semua
- {category.category_id2.map((index)=> ( - -
-
-
+ {category.category_id2.map((index) => ( + +
handleCategoryLevel2Click(category.id, index?.id_level_2)} + className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.id_level_2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} + > +
+
-
-
{index.name}
-

999 rb+ Produk

- Lihat Semua +
+
{index.name}
+

999 rb+ Produk

+
-
- + ))} +
+
+ {category.category_id2.map((index) => ( + selectedCategory[category.id] === index?.id_level_2 && index.child_frontend_id_i.map((x) => ( +
+ + +
+
{x.name}
+
+ +
+ )) + ))} +
+
))}
); -} +}; export default CategoryDynamicMobile; diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 4a1106b0..409a8918 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -43,7 +43,7 @@ const CategoryPilihan = ({ id, categories }) => {
- {category?.name} + {category?.name}

{category?.name}

diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 4c66e861..278bda94 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -1,24 +1,49 @@ import Image from "next/image" import Link from 'next/link' import { createSlug } from '@/core/utils/slug' - +import useDevice from '@/core/hooks/useDevice'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; const CategorySection = ({ categories }) => { + const { isDesktop, isMobile } = useDevice(); return (
-
- {categories.map((category) => ( - -
-
-
- {category?.name} -

{category?.name}

+ {isDesktop && +
+ {categories.map((category) => ( + +
+
+
+ {category?.name} +

{category?.name}

+
-
- - ))} -
+ + ))} +
+ } + {isMobile && +
+ + {categories.map((category) => ( + + +
+
+
+ {category?.name} +

{category?.name}

+
+
+
+ + + ))} + +
+ }
) } diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 29cf94da..c4970b21 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -336,6 +336,7 @@ const ProductSearch = ({ SpellingComponent )}
+ {productFound > 0 && (
-- cgit v1.2.3 From 1a3bef5d01fb50ad731f269f0a76b5c5fd52813d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 22 Jul 2024 16:56:30 +0700 Subject: { return ( diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx index 571c4745..fc899665 100644 --- a/src/lib/home/components/PreferredBrand.jsx +++ b/src/lib/home/components/PreferredBrand.jsx @@ -1,4 +1,5 @@ -import { Swiper, SwiperSlide } from 'swiper/react' +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { Navigation, Pagination, Autoplay } from 'swiper'; import usePreferredBrand from '../hooks/usePreferredBrand' import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton' import BrandCard from '@/lib/brand/components/BrandCard' @@ -10,6 +11,22 @@ const PreferredBrand = () => { let params = 'prioritas' const { preferredBrands } = usePreferredBrand(query) const { isMobile, isDesktop } = useDevice() + const swiperBanner = { + modules:[Navigation, Pagination, Autoplay], + autoplay: { + delay: 4000, + disableOnInteraction: false + }, + loop: true, + className: 'h-[70px] md:h-[100px] w-full', + slidesPerView: isMobile ? 4 : 8, + spaceBetween: isMobile ? 12 : 0, + pagination: { + dynamicBullets: true, + dynamicMainBullets: isMobile ? 6 : 8, + clickable: true, + } + } return (
@@ -21,16 +38,18 @@ const PreferredBrand = () => { )}
- {preferredBrands.isLoading && } - {!preferredBrands.isLoading && ( - - {preferredBrands.data?.data.map((brand) => ( - - - - ))} - - )} +
+ {preferredBrands.isLoading && } + {!preferredBrands.isLoading && ( + + {preferredBrands.data?.data.map((brand) => ( + + + + ))} + + )} +
) } -- cgit v1.2.3 From a78251dc5cdfdd5438aad3ce7b7e342fceb7275e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 22 Jul 2024 16:57:47 +0700 Subject: update category management --- src/lib/home/components/CategoryDynamic.jsx | 4 -- src/lib/product/components/CategorySection.jsx | 67 +++++++++++++++++++------- 2 files changed, 50 insertions(+), 21 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 244543be..2edd5485 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -19,11 +19,7 @@ const CategoryDynamic = () => { } } loadPromo() - },[]); - - console.log("promoItems",promoItems) - return (
{promoItems && promoItems.map((category) => ( diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 278bda94..e80429f4 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -4,44 +4,77 @@ import { createSlug } from '@/core/utils/slug' import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; +import { useQuery } from 'react-query' +import { useRouter } from 'next/router' + const CategorySection = ({ categories }) => { const { isDesktop, isMobile } = useDevice(); + const router = useRouter() + + 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`) + ) + return (
- {isDesktop && + {isDesktop && (
- {categories.map((category) => ( + {categories.slice(0, 10).map((category) => (
- {category?.name} -

{category?.name}

+ {category?.name} +

{category?.name}

))}
- } + )} + {isDesktop && categories.length > 10 && ( +
+ Lihat Semua + +
+ )} + {isMobile &&
- {categories.map((category) => ( - - -
-
-
- {category?.name} -

{category?.name}

-
-
+ {categories.slice(0, 10).map((category) => ( + + +
+
+
+ {category?.name} +

+ {category?.name} +

- +
+
+ - ))} + ))} + {categories.length > 10 && ( +
+ Lihat Semua + +
+ )}
}
-- cgit v1.2.3 From bf5c3b1d48da54e0e44689412ad9de9c10cf9edb Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 23 Jul 2024 09:28:21 +0700 Subject: update category management --- src/lib/home/api/categoryManagementApi.js | 8 +++++ src/lib/home/components/CategoryDynamic.jsx | 32 ++++++----------- src/lib/home/components/CategoryDynamicMobile.jsx | 41 +++++++++++---------- src/lib/home/components/CategoryPilihan.jsx | 2 +- src/lib/home/hooks/useCategoryManagement.js | 43 ++++++----------------- src/lib/product/components/CategorySection.jsx | 10 +++--- 6 files changed, 55 insertions(+), 81 deletions(-) create mode 100644 src/lib/home/api/categoryManagementApi.js (limited to 'src/lib') diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js new file mode 100644 index 00000000..b70d60ce --- /dev/null +++ b/src/lib/home/api/categoryManagementApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi' + +const categoryManagementApi = async () => { + const dataCategoryManagement = await odooApi('GET', '/api/v1/categories_management') + return dataCategoryManagement +} + +export default categoryManagementApi diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 2edd5485..cac8a138 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,36 +1,24 @@ import React, { useEffect, useState } from 'react'; -import {fetchProductManagementSolr} from '../hooks/useCategoryManagement'; +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' -const CategoryDynamic = () => { - const [promoItems, setPromoItems] = useState([]); - useEffect(() => { - const loadPromo = async () => { - - try { - const items = await fetchProductManagementSolr(); - setPromoItems(items); - - } catch (loadError) { - // console.error("Error loading promo items:", loadError) - } - } - loadPromo() - },[]); +const CategoryDynamic = () => { + const { categoryManagement } = useCategoryManagement() + return (
- {promoItems && promoItems.map((category) => ( + {categoryManagement && categoryManagement.data?.map((category) => (
{category.name}

999 rb+ Produk tersedia

- Lihat Semua + Lihat Semua
- {category.category_id2.map((index)=> ( + {category.categories.map((index)=> (
@@ -44,13 +32,13 @@ const CategoryDynamic = () => {
{index.name}

999 rb+ Produk

- Lihat Semua + Lihat Semua
- {index.child_frontend_id_i.map((x)=> ( + {index.childFrontendIdI.map((x)=> (
- + { - const [promoItems, setPromoItems] = useState([]); + const { categoryManagement } = useCategoryManagement() const [selectedCategory, setSelectedCategory] = useState({}); useEffect(() => { const loadPromo = async () => { try { - const items = await fetchProductManagementSolr(); - setPromoItems(items); - if (items.length > 0) { - const initialSelections = items.reduce((acc, category) => { - if (category.category_id2.length > 0) { - acc[category.id] = category.category_id2[0].id_level_2; + if (categoryManagement.data?.length > 0) { + const initialSelections = categoryManagement.data.reduce((acc, category) => { + if (category.categories.length > 0) { + acc[category.id] = category.categories[0].idLevel2; } return acc; }, {}); setSelectedCategory(initialSelections); } } catch (loadError) { - // console.error("Error loading promo items:", loadError) + // console.error("Error loading promo items:", loadError); } }; + loadPromo(); - }, []); + }, [categoryManagement.data]); - const handleCategoryLevel2Click = (categoryLevel1Id, categoryLevel2Id) => { + const handleCategoryLevel2Click = (categoryIdI, idLevel2) => { setSelectedCategory(prev => ({ ...prev, - [categoryLevel1Id]: categoryLevel2Id + [categoryIdI]: idLevel2 })); }; - + return (
- {promoItems && promoItems.map((category) => ( + {categoryManagement.data && categoryManagement.data.map((category) => (
{category.name}
- Lihat Semua + Lihat Semua
- {category.category_id2.map((index) => ( + {category.categories.map((index) => (
handleCategoryLevel2Click(category.id, index?.id_level_2)} - className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.id_level_2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} + onClick={() => handleCategoryLevel2Click(category.id, index?.idLevel2)} + className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.idLevel2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} >
@@ -74,10 +73,10 @@ const CategoryDynamicMobile = () => {
- {category.category_id2.map((index) => ( - selectedCategory[category.id] === index?.id_level_2 && index.child_frontend_id_i.map((x) => ( + {category.categories.map((index) => ( + selectedCategory[category.id] === index?.idLevel2 && index.childFrontendIdI.map((x) => (
- + {
- {category?.name} + {category?.name}

{category?.name}

diff --git a/src/lib/home/hooks/useCategoryManagement.js b/src/lib/home/hooks/useCategoryManagement.js index db4e79e1..c1dda585 100644 --- a/src/lib/home/hooks/useCategoryManagement.js +++ b/src/lib/home/hooks/useCategoryManagement.js @@ -1,34 +1,13 @@ -export const fetchProductManagementSolr = async () => { - try { - const queryParams = new URLSearchParams({q: 'type_value_s:bundling'}) - const response = await fetch(`/solr/product_category_management/query?q=*:*&q.op=OR&sort=sequence_i asc&indent=true`); - // console.log("response", response) - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const data = await response.json(); - // console.log("data",data) - const dataManagement = await map(data.response.docs); - // console.log("dataManagement",dataManagement) - return dataManagement; - } catch (error) { - console.error("Error fetching promotion data:", error); - return []; - } -}; +import categoryManagementApi from '../api/categoryManagementApi' +import { useQuery } from 'react-query' + +const useCategoryManagement = () => { + const fetchCategoryManagement = async () => await categoryManagementApi() + const { isLoading, data } = useQuery('categoryManagementApi', fetchCategoryManagement) -const map = async (promotions) => { - const result = []; - for (const promotion of promotions) { - const data = { - id: promotion.id, - category_id: promotion.category_id_i, - name: promotion.name_s, - sequence: promotion.sequence_i, - image: promotion.image_s, - category_id2: JSON.parse(promotion.category_id2_s), - }; - result.push(data); + return { + categoryManagement: { data, isLoading } } - return result; -}; +} + +export default useCategoryManagement \ No newline at end of file diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index e80429f4..749a56eb 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -25,10 +25,10 @@ const CategorySection = ({ categories }) => {
{categories.slice(0, 10).map((category) => ( -
-
-
- {category?.name} +
+
+
+ {category?.name}

{category?.name}

@@ -54,7 +54,7 @@ const CategorySection = ({ categories }) => {
{category?.name} Date: Tue, 23 Jul 2024 14:29:08 +0700 Subject: update categories management --- src/lib/brand/components/BrandCard.jsx | 6 +- src/lib/home/components/CategoryDynamic.jsx | 119 ++++++++++++++----------- src/lib/home/components/PreferredBrand.jsx | 44 +++++++-- src/lib/product/components/CategorySection.jsx | 109 +++++++++++++--------- 4 files changed, 176 insertions(+), 102 deletions(-) (limited to 'src/lib') diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx index 39b1aec1..2d78d956 100644 --- a/src/lib/brand/components/BrandCard.jsx +++ b/src/lib/brand/components/BrandCard.jsx @@ -16,9 +16,9 @@ const BrandCard = ({ brand }) => { {brand.name} )} {!brand.logo && ( diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index cac8a138..fa1df286 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,65 +1,84 @@ import React, { useEffect, useState } from 'react'; -import useCategoryManagement from '../hooks/useCategoryManagement'; +import useCategoryManagement from '../hooks/useCategoryManagement'; import NextImage from 'next/image'; -import Link from "next/link" +import Link from "next/link"; import router from 'next/router'; -import { createSlug } from '@/core/utils/slug' +import { createSlug } from '@/core/utils/slug'; + +const CategoryDynamic = () => { + const { categoryManagement } = useCategoryManagement(); + + const calculateLevel3Products = (category) => { + return category.childFrontendIdI.reduce((total, child) => total + (child.numFound || 0), 0); + }; + + const calculateLevel2Products = (category) => { + return category.categories.reduce((total, subCategory) => { + const level3Products = calculateLevel3Products(subCategory); + return total + (subCategory.numFound || 0) + level3Products; + }, 0); + }; -const CategoryDynamic = () => { - const { categoryManagement } = useCategoryManagement() - return (
- {categoryManagement && categoryManagement.data?.map((category) => ( -
-
+ {categoryManagement && categoryManagement.data?.map((category) => { + const countLevel2 = calculateLevel2Products(category); + + return ( +
+
{category.name}
-

999 rb+ Produk tersedia

+

{countLevel2} Produk tersedia

Lihat Semua -
-
- {category.categories.map((index)=> ( -
-
-
- -
-
{index.name}
-

999 rb+ Produk

- Lihat Semua +
+
+ {category.categories.map((subCategory) => { + const countLevel3 = calculateLevel3Products(subCategory); + + return ( +
+
+
+ +
+
{subCategory.name}
+

{(subCategory.numFound || 0) + countLevel3} Produk

+ Lihat Semua +
+
+
+ {subCategory.childFrontendIdI.map((childCategory) => ( +
+ + +
+
{childCategory.name}
+
+ +
+ ))}
-
- {index.childFrontendIdI.map((x)=> ( -
- - -
-
{x.name}
-
- -
- ))} -
-
-
- ))} +
+ ); + })} +
-
- ))} + ); + })}
); -} +}; export default CategoryDynamic; diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx index fc899665..ae12505d 100644 --- a/src/lib/home/components/PreferredBrand.jsx +++ b/src/lib/home/components/PreferredBrand.jsx @@ -1,14 +1,42 @@ -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { Swiper, SwiperSlide } from 'swiper/react' import { Navigation, Pagination, Autoplay } from 'swiper'; +import { useCallback, useEffect, useState } from 'react' import usePreferredBrand from '../hooks/usePreferredBrand' import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton' import BrandCard from '@/lib/brand/components/BrandCard' import useDevice from '@/core/hooks/useDevice' import Link from '@/core/components/elements/Link/Link' +import axios from 'axios' const PreferredBrand = () => { let query = 'level_s' let params = 'prioritas' + const [isLoading, setIsLoading] = useState(true) + const [startWith, setStartWith] = useState(null) + const [manufactures, setManufactures] = useState([]) + + const loadBrand = useCallback(async () => { + setIsLoading(true) + const name = startWith ? `${startWith}*` : '' + const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=${name}`) + + setIsLoading(false) + setManufactures((manufactures) => [...result.data]) + }, [startWith]) + + const toggleStartWith = (alphabet) => { + setManufactures([]) + if (alphabet == startWith) { + setStartWith(null) + return + } + setStartWith(alphabet) + } + + useEffect(() => { + loadBrand() + }, [loadBrand]) + const { preferredBrands } = usePreferredBrand(query) const { isMobile, isDesktop } = useDevice() const swiperBanner = { @@ -27,7 +55,7 @@ const PreferredBrand = () => { clickable: true, } } - + const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : [] return (
@@ -39,12 +67,12 @@ const PreferredBrand = () => { )}
- {preferredBrands.isLoading && } - {!preferredBrands.isLoading && ( + {manufactures.isLoading && } + {!manufactures.isLoading && ( - {preferredBrands.data?.data.map((brand) => ( - - + {preferredBrandsData.map((manufacture) => ( + + ))} @@ -54,4 +82,4 @@ const PreferredBrand = () => { ) } -export default PreferredBrand +export default PreferredBrand \ No newline at end of file diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx index 749a56eb..14a39e7e 100644 --- a/src/lib/product/components/CategorySection.jsx +++ b/src/lib/product/components/CategorySection.jsx @@ -1,15 +1,23 @@ -import Image from "next/image" -import Link from 'next/link' -import { createSlug } from '@/core/utils/slug' +import Image from "next/image"; +import Link from 'next/link'; +import { createSlug } from '@/core/utils/slug'; import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; -import { useQuery } from 'react-query' -import { useRouter } from 'next/router' +import { useQuery } from 'react-query'; +import { useRouter } from 'next/router'; +import { + ChevronDownIcon, + ChevronUpIcon, // Import ChevronUpIcon for toggling + DocumentCheckIcon, + HeartIcon, +} from '@heroicons/react/24/outline'; +import { useState } from 'react'; // Import useState const CategorySection = ({ categories }) => { const { isDesktop, isMobile } = useDevice(); - const router = useRouter() + const router = useRouter(); + const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility let teks = router.query.slug; let hasil = teks?.match(/(\d+)$/)[0]; @@ -17,18 +25,24 @@ const CategorySection = ({ categories }) => { 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); + return (
{isDesktop && (
- {categories.slice(0, 10).map((category) => ( + {displayedCategories.map((category) => (
-
- {category?.name} +
+ {category?.name}

{category?.name}

@@ -38,45 +52,58 @@ const CategorySection = ({ categories }) => {
)} {isDesktop && categories.length > 10 && ( -
- Lihat Semua - -
+
+ +
)} - {isMobile && + {isMobile && (
- {categories.slice(0, 10).map((category) => ( - - -
-
-
- {category?.name} -

- {category?.name} -

-
-
-
- - - ))} + {displayedCategories.map((category) => ( + + +
+
+
+ {category?.name} +

+ {category?.name} +

+
+
+
+ + + ))} - {categories.length > 10 && ( + {categories.length > 10 && (
- Lihat Semua - +
)}
- } + )}
) } -- cgit v1.2.3 From d42a1c2bb522a3b29c60bbe75d0d250fa3fca6d8 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 23 Jul 2024 17:01:10 +0700 Subject: update category management --- src/lib/home/components/CategoryPilihan.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 7b9f0094..54807686 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -9,7 +9,7 @@ import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton' const CategoryPilihan = ({ id, categories }) => { - const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'index-a-1' })); + const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); return (
@@ -29,7 +29,7 @@ const CategoryPilihan = ({ id, categories }) => { quality={100} src={heroBanner.data[0].image} alt={heroBanner.data[0].name} - className='h-48 object-fill w-full rounded hover:scale-105 transition duration-500 ease-in-out' + className='h-48 object-fill w-full' /> {/* ))} */} @@ -41,9 +41,9 @@ const CategoryPilihan = ({ id, categories }) => { {categories.map((category) => (
-
-
- {category?.name} +
+
+ {category?.name}

{category?.name}

-- cgit v1.2.3 From 2e71abba4ca5b83cc1fec229d4d85961c4b56d71 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 25 Jul 2024 08:27:05 +0700 Subject: update category management --- src/lib/home/components/CategoryDynamic.jsx | 50 ++++++++++++++++++-------- src/lib/home/components/CategoryPilihan.jsx | 3 +- src/lib/product/components/CategorySection.jsx | 11 ++---- src/lib/product/components/ProductSearch.jsx | 35 ++++++++++++++++-- 4 files changed, 70 insertions(+), 29 deletions(-) (limited to 'src/lib') 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 (
{categoryManagement && categoryManagement.data?.map((category) => { - const countLevel2 = calculateLevel2Products(category); - + const countLevel1 = categoryData[category.categoryIdI] || 0; + return (
{category.name}
-

{countLevel2} Produk tersedia

+

{countLevel1} Produk tersedia

Lihat Semua
{category.categories.map((subCategory) => { - const countLevel3 = calculateLevel3Products(subCategory); + const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; return (
@@ -48,7 +68,7 @@ const CategoryDynamic = () => { />
{subCategory.name}
-

{(subCategory.numFound || 0) + countLevel3} Produk

+

{countLevel2} Produk tersedia

Lihat Semua
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 (
@@ -38,7 +37,7 @@ const CategoryPilihan = ({ id, categories }) => { )}
- {categories.map((category) => ( + {categories?.map((category) => (
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 ( <> -- cgit v1.2.3 From 2c2885f57e9eb15e8c7d00c3a543a71c1d6ba83e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 25 Jul 2024 14:04:43 +0700 Subject: update search handle for category --- src/lib/product/components/ProductSearch.jsx | 83 ++++++++++++++++++---------- 1 file changed, 53 insertions(+), 30 deletions(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index b5c1e87d..413f4fb2 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -42,9 +42,56 @@ const ProductSearch = ({ const [search, setSearch] = useState(query?.q || '*'); const [limit, setLimit] = useState(query?.limit || 30); const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular'); + const [finalQuery, setFinalQuery] = useState({}); + const [queryFinal, setQueryFinal] = useState({}); + const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) + const categoryId = getIdFromSlug(prefixUrl) if (defaultBrand) query.brand = defaultBrand.toLowerCase(); + useEffect(() => { + const loadProduct = async () => { + const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`); + if (getCategoriesId) { + setDataCategoriesProduct(getCategoriesId); + } + }; + loadProduct(); + }, [categoryId]); + + const collectIds = (category) => { + const ids = []; + function recurse(cat) { + if (cat && cat.id) { + ids.push(cat.id); + } + if (Array.isArray(cat.children)) { + cat.children.forEach(recurse); + } + } + recurse(category); + return ids; + }; + + useEffect(() => { + const ids = collectIds(dataCategoriesProduct); + const newQuery = { + fq: `category_id_i:(${ids.join(' OR ')})`, + page: 1, + brand : router.query.brand? router.query.brand : '', + }; + setFinalQuery(newQuery); + }, [dataCategoriesProduct]); + + useEffect(() => { + if (prefixUrl.includes('category')) { + setQueryFinal({ ...finalQuery, q, limit, orderBy }); + // setQueryFinal({ ...query, q, limit, orderBy }); + } else { + setQueryFinal({ ...query, q, limit, orderBy }); + } + }, [prefixUrl, finalQuery, q, limit, orderBy]); + const { productSearch } = useProductSearch({ - query: { ...query, q, limit, orderBy }, + query: queryFinal, operation: 'AND', }); const [products, setProducts] = useState(null); @@ -73,12 +120,7 @@ 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) - + useEffect(() => { if (productFound == 0 && query.q && !spellings) { searchSpellApi({ query: query.q }).then((response) => { @@ -134,31 +176,10 @@ const ProductSearch = ({ } } 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 ( @@ -304,7 +325,9 @@ console.log("dataID",dataId) }; const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - console.log("query?.category?.split(',')",query.fq) + + + return ( <> -- cgit v1.2.3 From 4758a0989f2ec0d79e1c5e3a3d42c249f28a9e72 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 26 Jul 2024 14:13:20 +0700 Subject: update code category management --- src/lib/product/components/ProductSearch.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 413f4fb2..cd7cda9f 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -74,7 +74,7 @@ const ProductSearch = ({ useEffect(() => { const ids = collectIds(dataCategoriesProduct); const newQuery = { - fq: `category_id_i:(${ids.join(' OR ')})`, + fq: `category_id_ids:(${ids.join(' OR ')})`, page: 1, brand : router.query.brand? router.query.brand : '', }; -- cgit v1.2.3 From e5a01976cb665b824b2ad6426a2c52a5bd0964e6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 27 Jul 2024 08:27:54 +0700 Subject: add feature category lob --- src/lib/home/api/CategoryPilihanApi.js | 8 ++++++++ src/lib/home/components/CategoryDynamic.jsx | 2 +- src/lib/home/components/CategoryPilihan.jsx | 12 +++++++----- src/lib/home/hooks/useCategoryPilihan.js | 13 +++++++++++++ src/lib/product/components/ProductSearch.jsx | 5 +++-- 5 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 src/lib/home/api/CategoryPilihanApi.js create mode 100644 src/lib/home/hooks/useCategoryPilihan.js (limited to 'src/lib') diff --git a/src/lib/home/api/CategoryPilihanApi.js b/src/lib/home/api/CategoryPilihanApi.js new file mode 100644 index 00000000..8a0b38d3 --- /dev/null +++ b/src/lib/home/api/CategoryPilihanApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi' + +const categoryPilihanApi = async () => { + const dataCategoryPilihan = await odooApi('GET', '/api/v1/lob_homepage') + return dataCategoryPilihan +} + +export default categoryPilihanApi diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index bbba2ceb..6ab03ec3 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -21,7 +21,7 @@ const CategoryDynamic = () => { const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`); // console.log("countLevel1.child",countLevel1) - updatedCategoryData[category.categoryIdI] = countLevel1.numFound; + updatedCategoryData[category.categoryIdI] = countLevel1?.numFound; // Calculate level 2 products for each sub-category diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index ea78b349..9f184709 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -6,9 +6,11 @@ import { useEffect, useState } from 'react'; import { bannerApi } from '../../../api/bannerApi'; const { useQuery } = require('react-query') import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; - +import useCategoryPilihan from '../hooks/useCategoryPilihan'; const CategoryPilihan = ({ id, categories }) => { + const { categoryPilihan } = useCategoryPilihan(); + console.log("categoryPilihan",categoryPilihan) const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); return (
@@ -37,19 +39,19 @@ const CategoryPilihan = ({ id, categories }) => { )}
- {categories?.map((category) => ( + {categoryPilihan?.data?.map((category) => (
- {category?.name} + {category?.name}
-

{category?.name}

+

{category?.industries}

Lihat semua diff --git a/src/lib/home/hooks/useCategoryPilihan.js b/src/lib/home/hooks/useCategoryPilihan.js new file mode 100644 index 00000000..12a86f7e --- /dev/null +++ b/src/lib/home/hooks/useCategoryPilihan.js @@ -0,0 +1,13 @@ +import categoryPilihanApi from '../api/CategoryPilihanApi' +import { useQuery } from 'react-query' + +const useCategoryPilihan = () => { + const fetchCategoryPilihan = async () => await categoryPilihanApi() + const { isLoading, data } = useQuery('categoryPilihanApi', fetchCategoryPilihan) + + return { + categoryPilihan: { data, isLoading } + } +} + +export default useCategoryPilihan \ No newline at end of file diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index cd7cda9f..735ef58e 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -78,8 +78,9 @@ const ProductSearch = ({ page: 1, brand : router.query.brand? router.query.brand : '', }; + console.log("newQuery",newQuery) setFinalQuery(newQuery); - }, [dataCategoriesProduct]); + }, [dataCategoriesProduct, prefixUrl, prefixUrl, finalQuery, q, limit, orderBy]); useEffect(() => { if (prefixUrl.includes('category')) { @@ -178,7 +179,7 @@ const ProductSearch = ({ loadCategories() }, []) - + console.log("queryFinal", queryFinal) const brands = []; -- cgit v1.2.3 From f1910544cf6df50bcb175b66b604f5903f6ae3fa Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 27 Jul 2024 13:34:00 +0700 Subject: update category management for lob --- src/lib/home/components/CategoryPilihan.jsx | 1 - src/lib/lob/components/Breadcrumb.jsx | 55 ++++++++++++++++ src/lib/product/components/ProductSearch.jsx | 98 +++++++++++++++++++++------- 3 files changed, 131 insertions(+), 23 deletions(-) create mode 100644 src/lib/lob/components/Breadcrumb.jsx (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 9f184709..5548fc1b 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -10,7 +10,6 @@ import useCategoryPilihan from '../hooks/useCategoryPilihan'; const CategoryPilihan = ({ id, categories }) => { const { categoryPilihan } = useCategoryPilihan(); - console.log("categoryPilihan",categoryPilihan) const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); return (
diff --git a/src/lib/lob/components/Breadcrumb.jsx b/src/lib/lob/components/Breadcrumb.jsx new file mode 100644 index 00000000..04d9a691 --- /dev/null +++ b/src/lib/lob/components/Breadcrumb.jsx @@ -0,0 +1,55 @@ +import odooApi from '@/core/api/odooApi' +import { createSlug } from '@/core/utils/slug' +import { + Breadcrumb as ChakraBreadcrumb, + BreadcrumbItem, + BreadcrumbLink, + Skeleton +} from '@chakra-ui/react' +import Link from 'next/link' +import React from 'react' +import { useQuery } from 'react-query' + +/** + * Render a breadcrumb component. + * + * @param {object} categoryId - The ID of the category. + * @return {JSX.Element} The breadcrumb component. + */ +const Breadcrumb = ({ categoryId }) => { + const breadcrumbs = useQuery( + `lob-breadcrumbs/${categoryId}`, + async () => await odooApi('GET', `/api/v1/lob_homepage?lob_id=${categoryId}`) + ) + return ( +
+ + + + + Home + + + + {breadcrumbs.data?.map((category, index) => ( + + {index === breadcrumbs.data.length - 1 ? ( + {category.industries} + ) : ( + + {category.industries} + + )} + + ))} + + +
+ ) +} + +export default Breadcrumb diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 735ef58e..2da84d63 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -37,6 +37,7 @@ const ProductSearch = ({ brand = null, }) => { const router = useRouter(); + const { page = 1 } = query; const [q, setQ] = useState(query?.q || '*'); const [search, setSearch] = useState(query?.q || '*'); @@ -45,18 +46,35 @@ const ProductSearch = ({ const [finalQuery, setFinalQuery] = useState({}); const [queryFinal, setQueryFinal] = useState({}); const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) + const [dataCategoriesLob, setDataCategoriesLob] = useState([]) const categoryId = getIdFromSlug(prefixUrl) + console.log("categoryId",categoryId ) + const [data, setData] = useState([]) + const [dataLob, setDataLob] = useState([]); if (defaultBrand) query.brand = defaultBrand.toLowerCase(); + const dataIdCategories = [] useEffect(() => { - const loadProduct = async () => { - const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`); - if (getCategoriesId) { - setDataCategoriesProduct(getCategoriesId); - } - }; - loadProduct(); + if(prefixUrl.includes('category')){ + const loadProduct = async () => { + const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`); + if (getCategoriesId) { + setDataCategoriesProduct(getCategoriesId); + } + }; + loadProduct(); + }else if(prefixUrl.includes('lob')){ + const loadProduct = async () => { + const lobData = await odooApi('GET', `/api/v1/lob_homepage?lob_id=${categoryId}`); + console.log("lobData",lobData ) + if (lobData) { + setDataLob(lobData); + } + }; + loadProduct(); + console.log("dataLob",dataLob ) + } }, [categoryId]); - + const collectIds = (category) => { const ids = []; function recurse(cat) { @@ -70,26 +88,61 @@ const ProductSearch = ({ recurse(category); return ids; }; - + useEffect(() => { - const ids = collectIds(dataCategoriesProduct); - const newQuery = { - fq: `category_id_ids:(${ids.join(' OR ')})`, - page: 1, - brand : router.query.brand? router.query.brand : '', - }; - console.log("newQuery",newQuery) - setFinalQuery(newQuery); - }, [dataCategoriesProduct, prefixUrl, prefixUrl, finalQuery, q, limit, orderBy]); + if(prefixUrl.includes('category')){ + const ids = collectIds(dataCategoriesProduct); + const newQuery = { + fq: `category_id_ids:(${ids.join(' OR ')})`, + page, + brand : router.query.brand? router.query.brand : '', + category : router.query.category? router.query.category : '', + }; + setFinalQuery(newQuery); + } else if (prefixUrl.includes('lob')){ + console.log("prefixUrl",prefixUrl) + const fetchCategoryData = async () => { + if (dataLob[0]?.categoryIds) { + console.log("dataLob[0]?.categoryIds",dataLob[0]?.categoryIds) + for (const cate of dataLob[0].categoryIds) { + console.log("cate",cate) + const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${cate.id}`); + console.log("getCategoriesId",getCategoriesId) + if (getCategoriesId) { + const ids = collectIds(getCategoriesId); + console.log("ids",ids) + dataIdCategories.push(ids) + console.log("dataIdCategories",dataIdCategories) + } + } + + console.log("dataIdCategories2",dataIdCategories) + // setData(dataIdCategories) + // console.log("data",data) + const mergedArray = dataIdCategories.flat(); + console.log("mergedArray",mergedArray) + const newQuery = { + fq: `category_id_ids:(${mergedArray.join(' OR ')})`, + page, + brand : router.query.brand? router.query.brand : '', + category : router.query.category? router.query.category : '', + }; + console.log("newQuery",newQuery) + setFinalQuery(newQuery); + console.log("final query",finalQuery) + } + }; + fetchCategoryData(); + } + }, [dataCategoriesProduct, dataLob]); useEffect(() => { - if (prefixUrl.includes('category')) { + if (prefixUrl.includes('category') || prefixUrl.includes('lob')) { setQueryFinal({ ...finalQuery, q, limit, orderBy }); - // setQueryFinal({ ...query, q, limit, orderBy }); } else { setQueryFinal({ ...query, q, limit, orderBy }); } - }, [prefixUrl, finalQuery, q, limit, orderBy]); + }, [prefixUrl,dataCategoriesProduct, query, finalQuery]); const { productSearch } = useProductSearch({ query: queryFinal, @@ -179,7 +232,8 @@ const ProductSearch = ({ loadCategories() }, []) - console.log("queryFinal", queryFinal) + // console.log("query asal ", query) + // console.log("queryFinal", queryFinal) const brands = []; -- cgit v1.2.3 From 556e7e226a2043d43bc55bf0ff2118294bb9f330 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 29 Jul 2024 13:32:39 +0700 Subject: update lob category --- src/lib/lob/components/Breadcrumb.jsx | 4 +- src/lib/product/components/LobSectionCategory.jsx | 89 +++++++++++++++++++++++ src/lib/product/components/ProductSearch.jsx | 54 ++++++-------- 3 files changed, 115 insertions(+), 32 deletions(-) create mode 100644 src/lib/product/components/LobSectionCategory.jsx (limited to 'src/lib') diff --git a/src/lib/lob/components/Breadcrumb.jsx b/src/lib/lob/components/Breadcrumb.jsx index 04d9a691..5722fd39 100644 --- a/src/lib/lob/components/Breadcrumb.jsx +++ b/src/lib/lob/components/Breadcrumb.jsx @@ -19,7 +19,7 @@ import { useQuery } from 'react-query' const Breadcrumb = ({ categoryId }) => { const breadcrumbs = useQuery( `lob-breadcrumbs/${categoryId}`, - async () => await odooApi('GET', `/api/v1/lob_homepage?lob_id=${categoryId}`) + async () => await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`) ) return (
@@ -31,7 +31,7 @@ const Breadcrumb = ({ categoryId }) => { - {breadcrumbs.data?.map((category, index) => ( + {breadcrumbs?.data?.map((category, index) => ( {index === breadcrumbs.data.length - 1 ? ( {category.industries} diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx new file mode 100644 index 00000000..5e9934c3 --- /dev/null +++ b/src/lib/product/components/LobSectionCategory.jsx @@ -0,0 +1,89 @@ +import Image from "next/image"; +import Link from 'next/link'; +import { createSlug } from '@/core/utils/slug'; +import useDevice from '@/core/hooks/useDevice'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import { useQuery } from 'react-query'; +import { useRouter } from 'next/router'; +import { + ChevronDownIcon, + ChevronUpIcon, // Import ChevronUpIcon for toggling + DocumentCheckIcon, + HeartIcon, +} from '@heroicons/react/24/outline'; +import { useState } from 'react'; // Import useState +import { getIdFromSlug } from '@/core/utils/slug' + +const LobSectionCategory = ({ categories }) => { + const { isDesktop, isMobile } = useDevice(); + const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility + + const handleToggleCategories = () => { + setIsOpenCategory(!isOpenCategory); + }; + console.log("categories",categories[0]?.categoryIds) + + const displayedCategories = categories[0]?.categoryIds; + + return ( +
+ {isDesktop && ( +
+ {displayedCategories?.map((category) => ( + +
+
+
+ {category?.name} + {/*

{category?.name}

*/} +
+
+
+ + ))} +
+ )} + + {isMobile && ( +
+ + {displayedCategories.map((category) => ( + + +
+
+
+ {category?.name} +

+ {category?.name} +

+
+
+
+ + + ))} + + {categories.length > 10 && ( +
+ +
+ )} +
+ )} +
+ ) +} + +export default LobSectionCategory diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 2da84d63..12e3b358 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -27,6 +27,7 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'; import SideBanner from '~/modules/side-banner'; import FooterBanner from '~/modules/footer-banner'; import CategorySection from './CategorySection'; +import LobSectionCategory from './LobSectionCategory'; import { getIdFromSlug } from '@/core/utils/slug' import { data } from 'autoprefixer'; @@ -48,7 +49,6 @@ const ProductSearch = ({ const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) const [dataCategoriesLob, setDataCategoriesLob] = useState([]) const categoryId = getIdFromSlug(prefixUrl) - console.log("categoryId",categoryId ) const [data, setData] = useState([]) const [dataLob, setDataLob] = useState([]); if (defaultBrand) query.brand = defaultBrand.toLowerCase(); @@ -64,14 +64,14 @@ const ProductSearch = ({ loadProduct(); }else if(prefixUrl.includes('lob')){ const loadProduct = async () => { - const lobData = await odooApi('GET', `/api/v1/lob_homepage?lob_id=${categoryId}`); - console.log("lobData",lobData ) + const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`); + if (lobData) { setDataLob(lobData); } }; loadProduct(); - console.log("dataLob",dataLob ) + } }, [categoryId]); @@ -100,36 +100,27 @@ const ProductSearch = ({ }; setFinalQuery(newQuery); } else if (prefixUrl.includes('lob')){ - console.log("prefixUrl",prefixUrl) + const fetchCategoryData = async () => { if (dataLob[0]?.categoryIds) { - console.log("dataLob[0]?.categoryIds",dataLob[0]?.categoryIds) + for (const cate of dataLob[0].categoryIds) { - console.log("cate",cate) - const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${cate.id}`); - console.log("getCategoriesId",getCategoriesId) - if (getCategoriesId) { - const ids = collectIds(getCategoriesId); - console.log("ids",ids) - dataIdCategories.push(ids) - console.log("dataIdCategories",dataIdCategories) - } + + dataIdCategories.push(cate.childId) } - console.log("dataIdCategories2",dataIdCategories) - // setData(dataIdCategories) - // console.log("data",data) + const mergedArray = dataIdCategories.flat(); - console.log("mergedArray",mergedArray) + const newQuery = { fq: `category_id_ids:(${mergedArray.join(' OR ')})`, page, brand : router.query.brand? router.query.brand : '', category : router.query.category? router.query.category : '', }; - console.log("newQuery",newQuery) + setFinalQuery(newQuery); - console.log("final query",finalQuery) + } }; fetchCategoryData(); @@ -223,17 +214,18 @@ const ProductSearch = ({ }, [q]); useEffect(() => { - const loadCategories = async () => { - const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) - if(getCategories){ - setDataCategories(getCategories) - } + if(prefixUrl.includes('category')){ + const loadCategories = async () => { + const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) + if(getCategories){ + setDataCategories(getCategories) + } + } + loadCategories() } - loadCategories() }, []) - // console.log("query asal ", query) - // console.log("queryFinal", queryFinal) + const brands = []; @@ -381,7 +373,7 @@ const ProductSearch = ({ const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - + console.log("finalQuery",finalQuery) return ( <> @@ -443,6 +435,7 @@ const ProductSearch = ({ SpellingComponent )}
+ {productFound > 0 && ( @@ -534,6 +527,7 @@ const ProductSearch = ({
+ {bannerPromotionHeader && bannerPromotionHeader?.image && (
-- cgit v1.2.3 From 1a58c55e6415d78f5d155055071a649d1f56492a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 29 Jul 2024 14:52:57 +0700 Subject: update mobile view --- src/lib/product/components/LobSectionCategory.jsx | 51 ++++++++++------------- 1 file changed, 22 insertions(+), 29 deletions(-) (limited to 'src/lib') diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx index 5e9934c3..34a09e46 100644 --- a/src/lib/product/components/LobSectionCategory.jsx +++ b/src/lib/product/components/LobSectionCategory.jsx @@ -29,43 +29,36 @@ const LobSectionCategory = ({ categories }) => { return (
{isDesktop && ( -
+
{displayedCategories?.map((category) => ( - -
-
-
- {category?.name} - {/*

{category?.name}

*/} -
-
-
- + + ))}
)} {isMobile && (
- - {displayedCategories.map((category) => ( + + {displayedCategories?.map((category) => ( - -
-
-
- {category?.name} -

- {category?.name} -

-
-
-
+ ))} -- cgit v1.2.3 From 7c2a69c9b48c1930dc3f7cbef20d6479b3047ca2 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 29 Jul 2024 17:13:30 +0700 Subject: update category lob --- src/lib/product/components/ProductSearch.jsx | 35 +++++++++++++++++----------- 1 file changed, 21 insertions(+), 14 deletions(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 12e3b358..7ab6b8af 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -38,11 +38,10 @@ const ProductSearch = ({ brand = null, }) => { const router = useRouter(); - const { page = 1 } = query; const [q, setQ] = useState(query?.q || '*'); const [search, setSearch] = useState(query?.q || '*'); - const [limit, setLimit] = useState(query?.limit || 30); + const [limit, setLimit] = useState(router.query?.limit || 30); const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular'); const [finalQuery, setFinalQuery] = useState({}); const [queryFinal, setQueryFinal] = useState({}); @@ -94,9 +93,13 @@ const ProductSearch = ({ const ids = collectIds(dataCategoriesProduct); const newQuery = { fq: `category_id_ids:(${ids.join(' OR ')})`, - page, + page : router.query.page? router.query.page : 1, brand : router.query.brand? router.query.brand : '', category : router.query.category? router.query.category : '', + priceFrom : router.query.priceFrom? router.query.priceFrom : '', + priceTo : router.query.priceTo? router.query.priceTo : '', + limit : router.query.limit? router.query.limit : '', + orderBy : router.query.orderBy? router.query.orderBy : '' }; setFinalQuery(newQuery); } else if (prefixUrl.includes('lob')){ @@ -114,9 +117,13 @@ const ProductSearch = ({ const newQuery = { fq: `category_id_ids:(${mergedArray.join(' OR ')})`, - page, - brand : router.query.brand? router.query.brand : '', category : router.query.category? router.query.category : '', + page : router.query.page? router.query.page : 1, + brand : router.query.brand? router.query.brand : '', + priceFrom : router.query.priceFrom? router.query.priceFrom : '', + priceTo : router.query.priceTo? router.query.priceTo : '', + limit : router.query.limit? router.query.limit : '', + orderBy : router.query.orderBy? router.query.orderBy : '' }; setFinalQuery(newQuery); @@ -148,17 +155,17 @@ const ProductSearch = ({ const numRows = [30, 50, 80, 100]; const [brandValues, setBrand] = useState( !router.pathname.includes('brands') - ? query.brand - ? query.brand.split(',') + ? router.query.brand + ? router.query.brand.split(',') : [] : [] ); const [categoryValues, setCategory] = useState( - query?.category?.split(',') || [] + router.query?.category?.split(',') || router.query?.category?.split(',') ); - const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null); - const [priceTo, setPriceTo] = useState(query?.priceTo || null); + const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null); + const [priceTo, setPriceTo] = useState(router.query?.priceTo || null); const pageCount = Math.ceil(productSearch.data?.response.numFound / limit); const productStart = productSearch.data?.responseHeader.params.start; @@ -373,8 +380,6 @@ const ProductSearch = ({ const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - console.log("finalQuery",finalQuery) - return ( <> @@ -476,7 +481,8 @@ const ProductSearch = ({ @@ -665,7 +671,8 @@ const ProductSearch = ({
-- cgit v1.2.3 From 7f060ad3f3d938a462292721b9c54d1cb9140ad3 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 29 Jul 2024 17:17:17 +0700 Subject: update category managemrnt --- src/lib/home/components/CategoryPilihan.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 5548fc1b..183c123a 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -39,7 +39,7 @@ const CategoryPilihan = ({ id, categories }) => {
{categoryPilihan?.data?.map((category) => ( -
+
-- cgit v1.2.3 From 593c508bb87451a985a5aec7e9d7bde45b18074b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 09:53:35 +0700 Subject: update category lob --- src/lib/product/components/LobSectionCategory.jsx | 1 - src/lib/product/components/ProductSearch.jsx | 9 ++++----- 2 files changed, 4 insertions(+), 6 deletions(-) (limited to 'src/lib') diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx index 34a09e46..03d6e8c0 100644 --- a/src/lib/product/components/LobSectionCategory.jsx +++ b/src/lib/product/components/LobSectionCategory.jsx @@ -22,7 +22,6 @@ const LobSectionCategory = ({ categories }) => { const handleToggleCategories = () => { setIsOpenCategory(!isOpenCategory); }; - console.log("categories",categories[0]?.categoryIds) const displayedCategories = categories[0]?.categoryIds; diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 7ab6b8af..d4c5a308 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -379,7 +379,6 @@ const ProductSearch = ({ }; const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - return ( <> @@ -481,8 +480,8 @@ const ProductSearch = ({ @@ -671,8 +670,8 @@ const ProductSearch = ({
-- cgit v1.2.3 From de27df05af1f23d70099d36d11e07f35faff26c6 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 13:25:14 +0700 Subject: update mobile view --- src/lib/home/components/CategoryPilihan.jsx | 147 +++++++++++++++++++--------- 1 file changed, 103 insertions(+), 44 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 183c123a..e47524aa 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -7,59 +7,118 @@ import { bannerApi } from '../../../api/bannerApi'; const { useQuery } = require('react-query') import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; import useCategoryPilihan from '../hooks/useCategoryPilihan'; +import useDevice from '@/core/hooks/useDevice' +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; const CategoryPilihan = ({ id, categories }) => { + const { isDesktop, isMobile } = useDevice() const { categoryPilihan } = useCategoryPilihan(); const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); return (
-
-
Kategori Pilihan
-

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

-
-
- {heroBanner.data && - heroBanner.data?.length > 0 && ( -
- {/* {heroBanner.data?.map((banner) => ( */} - - {heroBanner.data[0].name} - - {/* ))} */} + {isDesktop && ( +
+
+
LOB Kategori Pilihan
+

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

- - )} -
-
- {categoryPilihan?.data?.map((category) => ( -
-
-
-
- {category?.name} +
+ {heroBanner.data && + heroBanner.data?.length > 0 && ( +
+ + {heroBanner.data[0].name} +
-

{category?.industries}

-
-
-
- - Lihat semua - -
+ + )}
- ))} -
-
+
+ {categoryPilihan?.data?.map((category) => ( +
+
+
+
+ {category?.name} +
+

{category?.industries}

+
+
+
+ + Lihat semua + +
+
+ ))} +
+
+ )} + {isMobile && ( +
+
+
LOB Kategori Pilihan
+ {/*

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

*/} +
+
+ {heroBanner.data && + heroBanner.data?.length > 0 && ( +
+ + {heroBanner.data[0].name} + +
+ + )} +
+ + {categoryPilihan?.data?.map((category) => ( + +
+
+
+
+ {category?.name} +
+

{category?.industries}

+
+
+
+ + Lihat semua + +
+
+ + ))} + + + +
+ )} +
) } -- cgit v1.2.3 From a3875b3e803d7075fa8788286fb478bb0c825d26 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 14:06:55 +0700 Subject: update category management banner --- src/lib/home/components/CategoryPilihan.jsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index e47524aa..72e6f6a8 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -23,25 +23,21 @@ const CategoryPilihan = ({ id, categories }) => {
LOB Kategori Pilihan

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

-
{heroBanner.data && heroBanner.data?.length > 0 && ( -
- +
+ {heroBanner.data[0].name} -
- +
)} -
{categoryPilihan?.data?.map((category) => (
@@ -72,7 +68,7 @@ const CategoryPilihan = ({ id, categories }) => {
LOB Kategori Pilihan
{/*

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

*/}
-
+
{heroBanner.data && heroBanner.data?.length > 0 && (
@@ -87,7 +83,6 @@ const CategoryPilihan = ({ id, categories }) => { />
- )}
-- cgit v1.2.3 From d14f51d91cfb8851ae2c335628737d2f516dbf6a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 14:25:53 +0700 Subject: update category management --- src/lib/home/components/CategoryPilihan.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 72e6f6a8..6568621c 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -88,7 +88,7 @@ const CategoryPilihan = ({ id, categories }) => { {categoryPilihan?.data?.map((category) => ( -
+
-- cgit v1.2.3 From c92b47f81b4ea90f799810555395af7afcfa5a4d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 14:47:28 +0700 Subject: update category management --- src/lib/product/components/ProductSearch.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index d4c5a308..09534a5d 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -249,6 +249,7 @@ const ProductSearch = ({ brands.push({ brand, qty }); } } + const categories = []; for ( @@ -263,6 +264,7 @@ const ProductSearch = ({ categories.push({ name, qty }); } } + const orderOptions = [ { value: 'price-asc', label: 'Harga Terendah' }, @@ -340,7 +342,7 @@ const ProductSearch = ({ q: router.query.q, orderBy: orderBy, brand: brandValues.join(','), - category: categoryValues.join(','), + category: categoryValues?.join(','), priceFrom, priceTo, }; -- cgit v1.2.3 From 5296ce7dba6cf674b4942113a7716a89f05b64e0 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 15:06:02 +0700 Subject: update category management search product --- src/lib/product/components/ProductFilterDesktop.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index e4a62abb..384f2daa 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -102,7 +102,19 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu } params = _.pickBy(params, _.identity) params = toQuery(params) - router.push(`${prefixUrl}?${params}`) + + const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; + + if (slug) { + if(prefixUrl.includes('category') || prefixUrl.includes('lob')){ + router.push(`${prefixUrl}?${params}`) + }else{ + router.push(`${prefixUrl}/${slug}?${params}`) + } + } else { + router.push(`${prefixUrl}?${params}`) + } + } -- cgit v1.2.3 From 09e2fd0ec1e2a1d8438ec1c630a08bc349400ecb Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 15:08:00 +0700 Subject: update error code --- src/lib/product/components/ProductFilterDesktop.jsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index 384f2daa..a8073036 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -21,6 +21,7 @@ import Image from '@/core/components/elements/Image/Image' import { formatCurrency } from '@/core/utils/formatValue' const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { + const router = useRouter() const { query } = router const [order, setOrder] = useState(query?.orderBy) @@ -102,19 +103,14 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu } params = _.pickBy(params, _.identity) params = toQuery(params) - + const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; if (slug) { - if(prefixUrl.includes('category') || prefixUrl.includes('lob')){ - router.push(`${prefixUrl}?${params}`) - }else{ - router.push(`${prefixUrl}/${slug}?${params}`) - } + router.push(`${prefixUrl}/${slug}?${params}`) } else { router.push(`${prefixUrl}?${params}`) } - } -- cgit v1.2.3 From 7dc18df04a6cf75e696f53ca578e4c36cfce9748 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 15:12:00 +0700 Subject: update category management filter search --- src/lib/product/components/ProductFilterDesktop.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index a8073036..1933c5f0 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -107,7 +107,11 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; if (slug) { - router.push(`${prefixUrl}/${slug}?${params}`) + if(prefixUrl.includes('category') || prefixUrl.includes('lob')){ + router.push(`${prefixUrl}?${params}`) + }else{ + router.push(`${prefixUrl}/${slug}?${params}`) + } } else { router.push(`${prefixUrl}?${params}`) } -- cgit v1.2.3 From 067b536d7ea507575bd5bc3c12815927bd40d103 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 16:06:13 +0700 Subject: add skeleton --- src/lib/home/components/CategoryDynamic.jsx | 114 +++++++++++++++------------- 1 file changed, 63 insertions(+), 51 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 6ab03ec3..dda7cdc4 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -4,6 +4,7 @@ import NextImage from 'next/image'; import Link from "next/link"; import { createSlug } from '@/core/utils/slug'; import odooApi from '@/core/api/odooApi'; +import { Skeleton} from '@chakra-ui/react' const CategoryDynamic = () => { const { categoryManagement } = useCategoryManagement(); @@ -41,62 +42,73 @@ const CategoryDynamic = () => { return (
- {categoryManagement && categoryManagement.data?.map((category) => { - const countLevel1 = categoryData[category.categoryIdI] || 0; - - return ( -
-
-
{category.name}
-

{countLevel1} Produk tersedia

- Lihat Semua -
-
- {category.categories.map((subCategory) => { - const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; + {categoryManagement && categoryManagement.data?.map((category) => { + const countLevel1 = categoryData[category.categoryIdI] || 0; + + return ( + +
+
+
{category.name}
+

+ {countLevel1 === 0 ? 'Menghitung jumlah produk...' : `${countLevel1} Produk tersedia`} +

+ Lihat Semua +
+
+ {category.categories.map((subCategory) => { + const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; - return ( -
-
-
- -
-
{subCategory.name}
-

{countLevel2} Produk tersedia

- Lihat Semua -
-
-
- {subCategory.childFrontendIdI.map((childCategory) => ( -
- - -
-
{childCategory.name}
-
- + return ( +
+
+
+ +
+
{subCategory.name}
+ {/*

+ {countLevel2 === 0 ? 'Menghitung jumlah produk...' : `${countLevel2} Produk tersedia`} +

*/} + +

+ {countLevel2} Produk tersedia +

+ + Lihat Semua
- ))} +
+
+ {subCategory.childFrontendIdI.map((childCategory) => ( +
+ + +
+
{childCategory.name}
+
+ +
+ ))} +
-
- ); - })} + ); + })} +
-
- ); - })} + + ); + })}
); }; -- cgit v1.2.3 From c62a5dd32e961f06a01d0a535d2fbf37118ff2e7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 30 Jul 2024 16:09:07 +0700 Subject: add key missing --- src/lib/home/components/CategoryDynamic.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index dda7cdc4..60e01df0 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -46,7 +46,7 @@ const CategoryDynamic = () => { const countLevel1 = categoryData[category.categoryIdI] || 0; return ( - +
{category.name}
-- cgit v1.2.3 From 8fe0cdf1f457148eb39d5438b13bbec7bc912976 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 31 Jul 2024 08:59:17 +0700 Subject: update category management --- src/lib/home/components/CategoryDynamic.jsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 60e01df0..f2d1a16f 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -18,14 +18,10 @@ const CategoryDynamic = () => { 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; } @@ -50,9 +46,9 @@ const CategoryDynamic = () => {
{category.name}
-

- {countLevel1 === 0 ? 'Menghitung jumlah produk...' : `${countLevel1} Produk tersedia`} -

+ +

{countLevel1} Produk tersedia

+ Lihat Semua
@@ -72,9 +68,6 @@ const CategoryDynamic = () => { />
{subCategory.name}
- {/*

- {countLevel2 === 0 ? 'Menghitung jumlah produk...' : `${countLevel2} Produk tersedia`} -

*/}

{countLevel2} Produk tersedia -- cgit v1.2.3 From aaac6b72dddf8ef8460941797a1f6d88f289f726 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 5 Aug 2024 15:59:30 +0700 Subject: update category management --- src/lib/category/api/popularProduct.js | 36 +++++++++++ src/lib/category/components/Category.jsx | 35 ++-------- src/lib/category/components/PopularBrand.jsx | 96 ++++++++++++++++++++++++++++ src/lib/home/components/CategoryDynamic.jsx | 3 +- 4 files changed, 140 insertions(+), 30 deletions(-) create mode 100644 src/lib/category/api/popularProduct.js create mode 100644 src/lib/category/components/PopularBrand.jsx (limited to 'src/lib') diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js new file mode 100644 index 00000000..2298f6fa --- /dev/null +++ b/src/lib/category/api/popularProduct.js @@ -0,0 +1,36 @@ + +export const fetchPromoItemsSolr = async (category_id_ids) => { + let sort ='sort=qty_sold_f desc'; + try { + const queryParams = new URLSearchParams({ q: category_id_ids }); + // const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s&${sort}`); + console.log("queryParams",queryParams) + + // const response = await fetch(`/solr/product/select?${queryParams.toString()}`); + const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}&rows=10&start=0&${sort}`); + console.log("response",response) + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + const promotions = await map(data.response.docs); + return promotions; + } catch (error) { + console.error("Error fetching promotion data:", error); + return []; + } + }; + + const map = async (promotions) => { + const result = []; + for (const promotion of promotions) { + const data = { + id: promotion.id, + name: promotion.display_name_s, + manufacture_name: promotion.manufacture_name_s, + manufacture_id: promotion.manufacture_id_i, + }; + result.push(data); + } + return result; + }; \ No newline at end of file diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index c147a3b3..1f3d7a51 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -5,6 +5,7 @@ import { createSlug } from '@/core/utils/slug' import { ChevronRightIcon } from '@heroicons/react/24/outline' import Image from 'next/image' import { useEffect, useState } from 'react' +import PopularBrand from './PopularBrand' const Category = () => { const [categories, setCategories] = useState([]) @@ -30,6 +31,7 @@ const Category = () => { } loadCategories() }, []) + console.log("categories",categories) return ( @@ -38,8 +40,11 @@ const Category = () => {

+
+ +
{category.name}
@@ -80,33 +85,7 @@ const Category = () => { ))}
-
-
- {category.childs.map((brand, index) => ( - (index < 8 ) && ( -
- - - -
- ) - ))} -
- {category.childs.length > 8 && ( -
- -

Lihat Semua Brand

- - -
- )} -
+
diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx new file mode 100644 index 00000000..32623f91 --- /dev/null +++ b/src/lib/category/components/PopularBrand.jsx @@ -0,0 +1,96 @@ +import odooApi from '@/core/api/odooApi' +import {React } from 'react' +import axios from 'axios'; +import { useQuery } from 'react-query' +import Link from '@/core/components/elements/Link/Link' +import { createSlug } from '@/core/utils/slug' +import Image from 'next/image' +import { ChevronRightIcon } from '@heroicons/react/24/outline' +import useProductSearch from '../../../lib/product/hooks/useProductSearch'; +import { SolrResponse } from "~/types/solr"; +import {fetchPromoItemsSolr} from '../api/popularProduct' +const SOLR_HOST = process.env.SOLR_HOST + +const PopularBrand = ({ category }) => { + + const queryFinal = { + fq: `category_id_ids:(${category.categoryDataIds.join(' OR ')})`, + fl: 'manufacture_name_s,qty_sold_f', + sort: 'qty_sold_f desc', + rows: '2000' + }; + + // Konversi objek queryFinal menjadi string query + // const queryString = new URLSearchParams(queryFinal).toString(); + + async function fetchTopBrands() { + try { + // const items = await fetchPromoItemsSolr(`category_id_ids:(${category.categoryDataIds.join(' OR ')})`); + const items = await fetchPromoItemsSolr(`type_value_s:discount_loading`); + + console.log("queryFinal", queryFinal); + console.log("items", items); + + // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas + function getTop12UniqueBrands(products) { + const brandSet = new Set(); + const topBrands = []; + + for (const product of products) { + if (!brandSet.has(product.manufacture_name_s)) { + brandSet.add(product.manufacture_name_s); + topBrands.push(product.manufacture_name_s); + } + if (topBrands.length === 12) break; + } + + return topBrands; + } + + // Menggunakan hasil pencarian produk + const products = items; + const top12UniqueBrands = getTop12UniqueBrands(products); + + console.log('top12UniqueBrands',top12UniqueBrands); + return top12UniqueBrands; + } catch (error) { + console.error("Error fetching data from Solr", error); + throw error; + } + } + + fetchTopBrands(); + + + return ( +
+
+ {category.childs.map((brand, index) => ( + (index < 8 ) && ( +
+ + + +
+ ) + ))} +
+ {category.childs.length > 8 && ( +
+ +

Lihat Semua Brand

+ + +
+ )} +
+ ) +} + +export default PopularBrand diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index f2d1a16f..0cc43d91 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -33,9 +33,8 @@ const CategoryDynamic = () => { }; fetchCategoryData(); - }, [categoryManagement, categoryData]); + }, [categoryManagement.isLoading]); - return (
{categoryManagement && categoryManagement.data?.map((category) => { -- cgit v1.2.3 From 54fca7062ee0963d6ea6a22a82fba7fa3fa516e5 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 5 Aug 2024 17:07:35 +0700 Subject: update category management --- src/lib/category/api/popularProduct.js | 7 +- src/lib/category/components/Category.jsx | 2 +- src/lib/category/components/PopularBrand.jsx | 105 ++++++++++++--------------- 3 files changed, 48 insertions(+), 66 deletions(-) (limited to 'src/lib') diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js index 2298f6fa..e17e0ae5 100644 --- a/src/lib/category/api/popularProduct.js +++ b/src/lib/category/api/popularProduct.js @@ -3,12 +3,7 @@ export const fetchPromoItemsSolr = async (category_id_ids) => { let sort ='sort=qty_sold_f desc'; try { const queryParams = new URLSearchParams({ q: category_id_ids }); - // const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s&${sort}`); - console.log("queryParams",queryParams) - - // const response = await fetch(`/solr/product/select?${queryParams.toString()}`); - const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}&rows=10&start=0&${sort}`); - console.log("response",response) + const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s&${sort}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index 1f3d7a51..ff958378 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -31,7 +31,7 @@ const Category = () => { } loadCategories() }, []) - console.log("categories",categories) + // console.log("categories",categories) return ( diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx index 32623f91..dca731e8 100644 --- a/src/lib/category/components/PopularBrand.jsx +++ b/src/lib/category/components/PopularBrand.jsx @@ -1,5 +1,5 @@ import odooApi from '@/core/api/odooApi' -import {React } from 'react' +import React, { useEffect, useState } from 'react' import axios from 'axios'; import { useQuery } from 'react-query' import Link from '@/core/components/elements/Link/Link' @@ -8,89 +8,76 @@ import Image from 'next/image' import { ChevronRightIcon } from '@heroicons/react/24/outline' import useProductSearch from '../../../lib/product/hooks/useProductSearch'; import { SolrResponse } from "~/types/solr"; -import {fetchPromoItemsSolr} from '../api/popularProduct' +import { fetchPromoItemsSolr } from '../api/popularProduct' + const SOLR_HOST = process.env.SOLR_HOST const PopularBrand = ({ category }) => { + const [topBrands, setTopBrands] = useState([]); - const queryFinal = { - fq: `category_id_ids:(${category.categoryDataIds.join(' OR ')})`, - fl: 'manufacture_name_s,qty_sold_f', - sort: 'qty_sold_f desc', - rows: '2000' - }; - - // Konversi objek queryFinal menjadi string query - // const queryString = new URLSearchParams(queryFinal).toString(); - - async function fetchTopBrands() { + const fetchTopBrands = async () => { try { - // const items = await fetchPromoItemsSolr(`category_id_ids:(${category.categoryDataIds.join(' OR ')})`); - const items = await fetchPromoItemsSolr(`type_value_s:discount_loading`); - - console.log("queryFinal", queryFinal); - console.log("items", items); - + const items = await fetchPromoItemsSolr(`category_id_ids:(${category.categoryDataIds.join(' OR ')})`); + // console.log("id",items) // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas - function getTop12UniqueBrands(products) { + const getTop12UniqueBrands = (prod) => { const brandSet = new Set(); const topBrands = []; - - for (const product of products) { - if (!brandSet.has(product.manufacture_name_s)) { - brandSet.add(product.manufacture_name_s); - topBrands.push(product.manufacture_name_s); + + for (const product of prod) { + if (!brandSet.has(product.manufacture_name)) { + brandSet.add(product.manufacture_name); + topBrands.push({ name: product.manufacture_name, id: product.manufacture_id }); + }else{ } - if (topBrands.length === 12) break; + if (topBrands.length === 18) break; } - return topBrands; } - + // Menggunakan hasil pencarian produk const products = items; const top12UniqueBrands = getTop12UniqueBrands(products); - - console.log('top12UniqueBrands',top12UniqueBrands); - return top12UniqueBrands; + + // console.log('top12UniqueBrands', top12UniqueBrands); + setTopBrands(top12UniqueBrands); } catch (error) { console.error("Error fetching data from Solr", error); throw error; } } - - fetchTopBrands(); + useEffect(() => { + fetchTopBrands(); + }, [category]); - return ( -
-
- {category.childs.map((brand, index) => ( - (index < 8 ) && ( -
- - - -
- ) - ))} -
- {category.childs.length > 8 && ( -
- +
+ {topBrands.map((brand, index) => ( +
+ + {`${brand.name}`} + +
+ ))} +
+ {/* {topBrands.length > 8 && ( +
+ + >

Lihat Semua Brand

- -
- )} -
- ) + +
+ )} */} +
+ ) } -export default PopularBrand +export default PopularBrand; -- cgit v1.2.3 From 4dc62bbe5262be23b2622853973e803f63214a60 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 12 Aug 2024 17:09:13 +0700 Subject: update category management --- src/lib/category/components/Category.jsx | 32 ++++++++++++++++++++++++++-- src/lib/category/components/PopularBrand.jsx | 2 +- 2 files changed, 31 insertions(+), 3 deletions(-) (limited to 'src/lib') diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index ff958378..b10cb661 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -6,11 +6,36 @@ import { ChevronRightIcon } from '@heroicons/react/24/outline' import Image from 'next/image' import { useEffect, useState } from 'react' import PopularBrand from './PopularBrand' +import { bannerApi } from '@/api/bannerApi'; +const { useQuery } = require('react-query') const Category = () => { const [categories, setCategories] = useState([]) const [openCategories, setOpenCategory] = useState([]); + const [banner, setBanner] = useState([]); + + const promotionProgram = useQuery('banner-promo-category-card', bannerApi({ type: 'banner-promo-category-card' })); + // const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' })); + useEffect(() => { + const loadCategories = async () => { + let dataCategories = await odooApi('GET', '/api/v1/category/tree') + dataCategories = dataCategories?.map((category) => { + category.childs = category.childs.map((child1Category) => { + return { + ...child1Category, + isOpen: false + } + }) + return { + ...category, + isOpen: false + } + }) + setCategories(dataCategories) + } + loadCategories() + }, []) useEffect(() => { const loadCategories = async () => { @@ -86,9 +111,12 @@ const Category = () => {
-
- + {promotionProgram?.data[0]?.map((banner, index)=>( +
+ {/* */} + {`${banner.name}`}
+ ))}
diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx index dca731e8..7c297d39 100644 --- a/src/lib/category/components/PopularBrand.jsx +++ b/src/lib/category/components/PopularBrand.jsx @@ -17,7 +17,7 @@ const PopularBrand = ({ category }) => { const fetchTopBrands = async () => { try { - const items = await fetchPromoItemsSolr(`category_id_ids:(${category.categoryDataIds.join(' OR ')})`); + const items = await fetchPromoItemsSolr(`category_id_ids:(${category?.categoryDataIds.join(' OR ')})`); // console.log("id",items) // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas const getTop12UniqueBrands = (prod) => { -- cgit v1.2.3 From 3e11fce63de4b0d99a1e48c9998d6fcfcec13d98 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 12 Aug 2024 17:11:07 +0700 Subject: update error code --- src/lib/category/components/PopularBrand.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib') diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx index 7c297d39..09c0f8a1 100644 --- a/src/lib/category/components/PopularBrand.jsx +++ b/src/lib/category/components/PopularBrand.jsx @@ -17,7 +17,7 @@ const PopularBrand = ({ category }) => { const fetchTopBrands = async () => { try { - const items = await fetchPromoItemsSolr(`category_id_ids:(${category?.categoryDataIds.join(' OR ')})`); + const items = await fetchPromoItemsSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`); // console.log("id",items) // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas const getTop12UniqueBrands = (prod) => { -- cgit v1.2.3 From 004a9a644aed65d5c02263f19cce8b7c3000f354 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 13 Aug 2024 10:19:38 +0700 Subject: update category --- src/lib/category/api/popularProduct.js | 5 ++-- src/lib/category/components/Category.jsx | 38 ++++++++++++++-------------- src/lib/category/components/PopularBrand.jsx | 4 +-- 3 files changed, 24 insertions(+), 23 deletions(-) (limited to 'src/lib') diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js index e17e0ae5..146c9449 100644 --- a/src/lib/category/api/popularProduct.js +++ b/src/lib/category/api/popularProduct.js @@ -1,9 +1,10 @@ -export const fetchPromoItemsSolr = async (category_id_ids) => { +export const fetchPopulerProductSolr = async (category_id_ids) => { let sort ='sort=qty_sold_f desc'; try { const queryParams = new URLSearchParams({ q: category_id_ids }); - const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s&${sort}`); + const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s,qty_sold_f&${sort}`); + console.log("response",response) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index b10cb661..374cdf78 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -37,25 +37,25 @@ const Category = () => { loadCategories() }, []) - useEffect(() => { - const loadCategories = async () => { - let dataCategories = await odooApi('GET', '/api/v1/category/tree') - dataCategories = dataCategories?.map((category) => { - category.childs = category.childs.map((child1Category) => { - return { - ...child1Category, - isOpen: false - } - }) - return { - ...category, - isOpen: false - } - }) - setCategories(dataCategories) - } - loadCategories() - }, []) + // useEffect(() => { + // const loadCategories = async () => { + // let dataCategories = await odooApi('GET', '/api/v1/category/tree') + // dataCategories = dataCategories?.map((category) => { + // category.childs = category.childs.map((child1Category) => { + // return { + // ...child1Category, + // isOpen: false + // } + // }) + // return { + // ...category, + // isOpen: false + // } + // }) + // setCategories(dataCategories) + // } + // loadCategories() + // }, []) // console.log("categories",categories) return ( diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx index 09c0f8a1..f0b12e2c 100644 --- a/src/lib/category/components/PopularBrand.jsx +++ b/src/lib/category/components/PopularBrand.jsx @@ -8,7 +8,7 @@ import Image from 'next/image' import { ChevronRightIcon } from '@heroicons/react/24/outline' import useProductSearch from '../../../lib/product/hooks/useProductSearch'; import { SolrResponse } from "~/types/solr"; -import { fetchPromoItemsSolr } from '../api/popularProduct' +import { fetchPopulerProductSolr } from '../api/popularProduct' const SOLR_HOST = process.env.SOLR_HOST @@ -17,7 +17,7 @@ const PopularBrand = ({ category }) => { const fetchTopBrands = async () => { try { - const items = await fetchPromoItemsSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`); + const items = await fetchPopulerProductSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`); // console.log("id",items) // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas const getTop12UniqueBrands = (prod) => { -- cgit v1.2.3