From 7804e44b85eaa28b090564636f778d534d7e2354 Mon Sep 17 00:00:00 2001
From: "kartik.sharma" <kartik.sharma@marcoaiot.com>
Date: Sat, 24 May 2025 15:54:31 +0530
Subject: [PATCH] Error message in Manage floor popup in Infrastructure.

---
 .../Project/Infrastructure/FloorModel.jsx     | 147 ++++++++----------
 1 file changed, 68 insertions(+), 79 deletions(-)

diff --git a/src/components/Project/Infrastructure/FloorModel.jsx b/src/components/Project/Infrastructure/FloorModel.jsx
index f41cbbe8..830a4f9c 100644
--- a/src/components/Project/Infrastructure/FloorModel.jsx
+++ b/src/components/Project/Infrastructure/FloorModel.jsx
@@ -2,17 +2,18 @@ import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { getCachedData } from "../../../slices/apiDataManager";
 import showToast from "../../../services/toastService";
 
-// Zod validation schema
 const floorSchema = z.object({
-  buildingId: z.string().min(1, "Building is required"),
-  id: z.string().min(1, "Floor is required").optional(),
+  buildingId: z
+    .string()
+    .refine((val) => val !== "0", {
+      message: "Building is required",
+    }),
+  id: z.string().optional(),
   floorName: z.string().min(1, "Floor Name is required"),
 });
 
-// Default model
 const defaultModel = {
   id: "0",
   floorName: "",
@@ -30,12 +31,10 @@ const FloorModel = ({
   const [selectedBuilding, setSelectedBuilding] = useState({});
   const [buildings, setBuildings] = useState(project?.buildings || []);
 
-  // Initialize the form with React Hook Form
   const {
     register,
     handleSubmit,
     setValue,
-    getValues,
     reset,
     formState: { errors },
   } = useForm({
@@ -50,10 +49,10 @@ const FloorModel = ({
     }
   }, [clearTrigger, onClearComplete, reset]);
 
-  // Handle building selection change
   const handleBuildigChange = (e) => {
     const buildingId = e.target.value;
     const building = buildings.find((b) => b.id === String(buildingId));
+
     if (building) {
       setSelectedBuilding(building);
       setFormData({
@@ -61,8 +60,8 @@ const FloorModel = ({
         floorName: "",
         buildingId: building.id,
       });
-      setValue("buildingId", building.id); // Set value for validation
-      setValue("id", "0"); // Reset floorId when changing building
+      setValue("buildingId", building.id, { shouldValidate: true }); // ✅ trigger validation
+      setValue("id", "0");
     } else {
       setSelectedBuilding({});
       setFormData({
@@ -70,14 +69,14 @@ const FloorModel = ({
         floorName: "",
         buildingId: "0",
       });
-      setValue("buildingId", "0");
+      setValue("buildingId", "0", { shouldValidate: true }); // ✅ trigger validation
     }
   };
 
-  // Handle floor selection change
   const handleFloorChange = (e) => {
     const id = e.target.value;
-    const floor = selectedBuilding.floors.find((b) => b.id === String(id));
+    const floor = selectedBuilding.floors?.find((b) => b.id === String(id));
+
     if (floor) {
       setFormData({
         id: floor.id,
@@ -95,15 +94,14 @@ const FloorModel = ({
     }
   };
 
-  // Handle form submission
   const onFormSubmit = (data) => {
-    if(data.id == "0"){
+    if (data.id === "0") {
       data.id = null;
     }
+
     onSubmit(data);
-    reset({
-      floorName: "",
-    });
+    reset({ floorName: "" });
+
     if (data.id !== null) {
       showToast("Floor updated successfully.", "success");
     } else {
@@ -141,17 +139,14 @@ const FloorModel = ({
                   {buildings?.length > 0 &&
                     buildings
                       .filter((building) => building?.name)
-                      .sort((a, b) => {
-                        const nameA = a.name || "";
-                        const nameB = b.name || "";
-                        return nameA?.localeCompare(nameB);
-                      })
+                      .sort((a, b) =>
+                        (a.name || "").localeCompare(b.name || "")
+                      )
                       .map((building) => (
                         <option key={building.id} value={building.id}>
                           {building.name}
                         </option>
                       ))}
-
                   {buildings?.length === 0 && (
                     <option disabled>No buildings found</option>
                   )}
@@ -162,63 +157,57 @@ const FloorModel = ({
               </div>
 
               {formData.buildingId !== "0" && (
-                <div className="col-12 col-md-12">
-                  <label className="form-label">Select Floor</label>
-                  <select
-                    id="id"
-                    className="select2 form-select form-select-sm"
-                    aria-label="Select Floor"
-                    {...register("id")}
-                    onChange={handleFloorChange}
-                  >
-                    <option value="0">Add New Floor</option>
-                    {/* {selectedBuilding?.floors?.map((floor) => (
-                      <option key={floor.id} value={floor.id}>
-                        {floor.floorName}
-                      </option>
-                    ) )} */}
-
-                    {selectedBuilding &&
-                      selectedBuilding.floors?.length > 0 &&
-                      [...selectedBuilding.floors]
-                        .filter((floor) => floor?.floorName) 
-                        .sort((a, b) => {
-                          const nameA = a.floorName || ""; 
-                          const nameB = b.floorName || "";
-                          return nameA?.localeCompare(nameB);
-                        })
-                        .map((floor) => (
-                          <option key={floor.id} value={floor.id}>
-                            {floor.floorName}
-                          </option>
-                        ))}
-
-                    {selectedBuilding?.floors?.length === 0 && (
-                      <option disabled>No floors found</option>
+                <>
+                  <div className="col-12 col-md-12">
+                    <label className="form-label">Select Floor</label>
+                    <select
+                      id="id"
+                      className="select2 form-select form-select-sm"
+                      aria-label="Select Floor"
+                      {...register("id")}
+                      onChange={handleFloorChange}
+                    >
+                      <option value="0">Add New Floor</option>
+                      {selectedBuilding?.floors?.length > 0 &&
+                        [...selectedBuilding.floors]
+                          .filter((floor) => floor?.floorName)
+                          .sort((a, b) =>
+                            (a.floorName || "").localeCompare(
+                              b.floorName || ""
+                            )
+                          )
+                          .map((floor) => (
+                            <option key={floor.id} value={floor.id}>
+                              {floor.floorName}
+                            </option>
+                          ))}
+                      {selectedBuilding?.floors?.length === 0 && (
+                        <option disabled>No floors found</option>
+                      )}
+                    </select>
+                    {errors.id && (
+                      <p className="text-danger">{errors.id.message}</p>
                     )}
-                  </select>
-                  {errors.id && (
-                    <p className="text-danger">{errors.id.message}</p>
-                  )}
-                </div>
-              )}
+                  </div>
 
-              {formData.buildingId !== "0" && (
-                <div className="col-12 col-md-12">
-                  <label className="form-label" >
-                    {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
-                  </label>
-                  <input
-                    type="text"
-                    id="floorName"
-                    className="form-control form-control-sm me-2"
-                    placeholder="Floor Name"
-                    {...register("floorName")}
-                  />
-                  {errors.floorName && (
-                    <p className="text-danger">{errors.floorName.message}</p>
-                  )}
-                </div>
+                  <div className="col-12 col-md-12">
+                    <label className="form-label">
+                      {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
+                    </label>
+                    <input
+                      type="text"
+                      id="floorName"
+                      className="form-control form-control-sm me-2"
+                      placeholder="Floor Name"
+                      {...register("floorName")}
+                    />
+                    {errors.floorName && (
+                      <p className="text-danger">
+                        {errors.floorName.message}
+                      </p>
+                    )}
+                  </div>
+                </>
               )}
 
               <div className="col-12 text-center">