Files
lst/lstV2/frontend/src/components/ocme/ManuallyEnterRn.tsx

107 lines
4.0 KiB
TypeScript

import { useForm } from "@tanstack/react-form";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import axios from "axios";
import { toast } from "sonner";
import { Button } from "../ui/button";
import { useState } from "react";
export default function ManuallyEnterRn() {
const [sending, setSendingRn] = useState(false);
const form = useForm({
defaultValues: {
runningNr: "",
},
onSubmit: async ({ value }) => {
console.log(value);
setSendingRn(true);
try {
const res = await axios.post("/ocme/api/v1/postRunningNumber", {
runningNr: value.runningNr,
areaFrom: "wrapper_1",
completed: true,
});
if (res.data.success) {
form.reset();
toast.success(
`${value.runningNr} was just created please login`
);
setTimeout(() => {
setSendingRn(false);
}, 3 * 1000);
}
if (!res.data.success) {
toast.error(res.data.message);
setTimeout(() => {
setSendingRn(false);
}, 3 * 1000);
}
} catch (error) {
//console.log(error);
toast.error("There was an error registering");
setTimeout(() => {
setSendingRn(false);
}, 3 * 1000);
}
},
});
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
//e.stopPropagation();
}}
>
<form.Field
name="runningNr"
validators={{
// We can choose between form-wide and field-specific validators
onChange: ({ value }) =>
value.length > 3
? undefined
: "pallet number must be greater than 4 numbers",
}}
children={(field) => {
return (
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
<div>
<Label htmlFor="runningNr" className="mb-2">
Running 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>
<div className="ml-1 mt-5">
<Button
className="ml-1"
type="submit"
onClick={form.handleSubmit}
disabled={sending}
>
Submit
</Button>
</div>
</div>
);
}}
/>
</form>
</div>
);
}