show order detail

app/controllers/OrderDetailController.js

+import { Request, Response } from "express";
+import db from "../models/prismaClient";
+
+const OrderDetailController = {
+  /**
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async index(req, res) {
+    try {
+      const { id } = req.query;
+      const orderDetail = await db.order_detail.findMany({
+        where: { user_id: Number(req.user.id), order_id: Number(id) },
+      });
+      await db.$disconnect();
+      res.json(orderDetail);
+    } catch (err) {
+      res.status(403).json({ status: 100, message: "error on server" });
+    }
+  },
+};
+
+export default OrderDetailController;

app/routes/user.js

@@ -2,6 +2,7 @@ import express from "express";
 import WishlistController from "../controllers/WishlistController";
 import CartController from "../controllers/CartController";
 import OrderController from "../controllers/OrderController";
+import OrderDetailController from "../controllers/OrderDetailController";
 const UserRouter = express.Router();
 
 UserRouter.get("/wishlist", WishlistController.index);
@@ -15,4 +16,6 @@ UserRouter.delete("/cart", CartController.delete);
 UserRouter.get("/order", OrderController.index);
 UserRouter.post("/order", OrderController.create);
 
+UserRouter.get("/order/detail", OrderDetailController.index);
+
 export default UserRouter;

src/pages/order.js

@@ -14,6 +14,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import PopupAlert from "@/components/PopupAlert";
 import Head from "next/head";
+import Link from "next/link";
 
 export default function Order() {
   const user = useContext(UserContext);
@@ -75,6 +76,7 @@ export default function Order() {
                     {[
                       "id",
                       "ราคาทั้งหมด",
+                      "รายละเอียด",
                       "จำนวนสินค้า",
                       "ค่าส่ง",
                       "ชำระเงิน",
@@ -95,6 +97,11 @@ export default function Order() {
                               ${Number(order.total_price).toLocaleString()}
                             </Box>
                           </TableCell>
+                          <TableCell>
+                            <Link href={"/order/" + order.id}>
+                              <Button>รายละเอียด</Button>
+                            </Link>
+                          </TableCell>
                           <TableCell>{order.product_count}</TableCell>
                           <TableCell>{order.shipping_price}</TableCell>
                           <TableCell>

src/pages/order/[id].js

+import axios from "axios";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { UserContext } from "../_app";
+import Head from "next/head";
+import {
+  Box,
+  Button,
+  Paper,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from "@mui/material";
+import Link from "next/link";
+import { ArrowBackIos } from "@mui/icons-material";
 
 export default function OrderDetail() {
+  const user = useContext(UserContext);
   const router = useRouter();
-  console.log(router.query);
-  return <div>OrderDetail</div>;
+  const [orderDetailList, setOrderDetailList] = useState([]);
+  const [orderDetailProduct, setOrderDetailProduct] = useState([]);
+  const [products, setProducts] = useState([]);
+
+  const fetchProduct = async () => {
+    let response = await axios.get("/api/product");
+    setProducts(response.data);
+  };
+
+  const fetchOrderDetail = async () => {
+    if (!user.value?.token) return;
+    try {
+      let response = await axios.get("/api/u/order/detail?id=1", {
+        headers: { token: user.value.token },
+      });
+      setOrderDetailList(response.data);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchProduct();
+  }, []);
+
+  useEffect(() => {
+    fetchOrderDetail();
+    setOrderDetailProduct(
+      orderDetailList.map(
+        (ordd) =>
+          products.filter((product) => product.id === ordd.product_id)[0]
+      )
+    );
+    console.log(orderDetailProduct);
+  }, [user]);
+
+  return (
+    <>
+      <Head>
+        <title>รายละเอียดคำสั่งซื้อ | OpenShop</title>
+      </Head>
+      {orderDetailList.length ? (
+        <Box>
+          <Box sx={{ textAlign: "right", p: 1 }}>
+            <Link href="/order">
+              <Button color="error">
+                <ArrowBackIos /> ย้อนกลับ
+              </Button>
+            </Link>
+          </Box>
+          <Paper sx={{ p: 1 }}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  {["ลำดับ", "รูปภาพ", "ชื่อสินค้า", "รายละเอียด", "ราคา"].map(
+                    (label, idx) => (
+                      <TableCell key={idx}>{label}</TableCell>
+                    )
+                  )}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {orderDetailList.map((orderd, idx) => {
+                  let pdt = products.filter(
+                    (product) => product.id === orderd.product_id
+                  )[0];
+                  return (
+                    pdt && (
+                      <TableRow key={idx}>
+                        <TableCell>{idx + 1}</TableCell>
+                        <TableCell>
+                          <img
+                            width={100}
+                            src={pdt.image?.length ? pdt.image : "/empty.jpg"}
+                            alt="รูปสินค้า"
+                          />
+                        </TableCell>
+                        <TableCell>{pdt.name}</TableCell>
+                        <TableCell>
+                          <div className="max-h-10  overflow-scroll">
+                            {pdt.detail}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Box color="orangered">${orderd.product_price}</Box>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </Paper>
+        </Box>
+      ) : (
+        <Box>
+          <Paper sx={{ p: 1 }}>
+            <Box sx={{ textAlign: "center" }}>ไม่พบรายการ</Box>
+          </Paper>
+        </Box>
+      )}
+    </>
+  );
 }