From 8686bce1128cee8ea23664da5f5bedc7157dba54 Mon Sep 17 00:00:00 2001
From: oncarrozaqy <oncarrozaqyy@gmail.com>
Date: Sun, 26 Nov 2023 11:25:50 +0700
Subject: [PATCH] fix(UC08): change date format, fix filter

---
 frontend/package-lock.json                   |  9 +++++++++
 frontend/package.json                        |  3 ++-
 frontend/src/components/OrderDetailsCard.tsx |  6 ++++--
 frontend/src/components/TableOrder.tsx       | 14 ++++++++++----
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8c276e24..020f94c1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
                 "dotenv": "^16.3.1",
                 "flowbite": "^2.1.1",
                 "flowbite-react": "^0.6.4",
+                "moment": "^2.29.4",
                 "prettier": "^3.1.0",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
@@ -3086,6 +3087,14 @@
                 "node": ">=10"
             }
         },
+        "node_modules/moment": {
+            "version": "2.29.4",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+            "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 80bef534..b816a8e8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,10 +11,11 @@
     },
     "dependencies": {
         "@supabase/supabase-js": "^2.38.5",
-        "dotenv": "^16.3.1",
         "axios": "^1.6.2",
+        "dotenv": "^16.3.1",
         "flowbite": "^2.1.1",
         "flowbite-react": "^0.6.4",
+        "moment": "^2.29.4",
         "prettier": "^3.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/frontend/src/components/OrderDetailsCard.tsx b/frontend/src/components/OrderDetailsCard.tsx
index 4dd441ff..60c1dffc 100644
--- a/frontend/src/components/OrderDetailsCard.tsx
+++ b/frontend/src/components/OrderDetailsCard.tsx
@@ -1,3 +1,4 @@
+import moment from "moment";
 interface OrderDetailsCardProps {
     orderid: number,
     code: number,
@@ -7,8 +8,9 @@ interface OrderDetailsCardProps {
     paymentstatus: string
 }
 
-export default function OrderDetailsCard({data}: {data: OrderDetailsCardProps[]}) {
+export default function OrderDetailsCard({ data }: { data: OrderDetailsCardProps[] }) {
     const orderdetails = data.map(({ orderid, code, tableid, time, orderstatus, paymentstatus }) => {
+        const date = moment(time).format("DD/MM/YYYY hh:mm:ss")
         return (
             <div className="font-nunito flex bg-white justify-start py-10 md:flex-row mx-16">
                 <div className="flex flex-col w-40 leading-normal">
@@ -31,7 +33,7 @@ export default function OrderDetailsCard({data}: {data: OrderDetailsCardProps[]}
                     <p className="mb-3 font-normal text-lg text-gray-900 w-11/12">{orderid}</p>
                     <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{code}</p>
                     <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{tableid}</p>
-                    <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{`${time}`}</p>
+                    <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{date}</p>
                     <p className="my-3 font-normal text-lg text-gray-900 w-11/12">{orderstatus}</p>
                     <p className="mt-3 font-normal text-lg text-gray-900 w-11/12">{paymentstatus}</p>
                 </div>
diff --git a/frontend/src/components/TableOrder.tsx b/frontend/src/components/TableOrder.tsx
index 93ffc3d0..154c218b 100644
--- a/frontend/src/components/TableOrder.tsx
+++ b/frontend/src/components/TableOrder.tsx
@@ -1,5 +1,5 @@
 import { MouseEventHandler, useCallback, useState } from "react";
-// import data from "../dataOrder.json"
+import moment from "moment";
 interface Props {
     orderId: number;
     paymentId: number;
@@ -97,7 +97,7 @@ function TableOrder({ data }: { data: Props[] }) {
             value.toString().toLowerCase().includes(searchTerm.toLowerCase()),
         ),
     );
-
+    console.log(filteredRecords);
     //Const and func for pagination
     const [currentPage, setCurrentPage] = useState(1);
     const recordsPerPage = 11;
@@ -142,7 +142,7 @@ function TableOrder({ data }: { data: Props[] }) {
 
     return (
         <div className="mx-12">
-            <div className="my-4">
+            <div className="w-3/4 my-4">
                 <form>
                     <label
                         htmlFor="default-search"
@@ -184,6 +184,11 @@ function TableOrder({ data }: { data: Props[] }) {
                             }}
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
+                            onKeyPress={(e) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                }
+                            }}
                         />
                     </div>
                 </form>
@@ -271,6 +276,7 @@ function TableOrder({ data }: { data: Props[] }) {
                         {filteredRecords
                             .slice(firstIndex, lastIndex)
                             .map((record, index) => {
+                                const date = moment(record.time).format("DD/MM/YYYY hh:mm:ss");
                                 return (
                                     <tr className="odd:bg-white even:bg-gray-50 border-b" key={record.orderId}>
                                         <td className="px-6 py-4">
@@ -289,7 +295,7 @@ function TableOrder({ data }: { data: Props[] }) {
                                             {record.tableId}
                                         </td>
                                         <td className="px-6 py-4 whitespace-normal">
-                                            {record.time}
+                                            {date}
                                         </td>
                                         <td className="px-6 py-4 whitespace-normal">
                                             {record.orderStatus}
-- 
GitLab