Skip to content

F
final-exam
Commit 5f1c16ca authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon
Browse files
Options

filter at order admin

parent 7b33dfbd
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 92 deletions
src/pages/admin/order.js
View file @ 5f1c16ca
...@@ -16,13 +16,17 @@ import { ...@@ -16,13 +16,17 @@ import {
FormControl, FormControl,
Select, Select,
MenuItem, MenuItem,
Button,
} from "@mui/material"; } from "@mui/material";
import { useRouter } from "next/router";
export default function Order() { export default function Order() {
const user = useContext(UserContext); const user = useContext(UserContext);
const router = useRouter();
const adminOrder = useContext(AdminOrderContext); const adminOrder = useContext(AdminOrderContext);
const [message, setMessage] = useState({ message: "", error: false }); const [message, setMessage] = useState({ message: "", error: false });
const [userAll, setUserAll] = useState([]); const [userAll, setUserAll] = useState([]);
const [payStatusFilter, setPayStatusFilter] = useState(0);
useEffect(() => { useEffect(() => {
axios axios
...@@ -70,99 +74,114 @@ export default function Order() { ...@@ -70,99 +74,114 @@ 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" }}>
{adminOrder.value?.length > 0 ? ( <Box sx={{ textAlign: "right", mb: 2 }}>
<Box> <Button
<Table> onClick={() => setPayStatusFilter(!payStatusFilter)}
<TableHead> variant={payStatusFilter ? "contained" : "text"}
<TableRow> >
{[ ยังไม่ชำระเงิน
"id", </Button>
"วันที่", </Box>
"ผู้ซื้อ", <Paper sx={{ p: 1, overflowX: "scroll" }}>
"ราคาทั้งหมด", {adminOrder.value?.length > 0 ? (
"ค่าส่ง", <Box>
"ชำระเงิน", <Table>
"ที่อยู่", <TableHead>
"การจัดส่ง", <TableRow>
].map((label, idx) => ( {[
<TableCell key={idx}>{label}</TableCell> "id",
))} "วันที่",
</TableRow> "ผู้ซื้อ",
</TableHead> "ราคาทั้งหมด",
<TableBody> "ค่าส่ง",
{adminOrder.value.map( "ชำระเงิน",
(order, idx) => "ที่อยู่",
order && ( "การจัดส่ง",
<TableRow key={idx}> ].map((label, idx) => (
<TableCell>{order.id}</TableCell> <TableCell key={idx}>{label}</TableCell>
<TableCell> ))}
<Link </TableRow>
title="คลิกเพื่อดูรายละเอียด" </TableHead>
href={"/admin/order/" + order.id} <TableBody>
> {adminOrder.value.map(
{new Date(order.date).toLocaleString()} (order, idx) =>
</Link> (!payStatusFilter || order.pay_status === 0) &&
</TableCell> (!router.query?.q ||
<TableCell> order.id === Number(router.query.q)) &&
{userAll.length order && (
? userAll?.filter( <TableRow key={idx}>
(usr) => usr.id === order.user_id <TableCell>{order.id}</TableCell>
)[0].name ?? "undifined" <TableCell>
: "undifined"} <Link
</TableCell> title="คลิกเพื่อดูรายละเอียด"
<TableCell> href={"/admin/order/" + order.id}
<Box color="orangered">
${Number(order.total_price).toLocaleString()}
</Box>
</TableCell>
<TableCell>
<Box color="black">${order.shipping_price}</Box>
</TableCell>
<TableCell>
<Box color={order.pay_status ? "green" : "red"}>
{order.pay_status
? "ชำระเงินแล้ว"
: "ยังไม่ชำระเงิน"}
</Box>
</TableCell>
<TableCell>{order.address}</TableCell>
<TableCell>
<FormControl variant="standard">
<Select
value={Number(order.send_status)}
onChange={(e) => {
onSendingChange(
Number(order.id),
Number(e.target.value)
);
}}
> >
<MenuItem value={0}> {new Date(order.date).toLocaleString()}
<Box color="gray">ยังไม่จัดส่ง</Box> </Link>
</MenuItem> </TableCell>
<MenuItem value={1}> <TableCell>
<Box color="orangered">กำลังจัดส่ง</Box> {userAll.length
</MenuItem> ? userAll?.filter(
<MenuItem value={2}> (usr) => usr.id === order.user_id
<Box color="green">จัดส่งแล้ว</Box> )[0].name ?? "undifined"
</MenuItem> : "undifined"}
</Select> </TableCell>
</FormControl> <TableCell>
</TableCell> <Box color="orangered">
</TableRow> ${Number(order.total_price).toLocaleString()}
) </Box>
)} </TableCell>
</TableBody>
</Table> <TableCell>
</Box> <Box color="black">${order.shipping_price}</Box>
) : ( </TableCell>
<div className="text-center"> <TableCell>
{user.value?.token ? "รายการว่างเปล่า" : "คุณยังไม่ได้เข้าสู่ระบบ"} <Box color={order.pay_status ? "green" : "red"}>
</div> {order.pay_status
)} ? "ชำระเงินแล้ว"
</Paper> : "ยังไม่ชำระเงิน"}
</Box>
</TableCell>
<TableCell>{order.address}</TableCell>
<TableCell>
<FormControl variant="standard">
<Select
value={Number(order.send_status)}
onChange={(e) => {
onSendingChange(
Number(order.id),
Number(e.target.value)
);
}}
>
<MenuItem value={0}>
<Box color="gray">ยังไม่จัดส่ง</Box>
</MenuItem>
<MenuItem value={1}>
<Box color="orangered">กำลังจัดส่ง</Box>
</MenuItem>
<MenuItem value={2}>
<Box color="green">จัดส่งแล้ว</Box>
</MenuItem>
</Select>
</FormControl>
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Box>
) : (
<div className="text-center">
{user.value?.token
? "รายการว่างเปล่า"
: "คุณยังไม่ได้เข้าสู่ระบบ"}
</div>
)}
</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