fix(ui): line-item number inputs — allow clearing the 0 (store raw string, coerce at totals/save), unify value alignment, widen Množství column

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-09 17:38:28 +02:00
parent a3948c7da1
commit 28186397a0
4 changed files with 104 additions and 75 deletions
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/src/admin/pages/InvoiceDetail.tsx
@@ -166,9 +166,13 @@ interface InvoiceItem {
  _key: string;
  description: string;
  item_description: string;
-  quantity: number;
+  // Held as the raw typed string while editing so the field can be cleared
+  // (empty renders fine in a type="number" input). Coerced via Number(x) || 0
+  // only where used (live totals + save payload). vat_rate stays numeric: it
+  // is edited via a Select, never a free-text number input.
+  quantity: string | number;
  unit: string;
-  unit_price: number;
+  unit_price: string | number;
  vat_rate: number;
 }

@@ -332,10 +336,8 @@ function SortableInvoiceRow({
          <TextField
            label="Množství"
            type="number"
-            value={item.quantity}
-            onChange={(e) =>
-              onUpdate(index, "quantity", Number(e.target.value))
-            }
+            value={item.quantity ?? ""}
+            onChange={(e) => onUpdate(index, "quantity", e.target.value)}
            slotProps={{ htmlInput: { min: "0", step: "any" } }}
          />
          <TextField
@@ -347,10 +349,8 @@ function SortableInvoiceRow({
          <TextField
            label="Jedn. cena"
            type="number"
-            value={item.unit_price}
-            onChange={(e) =>
-              onUpdate(index, "unit_price", Number(e.target.value))
-            }
+            value={item.unit_price ?? ""}
+            onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
            slotProps={{ htmlInput: { step: "any" } }}
          />
          {apply_vat && (
@@ -438,8 +438,8 @@ function SortableInvoiceRow({
      <TableCell>
        <TextField
          type="number"
-          value={item.quantity}
-          onChange={(e) => onUpdate(index, "quantity", Number(e.target.value))}
+          value={item.quantity ?? ""}
+          onChange={(e) => onUpdate(index, "quantity", e.target.value)}
          slotProps={{ htmlInput: { min: "0", step: "any" } }}
          sx={{ "& input": { textAlign: "center" } }}
        />
@@ -455,10 +455,8 @@ function SortableInvoiceRow({
      <TableCell>
        <TextField
          type="number"
-          value={item.unit_price}
-          onChange={(e) =>
-            onUpdate(index, "unit_price", Number(e.target.value))
-          }
+          value={item.unit_price ?? ""}
+          onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
          slotProps={{ htmlInput: { step: "any" } }}
          sx={{ "& input": { textAlign: "right" } }}
        />
@@ -1036,6 +1034,10 @@ export default function InvoiceDetail() {
          .filter((i) => i.description.trim())
          .map((item, i) => ({
            ...item,
+            // Coerce the raw typed strings back to numbers so an empty/partial
+            // field never reaches the server as NaN (mirrors createTotals).
+            quantity: Number(item.quantity) || 0,
+            unit_price: Number(item.unit_price) || 0,
            position: i,
          })),
      };
@@ -2065,7 +2067,7 @@ export default function InvoiceDetail() {
                          #
                        </TableCell>
                        <TableCell>Popis</TableCell>
-                        <TableCell sx={{ width: "5.5rem" }} align="center">
+                        <TableCell sx={{ width: "7rem" }} align="center">
                          Množství
                        </TableCell>
                        <TableCell sx={{ width: "5.5rem" }} align="center">
--- a/src/admin/pages/IssuedOrderDetail.tsx
+++ b/src/admin/pages/IssuedOrderDetail.tsx
@@ -141,9 +141,13 @@ interface OrderItem {
  _key: string;
  description: string;
  item_description: string;
-  quantity: number;
+  // Held as the raw typed string while editing so the field can be cleared
+  // (empty renders fine in a type="number" input). Coerced via Number(x) || 0
+  // only where used (live totals + save payload). vat_rate stays numeric: it
+  // is edited via a Select, never a free-text number input.
+  quantity: string | number;
  unit: string;
-  unit_price: number;
+  unit_price: string | number;
  vat_rate: number;
 }

@@ -284,10 +288,8 @@ function SortableOrderRow({
          <TextField
            label="Množství"
            type="number"
-            value={item.quantity}
-            onChange={(e) =>
-              onUpdate(index, "quantity", Number(e.target.value))
-            }
+            value={item.quantity ?? ""}
+            onChange={(e) => onUpdate(index, "quantity", e.target.value)}
            slotProps={{ htmlInput: { min: "0", step: "any" } }}
            InputProps={{ readOnly }}
          />
@@ -301,10 +303,8 @@ function SortableOrderRow({
          <TextField
            label="Jedn. cena"
            type="number"
-            value={item.unit_price}
-            onChange={(e) =>
-              onUpdate(index, "unit_price", Number(e.target.value))
-            }
+            value={item.unit_price ?? ""}
+            onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
            slotProps={{ htmlInput: { step: "any" } }}
            InputProps={{ readOnly }}
          />
@@ -401,8 +401,8 @@ function SortableOrderRow({
      <TableCell>
        <TextField
          type="number"
-          value={item.quantity}
-          onChange={(e) => onUpdate(index, "quantity", Number(e.target.value))}
+          value={item.quantity ?? ""}
+          onChange={(e) => onUpdate(index, "quantity", e.target.value)}
          slotProps={{ htmlInput: { min: "0", step: "any" } }}
          InputProps={{ readOnly }}
          sx={{ "& input": { textAlign: "center" } }}
@@ -420,10 +420,8 @@ function SortableOrderRow({
      <TableCell>
        <TextField
          type="number"
-          value={item.unit_price}
-          onChange={(e) =>
-            onUpdate(index, "unit_price", Number(e.target.value))
-          }
+          value={item.unit_price ?? ""}
+          onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
          slotProps={{ htmlInput: { step: "any" } }}
          InputProps={{ readOnly }}
          sx={{ "& input": { textAlign: "right" } }}
@@ -740,9 +738,11 @@ export default function IssuedOrderDetail() {
          .map((it, i) => ({
            description: it.description,
            item_description: it.item_description,
-            quantity: it.quantity,
+            // Coerce the raw typed strings back to numbers so an empty/partial
+            // field never reaches the server as NaN (mirrors the totals math).
+            quantity: Number(it.quantity) || 0,
            unit: it.unit,
-            unit_price: it.unit_price,
+            unit_price: Number(it.unit_price) || 0,
            vat_rate: it.vat_rate,
            position: i,
          })),
@@ -1135,7 +1135,7 @@ export default function IssuedOrderDetail() {
                          #
                        </TableCell>
                        <TableCell>Popis</TableCell>
-                        <TableCell sx={{ width: "5.5rem" }} align="center">
+                        <TableCell sx={{ width: "7rem" }} align="center">
                          Množství
                        </TableCell>
                        <TableCell sx={{ width: "5.5rem" }} align="center">
--- a/src/admin/pages/OfferDetail.tsx
+++ b/src/admin/pages/OfferDetail.tsx
@@ -87,9 +87,12 @@ interface OfferItem {
  id?: number;
  description: string;
  item_description: string;
-  quantity: number;
+  // Held as the raw typed string while editing so the field can be cleared
+  // (an empty string renders fine in a type="number" input). Coerced via
+  // Number(x) || 0 only where used (live totals + save payload).
+  quantity: string | number;
  unit: string;
-  unit_price: number;
+  unit_price: string | number;
  is_included_in_total: boolean;
 }

@@ -323,10 +326,11 @@ function SortableItemRow({
          <TextField
            label="Množství"
            type="number"
-            value={item.quantity}
-            onChange={(e) => onUpdate("quantity", parseInt(e.target.value, 10))}
+            value={item.quantity ?? ""}
+            onChange={(e) => onUpdate("quantity", e.target.value)}
            slotProps={{ htmlInput: { step: "1" } }}
            InputProps={{ readOnly }}
+            sx={{ "& input": { textAlign: "center" } }}
          />
          <TextField
            label="Jednotka"
@@ -337,10 +341,11 @@ function SortableItemRow({
          <TextField
            label="Jedn. cena"
            type="number"
-            value={item.unit_price}
-            onChange={(e) => onUpdate("unit_price", parseFloat(e.target.value))}
+            value={item.unit_price ?? ""}
+            onChange={(e) => onUpdate("unit_price", e.target.value)}
            slotProps={{ htmlInput: { step: "0.01" } }}
            InputProps={{ readOnly }}
+            sx={{ "& input": { textAlign: "right" } }}
          />
        </Box>
        <Box
@@ -437,10 +442,11 @@ function SortableItemRow({
      <TableCell>
        <TextField
          type="number"
-          value={item.quantity}
-          onChange={(e) => onUpdate("quantity", parseInt(e.target.value, 10))}
+          value={item.quantity ?? ""}
+          onChange={(e) => onUpdate("quantity", e.target.value)}
          slotProps={{ htmlInput: { step: "1" } }}
          InputProps={{ readOnly }}
+          sx={{ "& input": { textAlign: "center" } }}
        />
      </TableCell>
      <TableCell>
@@ -453,10 +459,11 @@ function SortableItemRow({
      <TableCell>
        <TextField
          type="number"
-          value={item.unit_price}
-          onChange={(e) => onUpdate("unit_price", parseFloat(e.target.value))}
+          value={item.unit_price ?? ""}
+          onChange={(e) => onUpdate("unit_price", e.target.value)}
          slotProps={{ htmlInput: { step: "0.01" } }}
          InputProps={{ readOnly }}
+          sx={{ "& input": { textAlign: "right" } }}
        />
      </TableCell>
      <TableCell align="center">
@@ -882,7 +889,14 @@ export default function OfferDetail() {
      const url = isEdit ? `${API_BASE}/offers/${id}` : `${API_BASE}/offers`;
      const payload: any = {
        ...form,
-        items: items.map((item, i) => ({ ...item, position: i })),
+        items: items.map((item, i) => ({
+          ...item,
+          // Coerce the raw typed strings back to numbers so an empty/partial
+          // field never reaches the server as NaN (mirrors the totals math).
+          quantity: Number(item.quantity) || 0,
+          unit_price: Number(item.unit_price) || 0,
+          position: i,
+        })),
        sections: sections.map((s, i) => ({ ...s, position: i })),
      };
      if (!isEdit) delete payload.quotation_number;
@@ -1524,7 +1538,7 @@ export default function OfferDetail() {
                        #
                      </TableCell>
                      <TableCell>Popis</TableCell>
-                      <TableCell sx={{ width: "5.5rem" }} align="center">
+                      <TableCell sx={{ width: "7rem" }} align="center">
                        Množství
                      </TableCell>
                      <TableCell sx={{ width: "5rem" }}>Jednotka</TableCell>