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

delete category with confirm alert

parent 74630670
......@@ -43,7 +43,7 @@ const CategoryController = {
try {
const { id, name } = req.body;
console.log(id, name);
await db.category.update({ where: { id}, data: { name } });
await db.category.update({ where: { id }, data: { name } });
await db.$disconnect();
res.json({ status: 301, message: "update success" });
} catch (err) {
......@@ -52,17 +52,24 @@ const CategoryController = {
}
},
/**
*
* @param {Request} req
* @param {Response} res
*
* @param {Request} req
* @param {Response} res
*/
async delete(req,res) {
async delete(req, res) {
try {
res.json({params: req.params})
} catch(err) {
res.json({status: 400, message: "server has some error"})
const { id } = req.query;
if (!id) throw 400;
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;
......@@ -8,5 +8,6 @@ adminRouter.get("/user", AdminUserController.index);
adminRouter.post("/product", AdminProductController.create);
adminRouter.post("/category", CategoryController.create);
adminRouter.put("/category", CategoryController.update);
adminRouter.delete('/category', CategoryController.delete)
export default adminRouter;
......@@ -5,7 +5,7 @@ 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 { Snackbar } from "@mui/material";
import { Alert, Snackbar } from "@mui/material";
import axios from "axios";
import { UserContext } from "@/pages/_app";
......@@ -44,12 +44,12 @@ export default function AddCategory({ open, handleClose }) {
<>
<Snackbar
anchorOrigin={{ horizontal: "center", vertical: "top" }}
ContentProps={{
className: message.error ? "bg-red-500" : "bg-green-500",
}}
open={!!message.message.length}
message={message.message}
/>
open={!!message.message.length}
>
<Alert severity={message.error ? "error" : "success"}>
{message.message}
</Alert>
</Snackbar>
<Dialog open={open} onClose={handleClose}>
<form onSubmit={fetchAddProduct}>
<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";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import { Snackbar } from "@mui/material";
import { Alert, Snackbar } from "@mui/material";
import axios from "axios";
import { UserContext } from "@/pages/_app";
......@@ -50,7 +50,7 @@ export default function UpdateCategory({ open, handleClose, data }) {
}}
open={!!message.message.length}
message={message.message}
/>
><Alert severity={message.error ? "error" : "success"}>{message.message}</Alert></Snackbar>
<Dialog open={open} onClose={handleClose}>
<form onSubmit={fetchAddProduct}>
<DialogTitle>แก้ไข</DialogTitle>
......
import { Add } from "@mui/icons-material";
import {
Snackbar,
Box,
Button,
Grid,
......@@ -9,27 +10,37 @@ import {
TableCell,
TableHead,
TableRow,
Alert,
} from "@mui/material";
import React, { useState, useEffect } from "react";
import AddCategory from "@/components/AddCategory";
import React, { useState, useContext, useEffect } from "react";
import AddCategory from "@/components/category/AddCategory";
import axios from "axios";
import { Delete } 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() {
const user = useContext(UserContext);
const [modal, setModal] = useState(false);
const [message, setMessage] = useState({ message: "", error: false });
const [deleteState, setDeleteState] = useState({
open: false,
id: -1,
});
const [updateState, setUpdateState] = useState({
open: false,
data: { id: -1, name: "" },
});
const [category, setCategory] = useState([]);
useEffect(() => {
const fetchCategory = () => {
axios.get("/api/category").then((res) => {
setCategory(res.data);
});
}, [modal, updateState]);
};
useEffect(fetchCategory, [modal, updateState, message, deleteState]);
return (
<Box>
<Grid container>
......@@ -74,7 +85,10 @@ export default function AdminCategory() {
</Button>
</TableCell>
<TableCell sx={{ maxWidth: 10 }}>
<Button color="error">
<Button
color="error"
onClick={() => setDeleteState({open: true, id: cate.id})}
>
<Delete />
</Button>
</TableCell>
......@@ -87,9 +101,15 @@ export default function AdminCategory() {
</Grid>
<Grid item lg={3} md={0}></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 && (
<UpdateCategory
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