admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Error message in Manage floor popup in Infrastructure.

Browse Source
This commit is contained in:
kartik.sharma 2025-05-24 15:54:31 +05:30
parent 72d557ad90
commit 7804e44b85
1 changed files with 68 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -2,17 +2,18 @@ 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
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 +31,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 +49,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 +60,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 +69,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 +94,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 +139,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,63 +157,57 @@ const FloorModel = ({
</div> </div>
{formData.buildingId !== "0" && ( {formData.buildingId !== "0" && (
<div className="col-12 col-md-12"> <>
<label className="form-label">Select Floor</label> <div className="col-12 col-md-12">
<select <label className="form-label">Select Floor</label>
id="id" <select
className="select2 form-select form-select-sm" id="id"
aria-label="Select Floor" className="select2 form-select form-select-sm"
{...register("id")} aria-label="Select Floor"
onChange={handleFloorChange} {...register("id")}
> onChange={handleFloorChange}
<option value="0">Add New Floor</option> >
{/* {selectedBuilding?.floors?.map((floor) => ( <option value="0">Add New Floor</option>
<option key={floor.id} value={floor.id}> {selectedBuilding?.floors?.length > 0 &&
{floor.floorName} [...selectedBuilding.floors]
</option> .filter((floor) => floor?.floorName)
) )} */} .sort((a, b) =>
(a.floorName || "").localeCompare(
{selectedBuilding && b.floorName || ""
selectedBuilding.floors?.length > 0 && )
[...selectedBuilding.floors] )
.filter((floor) => floor?.floorName) .map((floor) => (
.sort((a, b) => { <option key={floor.id} value={floor.id}>
const nameA = a.floorName || ""; {floor.floorName}
const nameB = b.floorName || ""; </option>
return nameA?.localeCompare(nameB); ))}
}) {selectedBuilding?.floors?.length === 0 && (
.map((floor) => ( <option disabled>No floors found</option>
<option key={floor.id} value={floor.id}> )}
{floor.floorName} </select>
</option> {errors.id && (
))} <p className="text-danger">{errors.id.message}</p>
{selectedBuilding?.floors?.length === 0 && (
<option disabled>No floors found</option>
)} )}
</select> </div>
{errors.id && (
<p className="text-danger">{errors.id.message}</p>
)}
</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 </label>
</label> <input
<input type="text"
type="text" id="floorName"
id="floorName" className="form-control form-control-sm me-2"
className="form-control form-control-sm me-2" placeholder="Floor Name"
placeholder="Floor Name" {...register("floorName")}
{...register("floorName")} />
/> {errors.floorName && (
{errors.floorName && ( <p className="text-danger">
<p className="text-danger">{errors.floorName.message}</p> {errors.floorName.message}
)} </p>
</div> )}
</div>
</>
)} )}
<div className="col-12 text-center"> <div className="col-12 text-center">