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