Skip to content

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

category admin -> can search

parent 5f1c16ca
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 78 deletions
src/pages/admin/category.js
View file @ 1a0e2250
...@@ -18,8 +18,10 @@ import { Edit } from "@mui/icons-material"; ...@@ -18,8 +18,10 @@ import { Edit } from "@mui/icons-material";
import UpdateCategory from "@/components/category/UpdateCategory"; import UpdateCategory from "@/components/category/UpdateCategory";
import DeleteCategory from "@/components/category/DeleteCategory"; import DeleteCategory from "@/components/category/DeleteCategory";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router";
export default function AdminCategory() { export default function AdminCategory() {
const router = useRouter();
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
const [message, setMessage] = useState({ message: "", error: false }); const [message, setMessage] = useState({ message: "", error: false });
const [deleteState, setDeleteState] = useState({ const [deleteState, setDeleteState] = useState({
...@@ -40,89 +42,98 @@ export default function AdminCategory() { ...@@ -40,89 +42,98 @@ export default function AdminCategory() {
useEffect(fetchCategory, [modal, updateState, message, deleteState]); useEffect(fetchCategory, [modal, updateState, message, deleteState]);
return ( return (
<> <>
<Head> <Head>
<title>จัดการหมวดหมู่ | admin</title> <title>จัดการหมวดหมู่ | admin</title>
</Head> </Head>
<Box> <Box>
<Grid container> <Grid container>
<Grid item lg={3} md={0}></Grid> <Grid item lg={3} md={0}></Grid>
<Grid item lg={6} md={12}> <Grid item lg={6} md={12}>
<Box sx={{ mb: 2, textAlign: "right" }}> <Box sx={{ mb: 2, textAlign: "right" }}>
<Button onClick={() => setModal(true)}> <Button onClick={() => setModal(true)}>
<Add /> เพิ่มหมวดหมู่ <Add /> เพิ่มหมวดหมู่
</Button> </Button>
</Box> </Box>
<Paper sx={{ p: 2, overflowX: "scroll" }}> <Paper sx={{ p: 2, overflowX: "scroll" }}>
<div> <div>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell>id</TableCell> <TableCell>id</TableCell>
<TableCell>ชื่อ</TableCell> <TableCell>ชื่อ</TableCell>
<TableCell sx={{ maxWidth: 10, textAlign: "center" }}> <TableCell sx={{ maxWidth: 10, textAlign: "center" }}>
แก้ไข แก้ไข
</TableCell>
<TableCell sx={{ maxWidth: 10, textAlign: "center" }}>
ลบ
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{category.map((cate, idx) => (
<TableRow key={idx}>
<TableCell>{cate.id}</TableCell>
<TableCell>{cate.name}</TableCell>
<TableCell sx={{ maxWidth: 10 }}>
<Button
color="warning"
onClick={() =>
setUpdateState({
open: true,
data: { id: cate.id, name: cate.name },
})
}
>
<Edit />
</Button>
</TableCell> </TableCell>
<TableCell sx={{ maxWidth: 10 }}> <TableCell sx={{ maxWidth: 10, textAlign: "center" }}>
<Button ลบ
color="error"
onClick={() =>
setDeleteState({ open: true, id: cate.id })
}
>
<Delete />
</Button>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {category.map(
</div> (cate, idx) =>
</Paper> (!router.query?.q ||
cate.id === Number(router.query.q) ||
String(cate.name)
.toLocaleLowerCase()
.includes(
String(router.query.q).toLocaleLowerCase()
)) && (
<TableRow key={idx}>
<TableCell>{cate.id}</TableCell>
<TableCell>{cate.name}</TableCell>
<TableCell sx={{ maxWidth: 10 }}>
<Button
color="warning"
onClick={() =>
setUpdateState({
open: true,
data: { id: cate.id, name: cate.name },
})
}
>
<Edit />
</Button>
</TableCell>
<TableCell sx={{ maxWidth: 10 }}>
<Button
color="error"
onClick={() =>
setDeleteState({ open: true, id: cate.id })
}
>
<Delete />
</Button>
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</div>
</Paper>
</Grid>
<Grid item lg={3} md={0}></Grid>
</Grid> </Grid>
<Grid item lg={3} md={0}></Grid>
</Grid>
{deleteState.open && ( {deleteState.open && (
<DeleteCategory <DeleteCategory
open={deleteState.open} open={deleteState.open}
handleClose={() => setDeleteState({ open: false, id: -1 })} handleClose={() => setDeleteState({ open: false, id: -1 })}
id={deleteState.id} id={deleteState.id}
/> />
)} )}
<AddCategory open={modal} handleClose={() => setModal(false)} /> <AddCategory open={modal} handleClose={() => setModal(false)} />
{updateState.open && ( {updateState.open && (
<UpdateCategory <UpdateCategory
open={updateState.open} open={updateState.open}
data={updateState.data} data={updateState.data}
handleClose={() => handleClose={() =>
setUpdateState({ open: false, data: { id: -1, name: "" } }) setUpdateState({ open: false, data: { id: -1, name: "" } })
} }
/> />
)} )}
</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