Commit 7b33dfbd authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

change switch to button

parent 44bf1622
...@@ -3,7 +3,6 @@ import { ...@@ -3,7 +3,6 @@ import {
Button, Button,
Paper, Paper,
Stack, Stack,
Switch,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
...@@ -12,7 +11,7 @@ import { ...@@ -12,7 +11,7 @@ import {
Typography, 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 { OrderContext, UserContext } from "./_app";
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";
...@@ -22,13 +21,12 @@ import { useRouter } from "next/router"; ...@@ -22,13 +21,12 @@ import { useRouter } from "next/router";
export default function Order() { export default function Order() {
const user = useContext(UserContext); const user = useContext(UserContext);
const cart = useContext(CartContext);
const [products, setProducts] = useState([]); const [products, setProducts] = useState([]);
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 [payFilter, setPayFilter] = useState(false);
const router = useRouter() const router = useRouter();
const fetchProduct = async () => { const fetchProduct = async () => {
try { try {
...@@ -64,21 +62,18 @@ export default function Order() { ...@@ -64,21 +62,18 @@ export default function Order() {
message={message.message} message={message.message}
/> />
<Box sx={{ maxWidth: 1200, mx: "auto" }}> <Box sx={{ maxWidth: 1200, mx: "auto" }}>
<Box> <Box sx={{pb:2}}>
<Stack <Stack
direction={"row"} direction={"row"}
alignItems={"center"} alignItems={"center"}
justifyContent={"end"} justifyContent={"end"}
> >
<Typography>ทั้งหมด</Typography> <Button
<Switch onClick={() => setPayFilter(!payFilter)}
checked={payFilter} variant={payFilter ? "contained" : "text"}
onChange={(e) => { >
console.log(e.target.checked); ดูรายกายที่ยังไม่ชำระเงิน
setPayFilter(e.target.checked); </Button>
}}
/>
<Typography>ยังไม่ชำระเงิน</Typography>
</Stack> </Stack>
</Box> </Box>
<Paper sx={{ p: 1, overflowX: "scroll" }}> <Paper sx={{ p: 1, overflowX: "scroll" }}>
...@@ -103,8 +98,9 @@ export default function Order() { ...@@ -103,8 +98,9 @@ export default function Order() {
<TableBody> <TableBody>
{order.value.map( {order.value.map(
(order, idx) => (order, idx) =>
order && order &&
(!router.query?.q || Number(router.query.q) === order.id ) && (!router.query?.q ||
Number(router.query.q) === order.id) &&
(!payFilter || order.pay_status === 0) && ( (!payFilter || order.pay_status === 0) && (
<TableRow key={idx}> <TableRow key={idx}>
<TableCell>{order.id}</TableCell> <TableCell>{order.id}</TableCell>
...@@ -119,7 +115,7 @@ export default function Order() { ...@@ -119,7 +115,7 @@ export default function Order() {
</Link> </Link>
</TableCell> </TableCell>
<TableCell>{order.product_count}</TableCell> <TableCell>{order.product_count}</TableCell>
<TableCell>{order.shipping_price}</TableCell> <TableCell>${order.shipping_price}</TableCell>
<TableCell> <TableCell>
<Box color={order.pay_status ? "green" : "red"}> <Box color={order.pay_status ? "green" : "red"}>
{order.pay_status ? ( {order.pay_status ? (
......
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