David/JEISA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[dyad] Added search functionality to item dropdown - wrote 1 file(s)

Browse source
This commit is contained in:
[dyad] 2025-09-12 16:10:10 +02:00
parent 4ea97b66a6
commit 3ec04c24a3
1 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/purchase-orders/PurchaseOrderForm.tsx
View file

@ -67,6 +67,7 @@ type StockItem = {
export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormProps) {
const [suppliers, setSuppliers] = useState<Supplier[]>([]) // State to hold suppliers
const [stockItems, setStockItems] = useState<StockItem[]>([]) // State to hold stock items
const [searchTerm, setSearchTerm] = useState(""); // State for search term
// Fetch suppliers when the component mounts
const fetchSuppliers = useCallback(async () => {
@ -191,8 +192,6 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
supplier: selectedSupplier.id, // This will be the relation to the suppliers collection
orderDate: values.orderDate.toISOString(),
status: "Pending Approval",
// Ensure the structure matches what your PocketBase 'purchase_orders' collection expects for 'items'
// Based on your schema, it seems 'embedded_items' is used for storing item details directly.
embedded_items: values.items.map(item => ({
stockItemId: item.stockItemId,
itemName: item.itemName,
@ -200,7 +199,7 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
sku: item.sku,
costPrice: item.costPrice,
})),
quantities: values.items.map(item => item.quantity), // Keep quantities array as well if needed elsewhere
quantities: values.items.map(item => item.quantity),
};
await pb.collection('purchase_orders').create(purchaseOrderData);
@ -214,6 +213,12 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
}
}
// Filter stock items based on search term
const filteredStockItems = stockItems.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.sku.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@ -276,7 +281,7 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
<FormLabel>Item Name</FormLabel>
<Select
onValueChange={(selectedValue) => handleStockItemSelect(index, selectedValue)}
value={field.value} // Set the current value of the item name
value={field.value}
>
<FormControl>
<SelectTrigger>
@ -284,11 +289,24 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
</SelectTrigger>
</FormControl>
<SelectContent>
{stockItems.map((stockItem) => (
<SelectItem key={stockItem.id} value={stockItem.name}>
{stockItem.name}
</SelectItem>
))}
{/* Search Input */}
<div className="p-2">
<Input
placeholder="Search items..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="h-8"
/>
</div>
{filteredStockItems.length > 0 ? (
filteredStockItems.map((stockItem) => (
<SelectItem key={stockItem.id} value={stockItem.name}>
{stockItem.name}
</SelectItem>
))
) : (
<SelectItem value="" disabled>No items found</SelectItem>
)}
</SelectContent>
</Select>
<FormMessage />
@ -302,7 +320,6 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
<FormItem>
<FormLabel>SKU</FormLabel>
<FormControl>
{/* Display SKU, but it's managed by handleStockItemSelect */}
<Input {...field} readOnly placeholder="SKU" />
</FormControl>
<FormMessage />