feat(silo attached detach): added in silo attach detach setup in the silo card

2025-06-23 12:00:28 -05:00
parent d6d19f8e5b
commit 2ac48138cb
22 changed files with 1362 additions and 598 deletions
--- a/frontend/src/components/logistics/siloAdjustments/DetachSilo.tsx
+++ b/frontend/src/components/logistics/siloAdjustments/DetachSilo.tsx
@@ -0,0 +1,145 @@
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { useAppForm } from "@/utils/formStuff";
+import { getMachineConnected } from "@/utils/querys/logistics/machineConnected";
+import { getMachineNotConnected } from "@/utils/querys/logistics/notConnected";
+
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function DetachSilo(props: any) {
+    const [open, setOpen] = useState(false);
+    const { data, isError, isLoading, refetch } = useQuery(
+        getMachineConnected({
+            siloID: props.silo.LocationID,
+            connectionType: "connected",
+        })
+    );
+
+    const { refetch: notConnected } = useQuery(
+        getMachineNotConnected({
+            siloID: props.silo.LocationID,
+            connectionType: "detached",
+        })
+    );
+
+    const form = useAppForm({
+        defaultValues: {
+            laneId: props.silo.LocationID,
+            machineId: 0,
+        },
+        onSubmit: async ({ value }) => {
+            try {
+                const res = await axios.post(
+                    "/api/logistics/detachsilo",
+                    value
+                );
+
+                if (res.status === 200) {
+                    toast.success(res.data.message);
+
+                    refetch();
+                    notConnected();
+                    form.reset();
+                    setOpen(!open);
+                } else {
+                    console.log(res.data);
+                    toast.error(res.data.message);
+                    refetch();
+                    form.reset();
+                    setOpen(!open);
+                }
+            } catch (error) {
+                console.log(error);
+                toast.error(
+                    "There was an error detaching the silo please try again, if persist please enter a helpdesk ticket."
+                );
+            }
+        },
+    });
+
+    if (isError)
+        return (
+            <div>
+                <p>There was an error loading data</p>
+            </div>
+        );
+
+    if (isLoading)
+        return (
+            <div>
+                <p>Loading....</p>
+            </div>
+        );
+
+    // convert the array that comes over to label and value
+    const tranMachine = data.map((i: any) => ({
+        value: i.machineId.toString(),
+        label: i.name,
+    }));
+    return (
+        <Dialog open={open}>
+            <DialogTrigger asChild>
+                <Button
+                    variant="outline"
+                    onClick={() => setOpen(!open)}
+                    disabled={data.length === 0}
+                >
+                    Detach Silo
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        form.handleSubmit();
+                    }}
+                >
+                    <DialogHeader>
+                        <DialogTitle>
+                            Attach silo for: {props.silo.Description}
+                        </DialogTitle>
+                        <DialogDescription>
+                            Select the machine you would like to detach.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4">
+                        <div className="grid gap-3">
+                            <div className="mt-2">
+                                <form.AppField
+                                    name="machineId"
+                                    children={(field) => (
+                                        <field.SelectField
+                                            label="Select Machine"
+                                            options={tranMachine}
+                                        />
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button variant="outline">Cancel</Button>
+                        </DialogClose>
+                        <form.AppForm>
+                            <form.SubmitButton>Detach</form.SubmitButton>
+                        </form.AppForm>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}