Commit 9069a3db authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

show order detail

parent 542188c7
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;
...@@ -2,6 +2,7 @@ import express from "express"; ...@@ -2,6 +2,7 @@ import express from "express";
import WishlistController from "../controllers/WishlistController"; import WishlistController from "../controllers/WishlistController";
import CartController from "../controllers/CartController"; import CartController from "../controllers/CartController";
import OrderController from "../controllers/OrderController"; import OrderController from "../controllers/OrderController";
import OrderDetailController from "../controllers/OrderDetailController";
const UserRouter = express.Router(); const UserRouter = express.Router();
UserRouter.get("/wishlist", WishlistController.index); UserRouter.get("/wishlist", WishlistController.index);
...@@ -15,4 +16,6 @@ UserRouter.delete("/cart", CartController.delete); ...@@ -15,4 +16,6 @@ UserRouter.delete("/cart", CartController.delete);
UserRouter.get("/order", OrderController.index); UserRouter.get("/order", OrderController.index);
UserRouter.post("/order", OrderController.create); UserRouter.post("/order", OrderController.create);
UserRouter.get("/order/detail", OrderDetailController.index);
export default UserRouter; export default UserRouter;
...@@ -14,6 +14,7 @@ import { useRouter } from "next/router"; ...@@ -14,6 +14,7 @@ import { useRouter } from "next/router";
import axios from "axios"; import axios from "axios";
import PopupAlert from "@/components/PopupAlert"; import PopupAlert from "@/components/PopupAlert";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link";
export default function Order() { export default function Order() {
const user = useContext(UserContext); const user = useContext(UserContext);
...@@ -75,6 +76,7 @@ export default function Order() { ...@@ -75,6 +76,7 @@ export default function Order() {
{[ {[
"id", "id",
"ราคาทั้งหมด", "ราคาทั้งหมด",
"รายละเอียด",
"จำนวนสินค้า", "จำนวนสินค้า",
"ค่าส่ง", "ค่าส่ง",
"ชำระเงิน", "ชำระเงิน",
...@@ -95,6 +97,11 @@ export default function Order() { ...@@ -95,6 +97,11 @@ export default function Order() {
${Number(order.total_price).toLocaleString()} ${Number(order.total_price).toLocaleString()}
</Box> </Box>
</TableCell> </TableCell>
<TableCell>
<Link href={"/order/" + order.id}>
<Button>รายละเอียด</Button>
</Link>
</TableCell>
<TableCell>{order.product_count}</TableCell> <TableCell>{order.product_count}</TableCell>
<TableCell>{order.shipping_price}</TableCell> <TableCell>{order.shipping_price}</TableCell>
<TableCell> <TableCell>
......
import axios from "axios";
import { useRouter } from "next/router"; 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() { export default function OrderDetail() {
const user = useContext(UserContext);
const router = useRouter(); const router = useRouter();
console.log(router.query); const [orderDetailList, setOrderDetailList] = useState([]);
return <div>OrderDetail</div>; 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>
)}
</>
);
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment