63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { OrderStateColumns } from "@/lib/types";
|
||
|
|
import { cancelOrderApi, completeOrderApi } from "@/app/order/action";
|
||
|
|
import { Button } from "./ui/button";
|
||
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
|
||
|
|
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer";
|
||
|
|
import { Pencil2Icon, TrashIcon } from "@radix-ui/react-icons";
|
||
|
|
|
||
|
|
export default function OrderCard({
|
||
|
|
order,
|
||
|
|
}: {
|
||
|
|
order: OrderStateColumns;
|
||
|
|
}) {
|
||
|
|
return <Card className="flex flex-col h-60">
|
||
|
|
<CardHeader className="relative">
|
||
|
|
<div className="absolute right-2">
|
||
|
|
<Drawer>
|
||
|
|
<DrawerTrigger asChild>
|
||
|
|
<Button variant="ghost" disabled={order.completed == 1}>
|
||
|
|
<TrashIcon />
|
||
|
|
</Button>
|
||
|
|
</DrawerTrigger>
|
||
|
|
<DrawerContent>
|
||
|
|
<DrawerHeader>
|
||
|
|
<DrawerTitle>
|
||
|
|
주문 취소
|
||
|
|
</DrawerTitle>
|
||
|
|
<DrawerDescription>
|
||
|
|
정말로 주문을 취소하시겠습니까?
|
||
|
|
</DrawerDescription>
|
||
|
|
</DrawerHeader>
|
||
|
|
<DrawerClose asChild>
|
||
|
|
<Button onClick={() => {
|
||
|
|
cancelOrderApi(order.id);
|
||
|
|
}}>취소</Button>
|
||
|
|
</DrawerClose>
|
||
|
|
</DrawerContent>
|
||
|
|
</Drawer>
|
||
|
|
</div>
|
||
|
|
<CardTitle className={order.completed == 1 ? "text-muted-foreground" : ""} >{order.id.split("/")[1]}번 주문</CardTitle>
|
||
|
|
<CardDescription>{order.completed ? "완료" : "대기중..."}</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="flex-1 overflow-scroll">
|
||
|
|
<hr />
|
||
|
|
{order.orders.map((item) => (
|
||
|
|
<div key={item.name}>
|
||
|
|
<span>{item.HOT ? "HOT" : "COLD"} {item.name} {item.quantity}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</CardContent>
|
||
|
|
<CardFooter>
|
||
|
|
<Button onClick={() => {
|
||
|
|
if (order.completed) {
|
||
|
|
completeOrderApi(order.id, false);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
completeOrderApi(order.id);
|
||
|
|
}
|
||
|
|
}}>{order.completed == 0 ? "완료" : "완료 취소"}</Button>
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
}
|