Možnost příplatků u Pizza day objednávek

client/src/components/PizzaOrderList.tsx

@@ -1,49 +1,49 @@
-import React from "react";
 import { Table } from "react-bootstrap";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
 import { useAuth } from "../context/auth";
 import { Order, PizzaDayState, PizzaOrder } from "../types";
+import { updatePizzaFee } from "../Api";
+import PizzaOrderRow from "./PizzaOrderRow";
 
-export default function PizzaOrderList({ state, orders, onDelete }: { state: PizzaDayState, orders: Order[], onDelete: (pizzaOrder: PizzaOrder) => void }) {
+type Props = {
+    state: PizzaDayState,
+    orders: Order[],
+    onDelete: (pizzaOrder: PizzaOrder) => void,
+    creator: string,
+}
+
+export default function PizzaOrderList({ state, orders, onDelete, creator }: Props) {
     const auth = useAuth();
 
+    const saveFees = async (customer: string, text?: string, price?: number) => {
+        await updatePizzaFee(customer, text, price);
+    }
+
     if (!orders?.length) {
         return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
     }
 
-    const total = orders.map(order => order.pizzaList.map(o => o.price).reduce((total, i) => total + i)).reduce((total, i) => total + i);
+    const total = orders.reduce((total, order) => total + order.totalPrice, 0);
 
-    return <Table className="mt-3" striped bordered hover>
-        <thead>
-            <tr>
-                <th>Jméno</th>
-                <th>Objednávka</th>
-                <th>Poznámka</th>
-                <th>Cena</th>
-            </tr>
-        </thead>
-        <tbody>
-            {orders.map(order => <tr key={order.customer}>
-                <td>{order.customer}</td>
-                <td>{order.pizzaList.map<React.ReactNode>((pizzaOrder, index) =>
-                    <span key={index}>
-                        {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
-                        {auth?.login === order.customer && state === PizzaDayState.CREATED &&
-                            <FontAwesomeIcon onClick={() => {
-                                onDelete(pizzaOrder);
-                            }} title='Odstranit' className='trash-icon' icon={faTrashCan} />
-                        }
-                    </span>)
-                    .reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
-                </td>
-                <td>{order.note || '-'}</td>
-                <td>{order.totalPrice} Kč</td>
-            </tr>)}
-            <tr style={{ fontWeight: 'bold' }}>
-                <td colSpan={3}>Celkem</td>
-                <td>{`${total} Kč`}</td>
-            </tr>
-        </tbody>
-    </Table>
+    return <>
+        <Table className="mt-3" striped bordered hover>
+            <thead>
+                <tr>
+                    <th>Jméno</th>
+                    <th>Objednávka</th>
+                    <th>Poznámka</th>
+                    <th>Příplatek</th>
+                    <th>Cena</th>
+                </tr>
+            </thead>
+            <tbody>
+                {orders.map(order => <tr key={order.customer}>
+                    <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
+                </tr>)}
+                <tr style={{ fontWeight: 'bold' }}>
+                    <td colSpan={4}>Celkem</td>
+                    <td>{`${total} Kč`}</td>
+                </tr>
+            </tbody>
+        </Table>
+    </>
 }