Merge branch 'main' into feature/issue-31-calculator-logic

app/components/atoms/button/MenuIconButton.tsx

@@ -12,9 +12,13 @@ export const MenuIconButton: FC<Props> = memo(({ onOpen }) => {
     <IconButton
       aria-label="メニューボタン"
       icon={<HamburgerIcon />}
-      size="sm"
-      variant="unstyled"
+      size="lg"
+      variant="ghost"
       display={{ base: "block", lg: "none" }}
+      _hover={{
+        cursor: "pointer",
+        bg: "blackAlpha.100",
+      }}
       onClick={onOpen}
     />
   )

app/components/organisms/kitchen/OrderCard.tsx

@@ -3,18 +3,22 @@ import { Form } from "@remix-run/react"
 import { FC, memo } from "react"
 import PropTypes from "prop-types"
 
+type OrderItem = {
+  productName: string
+  quantity: number
+}
+
 type Props = {
   orderTime: string
   orderId: number
-  productNames: (string | null | undefined)[]
+  orderItems: OrderItem[]
   status: string
-  quantities: (number | null | undefined)[]
   tableNumber: number
+  memo?: string
 }
 
 export const OrderCard: FC<Props> = memo((props) => {
-  const { orderTime, orderId, productNames, status, quantities, tableNumber } =
-    props
+  const { orderTime, orderId, orderItems, status, tableNumber, memo } = props
 
   return (
     <Box
@@ -28,13 +32,20 @@ export const OrderCard: FC<Props> = memo((props) => {
     >
       <Text>{orderTime}</Text>
       <Stack textAlign={"center"}>
-        {productNames.map((name, index) => (
-          <Text key={index}>
-            {name}--数量：{quantities[index]}
-          </Text>
+        {orderItems.map((item, index) => (
+          <Box key={index}>
+            <Text>
+              {item.productName}--数量：{item.quantity}
+            </Text>
+          </Box>
         ))}
         <Text>-------------------------</Text>
         <Text>テーブル番号：{tableNumber}</Text>
+        {memo && memo.trim() !== "" && (
+          <Text fontSize="sm" color="red.500" fontWeight="bold" mb={2}>
+            ※注文メモ：{memo}
+          </Text>
+        )}
         <Text>ステータス：{status}</Text>
         {status === "accept" ? (
           <Form method="post">
@@ -74,8 +85,14 @@ OrderCard.displayName = "OrderCard"
 OrderCard.propTypes = {
   orderTime: PropTypes.string.isRequired,
   orderId: PropTypes.number.isRequired,
-  productNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  orderItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      productName: PropTypes.string.isRequired,
+      quantity: PropTypes.number.isRequired,
+      memo: PropTypes.string,
+    }).isRequired,
+  ).isRequired,
   status: PropTypes.string.isRequired,
-  quantities: PropTypes.arrayOf(PropTypes.number).isRequired,
   tableNumber: PropTypes.number.isRequired,
+  memo: PropTypes.string,
 }

app/components/organisms/register/ProductForm.tsx

@@ -45,10 +45,7 @@ export const createProductSchema = v.object({
       `在庫数は${Number.MAX_SAFE_INTEGER}以下で入力してください`,
     ),
   ),
-  image: v.pipe(
-    v.string("商品画像は文字列で入力してください"),
-    v.url("商品画像は画像URLで入力してください"),
-  ),
+  image: v.optional(v.pipe(v.string(), v.url())),
 })
 
 export const updateProductSchema = v.object({

app/crud/crud_orders.ts

@@ -7,11 +7,13 @@ const prisma = new PrismaClient()
 export async function createOrder(data: {
   table_number: number
   status: string
+  memo?: string
 }) {
   const order = await prisma.orders.create({
     data: {
       table_number: data.table_number,
       status: data.status,
+      memo: data.memo || "",
     },
   })
   return order

app/crud/crud_products.ts

@@ -1,13 +1,17 @@
 //Productsの操作
 import { PrismaClient } from "@prisma/client"
 import { TypeProduct } from "~/type/typeproduct"
+import noImage from "~/assets/images/no_image.png?url"
 
 const prisma = new PrismaClient()
 
 //productの追加
 export async function createProduct(data: Omit<TypeProduct, "product_id">) {
   return await prisma.products.create({
-    data,
+    data: {
+      ...data,
+      image: data.image ?? noImage,
+    },
   })
 }
 
@@ -25,7 +29,10 @@ export async function updateProduct(
     where: {
       product_id: product_id,
     },
-    data,
+    data: {
+      ...data,
+      image: data.image ?? noImage,
+    },
   })
 }
 

app/routes/header.tsx

@@ -1,4 +1,4 @@
-import { Flex, Heading, Text, useDisclosure } from "@chakra-ui/react"
+import { Heading, HStack, Text, useDisclosure } from "@chakra-ui/react"
 import { Link, useNavigate } from "@remix-run/react"
 import { useCallback } from "react"
 import { MenuIconButton } from "~/components/atoms/button/MenuIconButton"
@@ -31,7 +31,13 @@ export default function Header() {
 
   return (
     <>
-      <Flex bg="blackAlpha.100" padding={{ base: 3, lg: 5 }}>
+      <HStack
+        bg="blackAlpha.100"
+        padding={4}
+        gap={4}
+        backdropFilter="auto"
+        backdropBlur="lg"
+      >
         <MenuIconButton onOpen={onOpen} />
         <Heading _hover={{ cursor: "pointer" }}>
           <Link to="/">
@@ -40,7 +46,7 @@ export default function Header() {
             </Text>
           </Link>
         </Heading>
-      </Flex>
+      </HStack>
       <MenuDrawer
         onClose={onClose}
         isOpen={isOpen}

app/routes/kitchen.tsx

@@ -62,10 +62,15 @@ export default function Kitchen() {
           const filteredProducts = products.filter((product) =>
             productIds.includes(product.product_id),
           )
-          const productNames = filteredProducts.map(
-            (product) => product.product_name,
-          )
-          const quantities = filteredDetails.map((detail) => detail.quantity)
+          const orderItems = filteredDetails.map((detail) => {
+            const product = filteredProducts.find(
+              (p) => p.product_id === detail.product_id,
+            )
+            return {
+              productName: product?.product_name || "",
+              quantity: detail.quantity,
+            }
+          })
 
           const createTime = new Date(order.createTime).toLocaleString(
             "ja-JP",
@@ -84,10 +89,10 @@ export default function Kitchen() {
               <OrderCard
                 orderTime={createTime}
                 orderId={order.order_id}
-                productNames={productNames}
-                quantities={quantities}
+                orderItems={orderItems}
                 tableNumber={order.table_number}
                 status={order.status}
+                memo={order.memo}
               />
             </WrapItem>
           )

app/routes/reception.tsx

@@ -10,9 +10,9 @@ import {
   ModalCloseButton,
   ModalContent,
   ModalFooter,
-  ModalOverlay,
   Stack,
   Text,
+  Textarea,
   useDisclosure,
   VStack,
   Wrap,
@@ -51,6 +51,7 @@ export default function Reception() {
   const { products: products } = useLoaderData<typeof loader>()
   const [order, setOrder] = useState<TypeOrderDetail[]>([])
   const [total, setTotal] = useState(0)
+  const [orderMemo, setOrderMemo] = useState("")
   // const [decision, setDecision] = useState(false)
   const actionData = useActionData<ActionData>()
   const { showMessage } = useMessage()
@@ -77,6 +78,7 @@ export default function Reception() {
     if (actionData?.success === true) {
       setOrder([])
       setTotal(0)
+      setOrderMemo("")
       // setDecision(false)
       showMessage({ title: "注文しました", status: "success" })
       onClose()
@@ -147,6 +149,10 @@ export default function Reception() {
     setTableNumber(e.target.value)
   }
 
+  const handleMemoChange = (memo: string) => {
+    setOrderMemo(memo)
+  }
+
   return (
     <div>
       <Box left="10">
@@ -193,7 +199,6 @@ export default function Reception() {
       </div>
 
       <Modal isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
-        <ModalOverlay />
         <ModalContent pb={2}>
           <ModalCloseButton />
           <ModalBody mx={4}>
@@ -224,6 +229,14 @@ export default function Reception() {
                       bg="gray.300"
                     />
                   </Text>
+                  <Text mt={4}>注文メモ：</Text>
+                  <Textarea
+                    placeholder="注文全体に対する特別な指示があればこちらに入力してください"
+                    value={orderMemo}
+                    onChange={(e) => handleMemoChange(e.target.value)}
+                    size="sm"
+                    resize="vertical"
+                  />
                 </FormControl>
               </Stack>
               <Calculator total={total} />
@@ -243,6 +256,7 @@ export default function Reception() {
                 </div>
               ))}
               <Input type="hidden" value={tableNumber} name="table_number" />
+              <Input type="hidden" value={orderMemo} name="order_memo" />
               <Button type="submit" colorScheme="blue">
                 確定
               </Button>
@@ -267,13 +281,15 @@ export const action: ActionFunction = async ({
   const product_ids = formData.getAll("product_id").map(Number)
   const quantities = formData.getAll("quantity").map(Number)
   const table_number = Number(formData.get("table_number"))
+  const order_memo = formData.get("order_memo") as string
 
   if (table_number === 0) {
     return { success: false }
   } else {
     const order = await createOrder({
       table_number: table_number,
       status: "accept",
+      memo: order_memo,
     })
 
     const products = await readProduct()

app/routes/register.tsx

@@ -36,6 +36,7 @@ import { TypeProduct } from "~/type/typeproduct"
 import * as v from "valibot"
 import { SubmissionResult } from "@conform-to/react"
 import { useMessage } from "~/hooks/useMessage"
+import noImage from "~/assets/images/no_image.png?url"
 
 export const loader = async () => {
   const products = await readProduct()
@@ -115,18 +116,6 @@ export const action = async ({
         })
       }
       try {
-        const isExist = await existProduct(product.value.product_name)
-        if (isExist) {
-          return json({
-            method: "update",
-            success: false,
-            result: product.reply({
-              fieldErrors: {
-                product_name: ["同じ名前の商品がすでに存在します"],
-              },
-            }),
-          })
-        }
         await updateProduct(product.value.product_id, {
           product_name: product.value.product_name,
           price: product.value.price,
@@ -327,7 +316,10 @@ const ChangeProductModal: FC<{
             _method="update"
             submitText="変更"
             lastResult={lastResult}
-            defaultValue={product}
+            defaultValue={{
+              ...product,
+              image: product?.image === noImage ? "" : product?.image,
+            }}
           />
         </ModalBody>
       </ModalContent>

app/type/typedetail.ts

@@ -1,4 +1,5 @@
 export type TypeDetail = {
+  memo: string
   order_id: number
   product_id: number
   quantity: number

app/type/typeorder.ts

@@ -3,4 +3,5 @@ export type TypeOrder = {
   table_number: number
   status: string
   createTime: string
+  memo?: string
 }

app/type/typeproduct.ts

@@ -3,5 +3,5 @@ export type TypeProduct = {
   product_name: string
   price: number
   stock: number
-  image: string
+  image?: string
 }

prisma/migrations/20241120041352_add_memo_to_orders/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Orders" ADD COLUMN "memo" TEXT;

prisma/schema.prisma

@@ -17,6 +17,7 @@ model Orders {
   order_id     Int             @id @default(autoincrement())
   table_number Int
   status       String
+  memo         String?
   orderDetails Order_details[]
   createTime   DateTime        @default(now())
 }