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

Error message work Properly. #140

Merged
vikas.nale merged 1 commits from Kartik_Enhancement#279 into Issue_May_4W 2025-05-24 10:52:42 +00:00
Conversation 0 Commits 1 Files Changed 1 +69 -79
1 changed files with 69 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,17 +2,19 @@ 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
// ✅ Updated 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 +32,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 +50,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 +61,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 +70,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 +95,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 +140,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 +158,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">