feat(siloadjustments): added email for comments :D
This commit is contained in:
120
frontend/src/components/logistics/siloAdjustments/Comment.tsx
Normal file
120
frontend/src/components/logistics/siloAdjustments/Comment.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function Comment(data: any) {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
comment: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`/api/logistics/postcomment/${data.id.split("&")[0]}`,
|
||||
{
|
||||
comment: value.comment,
|
||||
key: data.id.split("&")[1],
|
||||
},
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
form.reset();
|
||||
router.navigate({ to: "/siloAdjustments" });
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
form.reset();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error(`There was an error posting your comment.`);
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="">
|
||||
<LstCard>
|
||||
<CardHeader>
|
||||
Please enter your comment for the silo adjust
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="comment"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 10
|
||||
? undefined
|
||||
: "Comment must be longer than 10 characters.",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2">
|
||||
<Label
|
||||
htmlFor="comment"
|
||||
className="mb-2"
|
||||
>
|
||||
Comment
|
||||
</Label>
|
||||
<Textarea
|
||||
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>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={form.handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import Comment from "@/components/logistics/siloAdjustments/Comment";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute(
|
||||
"/(logistics)/siloAdjustments/comment/$comment"
|
||||
)({
|
||||
beforeLoad: async () => {
|
||||
const auth = localStorage.getItem("auth_token");
|
||||
if (!auth) {
|
||||
throw redirect({
|
||||
to: "/login",
|
||||
search: {
|
||||
// Use the current location to power a redirect after login
|
||||
// (Do not use `router.state.resolvedLocation` as it can
|
||||
// potentially lag behind the actual current location)
|
||||
redirect: location.pathname + location.search,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// In a loader
|
||||
loader: ({ params }) => params.comment,
|
||||
// Or in a component
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { comment } = Route.useParams();
|
||||
return (
|
||||
<div className="ml-20 mt-20">
|
||||
<Comment id={comment} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
frontend/src/utils/formStuff/options/InputField.tsx
Normal file
32
frontend/src/utils/formStuff/options/InputField.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
//import { Input } from "@/components/ui/input";
|
||||
//import { Label } from "@radix-ui/react-dropdown-menu";
|
||||
|
||||
// export const FormInput = (form: any, label: string) => {
|
||||
// // <form.Field
|
||||
// // name="username"
|
||||
// // validators={{
|
||||
// // // We can choose between form-wide and field-specific validators
|
||||
// // onChange: ({ value }) =>
|
||||
// // value.length > 3
|
||||
// // ? undefined
|
||||
// // : "Username must be longer than 3 letters",
|
||||
// // }}
|
||||
// // children={(field) => {
|
||||
// // return (
|
||||
// // <div className="m-2 min-w-48 max-w-96 p-2">
|
||||
// // <Label htmlFor="username">{label}</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>
|
||||
// // );
|
||||
// // }}
|
||||
// // />;
|
||||
// };
|
||||
Reference in New Issue
Block a user