Merged in CR/shipment (pull request #380)

<iman> fix bug ao shipment pagination

2 files changed, 128 insertions, 77 deletions

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index cca8ec5e..f4569574 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -231,7 +231,6 @@ const ProductDesktopVariant = ({
     };
     fetchData();
   }, [product]);
-  console.log('product', product);
 
   return (
     <DesktopView>
diff --git a/src/lib/shipment/components/Shipments.jsx b/src/lib/shipment/components/Shipments.jsx
index 115bbd3a..20dbb013 100644
--- a/src/lib/shipment/components/Shipments.jsx
+++ b/src/lib/shipment/components/Shipments.jsx
@@ -1,62 +1,83 @@
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
-import Menu from '@/lib/auth/components/Menu'
-import { EllipsisVerticalIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
-import ImageNext from 'next/image'
-import { useRouter } from 'next/router'
-import { useQuery } from 'react-query'
-import _, { forEach } from 'lodash-contrib'
-import Spinner from '@/core/components/elements/Spinner/Spinner'
-import Manifest from '@/lib/treckingAwb/component/Manifest'
-import { useState } from 'react'
-import Pagination from '@/core/components/elements/Pagination/Pagination'
-import Link from 'next/link'
-import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge'
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import Menu from '@/lib/auth/components/Menu';
+import {
+  EllipsisVerticalIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+import ImageNext from 'next/image';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useQuery } from 'react-query';
+import _, { forEach } from 'lodash-contrib';
+import Spinner from '@/core/components/elements/Spinner/Spinner';
+import Manifest from '@/lib/treckingAwb/component/Manifest';
+import { useState } from 'react';
+import Pagination from '@/core/components/elements/Pagination/Pagination';
+import Link from 'next/link';
+import TransactionStatusBadge from '@/lib/transaction/components/TransactionStatusBadge';
 
-const { listShipments } = require('../api/listShipment')
+const { listShipments } = require('../api/listShipment');
 
 const Shipments = () => {
-  const router = useRouter()
-  const { q = '', page = 1 } = router.query
-  const [paramStatus, setParamStatus] = useState(null)
-
-  const limit = 15
+  const router = useRouter();
+  const { q = '', page = 1, status = null } = router.query;
+  const [paramStatus, setParamStatus] = useState(status);
+  const limit = 15;
 
   const query = {
     q: q,
     status: paramStatus,
     offset: (page - 1) * limit,
-    limit
-  }
-  const [inputQuery, setInputQuery] = useState(q)
-  const queryString = _.toQuery(query)
+    limit,
+  };
+  const [inputQuery, setInputQuery] = useState(q);
+  const queryString = _.toQuery(query);
 
   const { data: shipments } = useQuery('shipments' + queryString, () =>
     listShipments({ query: queryString })
-  )
-  const [idAWB, setIdAWB] = useState(null)
+  );
+  const [idAWB, setIdAWB] = useState(null);
 
-  const pageCount = Math.ceil(shipments?.pickingTotal / limit)
-  let pageQuery = _.omit(query, ['limit', 'offset', 'context'])
-  pageQuery = _.pickBy(pageQuery, _.identity)
-  pageQuery = _.toQuery(pageQuery)
+  const pageCount = Math.ceil(shipments?.pickingTotal / limit);
+  let pageQuery = _.omit(query, ['limit', 'offset', 'context']);
+  pageQuery = _.pickBy(pageQuery, _.identity);
+  pageQuery = _.toQuery(pageQuery);
 
   const closePopup = () => {
-    setIdAWB(null)
-  }
+    setIdAWB(null);
+  };
 
   const handleSubmit = async (e) => {
-    e.preventDefault()
-    router.push(`${router.pathname}?q=${inputQuery}`)
-  }
+    e.preventDefault();
+    router.push(`${router.pathname}?q=${inputQuery}`);
+  };
 
   const filterStatus = async (status) => {
     if (status === paramStatus) {
-      setParamStatus(null)
+      setParamStatus(null);
     } else {
-      setParamStatus(status)
+      setParamStatus(status);
     }
-  }
+  };
+
+  useEffect(() => {
+    const resetQuery = () => {
+      const newQuery = {
+        status: paramStatus || undefined,
+        q: '',
+        page: 1,
+      };
+      router.push({
+        pathname: router.pathname,
+        query: newQuery,
+      });
+    };
+
+    if (paramStatus !== status) {
+      resetQuery();
+    }
+  }, [paramStatus]);
   return (
     <>
       <MobileView>
@@ -84,7 +105,10 @@ const Shipments = () => {
           </form>
 
           {shipments?.pickings.map((shipment) => (
-            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={shipment.id}>
+            <div
+              className='p-4 shadow border border-gray_r-3 rounded-md'
+              key={shipment.id}
+            >
               <div className='flex justify-between items-center mb-3'>
                 <div className='text-caption-2 text-gray_r-11'>
                   <p>
@@ -93,7 +117,9 @@ const Shipments = () => {
                       {shipment.carrierName || '-'}
                     </span>
                   </p>
-                  <p className='mt-2'>No. Resi : {shipment.trackingNumber || '-'}</p>
+                  <p className='mt-2'>
+                    No. Resi : {shipment.trackingNumber || '-'}
+                  </p>
                 </div>
                 <div className='flex justify-between'>
                   {shipment?.status === 'completed' && (
@@ -116,11 +142,17 @@ const Shipments = () => {
               <hr />
               <div className='flex justify-between mt-2 items-center mb-5'>
                 <div>
-                  <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
+                  <span className='text-caption-2 text-gray_r-11'>
+                    No. Transaksi
+                  </span>
                   <Link href={`/my/transactions/${shipment.saleOrder.id}`}>
-                    <h2 className='text-danger-500 mt-1 mb-2'>{shipment.saleOrder.name}</h2>
+                    <h2 className='text-danger-500 mt-1 mb-2'>
+                      {shipment.saleOrder.name}
+                    </h2>
                   </Link>
-                  <span className='text-caption-2 text-gray_r-11'>{shipment.date}</span>
+                  <span className='text-caption-2 text-gray_r-11'>
+                    {shipment.date}
+                  </span>
                 </div>
                 <div>
                   <button
@@ -136,7 +168,11 @@ const Shipments = () => {
                 onClick={() => setIdAWB(shipment.id)}
                 className='flex items-center mt-1 gap-x-1 min-w-full'
               >
-                <ImageNext src={`/images/BOX_DELIVERY_GREEN.svg`} width={20} height={20} />
+                <ImageNext
+                  src={`/images/BOX_DELIVERY_GREEN.svg`}
+                  width={20}
+                  height={20}
+                />
                 <p className='text-sm text-green-700 truncate'>
                   {shipment.lastManifest.description}
                 </p>
@@ -148,7 +184,7 @@ const Shipments = () => {
           <Pagination
             pageCount={pageCount}
             currentPage={parseInt(page)}
-            url={router.pathname + pageQuery}
+            url={`${router.pathname}${pageQuery ? '?' + pageQuery : ''}`}
             className='mt-2 mb-2'
           />
         </div>
@@ -176,7 +212,8 @@ const Shipments = () => {
                   <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
                 </svg>
                 <div>
-                  Lacak pengiriman untuk setiap transaksi anda semakin mudah di Indoteknik.com
+                  Lacak pengiriman untuk setiap transaksi anda semakin mudah di
+                  Indoteknik.com
                 </div>
               </div>
               <div className='flex justify-between gap-x-5'>
@@ -190,7 +227,9 @@ const Shipments = () => {
             </div>
             <div className='p-4 bg-white border border-gray_r-6 rounded'>
               <div className='flex mb-6 items-center justify-between'>
-                <h1 className='text-title-sm font-semibold'>Detail Pengiriman</h1>
+                <h1 className='text-title-sm font-semibold'>
+                  Detail Pengiriman
+                </h1>
                 <form className='flex gap-x-2' onSubmit={handleSubmit}>
                   <input
                     type='text'
@@ -199,7 +238,10 @@ const Shipments = () => {
                     value={inputQuery}
                     onChange={(e) => setInputQuery(e.target.value)}
                   />
-                  <button className='btn-light bg-transparent px-3' type='submit'>
+                  <button
+                    className='btn-light bg-transparent px-3'
+                    type='submit'
+                  >
                     <MagnifyingGlassIcon className='w-6' />
                   </button>
                 </form>
@@ -254,7 +296,7 @@ const Shipments = () => {
               <Pagination
                 pageCount={pageCount}
                 currentPage={parseInt(page)}
-                url={router.pathname + pageQuery}
+                url={`${router.pathname}${pageQuery ? '?' + pageQuery : ''}`}
                 className='mt-2 mb-2'
               />
             </div>
@@ -263,16 +305,16 @@ const Shipments = () => {
         <Manifest idAWB={idAWB} closePopup={closePopup} />
       </DesktopView>
     </>
-  )
-}
+  );
+};
 
 const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => {
-  const status = [`pending`, `shipment`, `completed`]
+  const status = [`pending`, `shipment`, `completed`];
 
   return (
     <>
       {status.map((value) => {
-        const statusData = getStatusLabel(device, value, shipments)
+        const statusData = getStatusLabel(device, value, shipments);
         if (device === 'desktop') {
           return (
             <div
@@ -282,13 +324,15 @@ const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => {
               }`}
               onClick={() => filterStatus(value)}
             >
-              <h2 className='mb-2 text-lg font-bold tracking-tight'>{statusData.label}</h2>
+              <h2 className='mb-2 text-lg font-bold tracking-tight'>
+                {statusData.label}
+              </h2>
               {statusData.image}
               <h1 className='text-xl font-bold'>
                 {statusData.shipCount} <span className='text-sm'>Pesanan</span>
               </h1>
             </div>
-          )
+          );
         } else {
           return (
             <div
@@ -305,15 +349,15 @@ const CardStatus = ({ device, paramStatus, shipments, filterStatus }) => {
                 <span className='truncate'>{statusData.shipCount}</span> {'>'}
               </h1>
             </div>
-          )
+          );
         }
       })}
     </>
-  )
-}
+  );
+};
 
 const getStatusLabel = (device, status, shipments) => {
-  let images = null
+  let images = null;
   switch (status) {
     case 'pending':
       if (device === 'desktop') {
@@ -328,40 +372,48 @@ const getStatusLabel = (device, status, shipments) => {
               />
             </div>
           </div>
-        )
+        );
       } else {
         images = (
           <div>
             <ImageNext src='/images/BOX(1).svg' width={15} height={20} />
           </div>
-        )
+        );
       }
       return {
         label: 'Pending',
         shipCount: shipments?.summary?.pendingCount,
-        image: images
-      }
+        image: images,
+      };
     case 'shipment':
       if (device === 'desktop') {
         images = (
           <div className='bg-yellow-100 border border-yellow-200 rounded-sm p-1 w-20 mb-2'>
             <div>
-              <ImageNext src='/images/BOX_DELIVER_(1).svg' width={30} height={20} />
+              <ImageNext
+                src='/images/BOX_DELIVER_(1).svg'
+                width={30}
+                height={20}
+              />
             </div>
           </div>
-        )
+        );
       } else {
         images = (
           <div>
-            <ImageNext src='/images/BOX_DELIVER_(1).svg' width={18} height={20} />
+            <ImageNext
+              src='/images/BOX_DELIVER_(1).svg'
+              width={18}
+              height={20}
+            />
           </div>
-        )
+        );
       }
       return {
         label: 'Pengiriman',
         shipCount: shipments?.summary?.shipmentCount,
-        image: images
-      }
+        image: images,
+      };
     case 'completed':
       if (device === 'desktop') {
         images = (
@@ -375,22 +427,22 @@ const getStatusLabel = (device, status, shipments) => {
               />
             </div>
           </div>
-        )
+        );
       } else {
         images = (
           <div>
             <ImageNext src='/images/open-box(1).svg' width={16} height={20} />
           </div>
-        )
+        );
       }
       return {
         label: 'Pesanan Tiba',
         shipCount: shipments?.summary?.completedCount,
-        image: images
-      }
+        image: images,
+      };
     default:
-      return 'Status Tidak Dikenal'
+      return 'Status Tidak Dikenal';
   }
-}
+};
 
-export default Shipments
+export default Shipments;