filter by limit rows

2 files changed, 36 insertions, 8 deletions

diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 34357526..7dadc39e 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -48,8 +48,8 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
             >
               <option value=''>Pilih Brand...</option>
               {brands.map((brand, index) => (
-                <option value={brand} key={index}>
-                  {brand}
+                <option value={brand.brand} key={index}>
+                  {brand.brand}
                 </option>
               ))}
             </select>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 3c3dbfd2..c79e355e 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -20,17 +20,20 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
   const { page = 1 } = query
   const [q, setQ] = useState(query?.q || '*')
+  const [limit, setLimit] = useState(query?.limit || 30)
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
-  const { productSearch } = useProductSearch({ query: { ...query, q } })
+  const { productSearch } = useProductSearch({ query: { ...query, q, limit } })
   const [products, setProducts] = useState(null)
   const [spellings, setSpellings] = useState(null)
   const popup = useActive()
+  const numRows = [30, 50, 80, 100]
 
+  console.log('ini product search', productSearch.data)
   const pageCount = Math.ceil(
-    productSearch.data?.response.numFound / productSearch.data?.responseHeader.params.rows
+    productSearch.data?.response.numFound / limit
   )
   const productStart = productSearch.data?.responseHeader.params.start
-  const productRows = productSearch.data?.responseHeader.params.rows
+  const productRows = limit
   const productFound = productSearch.data?.response.numFound
 
   useEffect(() => {
@@ -101,7 +104,17 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const handleOrderBy = (e) => {
     let params = {
       ...router.query,
-      orderBy: e.target.value
+      orderBy: e.target.value,
+    }
+    params = _.pickBy(params, _.identity)
+    params = toQuery(params)
+    router.push(`${prefixUrl}?${params}`)
+  }
+
+  const handleLimit = (e) => {
+    let params = {
+      ...router.query,
+      limit: e.target.value,
     }
     params = _.pickBy(params, _.identity)
     params = toQuery(params)
@@ -210,9 +223,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                     {pageCount > 1 ? (
                       <>
                         {productStart + 1}-
-                        {productStart + productRows > productFound
+                        {parseInt(productStart) + parseInt(productRows) > productFound
                           ? productFound
-                          : productStart + productRows}
+                          : parseInt(productStart) + parseInt(productRows)}
                         &nbsp;dari&nbsp;
                       </>
                     ) : (
@@ -247,6 +260,21 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                     ))}
                   </select>
                 </div>
+                <div className='ml-3'>
+                  <select
+                    name='limit'
+                    className='form-input mt-2'
+                    value={router.query?.limit || ''}
+                    onChange={(e) => handleLimit(e)}
+                  >
+                    {numRows.map((option, index) => (
+                      <option key={index} value={option}>
+                        {' '}
+                        {option}{' '}
+                      </option>
+                    ))}
+                  </select>
+                </div>
               </div>
             </div>
             {productSearch.isLoading && <ProductSearchSkeleton />}