mirror of
https://github.com/ForFarmTeam/ForFarm.git
synced 2025-12-19 22:14:08 +01:00
ui: add edit inventoty item ui
This commit is contained in:
Natthapol SERMSARAN
parent
7a56e69953
commit
f2b2f0fcbe
191
frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
Normal file
191
frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { CalendarIcon } from "lucide-react";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectLabel,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
// import { updateInventoryItem } from "@/api/inventory";
|
||||||
|
// import type { UpdateInventoryItemInput } from "@/types";
|
||||||
|
|
||||||
|
export function EditInventoryItem() {
|
||||||
|
const [date, setDate] = useState<Date | undefined>();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [itemName, setItemName] = useState("");
|
||||||
|
const [itemType, setItemType] = useState("");
|
||||||
|
const [itemCategory, setItemCategory] = useState("");
|
||||||
|
const [itemQuantity, setItemQuantity] = useState(0);
|
||||||
|
const [itemUnit, setItemUnit] = useState("");
|
||||||
|
|
||||||
|
// const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
// const mutation = useMutation({
|
||||||
|
// mutationFn: (item: UpdateInventoryItemInput) => UpdateInventoryItem(item),
|
||||||
|
// onSuccess: () => {
|
||||||
|
// // Invalidate queries to refresh inventory data.
|
||||||
|
// queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
|
||||||
|
// // Reset form fields and close dialog.
|
||||||
|
// setItemName("");
|
||||||
|
// setItemType("");
|
||||||
|
// setItemCategory("");
|
||||||
|
// setItemQuantity(0);
|
||||||
|
// setItemUnit("");
|
||||||
|
// setDate(undefined);
|
||||||
|
// setOpen(false);
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
// // Basic validation (you can extend this as needed)
|
||||||
|
// if (!itemName || !itemType || !itemCategory || !itemUnit) return;
|
||||||
|
// mutation.mutate({
|
||||||
|
// name: itemName,
|
||||||
|
// type: itemType,
|
||||||
|
// category: itemCategory,
|
||||||
|
// quantity: itemQuantity,
|
||||||
|
// unit: itemUnit,
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-yellow-500 hover:bg-yellow-600">Edit</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit Inventory Item</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Edit a plantation or fertilizer item in your inventory.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="name" className="text-right">
|
||||||
|
Name
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
className="col-span-3"
|
||||||
|
value={itemName}
|
||||||
|
onChange={(e) => setItemName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="type" className="text-right">
|
||||||
|
Type
|
||||||
|
</Label>
|
||||||
|
<Select value={itemType} onValueChange={setItemType}>
|
||||||
|
<SelectTrigger className="col-span-3">
|
||||||
|
<SelectValue placeholder="Select type" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
<SelectLabel>Type</SelectLabel>
|
||||||
|
<SelectItem value="plantation">Plantation</SelectItem>
|
||||||
|
<SelectItem value="fertilizer">Fertilizer</SelectItem>
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="category" className="text-right">
|
||||||
|
Category
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="category"
|
||||||
|
className="col-span-3"
|
||||||
|
placeholder="e.g., Seeds, Organic"
|
||||||
|
value={itemCategory}
|
||||||
|
onChange={(e) => setItemCategory(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="quantity" className="text-right">
|
||||||
|
Quantity
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="quantity"
|
||||||
|
type="number"
|
||||||
|
className="col-span-3"
|
||||||
|
value={itemQuantity}
|
||||||
|
onChange={(e) => setItemQuantity(Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="unit" className="text-right">
|
||||||
|
Unit
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="unit"
|
||||||
|
className="col-span-3"
|
||||||
|
placeholder="e.g., kg, packets"
|
||||||
|
value={itemUnit}
|
||||||
|
onChange={(e) => setItemUnit(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 items-center gap-4">
|
||||||
|
<Label htmlFor="date" className="text-right">
|
||||||
|
Date
|
||||||
|
</Label>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"col-span-3 justify-start text-left font-normal",
|
||||||
|
!date && "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{date ? format(date, "PPP") : "Pick a date"}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={date}
|
||||||
|
onSelect={setDate}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="submit" onClick={handleEdit}>
|
||||||
|
Edit Item
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user