From f7f64562ab5e5d0c5b86b8b859df3e73e39bf9d9 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 13 Mar 2025 20:11:24 +0700
Subject: [PATCH] feat: implement planting and harvest details forms with
 submission handling

---
 frontend/app/(sidebar)/setup/page.tsx         | 114 ++++++++++++++++--
 .../(sidebar)/setup/planting-detail-form.tsx  |  79 ++++++++++--
 2 files changed, 175 insertions(+), 18 deletions(-)

diff --git a/frontend/app/(sidebar)/setup/page.tsx b/frontend/app/(sidebar)/setup/page.tsx
index e766fd0..80eed7a 100644
--- a/frontend/app/(sidebar)/setup/page.tsx
+++ b/frontend/app/(sidebar)/setup/page.tsx
@@ -1,34 +1,130 @@
+"use client";
+import { SetStateAction, useEffect, useState } from "react";
 import PlantingDetailsForm from "./planting-detail-form";
 import HarvestDetailsForm from "./harvest-detail-form";
 import { Separator } from "@/components/ui/separator";
 import GoogleMapWithDrawing from "@/components/google-map-with-drawing";
 
 export default function SetupPage() {
+  type PlantingDetails = {
+    daysToEmerge: number;
+    plantSpacing: number;
+    rowSpacing: number;
+    plantingDepth: number;
+    averageHeight: number;
+    isPerennial: boolean;
+    autoCreateTasks: boolean;
+    startMethod?: string;
+    lightProfile?: string;
+    soilConditions?: string;
+    plantingDetails?: string;
+    pruningDetails?: string;
+  };
+
+  const [plantingDetails, setPlantingDetails] =
+    useState<PlantingDetails | null>(null);
+  const [harvestDetails, setHarvestDetails] = useState(null);
+  const [mapData, setMapData] = useState(null);
+
+  // handle planting details submission
+  const handlePlantingDetailsChange = (data: {
+    daysToEmerge: number;
+    plantSpacing: number;
+    rowSpacing: number;
+    plantingDepth: number;
+    averageHeight: number;
+    isPerennial: boolean;
+    autoCreateTasks: boolean;
+    startMethod?: string;
+    lightProfile?: string;
+    soilConditions?: string;
+    plantingDetails?: string;
+    pruningDetails?: string;
+  }) => {
+    setPlantingDetails(data);
+  };
+
+  // handle harvest details submission
+  const handleHarvestDetailsChange = (data: SetStateAction<null>) => {
+    setHarvestDetails(data);
+  };
+
+  // handle map area selection
+  const handleMapDataChange = (data: SetStateAction<null>) => {
+    setMapData(data);
+  };
+
+  useEffect(() => {
+    console.log(plantingDetails);
+  }, [plantingDetails]);
+
+  const handleSubmit = () => {
+    if (!plantingDetails || !harvestDetails || !mapData) {
+      alert("Please complete all sections before submitting.");
+      return;
+    }
+
+    const formData = {
+      plantingDetails,
+      harvestDetails,
+      mapData,
+    };
+
+    console.log("Form data to be submitted:", formData);
+
+    fetch("/api/submit", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Response from backend:", data);
+      })
+      .catch((error) => {
+        console.error("Error submitting form:", error);
+      });
+  };
+
   return (
     <div className="p-5">
-      <div className=" flex justify-center">
-        <h1 className="flex text-2xl ">Plating Details</h1>
+      {/* Planting Details Section */}
+      <div className="flex justify-center">
+        <h1 className="text-2xl">Planting Details</h1>
       </div>
       <Separator className="mt-3" />
       <div className="mt-10 flex justify-center">
-        <PlantingDetailsForm />
+        <PlantingDetailsForm onChange={handlePlantingDetailsChange} />
       </div>
-      <div className=" flex justify-center mt-20">
-        <h1 className="flex text-2xl ">Harvest Details</h1>
+
+      {/* Harvest Details Section */}
+      <div className="flex justify-center mt-20">
+        <h1 className="text-2xl">Harvest Details</h1>
       </div>
       <Separator className="mt-3" />
       <div className="mt-10 flex justify-center">
-        <HarvestDetailsForm />
+        {/* <HarvestDetailsForm onChange={handleHarvestDetailsChange} /> */}
       </div>
+
+      {/* Map Section */}
       <div className="mt-10">
-        <div className=" flex justify-center mt-20">
-          <h1 className="flex text-2xl ">Map</h1>
+        <div className="flex justify-center mt-20">
+          <h1 className="text-2xl">Map</h1>
         </div>
         <Separator className="mt-3" />
         <div className="mt-10">
-          <GoogleMapWithDrawing />
+          {/* <GoogleMapWithDrawing onAreaSelected={handleMapDataChange} /> */}
         </div>
       </div>
+
+      {/* Submit Button */}
+      <div className="mt-10 flex justify-center">
+        <button onClick={handleSubmit} className="btn btn-primary">
+          Submit All Data
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(sidebar)/setup/planting-detail-form.tsx b/frontend/app/(sidebar)/setup/planting-detail-form.tsx
index 7928650..a75f606 100644
--- a/frontend/app/(sidebar)/setup/planting-detail-form.tsx
+++ b/frontend/app/(sidebar)/setup/planting-detail-form.tsx
@@ -23,11 +23,30 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
+import { useState } from "react";
 
 type plantingSchema = z.infer<typeof plantingDetailsFormSchema>;
+interface FormData {
+  daysToEmerge: number;
+  plantSpacing: number;
+  rowSpacing: number;
+  plantingDepth: number;
+  averageHeight: number;
+  startMethod?: string;
+  lightProfile?: string;
+  soilConditions?: string;
+  plantingDetails?: string;
+  pruningDetails?: string;
+  isPerennial: boolean;
+  autoCreateTasks: boolean;
+}
 
-export default function PlantingDetailsForm() {
-  const form = useForm<plantingSchema>({
+export default function PlantingDetailsForm({
+  onChange,
+}: {
+  onChange: (data: plantingSchema) => void;
+}) {
+  const form = useForm({
     resolver: zodResolver(plantingDetailsFormSchema),
     defaultValues: {
       daysToEmerge: 0,
@@ -44,9 +63,16 @@ export default function PlantingDetailsForm() {
       autoCreateTasks: false,
     },
   });
+
+  const onSubmit = (data: FormData) => {
+    onChange(data);
+  };
   return (
     <Form {...form}>
-      <form className="grid grid-cols-3 gap-5">
+      <form
+        className="grid grid-cols-3 gap-5"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
         <FormField
           control={form.control}
           name="daysToEmerge"
@@ -61,6 +87,13 @@ export default function PlantingDetailsForm() {
                       id="daysToEmerge"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -83,6 +116,13 @@ export default function PlantingDetailsForm() {
                       id="plantSpacing"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -105,6 +145,13 @@ export default function PlantingDetailsForm() {
                       id="rowSpacing"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -129,6 +176,13 @@ export default function PlantingDetailsForm() {
                       id="plantingDepth"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -153,6 +207,13 @@ export default function PlantingDetailsForm() {
                       id="averageHeight"
                       className="w-96"
                       {...field}
+                      onChange={(e) => {
+                        // convert to number
+                        const value = e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : "";
+                        field.onChange(value);
+                      }}
                     />
                   </div>
                 </div>
@@ -201,9 +262,9 @@ export default function PlantingDetailsForm() {
                     <SelectValue placeholder="Select light profile" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="xp">Seed</SelectItem>
-                    <SelectItem value="xa">Transplant</SelectItem>
-                    <SelectItem value="xz">Cutting</SelectItem>
+                    <SelectItem value="Seed">Seed</SelectItem>
+                    <SelectItem value="Transplant">Transplant</SelectItem>
+                    <SelectItem value="Cutting">Cutting</SelectItem>
                   </SelectContent>
                 </Select>
               </FormControl>
@@ -228,9 +289,9 @@ export default function PlantingDetailsForm() {
                     <SelectValue placeholder="Select a soil condition" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="xp">Seed</SelectItem>
-                    <SelectItem value="xa">Transplant</SelectItem>
-                    <SelectItem value="xz">Cutting</SelectItem>
+                    <SelectItem value="Seed">Seed</SelectItem>
+                    <SelectItem value="Transplant">Transplant</SelectItem>
+                    <SelectItem value="Cutting">Cutting</SelectItem>
                   </SelectContent>
                 </Select>
               </FormControl>