Productsに在庫(stock)を追加 (#36)

ricora · Nov 16, 2024 · 455fcfe · 455fcfe
1 parent be37a68
commit 455fcfe
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 23 deletions.
diff --git a/app/components/organisms/reception/ReceptionCard.tsx b/app/components/organisms/reception/ReceptionCard.tsx
@@ -4,21 +4,42 @@ import { TypeProduct } from "~/type/typeproduct"
 import PropTypes from "prop-types"
 
 type Props = {
+  quantity?: number
   product: TypeProduct
   addOrder: (product: TypeProduct) => void
   cancelOrder: (product: TypeProduct) => void
 }
 
 export const ReceptionCard: FC<Props> = memo((props) => {
-  const { product, addOrder, cancelOrder } = props
+  const { quantity = 0, product, addOrder, cancelOrder } = props
 
   return (
-    <Box w="300px" h="250px" bg="white" borderRadius="10px" shadow="md" p={4}>
+    <Box
+      w="300px"
+      h="250px"
+      bg={
+        product.stock - quantity === 0
+          ? "red.200"
+          : product.stock - quantity <= 10
+            ? "red.100"
+            : "white"
+      }
+      borderRadius="10px"
+      shadow="md"
+      p={4}
+    >
       <h1>ID：{product.product_id}</h1>
       <Stack textAlign={"center"}>
         <Text>{product.product_name}</Text>
         <Text>価格：{product.price}</Text>
-        <Button onClick={() => addOrder(product)} colorScheme="blue">
+        <Text>在庫：{product.stock - quantity}</Text>
+        <Button
+          isDisabled={
+            quantity ? product.stock - quantity <= 0 : product.stock <= 0
+          }
+          onClick={() => addOrder(product)}
+          colorScheme="blue"
+        >
           +
         </Button>
         <Button onClick={() => cancelOrder(product)} colorScheme="red">
@@ -32,10 +53,12 @@ export const ReceptionCard: FC<Props> = memo((props) => {
 ReceptionCard.displayName = "ReceptionCard"
 
 ReceptionCard.propTypes = {
+  quantity: PropTypes.number,
   product: PropTypes.shape({
     product_id: PropTypes.number.isRequired,
     product_name: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
+    stock: PropTypes.number.isRequired,
   }).isRequired,
   addOrder: PropTypes.func.isRequired,
   cancelOrder: PropTypes.func.isRequired,

diff --git a/app/components/organisms/register/ProductCard.tsx b/app/components/organisms/register/ProductCard.tsx
@@ -13,11 +13,12 @@ export const ProductCard: FC<Props> = memo((props) => {
   const { product, clickDelete, clickChange } = props
 
   return (
-    <Box w="300px" h="250px" bg="white" borderRadius="10px" shadow="md" p={4}>
+    <Box w="300px" h="250px" bg={"white"} borderRadius="10px" shadow="md" p={4}>
       <h1>ID：{product.product_id}</h1>
       <Stack textAlign={"center"}>
         <Text>{product.product_name}</Text>
         <Text>価格：{product.price}</Text>
+        <Text>在庫：{product.stock}</Text>
         <Button onClick={() => clickDelete(product)} colorScheme="red">
           削除
         </Button>
@@ -36,6 +37,7 @@ ProductCard.propTypes = {
     product_id: PropTypes.number.isRequired,
     product_name: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
+    stock: PropTypes.number.isRequired,
   }).isRequired,
   clickDelete: PropTypes.func.isRequired,
   clickChange: PropTypes.func.isRequired,

diff --git a/app/crud/crud_products.ts b/app/crud/crud_products.ts
@@ -7,11 +7,13 @@ const prisma = new PrismaClient()
 export async function createProduct(data: {
   product_name: string
   price: number
+  stock: number
 }) {
   return await prisma.products.create({
     data: {
       product_name: data.product_name,
       price: data.price,
+      stock: data.stock,
     },
   })
 }
@@ -26,6 +28,7 @@ export async function updateProduct(
   product_id: number,
   product_name: string,
   price: number,
+  stock: number,
 ) {
   return await prisma.products.update({
     where: {
@@ -34,10 +37,25 @@ export async function updateProduct(
     data: {
       product_name: product_name,
       price: price,
+      stock: stock,
     },
   })
 }
 
+//在庫の変更
+export async function updateStock(data: {
+  product_id: number
+  stock: number | undefined
+  num: number
+}) {
+  return await prisma.products.update({
+    where: {
+      product_id: data.product_id,
+    },
+    data: { stock: data.stock ? data.stock - data.num : 0 },
+  })
+}
+
 //同じ商品名の商品が既に存在するか確認する
 export async function existProduct(name: string) {
   return await prisma.products.findFirst({

diff --git a/app/routes/reception.tsx b/app/routes/reception.tsx
@@ -23,7 +23,7 @@ import { useEffect, useState } from "react"
 import { ReceptionCard } from "~/components/organisms/reception/ReceptionCard"
 import { createOrderDetail } from "~/crud/crud_details"
 import { createOrder } from "~/crud/crud_orders"
-import { readProduct } from "~/crud/crud_products"
+import { readProduct, updateStock } from "~/crud/crud_products"
 import { useMessage } from "~/hooks/useMessage"
 
 // type TypeOrder = {
@@ -73,9 +73,9 @@ export default function Reception() {
 
   useEffect(() => {
     if (actionData?.success === true) {
+      setOrder([])
       setTotal(0)
       // setDecision(false)
-      setOrder([])
       showMessage({ title: "注文しました", status: "success" })
       onClose()
       setTableNumber("")
@@ -88,6 +88,7 @@ export default function Reception() {
     product_id: number
     product_name: string
     price: number
+    stock: number
   }) => {
     setOrder((prevOrder) => {
       const existingProduct = prevOrder.find(
@@ -171,15 +172,21 @@ export default function Reception() {
       </Box>
       <div>
         <Wrap p={{ base: 4, md: 10 }}>
-          {products.map((product) => (
-            <WrapItem key={product.product_id} mx="auto">
-              <ReceptionCard
-                product={product}
-                addOrder={addOrder}
-                cancelOrder={cancelOrder}
-              />
-            </WrapItem>
-          ))}
+          {products.map((product) => {
+            const selectedOrder = order.find(
+              (order) => order.product_id === product.product_id,
+            )
+            return (
+              <WrapItem key={product.product_id} mx="auto">
+                <ReceptionCard
+                  quantity={selectedOrder?.quantity}
+                  product={product}
+                  addOrder={addOrder}
+                  cancelOrder={cancelOrder}
+                />
+              </WrapItem>
+            )
+          })}
         </Wrap>
       </div>
 
@@ -264,13 +271,24 @@ export const action: ActionFunction = async ({
       status: "accept",
     })
 
-    for (let i = 0; i < product_ids.length; i++) {
+    const products = await readProduct()
+
+    product_ids.map(async (product_id, index) => {
+      const quantity = quantities[index]
+      const product = products.find((p) => p.product_id === product_id)
+
       await createOrderDetail({
         order_id: order.order_id,
-        product_id: product_ids[i],
-        quantity: quantities[i],
+        product_id: product_id,
+        quantity: quantity,
       })
-    }
+
+      await updateStock({
+        product_id: product_id,
+        stock: product?.stock,
+        num: quantity,
+      })
+    })
 
     return { success: true }
   }

diff --git a/app/routes/register.tsx b/app/routes/register.tsx
@@ -10,7 +10,6 @@ import {
   ModalCloseButton,
   ModalContent,
   ModalFooter,
-  ModalHeader,
   ModalOverlay,
   Stack,
   useDisclosure,
@@ -42,6 +41,7 @@ type ActionData = {
 export default function Register() {
   const [name, setName] = useState("")
   const [price, setPrice] = useState("")
+  const [stock, setStock] = useState("")
   const [isLoading, setLoading] = useState(false)
   const actionData = useActionData<ActionData>()
   const { showMessage } = useMessage()
@@ -69,6 +69,7 @@ export default function Register() {
     if (actionData?.success && actionData?.method === "POST") {
       setName("")
       setPrice("")
+      setStock("")
       setLoading(false)
       showMessage({ title: "登録完了", status: "success" })
     }
@@ -105,6 +106,10 @@ export default function Register() {
     setPrice(e.target.value)
   }
 
+  const stockChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setStock(e.target.value)
+  }
+
   const productOpen = () => {
     setOpen(true)
   }
@@ -145,6 +150,15 @@ export default function Register() {
     }
   }
 
+  const handleStockChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (changeProduct) {
+      setChangeProduct({
+        ...changeProduct,
+        stock: Number(e.target.value),
+      })
+    }
+  }
+
   return (
     <div>
       <Button
@@ -161,7 +175,7 @@ export default function Register() {
         <Box
           bg="white"
           w="400px"
-          h="300px"
+          h="380px"
           borderRadius="10px"
           shadow="md"
           fontSize="xl"
@@ -191,6 +205,17 @@ export default function Register() {
                 required
               />
             </FormControl>
+            <FormControl>
+              <FormLabel>在庫</FormLabel>
+              <Input
+                type="number"
+                name="stock"
+                value={stock}
+                onChange={stockChange}
+                bg="gray.200"
+                required
+              />
+            </FormControl>
             <Button
               type="submit"
               colorScheme="blue"
@@ -286,7 +311,6 @@ export default function Register() {
       >
         <ModalOverlay />
         <ModalContent pb={2}>
-          <ModalHeader>ユーザー詳細</ModalHeader>
           <ModalCloseButton />
           <ModalBody mx={4}>
             <Stack spacing={4}>
@@ -306,6 +330,14 @@ export default function Register() {
                   onChange={handlePriceChange}
                 />
               </FormControl>
+              <FormControl>
+                <FormLabel>在庫</FormLabel>
+                <Input
+                  type="number"
+                  value={changeProduct?.stock}
+                  onChange={handleStockChange}
+                />
+              </FormControl>
             </Stack>
           </ModalBody>
           <ModalFooter gap={4}>
@@ -322,6 +354,7 @@ export default function Register() {
                 name="product_name"
               />
               <Input type="hidden" value={changeProduct?.price} name="price" />
+              <Input type="hidden" value={changeProduct?.stock} name="stock" />
               <Button type="submit" colorScheme="green">
                 更新
               </Button>
@@ -352,6 +385,7 @@ export const action: ActionFunction = async ({
   ) {
     const product_name = formData.get("product_name")
     const price = Number(formData.get("price"))
+    const stock = Number(formData.get("stock"))
 
     if (typeof product_name === "string") {
       const isExist = await existProduct(product_name)
@@ -369,6 +403,7 @@ export const action: ActionFunction = async ({
       await createProduct({
         product_name,
         price,
+        stock,
       })
 
       return json({ success: true, method: request.method })
@@ -405,9 +440,10 @@ export const action: ActionFunction = async ({
     const product_id = Number(formData.get("product_id"))
     const product_name = formData.get("product_name")
     const price = Number(formData.get("price"))
+    const stock = Number(formData.get("stock"))
 
     if (typeof product_name === "string") {
-      await updateProduct(product_id, product_name, price)
+      await updateProduct(product_id, product_name, price, stock)
       return json({ success: true, method: method })
     } else {
       return json({ success: false, error: "no product_name", method: method })

diff --git a/app/type/typeproduct.ts b/app/type/typeproduct.ts
@@ -2,4 +2,5 @@ export type TypeProduct = {
   product_id: number
   product_name: string
   price: number
+  stock: number
 }
diff --git a/prisma/migrations/20241108122708_add_stock/migration.sql b/prisma/migrations/20241108122708_add_stock/migration.sql
@@ -0,0 +1,21 @@
+/*
+  Warnings:
+
+  - Added the required column `stock` to the `Products` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Products" (
+    "product_id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "product_name" TEXT NOT NULL,
+    "price" INTEGER NOT NULL,
+    "stock" INTEGER NOT NULL
+);
+INSERT INTO "new_Products" ("price", "product_id", "product_name") SELECT "price", "product_id", "product_name" FROM "Products";
+DROP TABLE "Products";
+ALTER TABLE "new_Products" RENAME TO "Products";
+CREATE UNIQUE INDEX "Products_product_name_key" ON "Products"("product_name");
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -34,5 +34,6 @@ model Products{
   product_id      Int       @id @default(autoincrement())
   product_name    String    @unique
   price           Int
+  stock           Int
   orderDetails    Order_details[]
 }