create: show product for admin;

fix: prisma schema image size;

prisma/migrations/20231001054534_/migration.sql

+-- AlterTable
+ALTER TABLE `product` MODIFY `image` LONGTEXT NOT NULL;

prisma/migrations/20231001054815_dev/migration.sql

+-- AlterTable
+ALTER TABLE `product` MODIFY `detail` LONGTEXT NOT NULL;

prisma/migrations/20231001055031_dev/migration.sql

+-- AlterTable
+ALTER TABLE `user` MODIFY `photo` LONGTEXT NOT NULL;

prisma/schema.prisma

@@ -15,7 +15,7 @@ model user {
   name          String
   email         String
   phone         String
-  photo         String
+  photo         String         @db.LongText
   google_token  String
   username      String         @unique
   password      String
@@ -30,14 +30,14 @@ model user {
 model product {
   id           Int            @id @default(autoincrement())
   name         String
-  detail       String
+  detail       String         @db.LongText
   price        Int
   discount     Int
   cate         category       @relation(fields: [cateId], references: [id])
   cateId       Int
   watch_count  Int
   buy_count    Int
-  image        String
+  image        String         @db.LongText
   stock        Int
   wishlist     wishlist[]
   cart         cart[]

src/components/AddProduct.js

@@ -62,6 +62,7 @@ export default function AddProduct({ open, handleClose }) {
       setImage("");
       setCategory(0);
       setMessage({ message: "เพิ่มสินค้าสำเร็จ", error: false });
+      handleClose()
       setTimeout(() => {
         setMessage({ message: "", error: false });
       }, 3000);

src/pages/admin/stock.js

@@ -3,18 +3,41 @@ import AddProduct from "@/components/AddProduct";
 import {
   Box,
   Button,
-  Grid,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
   Paper,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
+  Typography,
 } from "@mui/material";
-import {useState} from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { Delete } from "@mui/icons-material";
+import { Edit } from "@mui/icons-material";
 
 export default function Stock() {
-    const [modal, setModal] = useState(false)
+  const [modal, setModal] = useState(false);
+  const [products, setProducts] = useState([]);
+  const [category, setCategory] = useState([]);
+
+  useEffect(() => {
+    axios.get("/api/product").then((res) => {
+      console.log(res.data);
+      setProducts(res.data);
+    });
+  }, [modal]);
+  useEffect(() => {
+    axios.get("/api/category").then((res) => {
+      setCategory(res.data);
+    });
+  }, []);
+
   return (
     <Box>
       <Box sx={{ mb: 2, textAlign: "right" }}>
@@ -23,31 +46,53 @@ export default function Stock() {
           เพิ่มสินค้า
         </Button>
       </Box>
-      <Paper
-        sx={{
-          p: 2,
-        }}
-      >
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>hello</TableCell>
-              <TableCell>hello</TableCell>
-              <TableCell>hello</TableCell>
-              <TableCell>hello</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              <TableCell>hello</TableCell>
-              <TableCell>hello</TableCell>
-              <TableCell>hello</TableCell>
-              <TableCell>hello</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </Paper>
-      <AddProduct open={modal} handleClose={() => setModal(false)}  />
+      {products.map((product, idx) => (
+        <Card
+          sx={{ m: 1, px: 1, width: 300, height: 500, display: "inline-block" }}
+        >
+          <Box sx={{ px: 1 }}>
+            <h5 className="h-[40px] overflow-y-hidden">{product.name}</h5>
+          </Box>
+          <CardMedia
+            className="rounded"
+            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">
+              <Edit /> แก้ไข
+            </Button>
+            <Button color="error">
+              <Delete /> ลบ
+            </Button>
+          </CardActions>
+        </Card>
+      ))}
+      <AddProduct open={modal} handleClose={() => setModal(false)} />
     </Box>
   );
 }