Skip to content

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

fix: admin navbar to search

parent f147ee7d
Show whitespace changes
Inline Side-by-side
Showing with 144 additions and 8 deletions
src/components/AdminNavbar.js
View file @ 57d3fdb2
...@@ -65,7 +65,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ ...@@ -65,7 +65,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
function AdminNavbar(props) { function AdminNavbar(props) {
const user = useContext(UserContext); const user = useContext(UserContext);
const adminOrder = useContext(AdminOrderContext) const adminOrder = useContext(AdminOrderContext);
const router = useRouter(); const router = useRouter();
const [search, setSearch] = React.useState(router.query?.q ?? ""); const [search, setSearch] = React.useState(router.query?.q ?? "");
...@@ -74,11 +74,16 @@ function AdminNavbar(props) { ...@@ -74,11 +74,16 @@ function AdminNavbar(props) {
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null); const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
const [mobileOpen, setMobileOpen] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false);
function onUpdateSearch(value) {
router.push({
pathname: location.pathname,
query: { ...router.query, q: value },
});
}
React.useEffect(() => { React.useEffect(() => {
if (search.length) setSearch(router.query?.q ?? "");
router.push({ pathname: router.pathname, query: { q: search } }); }, [router]);
else router.push({ pathname: router.pathname });
}, [search]);
const handleDrawerToggle = () => { const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen); setMobileOpen(!mobileOpen);
...@@ -146,7 +151,13 @@ function AdminNavbar(props) { ...@@ -146,7 +151,13 @@ function AdminNavbar(props) {
link: "/admin/order", link: "/admin/order",
element: ( element: (
<IconButton size="large" aria-label="show 4 new mails" color="inherit"> <IconButton size="large" aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={[...adminOrder.value?.filter((order) => order.send_status === 0)].length} color="error"> <Badge
badgeContent={
[...adminOrder.value?.filter((order) => order.send_status === 0)]
.length
}
color="error"
>
<ProductionQuantityLimits /> <ProductionQuantityLimits />
</Badge> </Badge>
</IconButton> </IconButton>
...@@ -248,7 +259,7 @@ function AdminNavbar(props) { ...@@ -248,7 +259,7 @@ function AdminNavbar(props) {
placeholder="Search…" placeholder="Search…"
inputProps={{ "aria-label": "search" }} inputProps={{ "aria-label": "search" }}
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => onUpdateSearch(e.target.value)}
/> />
</Search> </Search>
<Box sx={{ flexGrow: 1 }} /> <Box sx={{ flexGrow: 1 }} />
......
src/pages/admin/order.js
View file @ 57d3fdb2
...@@ -92,7 +92,7 @@ export default function Order() { ...@@ -92,7 +92,7 @@ export default function Order() {
</Box> </Box>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Link href={"/order/" + order.id}> <Link href={"/admin/order/" + order.id}>
<Button>รายละเอียด</Button> <Button>รายละเอียด</Button>
</Link> </Link>
</TableCell> </TableCell>
......
src/pages/admin/order/[id].js 0 → 100644
View file @ 57d3fdb2
import axios from "axios";
import { useRouter } from "next/router";
import React, { useContext, useEffect, useState } from "react";
import { UserContext } from "@/pages/_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 AdminOrderDetail() {
const user = useContext(UserContext);
const router = useRouter();
const [orderDetailList, setOrderDetailList] = useState([]);
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=" + router.query.id, {
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