From 04abef13b5f801fab859800175a869891feb5b43 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Fri, 17 Nov 2023 10:22:19 +0700
Subject: [PATCH] feat: picked order change status and description

---
 src/api/Order.ts                | 12 ++++++
 src/pages/PickedOrderDetail.tsx | 74 +++++++++++++++++++++++++--------
 src/utils/Order.ts              |  9 +++-
 3 files changed, 76 insertions(+), 19 deletions(-)

diff --git a/src/api/Order.ts b/src/api/Order.ts
index baa6548..97b8729 100644
--- a/src/api/Order.ts
+++ b/src/api/Order.ts
@@ -60,3 +60,15 @@ export async function pickOrderAPI(orderId : number, username : string) {
     }
 }
 
+export async function updateOrderAPI(orderId : number, username : string, status : string, description : string) {
+    try {
+        const API_URL = REST_URL + "/order/order/" + orderId;
+        const data = {username : username, status : status, description};
+        console.log("GOLGOLOG", data);
+        const response = await axios.put(API_URL, data);
+        return response;
+    } catch(err) {
+        alert(err);
+        throw err;
+    }
+}
diff --git a/src/pages/PickedOrderDetail.tsx b/src/pages/PickedOrderDetail.tsx
index aebb44f..f7d1513 100644
--- a/src/pages/PickedOrderDetail.tsx
+++ b/src/pages/PickedOrderDetail.tsx
@@ -19,23 +19,48 @@ import {
 import { useEffect, useState } from 'react'
 import OrderDetail from '../interfaces/OrderDetail';
 import OrderInterface from '../interfaces/OrderInterface';
-import { getOrderById, getOrderDetails } from '../utils/Order';
+import { getOrderById, getOrderDetails, updateOrder } from '../utils/Order';
 import { useParams } from 'react-router-dom';
+import { getUser } from '../utils/LocalStorage';
 
 
 export default function PickedOrderDetail() {
+  const username = getUser();
   const { id } = useParams();
   const orderId = parseInt(id ? id : "0");
   const [order, setOrder] = useState<OrderInterface>();
   const [orderDetails, setOrderDetails] = useState<OrderDetail[]>([]);
+  const [pickupStatus, setPickupStatus] = useState(false);
   const [newDescription, setNewDescription] = useState("");
 
+  function changeDescription() {
+    if(!username) {
+      alert("Perlu log in");
+      return;
+    }
+    
+    updateOrder(orderId, username, order?.status ? order.status : "pickup", newDescription);
+    setOrder({...order, keterangan : newDescription})
+  }
+
+  function changeTransit() {
+    if(!username) {
+      alert("Perlu log in");
+      return;
+    }
+    
+    updateOrder(orderId, username, "transit", order?.keterangan ? order.keterangan : "");
+    setOrder({...order, status : "transit"})
+    setPickupStatus(false);
+  }
+
   useEffect(() => {
     const orderResponse = getOrderById(orderId);
     const detailResponse = getOrderDetails(orderId);
 
     orderResponse.then((response) => {
       setOrder(response.data);
+      setPickupStatus(response.data?.status === "pickup");
       console.log("order", response.data);
     });
 
@@ -43,6 +68,7 @@ export default function PickedOrderDetail() {
       setOrderDetails(response.data);
       console.log("detail", response.data);
     });
+
   }, []);
   
   return (
@@ -100,7 +126,14 @@ export default function PickedOrderDetail() {
               </Tbody>
             </Table>
           </TableContainer>
-          
+        <Box>
+          <Text fontSize={"lg"} fontWeight={"bold"}>
+            Status
+          </Text>
+          <Text>
+            {order?.status}
+          </Text>
+        </Box>
         <Stack spacing={4}>
           <Box>
             <Text fontSize={"lg"} fontWeight={"bold"}>
@@ -118,25 +151,32 @@ export default function PickedOrderDetail() {
               borderColor={"black"}
               />
           </FormControl>
-          {/* TODO : make button functionality */}
           <Button
-              bg={'blue.400'}
-              color={'white'}
-              _hover={{
-              bg: 'blue.500',
-              }}
-              type="submit">
-              Ubah Keterangan
+            bg={'blue.400'}
+            color={'white'}
+            _hover={{
+            bg: 'blue.500',
+            }}
+            onClick={changeDescription}
+            >
+            Ubah Keterangan
           </Button>
+          {pickupStatus
+          ? 
           <Button
-              bg={'blue.400'}
-              color={'white'}
-              _hover={{
-              bg: 'blue.500',
-              }}
-              >
-              Transit Pesanan
+            bg={'blue.400'}
+            color={'white'}
+            _hover={{
+            bg: 'blue.500',
+            }}
+            onClick={changeTransit}
+            >
+            Transit Pesanan
           </Button>
+          :
+          <>
+          </>}
+          {/* TODO : make button functionality */}
           <Button
             display={{ base: 'none', md: 'inline-flex' }}
             fontSize={'sm'}
diff --git a/src/utils/Order.ts b/src/utils/Order.ts
index 30f227f..17e235c 100644
--- a/src/utils/Order.ts
+++ b/src/utils/Order.ts
@@ -1,4 +1,4 @@
-import { fetchAvailableOrder, fetchOrderByCourier, fetchOrderById, fetchOrderDetails, pickOrderAPI } from "../api/Order";
+import { fetchAvailableOrder, fetchOrderByCourier, fetchOrderById, fetchOrderDetails, pickOrderAPI, updateOrderAPI } from "../api/Order";
 
 export async function getAvailableOrder() {
     const availableOrders = await fetchAvailableOrder();
@@ -23,4 +23,9 @@ export async function getOrderByCourier(courierId : number) {
 export async function pickOrder(orderId : number, username : string) {
     const response = await pickOrderAPI(orderId, username);
     return response;
-}
\ No newline at end of file
+}
+
+export async function updateOrder(orderId : number, username : string, status : string, description : string) {
+    const response = await updateOrderAPI(orderId, username, status, description);
+    return response;
+}
-- 
GitLab