-
+
+
+
+ {errors.buildingID && (
+
{errors.buildingID.message}
+ )}
+
+
+ {selectedBuilding && (
+
+
+
+ {errors.floorId && (
+
{errors.floorId.message}
+ )}
+
+ )}
+
+ {selectedFloor && (
+
+
+
+ {errors.workAreaId && (
+
{errors.workAreaId.message}
+ )}
+
+ )}
+
+ {selectedWorkArea && (
+
+
+
+ {errors.activityID && (
+
{errors.activityID.message}
+ )}
+
+ )}
+
+ {selectedWorkArea && (
+
+
+
+ {errors.workCategoryId && (
+
{errors.workCategoryId.message}
+ )}
+
+ )}
+
+ {selectedActivity && selectedCategory && (
+ <>
+
+
+
+ {errors.plannedWork && (
+
{errors.plannedWork.message}
+ )}
+
+
+
+
+ {errors.completedWork && (
+
{errors.completedWork.message}
+ )}
+
+
+
+
+
+
+ )}
+
+ {selectedActivity && selectedCategory && (
+
+
+
+ {errors.comment && (
+
{errors.comment.message}
+ )}
+
+ )}
+
+
+
+
+
+
);
};
-export default TaskModel;
\ No newline at end of file
+export default TaskModel;
diff --git a/src/components/Project/Infrastructure/WorkAreaModel.jsx b/src/components/Project/Infrastructure/WorkAreaModel.jsx
index 472c882f..5917d365 100644
--- a/src/components/Project/Infrastructure/WorkAreaModel.jsx
+++ b/src/components/Project/Infrastructure/WorkAreaModel.jsx
@@ -1,39 +1,29 @@
-import React, { useState, useEffect } from "react";
-import { set, useForm } from "react-hook-form";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import showToast from "../../../services/toastService";
+import { useManageProjectInfra } from "../../../hooks/useProjects";
+import { useSelector } from "react-redux";
-// Zod schema for form validation
const workAreaSchema = z.object({
- id: z.string().nonempty("Floor is required"),
-
- buildingId: z.string().nonempty("Building is required"),
- floorId: z.string().nonempty("Floor is required"),
- areaName: z
- .string()
- .nonempty("Work Area Name is required")
- .min(3, "Name must be at least 3 characters long"),
+ id: z.string().optional(),
+ buildingId: z.string().min(1, "Building is required"),
+ floorId: z.string().min(1, "Floor is required"),
+ areaName: z.string().min(3, "Work Area Name must be at least 3 characters"),
});
-// Default form data
const defaultModel = {
id: "0",
- areaName: "",
+ buildingId: "0",
floorId: "0",
+ areaName: "",
};
-const WorkAreaModel = ({
- project,
- onSubmit,
- clearTrigger,
- onClearComplete,
- onClose,
-}) => {
+const WorkAreaModel = ({ project, onSubmit, onClose }) => {
const [selectedBuilding, setSelectedBuilding] = useState(null);
const [selectedFloor, setSelectedFloor] = useState(null);
- const [selectdWorkArea, setWorkArea] = useState();
-
+ const selectedProject = useSelector((store)=>store.localVariables.projectId)
const {
register,
handleSubmit,
@@ -42,259 +32,169 @@ const WorkAreaModel = ({
reset,
watch,
} = useForm({
- resolver: zodResolver(workAreaSchema), // Use Zod resolver for validation
+ resolver: zodResolver(workAreaSchema),
defaultValues: defaultModel,
});
- const floorId = watch("floorId"); // Watch the floorId for conditional rendering
+ const watchBuildingId = watch("buildingId");
+ const watchFloorId = watch("floorId");
+ const watchWorkAreaId = watch("id");
+ const { mutate: ManageWorkArea, isPending } = useManageProjectInfra({
+ onSuccessCallback: (data, variables) => {
+ showToast(
+ watchWorkAreaId != "0"
+ ? "Wrok Area updated Successfully"
+ : "Work Area created Successfully",
+ "success"
+ );
+ reset({ id: "0", buildingId: "0", areaName: "", floorId: "0" });
+ // onClose?.();
+ },
+ });
useEffect(() => {
- if (clearTrigger) {
- reset(defaultModel); // Reset form to initial state
- setSelectedBuilding(null);
- setSelectedFloor(null);
- onClearComplete();
- }
- }, [clearTrigger, onClearComplete, reset]);
+ const building = project?.find((b) => b.id === watchBuildingId);
+ setSelectedBuilding(building || null);
- const handleWorkAreaChange = (e) => {
- const { value } = e.target;
-
- if (value === "0") {
- setValue("id", "0"); // Create New Work Area
+ if (building) {
+ const floor = building.floors?.find((f) => f.id === watchFloorId);
+ setSelectedFloor(floor || null);
setValue("areaName", "");
-
- setWorkArea(String(0));
- } else {
- const workArea = selectedFloor?.workAreas.find(
- (b) => b.id === String(value)
- );
- if (workArea) {
- setValue("id", String(workArea.id)); // Set id as a string
- setValue("areaName", workArea.areaName);
- setWorkArea(String(workArea.id));
- }
- }
- };
-
- const handleFloorChange = (e) => {
- const { value } = e.target;
- const floor = selectedBuilding?.floors.find((b) => b.id === String(value));
-
- if (floor) {
- setSelectedFloor(floor);
- setValue("floorId", floor.id); // Update floorId
- setValue("id", "0"); // Reset Work Area ID for new area creation
- setValue("areaName", ""); // Reset Work Area Name when changing floor
} else {
setSelectedFloor(null);
setValue("floorId", "0");
- setValue("id", "0"); // Reset Work Area ID
- setValue("areaName", ""); // Reset Work Area Name
+ setValue("areaName", "");
+ }
+ }, [watchBuildingId, watchFloorId]);
+
+ const handleWrokAreaChange = (e) => {
+ const workAreaId = e.target.value;
+ setValue("id", workAreaId);
+ const area = selectedFloor?.workAreas.find((w) => w.id === workAreaId);
+ if (area) {
+ setValue("areaName", area.areaName);
+ } else {
+ setValue("areaName", "");
}
};
- const handleBuildingChange = (e) => {
- const { value } = e.target;
- const building = project?.buildings.find((b) => b.id === String(value));
- setSelectedBuilding(building);
- setSelectedFloor(null); // Reset selected floor on building change
- reset(defaultModel); // Reset the form when a new building is selected
- };
+ useEffect(() => {
+ reset(defaultModel);
+ }, []);
- const onSubmitForm = (data) => {
- let WorkArea = {
- id: data.id == "0" ? null : data.id,
+ const onSubmitForm = ( data ) =>
+ {
+ const payload = {
+ id: data.id === "0" ? null : data.id,
areaName: data.areaName,
floorId: data.floorId,
buildingId: data.buildingId,
};
- onSubmit(WorkArea);
+ let infraObject = [
+ {
+ building: null,
+ floor: null,
+ workArea: payload,
+ },
+ ];
- reset({
- id: "0",
- areaName: "",
- });
- if (WorkArea.id !== null) {
- showToast("WorkArea updated successfully.", "success");
- } else {
- showToast("WorkArea created successfully.", "success");
- }
- };
-
- const handleCancel = () => {
- reset(defaultModel);
- setSelectedFloor(null);
- setSelectedBuilding(null);
- onClose();
+ ManageWorkArea({ infraObject, projectId: selectedProject });
};
return (
-
-
-
-
-
-
-
Manage Work Area
-
-
-
-
+
+
+
+
+ {errors.buildingId && (
+
{errors.buildingId.message}
+ )}
+
+
+ {watchBuildingId !== "0" && (
+
+
+
+ {errors.floorId && (
+
{errors.floorId.message}
+ )}
+
+ )}
+ {watchFloorId !== "0" && (
+ <>
+
+
+
+
+
+
+
+
+ {errors.areaName && (
+
{errors.areaName.message}
+ )}
+
+
+
+
+
+
+
+ )}
+
);
};
diff --git a/src/components/Project/ProjectInfra.jsx b/src/components/Project/ProjectInfra.jsx
index 1590baf1..881bf762 100644
--- a/src/components/Project/ProjectInfra.jsx
+++ b/src/components/Project/ProjectInfra.jsx
@@ -8,7 +8,6 @@ import TaskModel from "./Infrastructure/TaskModel";
import ProjectRepository, {
TasksRepository,
} from "../../repositories/ProjectRepository";
-import ProjectModal from "./ProjectModal";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT_INFRA } from "../../utils/constants";
import InfraTable from "./Infrastructure/InfraTable";
@@ -32,17 +31,10 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
const {projectInfra,isLoading,error} = useProjectInfra(projectId)
const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
const [ project, setProject ] = useState( projects_Details );
- const [modalConfig, setModalConfig] = useState({ type: null, data: null });
- const [isModalOpen, setIsModalOpen] = useState(false);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
- const [isBuildingModalOpen, setIsBuildingModalOpen] = useState(false);
const [showModalFloor, setshowModalFloor] = useState(false);
- const [isWorkAreaModelOpen, setIsWorkAreaModalOpen] = useState(false);
- const [isTaskModelOpen, setIsTaskModalOpen] = useState(false);
- const [isAssignRoleModal, setIsAssingRoleModal] = useState(false);
- const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
- const [clearFormTrigger, setClearFormTrigger] = useState(false);
- const [CurrentBuilding, setCurrentBuilding] = useState("");
+ const [showModalWorkArea, setshowModalWorkArea] = useState(false);
+ const [showModalTask, setshowModalTask] = useState(false);
const [showModalBuilding, setshowModalBuilding] = useState(false);
const dispatch = useDispatch();
@@ -50,266 +42,6 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
setProject(projectInfra);
}, [data, projects_Details]);
- const openAssignModel = (assignData) => {
- setCurrentBuilding(assignData);
- setIsAssingRoleModal(true);
- };
- const openBuildingModel = (projectData) => {
- setIsBuildingModalOpen(true);
- };
-
- const closeBuildingModel = () => {
- setIsBuildingModalOpen(false);
- };
-
- const openWorkAreaModel = (projectData) => {
- setIsWorkAreaModalOpen(true);
- };
-
- const closeWorkAreaModel = () => {
- setIsWorkAreaModalOpen(false);
- };
- const handleWorkAreaModelFormSubmit = (updatedModel) => {
- if (updatedModel.id == "") delete updatedModel.id;
- submitData([
- {
- building: null,
- floor: null,
- workArea: updatedModel,
- },
- ]);
- };
-
- const openTaskModel = (projectData) => {
- setIsTaskModalOpen(true);
- };
-
- const closeTaskModel = () => {
- setIsTaskModalOpen(false);
- };
-
- const handleTaskModelFormSubmit = (updatedModel) => {
- if (updatedModel.id == "") updatedModel.id = null;
- const updatedProject = { ...project };
-
- ProjectRepository.manageProjectTasks([updatedModel])
- .then((response) => {
- onDataChange("task-change");
- showToast("Details updated successfully.", "success");
- // setClearFormTrigger( true );
- if (response?.data[0]) {
- const { workItemId, workItem } = response.data[0];
-
- const updatedBuildings = updatedProject.buildings.map((building) =>
- building.id == updatedModel.buildingID
- ? {
- ...building,
- floors: building.floors.map((floor) =>
- floor.id == updatedModel.floorId
- ? {
- ...floor,
- workAreas: floor.workAreas.map((workArea) =>
- workArea.id === workItem?.workAreaId
- ? {
- ...workArea,
- workItems: workArea.workItems.some(
- (existingItem) =>
- existingItem.workItemId ===
- workItem.workItemId
- )
- ? [...workArea.workItems] // Create a new array to trigger re-render
- : [...workArea.workItems, workItem],
- }
- : workArea
- ),
- }
- : floor
- ),
- }
- : building
- );
- updatedProject.buildings = updatedBuildings;
- // workItem update, but having local state issue there for needed to calling api
- clearCacheKey("projectInfo");
- refetch();
-
- cacheData("projectInfo", {
- projectId: updatedProject.id,
- data: updatedProject,
- });
-
- setProject(updatedProject);
- // closeTaskModel()
- }
- })
- .catch((error) => {
- showToast(error.message, "error");
- });
- };
-
- const submitData = async (infraObject) => {
- try {
- let response = await ProjectRepository.manageProjectInfra(infraObject);
- const entity = response.data;
-
- const updatedProject = { ...project };
- // Handle the building data
- if (entity.building) {
- const { id, name, description } = entity.building;
- const updatedBuildings = updatedProject?.buildings?.map((building) =>
- building.id === id ? { ...building, name, description } : building
- );
-
- // Add building if it doesn't exist
- if (!updatedProject.buildings.some((building) => building.id === id)) {
- updatedBuildings.push({
- id: id,
- name,
- description,
- floors: [],
- });
- }
-
- updatedProject.buildings = updatedBuildings;
-
- // Update the cache for buildings
- cacheData("projectInfo", {
- projectId: updatedProject.id,
- data: updatedProject,
- });
- setProject((prevProject) => ({
- ...prevProject,
- buildings: updatedBuildings,
- }));
- // closeBuildingModel()
- }
- // Handle the floor data
- else if (entity.floor) {
- const { buildingId, id, floorName } = entity.floor;
- const updatedBuildings = updatedProject?.buildings?.map((building) =>
- building.id == buildingId
- ? {
- ...building,
- floors: building.floors
- .map((floor) =>
- floor.id === id
- ? {
- ...floor,
- floorName, // Update the floor name only
- // Keep other properties as they are (including workArea)
- }
- : floor
- )
- // Add the new floor if it doesn't already exist
- .concat(
- !building.floors.some((floor) => floor.id === id)
- ? [{ id: id, floorName, workAreas: [] }] // New floor added with workArea set to null
- : []
- ),
- }
- : building
- );
-
- updatedProject.buildings = updatedBuildings;
-
- // Cache the updated project
- cacheData("projectInfo", {
- projectId: updatedProject.id,
- data: updatedProject,
- });
- setProject(updatedProject);
- // closeFloorModel()
- }
- // Handle the work area data
- else if (entity.workArea) {
- let buildingId = infraObject[0].workArea.buildingId;
-
- const { floorId, areaName, id } = entity.workArea;
- // Check if the workArea exists, otherwise create a new one
- const updatedBuildings = updatedProject.buildings.map((building) =>
- building.id == buildingId
- ? {
- ...building,
- floors: building.floors.map((floor) =>
- floor.id == floorId
- ? {
- ...floor,
- workAreas: floor.workAreas.some(
- (workArea) => workArea.id === id
- )
- ? floor.workAreas.map((workArea) =>
- workArea.id === id
- ? { ...workArea, areaName }
- : workArea
- )
- : [
- ...floor.workAreas,
- { id, areaName, workItems: [] },
- ],
- }
- : floor
- ),
- }
- : building
- );
-
- updatedProject.buildings = updatedBuildings;
-
- // Update the cache for work areas
- cacheData("projectInfo", {
- projectId: updatedProject.id,
- data: updatedProject,
- });
- setProject(updatedProject);
- // closeWorkAreaModel()
- }
- // Handle the task (workItem) data
- else {
- console.error("Unsupported data type for submitData", entity);
- }
- } catch (Err) {
- showToast("Somthing wrong", "error");
- }
- };
-
- const toggleBuilding = (id) => {
- setExpandedBuildings((prev) =>
- prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
- );
- };
-
- const handleModalData = (type, modaldata) => {
- setModalConfig({ type: type, data: modaldata });
- };
- const openModal = () => {
- const modalElement = document.getElementById("building-model");
- const modal = new Modal(modalElement, {
- backdrop: false,
- keyboard: true,
- focus: true,
- });
- modal.show();
- };
- const closeModal = () => {
- setIsModalOpen(false);
- setModalConfig(null);
-
- const modalElement = document.getElementById("building-model");
- if (modalElement) {
- modalElement.classList.remove("show");
- modalElement.style.display = "none";
- }
-
- document.body.classList.remove("modal-open");
-
- const backdropElement = document.querySelector(".modal-backdrop");
- if (backdropElement) {
- backdropElement.classList.remove("modal-backdrop");
- backdropElement.style.display = "none";
- }
- document.body.style.overflow = "auto";
- };
-
useEffect(() => {
if (reloadedData) {
refetch();
@@ -323,63 +55,30 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
return (
<>
-
{showModalBuilding &&
setshowModalBuilding( false )}>
setshowModalBuilding( false )}
/>
- }
+ }
{showModalFloor &&
setshowModalFloor(false)}>
setshowModalFloor(false)}
/>
}
-
-
-
- {isWorkAreaModelOpen && (
-
+ {showModalWorkArea && setshowModalWorkArea(false)} >
setClearFormTrigger(false)}
+ project={projectInfra}
+ onClose={()=>setshowModalWorkArea(false)}
/>
-
- )}
-
- {isTaskModelOpen && (
-
- setClearFormTrigger(false)}
+ }
+ {showModalTask && ( setshowModalTask(false)}>
+ setshowModalTask(false)}
/>
-
- )}
-
- {isModalOpen && (
-
- )}
-
+ )}
@@ -409,7 +108,7 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>