Added Column Today's Planned to Project Infrastructure
This commit is contained in:
parent
cfd5486fe2
commit
176535f53f
@ -5,12 +5,13 @@ import useMaster from "../../hooks/masterHook/useMaster";
|
|||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } 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 { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||||
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
|
import { useProjectDetails } from "../../hooks/useProjects";
|
||||||
|
|
||||||
const AssignRoleModel = ({ assignData, onClose }) => {
|
const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
|
||||||
// Calculate maxPlanned based on assignData
|
// Calculate maxPlanned based on assignData
|
||||||
const maxPlanned =
|
const maxPlanned =
|
||||||
assignData?.workItem?.workItem?.plannedWork -
|
assignData?.workItem?.workItem?.plannedWork -
|
||||||
@ -50,11 +51,11 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
// Initialize Bootstrap Popovers on component mount
|
// Initialize Bootstrap Popovers on component mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Check if Bootstrap is available globally
|
// Check if Bootstrap is available globally
|
||||||
if (typeof bootstrap !== 'undefined') {
|
if (typeof bootstrap !== "undefined") {
|
||||||
if (infoRef.current) {
|
if (infoRef.current) {
|
||||||
new bootstrap.Popover(infoRef.current, {
|
new bootstrap.Popover(infoRef.current, {
|
||||||
trigger: 'focus',
|
trigger: "focus",
|
||||||
placement: 'right',
|
placement: "right",
|
||||||
html: true,
|
html: true,
|
||||||
content: `<div>Total Pending tasks of the Activity</div>`,
|
content: `<div>Total Pending tasks of the Activity</div>`,
|
||||||
});
|
});
|
||||||
@ -62,8 +63,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
|
|
||||||
if (infoRef1.current) {
|
if (infoRef1.current) {
|
||||||
new bootstrap.Popover(infoRef1.current, {
|
new bootstrap.Popover(infoRef1.current, {
|
||||||
trigger: 'focus',
|
trigger: "focus",
|
||||||
placement: 'right',
|
placement: "right",
|
||||||
html: true,
|
html: true,
|
||||||
content: `<div>Target task for today</div>`,
|
content: `<div>Target task for today</div>`,
|
||||||
});
|
});
|
||||||
@ -72,7 +73,6 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
console.warn("Bootstrap is not available. Popovers might not function.");
|
console.warn("Bootstrap is not available. Popovers might not function.");
|
||||||
}
|
}
|
||||||
}, []); // Empty dependency array ensures this runs once on mount
|
}, []); // Empty dependency array ensures this runs once on mount
|
||||||
|
|
||||||
// Redux state and hooks
|
// Redux state and hooks
|
||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
@ -173,6 +173,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
await TasksRepository.assignTask(formattedData);
|
await TasksRepository.assignTask(formattedData);
|
||||||
showToast("Task Successfully Assigned", "success"); // Show success toast
|
showToast("Task Successfully Assigned", "success"); // Show success toast
|
||||||
reset(); // Reset form fields
|
reset(); // Reset form fields
|
||||||
|
clearCacheKey("projectInfo");
|
||||||
|
setAssigned(formattedData.plannedTask)
|
||||||
onClose(); // Close the modal
|
onClose(); // Close the modal
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error assigning task:", error); // Log the full error for debugging
|
console.error("Error assigning task:", error); // Log the full error for debugging
|
||||||
@ -205,7 +207,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
<div className="mb-1">
|
<div className="mb-1">
|
||||||
<p className="mb-0">
|
<p className="mb-0">
|
||||||
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
|
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
|
||||||
<p className="me-2 m-0 font-bold">Work Location :</p>
|
<span className="me-2 m-0 font-bold">Work Location :</span>
|
||||||
{[
|
{[
|
||||||
assignData?.building?.name,
|
assignData?.building?.name,
|
||||||
assignData?.floor?.floorName,
|
assignData?.floor?.floorName,
|
||||||
@ -303,7 +305,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
id={`employee-${emp?.id}`}
|
id={`employee-${emp?.id}`}
|
||||||
value={emp.id}
|
value={emp.id}
|
||||||
checked={field.value?.includes(emp.id)}
|
checked={field.value?.includes(
|
||||||
|
emp.id
|
||||||
|
)}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
handleCheckboxChange(e, emp);
|
handleCheckboxChange(e, emp);
|
||||||
}}
|
}}
|
||||||
@ -311,7 +315,10 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<div className="flex-grow-1">
|
<div className="flex-grow-1">
|
||||||
<p className="mb-0" style={{ fontSize: "13px" }}>
|
<p
|
||||||
|
className="mb-0"
|
||||||
|
style={{ fontSize: "13px" }}
|
||||||
|
>
|
||||||
{emp.firstName} {emp.lastName}
|
{emp.firstName} {emp.lastName}
|
||||||
</p>
|
</p>
|
||||||
<small
|
<small
|
||||||
@ -333,7 +340,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
})
|
})
|
||||||
) : (
|
) : (
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<p className="text-center">No employees found for the selected role.</p>
|
<p className="text-center">
|
||||||
|
No employees found for the selected role.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -387,23 +396,37 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
|
|
||||||
{!loading && errors.selectedEmployees && (
|
{!loading && errors.selectedEmployees && (
|
||||||
<div className="danger-text mt-1">
|
<div className="danger-text mt-1">
|
||||||
<p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
|
<p>{errors.selectedEmployees.message}</p>{" "}
|
||||||
|
{/* Use message from Zod schema */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Pending Task of Activity section */}
|
{/* Pending Task of Activity section */}
|
||||||
<div className="col-md text-start mx-0 px-0">
|
<div className="col-md text-start mx-0 px-0">
|
||||||
<div className="form-check form-check-inline mt-3 px-1">
|
<div className="form-check form-check-inline mt-3 px-1">
|
||||||
<label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
|
<label
|
||||||
|
className="form-text text-dark align-items-center d-flex"
|
||||||
|
htmlFor="inlineCheckbox1"
|
||||||
|
>
|
||||||
Pending Task of Activity :
|
Pending Task of Activity :
|
||||||
<label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
|
<label
|
||||||
|
className="form-check-label fs-7 ms-4"
|
||||||
|
htmlFor="inlineCheckbox1"
|
||||||
|
>
|
||||||
<strong>
|
<strong>
|
||||||
{assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
|
{assignData?.workItem?.workItem?.plannedWork -
|
||||||
|
assignData?.workItem?.workItem?.completedWork}
|
||||||
</strong>{" "}
|
</strong>{" "}
|
||||||
<u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
|
<u>
|
||||||
|
{
|
||||||
|
assignData?.workItem?.workItem?.activityMaster
|
||||||
|
?.unitOfMeasurement
|
||||||
|
}
|
||||||
|
</u>
|
||||||
</label>
|
</label>
|
||||||
|
<div
|
||||||
<div style={{ display: "flex", alignItems: "center" }}>
|
style={{ display: "flex", alignItems: "center" }}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
ref={infoRef}
|
ref={infoRef}
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
@ -439,10 +462,14 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
|
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
|
||||||
htmlFor="inlineCheckbox1"
|
htmlFor="inlineCheckbox1"
|
||||||
>
|
>
|
||||||
<span>Target for Today</span> <span style={{ marginLeft: '46px' }}>:</span>
|
<span>Target for Today</span>
|
||||||
|
<span style={{ marginLeft: "46px" }}>:</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
|
<div
|
||||||
|
className="form-check form-check-inline col-sm-3 mt-2"
|
||||||
|
style={{ marginLeft: "-28px" }}
|
||||||
|
>
|
||||||
<Controller
|
<Controller
|
||||||
name="plannedTask"
|
name="plannedTask"
|
||||||
control={control}
|
control={control}
|
||||||
@ -455,10 +482,18 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
id="defaultFormControlInput"
|
id="defaultFormControlInput"
|
||||||
aria-describedby="defaultFormControlHelp"
|
aria-describedby="defaultFormControlHelp"
|
||||||
/>
|
/>
|
||||||
<span style={{ paddingLeft: '6px' }}>
|
<span style={{ paddingLeft: "6px" }}>
|
||||||
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
|
{
|
||||||
|
assignData?.workItem?.workItem?.activityMaster
|
||||||
|
?.unitOfMeasurement
|
||||||
|
}
|
||||||
</span>
|
</span>
|
||||||
<div style={{ display: "flex", alignItems: "center" }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
ref={infoRef1}
|
ref={infoRef1}
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
@ -489,16 +524,20 @@ const AssignRoleModel = ({ assignData, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors.plannedTask && (
|
{errors.plannedTask && (
|
||||||
<div className="danger-text mt-1">{errors.plannedTask.message}</div>
|
<div className="danger-text mt-1">
|
||||||
|
{errors.plannedTask.message}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isHelpVisible && (
|
{isHelpVisible && (
|
||||||
<div
|
<div
|
||||||
className="position-absolute bg-white border p-2 rounded shadow"
|
className="position-absolute bg-white border p-2 rounded shadow"
|
||||||
style={{ zIndex: 10, marginLeft: '10px' }}
|
style={{ zIndex: 10, marginLeft: "10px" }}
|
||||||
>
|
>
|
||||||
{/* Add your help content here */}
|
{/* Add your help content here */}
|
||||||
<p className="mb-0">Enter the target value for today's task.</p>
|
<p className="mb-0">
|
||||||
|
Enter the target value for today's task.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -232,6 +232,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
|
|||||||
<th className="infra-activity-table-header d-none d-md-table-cell">
|
<th className="infra-activity-table-header d-none d-md-table-cell">
|
||||||
Completed/Planned
|
Completed/Planned
|
||||||
</th>
|
</th>
|
||||||
|
<th className="infra-activity-table-header d-none d-md-table-cell">
|
||||||
|
Today's Planned
|
||||||
|
</th>
|
||||||
<th className="infra-activity-table-header">
|
<th className="infra-activity-table-header">
|
||||||
Progress
|
Progress
|
||||||
</th>
|
</th>
|
||||||
|
|||||||
@ -21,7 +21,6 @@ import { useDispatch } from "react-redux";
|
|||||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||||
|
|
||||||
const WorkItem = ({
|
const WorkItem = ({
|
||||||
key,
|
|
||||||
workItem,
|
workItem,
|
||||||
forBuilding,
|
forBuilding,
|
||||||
forFloor,
|
forFloor,
|
||||||
@ -55,6 +54,15 @@ const WorkItem = ({
|
|||||||
setNewWorkItem(workItem);
|
setNewWorkItem(workItem);
|
||||||
}, [workItem]);
|
}, [workItem]);
|
||||||
|
|
||||||
|
const refreshWorkItem = (plannedTask) =>{
|
||||||
|
if (workItem) {
|
||||||
|
const updated = {
|
||||||
|
...workItem,
|
||||||
|
todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
|
||||||
|
};
|
||||||
|
setNewWorkItem(updated);
|
||||||
|
}
|
||||||
|
}
|
||||||
let assigndata = {
|
let assigndata = {
|
||||||
building: forBuilding,
|
building: forBuilding,
|
||||||
floor: forFloor,
|
floor: forFloor,
|
||||||
@ -97,7 +105,7 @@ const WorkItem = ({
|
|||||||
style={{ display: isModalOpen ? "block" : "none" }}
|
style={{ display: isModalOpen ? "block" : "none" }}
|
||||||
aria-hidden={!isModalOpen}
|
aria-hidden={!isModalOpen}
|
||||||
>
|
>
|
||||||
<AssignRoleModel assignData={assigndata} onClose={closeModal} />
|
<AssignRoleModel assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@ -141,7 +149,7 @@ const WorkItem = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<tr key={key}>
|
<tr key={NewWorkItem?.workItemId}>
|
||||||
{/* Activity Name - always visible */}
|
{/* Activity Name - always visible */}
|
||||||
<td className="text-start table-cell-small">
|
<td className="text-start table-cell-small">
|
||||||
<i className="bx bx-right-arrow-alt"></i>
|
<i className="bx bx-right-arrow-alt"></i>
|
||||||
@ -191,6 +199,16 @@ const WorkItem = ({
|
|||||||
: "NA"}
|
: "NA"}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<td className="text-center d-none d-md-table-cell">
|
||||||
|
{hasWorkItem
|
||||||
|
? `${
|
||||||
|
NewWorkItem?.todaysAssigned ??
|
||||||
|
workItem?.todaysAssigned ??
|
||||||
|
"0"
|
||||||
|
}`
|
||||||
|
: "NA"}
|
||||||
|
</td>
|
||||||
|
|
||||||
{/* Progress Bar - always visible */}
|
{/* Progress Bar - always visible */}
|
||||||
<td className="text-center " style={{ width: "15%" }}>
|
<td className="text-center " style={{ width: "15%" }}>
|
||||||
<div className="progress p-0">
|
<div className="progress p-0">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user