feat(quote-form): allow empty quantity input for operator convenience
- Updated the `DraftQuoteItem` interface to allow `quantity` to be an empty string, enabling operators to type counts directly without needing to delete a default value. - Modified the `QuoteFormItemCard` to handle empty input gracefully, falling back to 1 on submission if the field is left blank. - Adjusted the `addItem` function in `QuoteForm` to initialize `quantity` as an empty string, enhancing user experience during item addition.
This commit is contained in:
parent
8ed0952364
commit
bfcddb9d82
3 changed files with 19 additions and 3 deletions
BIN
.audit-screenshots/fix-08-new-quote-empty-qty.png
Normal file
BIN
.audit-screenshots/fix-08-new-quote-empty-qty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
|
|
@ -10,7 +10,12 @@ import { Textarea } from "@/components/ui/textarea";
|
|||
export interface DraftQuoteItem {
|
||||
id: string;
|
||||
description: string;
|
||||
quantity: number;
|
||||
/**
|
||||
* Line-item count the operator typed. Starts empty so the operator
|
||||
* can type e.g. "22" without having to delete a default "1" first.
|
||||
* Falls back to 1 on submit when left blank — see quote-form.tsx.
|
||||
*/
|
||||
quantity: number | "";
|
||||
notes: string;
|
||||
files: File[];
|
||||
/**
|
||||
|
|
@ -62,7 +67,15 @@ export function QuoteFormItemCard({ item, onChange, onRemove }: QuoteFormItemCar
|
|||
type="number"
|
||||
min={1}
|
||||
value={item.quantity}
|
||||
onChange={(e) => onChange({ quantity: Math.max(1, Number(e.target.value) || 1) })}
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value;
|
||||
// Empty input = "not entered yet". Submit falls back to 1.
|
||||
if (raw === "") {
|
||||
onChange({ quantity: "" });
|
||||
} else {
|
||||
onChange({ quantity: Math.max(1, Number(raw) || 1) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -106,7 +106,10 @@ export function QuoteForm({ open, onOpenChange, onSaved }: QuoteFormProps) {
|
|||
const addItem = () => {
|
||||
setItems([
|
||||
...items,
|
||||
{ id: crypto.randomUUID(), description: "", quantity: 1, notes: "", files: [], sku: "" },
|
||||
// Start with empty quantity so the operator can type the count
|
||||
// directly (e.g. "22") without first deleting a "1". The submit
|
||||
// path below falls back to 1 when the field is left blank.
|
||||
{ id: crypto.randomUUID(), description: "", quantity: "", notes: "", files: [], sku: "" },
|
||||
]);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue