Error message work Properly.

This commit is contained in:
kartik.sharma 2025-05-24 16:05:16 +05:30
parent aa50aeff98
commit c9c970834d

View File

@ -2,17 +2,19 @@ import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { getCachedData } from "../../../slices/apiDataManager";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
// Zod validation schema // Updated Zod validation schema
const floorSchema = z.object({ const floorSchema = z.object({
buildingId: z.string().min(1, "Building is required"), buildingId: z
id: z.string().min(1, "Floor is required").optional(), .string()
.refine((val) => val !== "0", {
message: "Building is required",
}),
id: z.string().optional(),
floorName: z.string().min(1, "Floor Name is required"), floorName: z.string().min(1, "Floor Name is required"),
}); });
// Default model
const defaultModel = { const defaultModel = {
id: "0", id: "0",
floorName: "", floorName: "",
@ -30,12 +32,10 @@ const FloorModel = ({
const [selectedBuilding, setSelectedBuilding] = useState({}); const [selectedBuilding, setSelectedBuilding] = useState({});
const [buildings, setBuildings] = useState(project?.buildings || []); const [buildings, setBuildings] = useState(project?.buildings || []);
// Initialize the form with React Hook Form
const { const {
register, register,
handleSubmit, handleSubmit,
setValue, setValue,
getValues,
reset, reset,
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
@ -50,10 +50,10 @@ const FloorModel = ({
} }
}, [clearTrigger, onClearComplete, reset]); }, [clearTrigger, onClearComplete, reset]);
// Handle building selection change
const handleBuildigChange = (e) => { const handleBuildigChange = (e) => {
const buildingId = e.target.value; const buildingId = e.target.value;
const building = buildings.find((b) => b.id === String(buildingId)); const building = buildings.find((b) => b.id === String(buildingId));
if (building) { if (building) {
setSelectedBuilding(building); setSelectedBuilding(building);
setFormData({ setFormData({
@ -61,8 +61,8 @@ const FloorModel = ({
floorName: "", floorName: "",
buildingId: building.id, buildingId: building.id,
}); });
setValue("buildingId", building.id); // Set value for validation setValue("buildingId", building.id, { shouldValidate: true }); // trigger validation
setValue("id", "0"); // Reset floorId when changing building setValue("id", "0");
} else { } else {
setSelectedBuilding({}); setSelectedBuilding({});
setFormData({ setFormData({
@ -70,14 +70,14 @@ const FloorModel = ({
floorName: "", floorName: "",
buildingId: "0", buildingId: "0",
}); });
setValue("buildingId", "0"); setValue("buildingId", "0", { shouldValidate: true }); // trigger validation
} }
}; };
// Handle floor selection change
const handleFloorChange = (e) => { const handleFloorChange = (e) => {
const id = e.target.value; 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) { if (floor) {
setFormData({ setFormData({
id: floor.id, id: floor.id,
@ -95,15 +95,14 @@ const FloorModel = ({
} }
}; };
// Handle form submission
const onFormSubmit = (data) => { const onFormSubmit = (data) => {
if(data.id == "0"){ if (data.id === "0") {
data.id = null; data.id = null;
} }
onSubmit(data); onSubmit(data);
reset({ reset({ floorName: "" });
floorName: "",
});
if (data.id !== null) { if (data.id !== null) {
showToast("Floor updated successfully.", "success"); showToast("Floor updated successfully.", "success");
} else { } else {
@ -141,17 +140,14 @@ const FloorModel = ({
{buildings?.length > 0 && {buildings?.length > 0 &&
buildings buildings
.filter((building) => building?.name) .filter((building) => building?.name)
.sort((a, b) => { .sort((a, b) =>
const nameA = a.name || ""; (a.name || "").localeCompare(b.name || "")
const nameB = b.name || ""; )
return nameA?.localeCompare(nameB);
})
.map((building) => ( .map((building) => (
<option key={building.id} value={building.id}> <option key={building.id} value={building.id}>
{building.name} {building.name}
</option> </option>
))} ))}
{buildings?.length === 0 && ( {buildings?.length === 0 && (
<option disabled>No buildings found</option> <option disabled>No buildings found</option>
)} )}
@ -162,6 +158,7 @@ const FloorModel = ({
</div> </div>
{formData.buildingId !== "0" && ( {formData.buildingId !== "0" && (
<>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Select Floor</label> <label className="form-label">Select Floor</label>
<select <select
@ -172,27 +169,19 @@ const FloorModel = ({
onChange={handleFloorChange} onChange={handleFloorChange}
> >
<option value="0">Add New Floor</option> <option value="0">Add New Floor</option>
{/* {selectedBuilding?.floors?.map((floor) => ( {selectedBuilding?.floors?.length > 0 &&
<option key={floor.id} value={floor.id}>
{floor.floorName}
</option>
) )} */}
{selectedBuilding &&
selectedBuilding.floors?.length > 0 &&
[...selectedBuilding.floors] [...selectedBuilding.floors]
.filter((floor) => floor?.floorName) .filter((floor) => floor?.floorName)
.sort((a, b) => { .sort((a, b) =>
const nameA = a.floorName || ""; (a.floorName || "").localeCompare(
const nameB = b.floorName || ""; b.floorName || ""
return nameA?.localeCompare(nameB); )
}) )
.map((floor) => ( .map((floor) => (
<option key={floor.id} value={floor.id}> <option key={floor.id} value={floor.id}>
{floor.floorName} {floor.floorName}
</option> </option>
))} ))}
{selectedBuilding?.floors?.length === 0 && ( {selectedBuilding?.floors?.length === 0 && (
<option disabled>No floors found</option> <option disabled>No floors found</option>
)} )}
@ -201,9 +190,7 @@ const FloorModel = ({
<p className="text-danger">{errors.id.message}</p> <p className="text-danger">{errors.id.message}</p>
)} )}
</div> </div>
)}
{formData.buildingId !== "0" && (
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label"> <label className="form-label">
{formData.id !== "0" ? "Modify " : "Enter "} Floor Name {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
@ -216,9 +203,12 @@ const FloorModel = ({
{...register("floorName")} {...register("floorName")}
/> />
{errors.floorName && ( {errors.floorName && (
<p className="text-danger">{errors.floorName.message}</p> <p className="text-danger">
{errors.floorName.message}
</p>
)} )}
</div> </div>
</>
)} )}
<div className="col-12 text-center"> <div className="col-12 text-center">