From de0138f540626f1176ace5b51d74032226c8f0b4 Mon Sep 17 00:00:00 2001
From: oncarrozaqy <oncarrozaqyy@gmail.com>
Date: Sun, 26 Nov 2023 23:50:47 +0700
Subject: [PATCH] fix: fix bug view payment (tabel pembayaran)
---
.../src/services/api/joinedOrderPayment.ts | 71 ++++++-------------
frontend/src/components/TablePayment.tsx | 23 ++++--
2 files changed, 36 insertions(+), 58 deletions(-)
diff --git a/backend/src/services/api/joinedOrderPayment.ts b/backend/src/services/api/joinedOrderPayment.ts
index 03ef89a..6db3138 100644
--- a/backend/src/services/api/joinedOrderPayment.ts
+++ b/backend/src/services/api/joinedOrderPayment.ts
@@ -1,64 +1,33 @@
import Axios from "axios";
import { useEffect, useState } from "react";
-interface Props {
- orderId: number;
- paymentId: number;
- tableId: number;
- time: number;
- orderStatus: string;
- paymentStatus: string;
- totalPrice: number;
-}
-
export default function joinedOrderPayment() {
- const [joinedData, setJoinedData] = useState<Props[]>([]);
+ const [joinedData, setJoinedData] = useState([]);
const getData = async () => {
- try {
- const orderResponse = await Axios.get("http://localhost:8000/orders");
- const paymentResponse = await Axios.get("http://localhost:8000/payments");
-
- const orderData = orderResponse.data.data;
- const paymentData = paymentResponse.data.data;
-
- // Perform the join based on the specified conditions
- const result: Props[] = await Promise.all(orderData.map(async (order: { id: number; id_table: number; time: Date; status: string; id_tenant: string }) => {
- const matchingPayment = paymentData.find((payment: { id_order: number; }) => payment.id_order === order.id);
-
- // Fetch total price from products and order_products for each order
- const orderProductResponse = await Axios.get(`http://localhost:8000/orderproduct`);
- const orderProductData = orderProductResponse.data.data;
+ const orderResponse = await Axios.get("http://localhost:8000/orders");
+ const paymentResponse = await Axios.get("http://localhost:8000/payments");
- const productPrices = orderProductData.map(async (orderProduct: { id_product: number; num: number }) => {
- const productResponse = await Axios.get(`http://localhost:8000/products/${orderProduct.id_product}`);
- const productData = productResponse.data;
+ const orderData = orderResponse.data.data;
+ const paymentData = paymentResponse.data.data;
- // Return the calculated price for this product
- return productData.price * orderProduct.num;
- });
+ // Perform the join based on the specified conditions
+ const result = orderData.map((order: { id: number; id_table: number; time: Date; status: string; id_tenant: string }) => {
+ const matchingPayment = paymentData.find((payment: { id_order: number; }) => payment.id_order === order.id);
- // Use Promise.all to wait for all productPrices promises to resolve
- const totalPriceArray = await Promise.all(productPrices);
+ return {
+ orderId: order.id,
+ paymentId: matchingPayment ? matchingPayment.id : null,
+ tableId: order.id_table,
+ time: order.time,
+ orderStatus: order.status,
+ paymentStatus: matchingPayment ? matchingPayment.status : null,
+ tenantId: order.id_tenant,
+ };
+ });
- // Calculate the sum of all prices using .reduce
- const totalPrice = totalPriceArray.reduce((acc, price) => acc + price, 0);
- return {
- orderId: order.id,
- paymentId: matchingPayment ? matchingPayment.id : null,
- tableId: order.id_table,
- time: order.time,
- orderStatus: order.status,
- paymentStatus: matchingPayment ? matchingPayment.status : null,
- tenantId: order.id_tenant,
- totalPrice: totalPrice,
- };
- }));
+ setJoinedData(result);
- setJoinedData(result);
- } catch (error) {
- console.error('Error fetching joined order payment data:', error);
- }
};
useEffect(() => {
@@ -68,4 +37,4 @@ export default function joinedOrderPayment() {
console.log(joinedData);
return joinedData;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/TablePayment.tsx b/frontend/src/components/TablePayment.tsx
index 2296022..1a73dfd 100644
--- a/frontend/src/components/TablePayment.tsx
+++ b/frontend/src/components/TablePayment.tsx
@@ -7,7 +7,6 @@ interface Props {
time: number;
orderStatus: string;
paymentStatus: string;
- totalPrice: number;
}
function TablePayment({ data }: { data: Props[] }) {
@@ -237,11 +236,11 @@ function TablePayment({ data }: { data: Props[] }) {
</th>
<th scope="col" className="px-6 py-3">
<div className="flex items-center font-semibold">
- Payment Status
+ Order Status
<SortButton
- columnKey={"paymentStatus"}
+ columnKey={"orderStatus"}
onClick={() =>
- changeSort("paymentStatus")
+ changeSort("orderStatus")
}
{...{
sortOrder,
@@ -252,7 +251,17 @@ function TablePayment({ data }: { data: Props[] }) {
</th>
<th scope="col" className="px-6 py-3">
<div className="flex items-center font-semibold">
- TotalPrice
+ Payment Status
+ <SortButton
+ columnKey={"paymentStatus"}
+ onClick={() =>
+ changeSort("paymentStatus")
+ }
+ {...{
+ sortOrder,
+ sortKey,
+ }}
+ />
</div>
</th>
<th
@@ -289,10 +298,10 @@ function TablePayment({ data }: { data: Props[] }) {
{date}
</td>
<td className="px-6 py-4 whitespace-normal">
- {record.paymentStatus}
+ {record.orderStatus}
</td>
<td className="px-6 py-4 whitespace-normal">
- {record.totalPrice}
+ {record.paymentStatus}
</td>
<td className="px-6 py-4">
<a
--
GitLab