103 lines
4.0 KiB
TypeScript
103 lines
4.0 KiB
TypeScript
import { LstCard } from "@/components/extendedUI/LstCard";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { useForm } from "@tanstack/react-form";
|
|
import axios from "axios";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
export default function Bookin() {
|
|
const [bookingIn, setBookingIn] = useState(false);
|
|
const form = useForm({
|
|
defaultValues: { runningNr: " " },
|
|
onSubmit: async ({ value }) => {
|
|
// Do something with form data
|
|
setBookingIn(true);
|
|
|
|
try {
|
|
const res = await axios.post("/api/ocp/bookin", {
|
|
runningNr: parseInt(value.runningNr),
|
|
});
|
|
|
|
if (res.data.success) {
|
|
toast.success(res.data.message);
|
|
form.reset();
|
|
setBookingIn(false);
|
|
} else {
|
|
console.log(res.data.data.errors);
|
|
toast.error(res.data.data.errors[0]?.message);
|
|
form.reset();
|
|
setBookingIn(false);
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
toast.error(
|
|
"There was an error booking in pallet please validate you entered the correct info and try again."
|
|
);
|
|
setBookingIn(false);
|
|
}
|
|
},
|
|
});
|
|
return (
|
|
<LstCard>
|
|
<CardHeader>
|
|
<p>Book in a pallet by running number</p>
|
|
</CardHeader>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<form.Field
|
|
name="runningNr"
|
|
validators={{
|
|
// We can choose between form-wide and field-specific validators
|
|
onChange: ({ value }) =>
|
|
value.length > 2
|
|
? undefined
|
|
: "Please enter a valid running number",
|
|
}}
|
|
children={(field) => {
|
|
return (
|
|
<div className="m-2 min-w-48 max-w-96 p-2">
|
|
<Label htmlFor="runningNr" className="mb-2">
|
|
Runnning Number
|
|
</Label>
|
|
<Input
|
|
name={field.name}
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
type="number"
|
|
onChange={(e) =>
|
|
field.handleChange(e.target.value)
|
|
}
|
|
/>
|
|
{field.state.meta.errors.length ? (
|
|
<em>
|
|
{field.state.meta.errors.join(",")}
|
|
</em>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={form.handleSubmit}
|
|
disabled={bookingIn}
|
|
>
|
|
Book in
|
|
</Button>
|
|
</div>
|
|
</CardFooter>
|
|
</form>
|
|
</LstCard>
|
|
);
|
|
}
|