input range filter, sort by ready stock

5 files changed, 29 insertions, 25 deletions

diff --git a/src/components/Filter.js b/src/components/Filter.js
index d2a5bf1b..4727fb9d 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -29,8 +29,8 @@ const Filter = ({
     let filterRoutePrefix = '?';
     if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`);
     if (selectedCategory) filterRoute.push(`category=${selectedCategory}`);
-    if (priceFrom > 0) filterRoute.push(`price_from=${priceFrom}`);
-    if (priceTo > 0) filterRoute.push(`price_to=${priceTo}`);
+    if (priceFrom) filterRoute.push(`price_from=${priceFrom}`);
+    if (priceTo) filterRoute.push(`price_to=${priceTo}`);
     if (orderBy) filterRoute.push(`order_by=${orderBy}`);
 
     if (defaultRoute.includes('?')) filterRoutePrefix = '&';
@@ -70,8 +70,8 @@ const Filter = ({
   const reset = () => {
     setSelectedBrand('');
     setSelectedCategory('');
-    setPriceFrom(0);
-    setPriceTo(0);
+    setPriceFrom('');
+    setPriceTo('');
     setOrderBy('');
   }
 
@@ -92,13 +92,19 @@ const Filter = ({
         </button>
       </div>
       <form className="flex flex-col gap-y-4" onSubmit={submit}>
+        {selectedBrand || selectedCategory || priceFrom || priceTo || orderBy ? (
+          <button type="button" className="text-yellow-900 font-semibold ml-auto" onClick={reset}>
+            Reset Filter
+          </button>
+        ) : ''}
         {!disableFilter.includes('orderBy') ? (
           <div>
             <label>Urutkan</label>
-            <div className="flex flex-wrap gap-2 mt-2">
-              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button>
-              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button>
-              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button>
+            <div className="flex gap-2 mt-2 overflow-x-auto w-full">
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button>
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button>
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button>
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('stock')}>Ready Stock</button>
             </div>
           </div>
         ) : ''}
@@ -128,20 +134,15 @@ const Filter = ({
           <div>
             <label>Harga</label>
             <div className="flex gap-x-4 mt-2 items-center">
-              <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
+              <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
               <span>&mdash;</span>
-              <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
+              <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
             </div>
           </div>
         ) : ''}
         <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
           Terapkan Filter
         </button>
-        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 || orderBy ? (
-          <button type="button" className="btn-light font-semibold w-full" onClick={reset}>
-            Reset Filter
-          </button>
-        ) : ''}
       </form>
     </div>
   )
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 2d26205d..ad986c86 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -59,6 +59,9 @@ export default async function handler(req, res) {
     case 'popular':
       paramOrderBy = ', search_rank DESC';
       break;
+    case 'stock':
+      paramOrderBy = ', stock_total DESC';
+      break;
   }
 
   let limit = 30;
@@ -74,7 +77,7 @@ export default async function handler(req, res) {
     `start=${offset}`,
     `rows=${limit}`,
     `sort=product_rating DESC ${paramOrderBy}`,
-    `fq=price_discount:[${price_from == 0 ? '*' : price_from} TO ${price_to == 0 ? '*' : price_to}]`
+    `fq=price_discount:[${price_from == '' ? '*' : price_from} TO ${price_to == '' ? '*' : price_to}]`
   ];
 
   if (brand) parameter.push(`fq=brand:${brand}`);
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index b532e7a7..c0524207 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -13,8 +13,8 @@ export async function getServerSideProps(context) {
     slug, 
     page = 1, 
     category = '',
-    price_from = '0',
-    price_to = '0',
+    price_from = '',
+    price_to = '',
     order_by = '',
   } = context.query;
 
@@ -62,8 +62,8 @@ export default function BrandDetail({
   const route = () => {
     let route = `/shop/brands/${slug}`;
     if (category) route += `&category=${category}`;
-    if (price_from > 0) route += `&price_from=${price_from}`;
-    if (price_to > 0) route += `&price_to=${price_to}`;
+    if (price_from) route += `&price_from=${price_from}`;
+    if (price_to) route += `&price_to=${price_to}`;
     if (order_by) route += `&order_by=${order_by}`;
     return route;
   }
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index dd554660..1ef693c0 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -165,7 +165,7 @@ export default function ProductDetail({ product }) {
           </div>
 
           <div className="mt-10">
-            <h2 className="h1 mb-4">Produk Lainnya</h2>
+            <h2 className="font-bold mb-4">Produk Lainnya</h2>
             <ProductSlider products={similarProducts}/>
           </div>
         </div>
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 2ae3cca4..e365fcf5 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -13,8 +13,8 @@ export async function getServerSideProps(context) {
     page = 1, 
     brand = '', 
     category = '',
-    price_from = '0',
-    price_to = '0',
+    price_from = '',
+    price_to = '',
     order_by = '',
   } = context.query;
 
@@ -53,8 +53,8 @@ export default function ShopSearch({
     let route = `/shop/search?q=${q}`;
     if (brand) route += `&brand=${brand}`;
     if (category) route += `&category=${category}`;
-    if (price_from > 0) route += `&price_from=${price_from}`;
-    if (price_to > 0) route += `&price_to=${price_to}`;
+    if (price_from) route += `&price_from=${price_from}`;
+    if (price_to) route += `&price_to=${price_to}`;
     if (order_by) route += `&order_by=${order_by}`;
     return route;
   }