Commit 3ee18201 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

show order on admin side;

show order count on admin navbar;
parent f17ca80f
import { Request, Response } from "express";
import db from "../models/prismaClient";
const AdminOrderController = {
/**
*
* @param {Request} req
* @param {Response} res
*/
async index(req, res) {
try {
let order = await db.order.findMany({ orderBy: { id: "desc" } });
res.json(order);
} catch (err) {
res.status(403).json({ status: 403, message: "error something" });
}
},
};
export default AdminOrderController;
...@@ -2,6 +2,7 @@ import express from "express"; ...@@ -2,6 +2,7 @@ import express from "express";
import AdminUserController from "../controllers/AdminUserController"; import AdminUserController from "../controllers/AdminUserController";
import AdminProductController from "../controllers/AdminProductController"; import AdminProductController from "../controllers/AdminProductController";
import CategoryController from "../controllers/CategoryController"; import CategoryController from "../controllers/CategoryController";
import AdminOrderController from "../controllers/AdminOrderController";
const adminRouter = express.Router(); const adminRouter = express.Router();
adminRouter.get("/user", AdminUserController.index); adminRouter.get("/user", AdminUserController.index);
...@@ -16,4 +17,6 @@ adminRouter.post("/category", CategoryController.create); ...@@ -16,4 +17,6 @@ adminRouter.post("/category", CategoryController.create);
adminRouter.put("/category", CategoryController.update); adminRouter.put("/category", CategoryController.update);
adminRouter.delete("/category", CategoryController.delete); adminRouter.delete("/category", CategoryController.delete);
adminRouter.get("/order", AdminOrderController.index);
export default adminRouter; export default adminRouter;
...@@ -21,6 +21,7 @@ import { Category } from "@mui/icons-material"; ...@@ -21,6 +21,7 @@ import { Category } from "@mui/icons-material";
import { PeopleAlt } from "@mui/icons-material"; import { PeopleAlt } from "@mui/icons-material";
import { MeetingRoom } from "@mui/icons-material"; import { MeetingRoom } from "@mui/icons-material";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { AdminOrderContext } from "./layout/AdminLayout";
const Search = styled("div")(({ theme }) => ({ const Search = styled("div")(({ theme }) => ({
position: "relative", position: "relative",
...@@ -64,6 +65,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ ...@@ -64,6 +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 router = useRouter(); const router = useRouter();
const [search, setSearch] = React.useState(router.query?.q ?? ""); const [search, setSearch] = React.useState(router.query?.q ?? "");
...@@ -144,7 +146,7 @@ function AdminNavbar(props) { ...@@ -144,7 +146,7 @@ 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={10} color="error"> <Badge badgeContent={[...adminOrder.value?.filter((order) => order.send_status === 0)].length} color="error">
<ProductionQuantityLimits /> <ProductionQuantityLimits />
</Badge> </Badge>
</IconButton> </IconButton>
......
import React from "react"; import React, { createContext, useContext, useEffect, useState } from "react";
import AdminNavbar from "../AdminNavbar"; import AdminNavbar from "../AdminNavbar";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { Toolbar } from "@mui/material"; import { Toolbar } from "@mui/material";
import axios from "axios";
import { UserContext } from "@/pages/_app";
export const AdminOrderContext = createContext(null);
export default function AdminLayout({ children }) { export default function AdminLayout({ children }) {
const user = useContext(UserContext);
const [adminOrder, setAdminOrder] = useState([]);
const fetchAdminOrder = async () => {
try {
if (!user.value?.token) return;
let response = await axios.get("/api/admin/order", {
headers: { token: user.value.token },
});
setAdminOrder(response.data);
} catch (err) {
console.error(err);
}
};
useEffect(() => {
fetchAdminOrder();
}, [user]);
return ( return (
<> <>
<AdminOrderContext.Provider
value={{
value: adminOrder,
set: setAdminOrder,
fetch: fetchAdminOrder,
}}
>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<AdminNavbar /> <AdminNavbar />
{/* <Sidebar /> */} {/* <Sidebar /> */}
...@@ -20,6 +49,7 @@ export default function AdminLayout({ children }) { ...@@ -20,6 +49,7 @@ export default function AdminLayout({ children }) {
{children} {children}
</Box> </Box>
</Box> </Box>
</AdminOrderContext.Provider>
</> </>
); );
} }
import React, { useContext, useEffect, useState } from "react";
import Head from "next/head";
import PopupAlert from "@/components/PopupAlert";
import Link from "next/link";
import axios from "axios";
import { UserContext } from "../_app";
import { AdminOrderContext } from "@/components/layout/AdminLayout";
import {
Paper,
Button,
Box,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
} from "@mui/material";
export default function Order() {
const user = useContext(UserContext);
const adminOrder = useContext(AdminOrderContext);
const [message, setMessage] = useState({ message: "", error: false });
useEffect(() => {
console.log(adminOrder.value);
}, [user]);
return (
<>
<Head>
<title>จัดการออเดอร์ | admin</title>
</Head>
<PopupAlert
open={!!message.message.length}
isError={message.error}
message={message.message}
/>
<Paper sx={{ p: 1, overflowX: "scroll" }}>
{adminOrder.value?.length > 0 ? (
<Box>
<Table>
<TableHead>
<TableRow>
{[
"id",
"ราคาทั้งหมด",
"รายละเอียด",
"จำนวนสินค้า",
"ค่าส่ง",
"ชำระเงิน",
"การจัดส่ง",
].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{adminOrder.value.map(
(order, idx) =>
order && (
<TableRow key={idx}>
<TableCell>{order.id}</TableCell>
<TableCell>
<Box color="orangered">
${Number(order.total_price).toLocaleString()}
</Box>
</TableCell>
<TableCell>
<Link href={"/order/" + order.id}>
<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>
</TableCell>
<TableCell>
<Box color={order.send_status ? "green" : "red"}>
{order.send_status ? "ส่งแล้ว" : "ยังไม่จัดส่ง"}
</Box>
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Box>
) : (
<div className="text-center">
{user.value?.token ? "รายการว่างเปล่า" : "คุณยังไม่ได้เข้าสู่ระบบ"}
</div>
)}
</Paper>
</>
);
}
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