Commit 25a6bea2 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

delete category with confirm alert

parent 74630670
...@@ -43,7 +43,7 @@ const CategoryController = { ...@@ -43,7 +43,7 @@ const CategoryController = {
try { try {
const { id, name } = req.body; const { id, name } = req.body;
console.log(id, name); console.log(id, name);
await db.category.update({ where: { id}, data: { name } }); await db.category.update({ where: { id }, data: { name } });
await db.$disconnect(); await db.$disconnect();
res.json({ status: 301, message: "update success" }); res.json({ status: 301, message: "update success" });
} catch (err) { } catch (err) {
...@@ -56,13 +56,20 @@ const CategoryController = { ...@@ -56,13 +56,20 @@ const CategoryController = {
* @param {Request} req * @param {Request} req
* @param {Response} res * @param {Response} res
*/ */
async delete(req,res) { async delete(req, res) {
try { try {
res.json({params: req.params}) const { id } = req.query;
} catch(err) { if (!id) throw 400;
res.json({status: 400, message: "server has some error"}) await db.category.delete({ where: { id: Number(id) } });
} await db.$disconnect();
res.json({
status: 401,
message: "delete success"
})
} catch (err) {
res.json({ status: 400, message: "server has some error" });
} }
},
}; };
export default CategoryController; export default CategoryController;
...@@ -8,5 +8,6 @@ adminRouter.get("/user", AdminUserController.index); ...@@ -8,5 +8,6 @@ adminRouter.get("/user", AdminUserController.index);
adminRouter.post("/product", AdminProductController.create); adminRouter.post("/product", AdminProductController.create);
adminRouter.post("/category", CategoryController.create); adminRouter.post("/category", CategoryController.create);
adminRouter.put("/category", CategoryController.update); adminRouter.put("/category", CategoryController.update);
adminRouter.delete('/category', CategoryController.delete)
export default adminRouter; export default adminRouter;
...@@ -5,7 +5,7 @@ import Dialog from "@mui/material/Dialog"; ...@@ -5,7 +5,7 @@ import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions"; import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent"; import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import { Snackbar } from "@mui/material"; import { Alert, Snackbar } from "@mui/material";
import axios from "axios"; import axios from "axios";
import { UserContext } from "@/pages/_app"; import { UserContext } from "@/pages/_app";
...@@ -44,12 +44,12 @@ export default function AddCategory({ open, handleClose }) { ...@@ -44,12 +44,12 @@ export default function AddCategory({ open, handleClose }) {
<> <>
<Snackbar <Snackbar
anchorOrigin={{ horizontal: "center", vertical: "top" }} anchorOrigin={{ horizontal: "center", vertical: "top" }}
ContentProps={{
className: message.error ? "bg-red-500" : "bg-green-500",
}}
open={!!message.message.length} open={!!message.message.length}
message={message.message} >
/> <Alert severity={message.error ? "error" : "success"}>
{message.message}
</Alert>
</Snackbar>
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose}>
<form onSubmit={fetchAddProduct}> <form onSubmit={fetchAddProduct}>
<DialogTitle>เพิ่มหมวดหมู่</DialogTitle> <DialogTitle>เพิ่มหมวดหมู่</DialogTitle>
......
import { useState, useEffect, useContext } from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import { Alert, Snackbar } from "@mui/material";
import axios from "axios";
import { UserContext } from "@/pages/_app";
export default function DeleteCategory({ open, handleClose, id }) {
const user = useContext(UserContext);
const [message, setMessage] = useState({ message: "", error: false });
async function onDeleteCategory() {
try {
let response = await axios.delete(`/api/admin/category?id=${id}`, {
headers: { token: user.value.token },
});
console.log(response.data);
if (response.data.status === 401) {
setMessage({ error: false, message: "สบสำเร็จ!" });
setTimeout(() => {
handleClose()
setMessage({ error: false, message: "" });
}, 1000);
}
} catch (err) {
setMessage({ error: true, message: "พบข้อผิดพลาด ไม่สามารถลบได้" });
setTimeout(() => {
setMessage({ error: false, message: "" });
}, 3000);
}
}
return (
<>
<Snackbar
anchorOrigin={{ horizontal: "center", vertical: "top" }}
ContentProps={{
className: message.error ? "bg-red-500" : "bg-green-500",
}}
open={!!message.message.length}
message={message.message}
>
<Alert severity={message.error ? "error" : "success"}>
{message.message}
</Alert>
</Snackbar>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>ยืนยันการลบ</DialogTitle>
<DialogContent className="text-center">
เมื่อกดลบแล้วจะไม่สามารถกู้คืนได้
</DialogContent>
<DialogActions>
<Button color="error" onClick={handleClose}>
ยกเลิก
</Button>
<Button onClick={onDeleteCategory}>ยืนยัน</Button>
</DialogActions>
</Dialog>
</>
);
}
...@@ -5,7 +5,7 @@ import Dialog from "@mui/material/Dialog"; ...@@ -5,7 +5,7 @@ import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions"; import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent"; import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle"; import DialogTitle from "@mui/material/DialogTitle";
import { Snackbar } from "@mui/material"; import { Alert, Snackbar } from "@mui/material";
import axios from "axios"; import axios from "axios";
import { UserContext } from "@/pages/_app"; import { UserContext } from "@/pages/_app";
...@@ -50,7 +50,7 @@ export default function UpdateCategory({ open, handleClose, data }) { ...@@ -50,7 +50,7 @@ export default function UpdateCategory({ open, handleClose, data }) {
}} }}
open={!!message.message.length} open={!!message.message.length}
message={message.message} message={message.message}
/> ><Alert severity={message.error ? "error" : "success"}>{message.message}</Alert></Snackbar>
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose}>
<form onSubmit={fetchAddProduct}> <form onSubmit={fetchAddProduct}>
<DialogTitle>แก้ไข</DialogTitle> <DialogTitle>แก้ไข</DialogTitle>
......
import { Add } from "@mui/icons-material"; import { Add } from "@mui/icons-material";
import { import {
Snackbar,
Box, Box,
Button, Button,
Grid, Grid,
...@@ -9,27 +10,37 @@ import { ...@@ -9,27 +10,37 @@ import {
TableCell, TableCell,
TableHead, TableHead,
TableRow, TableRow,
Alert,
} from "@mui/material"; } from "@mui/material";
import React, { useState, useEffect } from "react"; import React, { useState, useContext, useEffect } from "react";
import AddCategory from "@/components/AddCategory"; import AddCategory from "@/components/category/AddCategory";
import axios from "axios"; import axios from "axios";
import { Delete } from "@mui/icons-material"; import { Delete } from "@mui/icons-material";
import { Edit } from "@mui/icons-material"; import { Edit } from "@mui/icons-material";
import UpdateCategory from "@/components/UpdateCategory"; import UpdateCategory from "@/components/category/UpdateCategory";
import { UserContext } from "../_app";
import DeleteCategory from "@/components/category/DeleteCategory";
export default function AdminCategory() { export default function AdminCategory() {
const user = useContext(UserContext);
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
const [message, setMessage] = useState({ message: "", error: false });
const [deleteState, setDeleteState] = useState({
open: false,
id: -1,
});
const [updateState, setUpdateState] = useState({ const [updateState, setUpdateState] = useState({
open: false, open: false,
data: { id: -1, name: "" }, data: { id: -1, name: "" },
}); });
const [category, setCategory] = useState([]); const [category, setCategory] = useState([]);
useEffect(() => { const fetchCategory = () => {
axios.get("/api/category").then((res) => { axios.get("/api/category").then((res) => {
setCategory(res.data); setCategory(res.data);
}); });
}, [modal, updateState]); };
useEffect(fetchCategory, [modal, updateState, message, deleteState]);
return ( return (
<Box> <Box>
<Grid container> <Grid container>
...@@ -74,7 +85,10 @@ export default function AdminCategory() { ...@@ -74,7 +85,10 @@ export default function AdminCategory() {
</Button> </Button>
</TableCell> </TableCell>
<TableCell sx={{ maxWidth: 10 }}> <TableCell sx={{ maxWidth: 10 }}>
<Button color="error"> <Button
color="error"
onClick={() => setDeleteState({open: true, id: cate.id})}
>
<Delete /> <Delete />
</Button> </Button>
</TableCell> </TableCell>
...@@ -87,9 +101,15 @@ export default function AdminCategory() { ...@@ -87,9 +101,15 @@ export default function AdminCategory() {
</Grid> </Grid>
<Grid item lg={3} md={0}></Grid> <Grid item lg={3} md={0}></Grid>
</Grid> </Grid>
{modal && (
<AddCategory open={modal} handleClose={() => setModal(false)} /> {deleteState.open && (
<DeleteCategory
open={deleteState.open}
handleClose={() => setDeleteState({ open: false, id: -1 })}
id={deleteState.id}
/>
)} )}
<AddCategory open={modal} handleClose={() => setModal(false)} />
{updateState.open && ( {updateState.open && (
<UpdateCategory <UpdateCategory
open={updateState.open} open={updateState.open}
......
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