Skip to content

F
final-exam
Commit 735c3fd7 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon
Browse files
Options

in order page can view only not make payment yet

parent 4065c60f
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 82 deletions
src/pages/order.js
View file @ 735c3fd7
...@@ -2,11 +2,14 @@ import { ...@@ -2,11 +2,14 @@ import {
Box, Box,
Button, Button,
Paper, Paper,
Stack,
Switch,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow, TableRow,
Typography,
} from "@mui/material"; } from "@mui/material";
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import { CartContext, OrderContext, UserContext } from "./_app"; import { CartContext, OrderContext, UserContext } from "./_app";
...@@ -23,6 +26,7 @@ export default function Order() { ...@@ -23,6 +26,7 @@ export default function Order() {
const [message, setMessage] = useState({ error: false, message: "" }); const [message, setMessage] = useState({ error: false, message: "" });
const order = useContext(OrderContext); const order = useContext(OrderContext);
const [payment, setPayment] = useState({ open: false, id: -1, price: -1 }); const [payment, setPayment] = useState({ open: false, id: -1, price: -1 });
const [payFilter, setPayFilter] = useState(false);
const fetchProduct = async () => { const fetchProduct = async () => {
try { try {
...@@ -57,91 +61,113 @@ export default function Order() { ...@@ -57,91 +61,113 @@ export default function Order() {
isError={message.error} isError={message.error}
message={message.message} message={message.message}
/> />
<Paper sx={{ p: 1, overflowX: "scroll" }}> <Box sx={{ maxWidth: 1200, mx: "auto" }}>
{order.value?.length > 0 ? ( <Box>
<Box> <Stack
<Table> direction={"row"}
<TableHead> alignItems={"center"}
<TableRow> justifyContent={"end"}
{[ >
"id", <Typography>ทั้งหมด</Typography>
"ราคาทั้งหมด", <Switch
"รายละเอียด", checked={payFilter}
"จำนวนสินค้า", onChange={(e) => {
"ค่าส่ง", console.log(e.target.checked);
"ชำระเงิน", setPayFilter(e.target.checked);
"การจัดส่ง", }}
].map((label, idx) => ( />
<TableCell key={idx}>{label}</TableCell> <Typography>ยังไม่ชำระเงิน</Typography>
))} </Stack>
</TableRow> </Box>
</TableHead> <Paper sx={{ p: 1, overflowX: "scroll" }}>
<TableBody> {order.value?.length > 0 ? (
{order.value.map( <Box>
(order, idx) => <Table>
order && ( <TableHead>
<TableRow key={idx}> <TableRow>
<TableCell>{order.id}</TableCell> {[
<TableCell> "id",
<Box color="orangered"> "ราคาทั้งหมด",
${Number(order.total_price).toLocaleString()} "รายละเอียด",
</Box> "จำนวนสินค้า",
</TableCell> "ค่าส่ง",
<TableCell> "ชำระเงิน",
<Link href={"/order/" + order.id}> "การจัดส่ง",
<Button>รายละเอียด</Button> ].map((label, idx) => (
</Link> <TableCell key={idx}>{label}</TableCell>
</TableCell> ))}
<TableCell>{order.product_count}</TableCell> </TableRow>
<TableCell>{order.shipping_price}</TableCell> </TableHead>
<TableCell> <TableBody>
<Box color={order.pay_status ? "green" : "red"}> {order.value.map(
{order.pay_status ? ( (order, idx) =>
"ชำระเงินแล้ว" order &&
) : ( (!payFilter || order.pay_status === 0) && (
<Button <TableRow key={idx}>
onClick={() => <TableCell>{order.id}</TableCell>
setPayment({ <TableCell>
open: true, <Box color="orangered">
id: order.id, ${Number(order.total_price).toLocaleString()}
price: order.total_price,
})
}
>
ดำเนินการชำระเงิน
</Button>
)}
</Box>
</TableCell>
<TableCell>
{order.send_status == 0 ? (
<Box color="gray">
{order.send_status ? "ส่งแล้ว" : "ยังไม่จัดส่ง"}
</Box> </Box>
) : ( </TableCell>
<> <TableCell>
{order.send_status == 1 ? ( <Link href={"/order/" + order.id}>
<Box color="orangered">กำลังจัดส่ง</Box> <Button>รายละเอียด</Button>
</Link>
</TableCell>
<TableCell>{order.product_count}</TableCell>
<TableCell>{order.shipping_price}</TableCell>
<TableCell>
<Box color={order.pay_status ? "green" : "red"}>
{order.pay_status ? (
"ชำระเงินแล้ว"
) : ( ) : (
<Box color="green">จัดส่งแล้ว</Box> <Button
onClick={() =>
setPayment({
open: true,
id: order.id,
price: order.total_price,
})
}
>
ดำเนินการชำระเงิน
</Button>
)} )}
</> </Box>
)} </TableCell>
</TableCell> <TableCell>
</TableRow> {order.send_status == 0 ? (
) <Box color="gray">
)} {order.send_status
</TableBody> ? "ส่งแล้ว"
</Table> : "ยังไม่จัดส่ง"}
</Box> </Box>
) : ( ) : (
<div className="text-center"> <>
{user.value?.token {order.send_status == 1 ? (
? "รายการว่างเปล่า" <Box color="orangered">กำลังจัดส่ง</Box>
: "คุณยังไม่ได้เข้าสู่ระบบ"} ) : (
</div> <Box color="green">จัดส่งแล้ว</Box>
)} )}
</Paper> </>
)}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Box>
) : (
<div className="text-center">
{user.value?.token
? "รายการว่างเปล่า"
: "คุณยังไม่ได้เข้าสู่ระบบ"}
</div>
)}
</Paper>
</Box>
</Box> </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