filter choices

2 files changed, 109 insertions, 10 deletions

diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx
index 6118ed6b..e4a62abb 100644
--- a/src/lib/product/components/ProductFilterDesktop.jsx
+++ b/src/lib/product/components/ProductFilterDesktop.jsx
@@ -18,6 +18,7 @@ import {
   VStack
 } from '@chakra-ui/react'
 import Image from '@/core/components/elements/Image/Image'
+import { formatCurrency } from '@/core/utils/formatValue'
 
 const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
@@ -104,14 +105,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu
     router.push(`${prefixUrl}?${params}`)
   }
 
-  const formatCurrency = (value) => {
-    if (value >= 1000) {
-      const thousands = Math.floor(value / 1000) // Menghitung ribuan
-      return `Rp${thousands}k`
-    } else {
-      return `Rp${value}`
-    }
-  }
+ 
 
   /*const handleIndexAccordion = async () => {
     if (brandValues) {
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 9d59b305..bc69c9dd 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -15,8 +15,9 @@ import { useRouter } from 'next/router'
 import searchSpellApi from '@/core/api/searchSpellApi'
 import Link from '@/core/components/elements/Link/Link'
 import whatsappUrl from '@/core/utils/whatsappUrl'
-import { Image } from '@chakra-ui/react'
+import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'
 import odooApi from '@/core/api/odooApi'
+import { formatCurrency } from '@/core/utils/formatValue'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
@@ -32,6 +33,10 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const [bannerPromotionFooter, setBannerPromotionFooter] = useState(null)
   const popup = useActive()
   const numRows = [30, 50, 80, 100]
+  const [brandValues, setBrand] = useState(query?.brand?.split(',') || [])
+  const [categoryValues, setCategory] = useState(query?.category?.split(',') || [])
+  const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null)
+  const [priceTo, setPriceTo] = useState(query?.priceTo || null)
 
   const pageCount = Math.ceil(productSearch.data?.response.numFound / limit)
   const productStart = productSearch.data?.responseHeader.params.start
@@ -98,7 +103,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
       categories.push({ name, qty })
     }
   }
-  
+
   /*const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter(
     (value, index) => {
       if (index % 2 === 0) {
@@ -166,12 +171,62 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     )
   }, [spellings])
 
+  const handleDeleteFilter = async (source, value) => {
+    let params = {
+      q: router.query.q,
+      orderBy: orderBy,
+      brand: brandValues.join(','),
+      category: categoryValues.join(','),
+      priceFrom,
+      priceTo
+    }
+
+    let brands = brandValues
+    let catagories = categoryValues
+    switch (source) {
+      case 'brands':
+        brands = brandValues.filter((item) => item !== value)
+        params.brand = brands.join(',')
+        await setBrand(brands)
+        break
+      case 'category':
+        catagories = categoryValues.filter((item) => item !== value)
+        params.category = catagories.join(',')
+        await setCategory(catagories)
+        break
+      case 'price':
+        params.priceFrom = null
+        params.priceTo = null
+        break
+      case 'delete':
+        params = {
+          q: router.query.q,
+          orderBy: orderBy
+        }
+        break
+    }
+
+    handleSubmitFilter(params)
+  }
+  const handleSubmitFilter = (params) => {
+    params = _.pickBy(params, _.identity)
+    params = toQuery(params)
+    router.push(`${prefixUrl}?${params}`)
+  }
+
   return (
     <>
       <MobileView>
         {productSearch.isLoading && <ProductSearchSkeleton />}
         <div className='p-4 pt-0'>
           <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>
+          <FilterChoicesComponent
+            brandValues={brandValues}
+            categoryValues={categoryValues}
+            priceFrom={priceFrom}
+            priceTo={priceTo}
+            handleDeleteFilter={handleDeleteFilter}
+          />
 
           <div className='mb-2 leading-6 text-gray_r-11'>
             {!spellings ? (
@@ -271,6 +326,13 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
             )}
 
             <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1>
+            <FilterChoicesComponent
+              brandValues={brandValues}
+              categoryValues={categoryValues}
+              priceFrom={priceFrom}
+              priceTo={priceTo}
+              handleDeleteFilter={handleDeleteFilter}
+            />
             <div className='flex justify-between items-center mb-2'>
               <div className='mb-2 leading-6 text-gray_r-11'>
                 {!spellings ? (
@@ -388,3 +450,46 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
 }
 
 export default ProductSearch
+
+const FilterChoicesComponent = ({
+  brandValues,
+  categoryValues,
+  priceFrom,
+  priceTo,
+  handleDeleteFilter
+}) => (
+  <div className='flex items-center'>
+    <HStack spacing={2} className='flex-wrap'>
+      {brandValues.map((value, index) => (
+        <Tag size='lg' key={index} borderRadius='lg' variant='outline' colorScheme='gray'>
+          <TagLabel>{value}</TagLabel>
+          <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
+        </Tag>
+      ))}
+      {categoryValues.map((value, index) => (
+        <Tag size='lg' key={index} borderRadius='lg' variant='outline' colorScheme='gray'>
+          <TagLabel>{value}</TagLabel>
+          <TagCloseButton onClick={() => handleDeleteFilter('category', value)} />
+        </Tag>
+      ))}
+      {priceFrom && priceTo && (
+        <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
+          <TagLabel>{formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)}</TagLabel>
+          <TagCloseButton onClick={() => handleDeleteFilter('price', priceFrom)} />
+        </Tag>
+      )}
+      {brandValues.length > 0 || categoryValues.length > 0 || priceFrom || priceTo ? (
+        <span>
+          <button
+            className='btn-transparent py-2 px-5 h-[40px] text-red-700'
+            onClick={() => handleDeleteFilter('delete')}
+          >
+            Hapus Semua
+          </button>
+        </span>
+      ) : (
+        ''
+      )}
+    </HStack>
+  </div>
+)