Skip to content

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

add order menu in navbar; 

add order button on cart page;
parent fd257f5f
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 59 deletions
src/components/Navbar.js
View file @ d3d5cc44
...@@ -20,6 +20,8 @@ import { Favorite } from "@mui/icons-material"; ...@@ -20,6 +20,8 @@ import { Favorite } from "@mui/icons-material";
import { Logout, SupervisedUserCircle } from "@mui/icons-material"; import { Logout, SupervisedUserCircle } from "@mui/icons-material";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Cottage } from "@mui/icons-material"; import { Cottage } from "@mui/icons-material";
import { Store } from "@mui/icons-material";
import { ShoppingBag } from "@mui/icons-material";
const Search = styled("div")(({ theme }) => ({ const Search = styled("div")(({ theme }) => ({
position: "relative", position: "relative",
...@@ -127,7 +129,7 @@ function Navbar(props) { ...@@ -127,7 +129,7 @@ function Navbar(props) {
color="inherit" color="inherit"
> >
<Badge color="error"> <Badge color="error">
<Cottage /> <Store />
</Badge> </Badge>
</IconButton> </IconButton>
), ),
...@@ -162,6 +164,21 @@ function Navbar(props) { ...@@ -162,6 +164,21 @@ function Navbar(props) {
</IconButton> </IconButton>
), ),
}, },
{
label: "คำสั่งซื้อ",
link: "/order",
element: (
<IconButton
size="large"
aria-label="show 4 new mails"
color="inherit"
>
<Badge badgeContent={2} color="error">
<ShoppingBag />
</Badge>
</IconButton>
),
},
{ {
label: user.value.name, label: user.value.name,
link: "/profile", link: "/profile",
......
src/pages/cart.js
View file @ d3d5cc44
...@@ -16,6 +16,7 @@ import { Delete } from "@mui/icons-material"; ...@@ -16,6 +16,7 @@ import { Delete } from "@mui/icons-material";
import { ShoppingCart } from "@mui/icons-material"; import { ShoppingCart } from "@mui/icons-material";
import PopupAlert from "@/components/PopupAlert"; import PopupAlert from "@/components/PopupAlert";
import Head from "next/head"; import Head from "next/head";
import { ShoppingBag } from "@mui/icons-material";
export default function Cart() { export default function Cart() {
const user = useContext(UserContext); const user = useContext(UserContext);
...@@ -75,65 +76,76 @@ export default function Cart() { ...@@ -75,65 +76,76 @@ export default function Cart() {
/> />
<Paper sx={{ p: 1, overflowX: "scroll" }}> <Paper sx={{ p: 1, overflowX: "scroll" }}>
{cart.value.length > 0 ? ( {cart.value.length > 0 ? (
<Table> <Box>
<TableHead> <Table>
<TableRow> <TableHead>
{[ <TableRow>
"ลำดับ", {[
"รูปภาพ", "ลำดับ",
"ชื่อสินค้า", "รูปภาพ",
"รายละเอียด", "ชื่อสินค้า",
"ราคา", "รายละเอียด",
"นำออกจากรายการ", "ราคา",
].map((label, idx) => ( "นำออกจากรายการ",
<TableCell key={idx}>{label}</TableCell> ].map((label, idx) => (
))} <TableCell key={idx}>{label}</TableCell>
</TableRow> ))}
</TableHead> </TableRow>
<TableBody> </TableHead>
{CartProduct.map( <TableBody>
(pdt, idx) => {CartProduct.map(
pdt && ( (pdt, idx) =>
<TableRow key={idx}> pdt && (
<TableCell>{idx + 1}</TableCell> <TableRow key={idx}>
<TableCell> <TableCell>{idx + 1}</TableCell>
<img <TableCell>
width={100} <img
src={pdt.image?.length ? pdt.image : "/empty.jpg"} width={100}
alt="รูปสินค้า" src={pdt.image?.length ? pdt.image : "/empty.jpg"}
/> alt="รูปสินค้า"
</TableCell> />
<TableCell>{pdt.name}</TableCell> </TableCell>
<TableCell> <TableCell>{pdt.name}</TableCell>
<div className="max-h-10 overflow-scroll"> <TableCell>
{pdt.detail} <div className="max-h-10 overflow-scroll">
</div> {pdt.detail}
</TableCell> </div>
<TableCell> </TableCell>
{pdt.discount > 0 ? ( <TableCell>
<Box color={"orangered"}> {pdt.discount > 0 ? (
<del>${pdt.price}</del> $ <Box color={"orangered"}>
{pdt.price - pdt.price * (pdt.discount / 100)} <del>${pdt.price}</del> $
</Box> {pdt.price - pdt.price * (pdt.discount / 100)}
) : ( </Box>
<Box color="orangered">${pdt.price}</Box> ) : (
)} <Box color="orangered">${pdt.price}</Box>
</TableCell> )}
<TableCell> </TableCell>
<Button <TableCell>
color="error" <Button
onClick={() => removeFromCart(pdt.id)} color="error"
> onClick={() => removeFromCart(pdt.id)}
<Delete /> >
</Button> <Delete />
</TableCell> </Button>
</TableRow> </TableCell>
) </TableRow>
)} )
</TableBody> )}
</Table> </TableBody>
</Table>
<Box sx={{ textAlign: "right", p: 1 }}>
<Button size="large">
<ShoppingBag /> สั่งซื้อ
</Button>
</Box>
</Box>
) : ( ) : (
<div className="text-center">{user.value?.token ? "รายการว่างเปล่า": "คุณยังไม่ได้เข้าสู่ระบบ"}</div> <div className="text-center">
{user.value?.token
? "รายการว่างเปล่า"
: "คุณยังไม่ได้เข้าสู่ระบบ"}
</div>
)} )}
</Paper> </Paper>
</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