Skip to content

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

add category filter on admin stock

parent e381489b
Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 82 deletions
src/pages/admin/stock.js
View file @ b732c9d0
...@@ -28,10 +28,15 @@ export default function Stock() { ...@@ -28,10 +28,15 @@ export default function Stock() {
const [products, setProducts] = useState([]); const [products, setProducts] = useState([]);
const [updateState, setUpdateState] = useState({ open: false, data: {} }); const [updateState, setUpdateState] = useState({ open: false, data: {} });
const [deleteState, setDeleteState] = useState({ open: false, id: -1 }); const [deleteState, setDeleteState] = useState({ open: false, id: -1 });
const [category, setCategory] = useState([]); const [category, setCategory] = useState(-1);
const [categoryList, setCategoryList] = useState([]);
const productsFilter = !!router.query?.q const productsFilter = !!router.query?.q
? products.filter((prod) => String(prod.name).includes(router.query.q)) ? products.filter((prod) =>
String(prod.name)
.toLocaleLowerCase()
.includes(String(router.query.q).toLocaleLowerCase())
)
: products; : products;
useEffect(() => { useEffect(() => {
...@@ -41,10 +46,18 @@ export default function Stock() { ...@@ -41,10 +46,18 @@ export default function Stock() {
}, [modal, updateState, deleteState]); }, [modal, updateState, deleteState]);
useEffect(() => { useEffect(() => {
axios.get("/api/category").then((res) => { axios.get("/api/category").then((res) => {
setCategory(res.data); setCategoryList(res.data);
}); });
}, []); }, []);
useEffect(() => {
if (router.query?.cat) {
setCategory(Number(router.query.cat));
} else {
setCategory(-1);
}
}, [router]);
return ( return (
<> <>
<Head> <Head>
...@@ -57,67 +70,125 @@ export default function Stock() { ...@@ -57,67 +70,125 @@ export default function Stock() {
เพิ่มสินค้า เพิ่มสินค้า
</Button> </Button>
</Box> </Box>
<div className="mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 max-w-[1520px]">
{productsFilter.map((product, idx) => ( <Box className="flex justify-start mb-3 px-10 max-w-[1520px] mx-auto">
<Card <Box sx={{ display: "flex", overflowX: "scroll", maxWidth: "100vw" }}>
key={idx} <Button
sx={{ variant={category === -1 ? "contained" : "text"}
m: 1, className={`${category === -1 ? "" : "bg-white"} mx-1`}
px: 1, onClick={() => {
width: 300, let que = router.query;
mx: "auto", delete que.cat;
height: 500, router.push({
display: "inline-block", pathname: location.pathname,
query: { ...que },
});
}} }}
> >
<Box sx={{ px: 1 }}> ทั้งหมด
<h5 className="h-[40px] overflow-y-hidden">{product.name}</h5> </Button>
</Box> {categoryList.map((cat, idx) => (
<CardMedia <Button
className="rounded object-contain" className={`${cat.id === category ? "" : "bg-white"} mx-1`}
component={"img"} variant={cat.id === category ? "contained" : "text"}
height={150} key={idx}
image={product.image.length ? product.image : "/empty.jpg"} onClick={() => {
/> if (cat.id === category) {
<CardContent sx={{ px: 1 }}> let que = router.query;
<Typography delete que.cat;
sx={{ height: 70, overflowY: "scroll" }} router.push({
variant="body2" pathname: location.pathname,
color={"text.secondary"} query: { ...que },
> });
{product.detail} } else {
</Typography> router.push({
<Table sx={{ m: 0, p: 0 }}> pathname: location.pathname,
<TableBody> query: { ...router.query, cat: cat.id },
<TableRow sx={{ m: 0, p: 0 }}> });
<TableCell sx={{ m: 0, p: 0, textAlign: "center " }}> }
{Number(product.price).toLocaleString() + " บาท"} }}
</TableCell> >
<TableCell> {`ส่วนลด ${product.discount}%`}</TableCell> {cat.name}
</TableRow> </Button>
<TableRow> ))}
<TableCell>เข้าชม {product.watch_count} ครั้ง</TableCell> </Box>
<TableCell>คงเหลือ {product.stock} ชิ้น</TableCell> </Box>
</TableRow>
</TableBody> <div className="mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 max-w-[1520px]">
</Table> {productsFilter.map(
</CardContent> (product, idx) =>
<CardActions disableSpacing sx={{ justifyContent: "end" }}> (category === -1 || category === product.cateId) && (
<Button <Card
color="warning" key={idx}
onClick={() => setUpdateState({ open: true, data: product })} sx={{
> m: 1,
<Edit /> แก้ไข px: 1,
</Button> width: 300,
<Button mx: "auto",
color="error" height: 500,
onClick={() => setDeleteState({ open: true, id: product.id })} display: "inline-block",
}}
> >
<Delete /> ลบ <Box sx={{ px: 1 }}>
</Button> <h5 className="h-[40px] overflow-y-hidden">
</CardActions> {product.name}
</Card> </h5>
))} </Box>
<CardMedia
className="rounded object-contain"
component={"img"}
height={150}
image={product.image.length ? product.image : "/empty.jpg"}
/>
<CardContent sx={{ px: 1 }}>
<Typography
sx={{ height: 70, overflowY: "scroll" }}
variant="body2"
color={"text.secondary"}
>
{product.detail}
</Typography>
<Table sx={{ m: 0, p: 0 }}>
<TableBody>
<TableRow sx={{ m: 0, p: 0 }}>
<TableCell sx={{ m: 0, p: 0, textAlign: "center " }}>
{Number(product.price).toLocaleString() + " บาท"}
</TableCell>
<TableCell>
{" "}
{`ส่วนลด ${product.discount}%`}
</TableCell>
</TableRow>
<TableRow>
<TableCell>
เข้าชม {product.watch_count} ครั้ง
</TableCell>
<TableCell>คงเหลือ {product.stock} ชิ้น</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
<CardActions disableSpacing sx={{ justifyContent: "end" }}>
<Button
color="warning"
onClick={() =>
setUpdateState({ open: true, data: product })
}
>
<Edit /> แก้ไข
</Button>
<Button
color="error"
onClick={() =>
setDeleteState({ open: true, id: product.id })
}
>
<Delete /> ลบ
</Button>
</CardActions>
</Card>
)
)}
</div> </div>
<AddProduct open={modal} handleClose={() => setModal(false)} /> <AddProduct open={modal} handleClose={() => setModal(false)} />
</Box> </Box>
......
src/pages/index.js
View file @ b732c9d0
...@@ -133,27 +133,7 @@ export default function Home() { ...@@ -133,27 +133,7 @@ export default function Home() {
/> />
<div> <div>
<Box className="flex justify-start mb-3 px-10 max-w-[1520px] mx-auto"> <Box className="flex justify-start mb-3 px-10 max-w-[1520px] mx-auto">
{/* <Box className="flex items-center mx-3">หมวดหมู่</Box> */} <Box sx={{ display: "flex", overflowX: "scroll", maxWidth: "100vw" }}>
{/* <FormControl>
<Select
variant="standard"
value={category}
onChange={(e) => {
router.push({
pathname: location.pathname,
query: { ...router.query, cat: e.target.value },
});
}}
>
<MenuItem value="-1">ทั้งหมด</MenuItem>
{categoryList.map((cat, idx) => (
<MenuItem key={idx} value={cat.id}>
{cat.name}
</MenuItem>
))}
</Select>
</FormControl> */}
<Box sx={{ display: "flex", overflowX: "scroll", maxWidth: "100vw" }}>
<Button <Button
variant={category === -1 ? "contained" : "text"} variant={category === -1 ? "contained" : "text"}
className={`${category === -1 ? "" : "bg-white"} mx-1`} className={`${category === -1 ? "" : "bg-white"} mx-1`}
......
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