From f1910544cf6df50bcb175b66b604f5903f6ae3fa Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 27 Jul 2024 13:34:00 +0700
Subject: <iman> 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 +++++++++++++++++++++-------
 src/pages/api/shop/search.js                 |  2 +-
 src/pages/shop/lob/[slug].jsx                | 71 +++++++++++++++-----
 5 files changed, 186 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/lob/components/Breadcrumb.jsx

(limited to 'src')

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 (
           <section>
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 (
+    <div className='container mx-auto py-4 md:py-6'>
+      <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
+        <ChakraBreadcrumb>
+          <BreadcrumbItem>
+            <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+              Home
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          {breadcrumbs.data?.map((category, index) => (
+            <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
+              {index === breadcrumbs.data.length - 1 ? (
+                <BreadcrumbLink className='whitespace-nowrap'>{category.industries}</BreadcrumbLink>
+              ) : (
+                <BreadcrumbLink
+                  as={Link}
+                  href={createSlug('/shop/lob/', category.industries, category.id)}
+                  className='!text-danger-500 whitespace-nowrap'
+                >
+                  {category.industries}
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+          ))}
+        </ChakraBreadcrumb>
+      </Skeleton>
+    </div>
+  )
+}
+
+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 = [];
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 66f517ae..b6b8c795 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -56,7 +56,7 @@ export default async function handler(req, res) {
     `start=${parseInt(offset)}`,
     `rows=${limit}`,
     `sort=${paramOrderBy}`,
-    // `fq=-publish_b:false`,
+    `fq=-publish_b:false`,
   ];
 
   if (priceFrom > 0 || priceTo > 0) {
diff --git a/src/pages/shop/lob/[slug].jsx b/src/pages/shop/lob/[slug].jsx
index be8db639..d02ec8ac 100644
--- a/src/pages/shop/lob/[slug].jsx
+++ b/src/pages/shop/lob/[slug].jsx
@@ -3,9 +3,10 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import Seo from '@/core/components/Seo';
 import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
-import Breadcrumb from '@/lib/category/components/Breadcrumb';
+import Breadcrumb from '../../../lib/lob/components/Breadcrumb';
 import { useEffect, useState } from 'react';
 import odooApi from '@/core/api/odooApi';
+import { div } from 'lodash-contrib';
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'));
 const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'));
@@ -16,9 +17,20 @@ export default function CategoryDetail() {
   const { slug = '', page = 1 } = router.query;
   const [dataLob, setDataLob] = useState([]);
   const [finalQuery, setFinalQuery] = useState({});
+  const [dataCategoriesProduct, setDataCategoriesProduct] = useState([])
+  const [data, setData] = useState([])
+  const dataIdCategories = []
   
   const categoryName = getNameFromSlug(slug);
   const lobId = getIdFromSlug(slug);
+  const q = router?.query.q || null;
+  const query = {
+    fq: `id:${lobId}`,
+    page,
+  };
+  if (q) {
+    query.q = q;
+  }
 
   useEffect(() => {
     const fetchCategoryData = async () => {
@@ -33,22 +45,40 @@ export default function CategoryDetail() {
     fetchCategoryData();
   }, [lobId]);
 
-  console.log("dataLob",dataLob)
-  
+  const collectIdsCategory = (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 collectIds = (categories) => {
-          return categories?.categoryIds?.map(data => data.id) || [];
-        };
-        
-        const ids = collectIds(dataLob[0]);
-        const newQuery = {
-            fq: `category_id_ids:(${ids.join(' OR ')})`,
-            page: 1,
-            brand: router.query.brand || '',
-        };
-        setFinalQuery(newQuery);
-        console.log("finalQuery",finalQuery)
-  }, [dataLob, router.query.brand]);
+    const fetchCategoryData = async () => {
+      if (dataLob[0]?.categoryIds) {
+        for (const category of dataLob[0].categoryIds) {
+          const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.id}`);
+          if (getCategoriesId) {
+            setDataCategoriesProduct(getCategoriesId);
+            const ids = collectIdsCategory(getCategoriesId);
+            dataIdCategories.push(ids)
+          }
+        }
+        setData(dataIdCategories)
+      }
+    };
+    fetchCategoryData();
+    const mergedArray = data.flat();
+    const newQuery = {
+      fq: `category_id_ids:(${mergedArray.join(' OR ')})`,
+    };
+    setFinalQuery(newQuery);
+  }, [dataLob, ]);
 
   return (
     <BasicLayout>
@@ -64,9 +94,16 @@ export default function CategoryDetail() {
       />
 
       <Breadcrumb categoryId={getIdFromSlug(slug)} />
+      <div className='grid grid-cols-3'>
+        {dataLob[0]?.categoryIds && (
+          <div>
+            <image></image>
+          </div>
+        )}
+      </div>
 
       {!_.isEmpty(router.query) && (
-        <ProductSearch query={finalQuery} categories={getIdFromSlug(slug)} prefixUrl={`/shop/lob/${slug}`} />
+        <ProductSearch query={query} categories={getIdFromSlug(slug)} prefixUrl={`/shop/lob/${slug}`} />
       )}
     </BasicLayout>
   );
-- 
cgit v1.2.3