diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx index e5a567e9..11f125f3 100644 --- a/src/components/Project/AssignRole.jsx +++ b/src/components/Project/AssignRole.jsx @@ -16,7 +16,6 @@ const AssignRoleModel = ({ assignData, onClose }) => { const maxPlanned = assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork; - const schema = z.object({ selectedEmployees: z .array(z.string()) @@ -40,7 +39,10 @@ const AssignRoleModel = ({ assignData, onClose }) => { const selectedProject = useSelector( (store) => store.localVariables.projectId ); - const { employees,loading:employeeLoading } = useEmployeesAllOrByProjectId(selectedProject,false); + const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId( + selectedProject, + false + ); const dispatch = useDispatch(); const { data, loading } = useMaster(); @@ -48,6 +50,7 @@ const AssignRoleModel = ({ assignData, onClose }) => { const [selectedRole, setSelectedRole] = useState("all"); const [selectedEmployees, setSelectedEmployees] = useState([]); + const [displayedSelection, setDisplayedSelection] = useState(""); const { handleSubmit, @@ -65,53 +68,67 @@ const AssignRoleModel = ({ assignData, onClose }) => { resolver: zodResolver(schema), }); + const handleCheckboxChange = (event, user) => { + const isChecked = event.target.checked; + let updatedSelectedEmployees = watch("selectedEmployees") || []; + + if (isChecked) { + if (!updatedSelectedEmployees.includes(user.id)) { + updatedSelectedEmployees = [...updatedSelectedEmployees, user.id]; + } + } else { + updatedSelectedEmployees = updatedSelectedEmployees.filter( + (id) => id !== user.id + ); + } + + setValue("selectedEmployees", updatedSelectedEmployees); + }; + + useEffect(() => { + dispatch(changeMaster("Job Role")); + return () => setSelectedRole("all"); + }, [dispatch]); + const handleRoleChange = (event) => { - reset(); - // setSelectedEmployees([]); setSelectedRole(event.target.value); }; const filteredEmployees = selectedRole === "all" ? employees - : employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole); - - const handleEmployeeSelection = (employeeId, field) => { - setSelectedEmployees((prevSelected) => { - let updatedSelection; - if (!prevSelected.includes(employeeId)) { - updatedSelection = [...prevSelected, employeeId]; - } else { - updatedSelection = prevSelected.filter((id) => id !== employeeId); - } - field.onChange(updatedSelection); - return updatedSelection; - }); - }; - - const removeEmployee = (employeeId) => { - setSelectedEmployees((prevSelected) => { - const updatedSelection = prevSelected.filter((id) => id !== employeeId); - setValue("selectedEmployees", updatedSelection); // Ensure form state is updated - return updatedSelection; - }); - }; + : employees?.filter( + (emp) => String(emp.jobRoleId || "") === selectedRole + ); const onSubmit = async (data) => { + const selectedEmployeeIds = data.selectedEmployees; + + const taskTeamWithDetails = selectedEmployeeIds + .map((empId) => { + const employee = employees.find((e) => e.id === empId); + const jobRole = jobRoleData?.find((r) => r.id === employee?.jobRoleId); + return employee + ? employee.id + : null; + }) + .filter(Boolean); + const formattedData = { - taskTeam: data.selectedEmployees, + taskTeam: taskTeamWithDetails, plannedTask: data.plannedTask, description: data.description, assignmentDate: new Date().toISOString(), workItemId: assignData?.workItem?.workItem.id, }; + try { let response = await TasksRepository.assignTask(formattedData); - showToast("Task Successfully Assigend", "success"); - setSelectedEmployees([]); + showToast("Task Successfully Assigned", "success"); reset(); onClose(); } catch (error) { + console.log(error.response); showToast("something wrong", "error"); } }; @@ -124,6 +141,7 @@ const AssignRoleModel = ({ assignData, onClose }) => { reset(); onClose(); }; + return (
{ onClick={onClose} aria-label="Close" > -
-
-

- {[ - assignData?.building?.name, - assignData?.floor?.floorName, - assignData?.workArea?.areaName, - assignData?.workItem?.workItem?.activityMaster?.activityName, - ] - .filter(Boolean) - .map((item, index, array) => ( - - {item} - {index < array.length - 1 && ( - - )} - - ))} -

+
+ Assign Task +
+
+

+ + Work Location: + {[ + assignData?.building?.name, + assignData?.floor?.floorName, + assignData?.workArea?.areaName, + assignData?.workItem?.workItem?.activityMaster + ?.activityName, + ] + .filter(Boolean) + .map((item, index, array) => ( + + {item} + {index < array.length - 1 && ( + + )} + + ))} + +

-
-
-
-
Select Role
-
- -
-
-
-
-
Employee
-
- {employeeLoading &&
Loading...
} - {!employeeLoading && filteredEmployees?.length === 0 && employees && ( -
No employees found
- )} + +
+
+
+
-
-
- {selectedRole !== "" && ( -
-
-
- {filteredEmployees?.map((emp) => { - const jobRole = jobRoleData?.find( - (role) => role?.id === emp?.jobRoleId - ); +
+ Select Team +
{displayedSelection}
+ - return ( -
+
  • + +
  • + {jobRoleData?.map((user) => ( +
  • + +
  • + ))} + +
    + + +
    +
    +
    + + {employeeLoading &&
    Loading...
    } + {!employeeLoading && + filteredEmployees?.length === 0 && + employees &&
    No employees found
    } + +
    +
    + {selectedRole !== "" && ( +
    + {loading ? ( +
    +

    Loading...

    +
    + ) : filteredEmployees?.length > 0 ? ( + filteredEmployees?.map((emp) => { + const jobRole = jobRoleData?.find( + (role) => role?.id === emp?.jobRoleId + ); + + return ( +
    +
    ( { - handleEmployeeSelection( - emp.id, - field - ); + checked={field.value.includes(emp.id)} + onChange={(e) => { + handleCheckboxChange(e, emp); }} /> )} /> -
    -

    +

    +

    {emp.firstName} {emp.lastName}

    - - {loading && ( -

    + + {loading ? ( + + + + ) : ( + jobRole?.name || "Unknown Role" )} - {data && - !loading && - (jobRole - ? jobRole.name - : "Unknown Role")}
    -
    + ); + }) + ) : ( +
    +

    No employees found for the selected role.

    +
    + )} +
    + )} +
    +
    +
    + {watch("selectedEmployees")?.length > 0 && ( +
    +
    + {watch("selectedEmployees")?.map((empId) => { + const emp = employees.find( + (emp) => emp.id === empId + ); + return ( + emp && ( + + {emp.firstName} {emp.lastName} +

    { + const employeeToRemove = employees.find( + (e) => e.id === empId + ); + const updatedSelected = watch( + "selectedEmployees" + ).filter((id) => id !== empId); + setValue( + "selectedEmployees", + updatedSelected + ); + }} + > + +

    +
    + ) ); })}
    -
    - )} -
    -
    - {selectedEmployees.length > 0 && ( -
    -
    - {selectedEmployees.map((empId) => { - const emp = employees.find( - (emp) => emp.id === empId - ); - return ( - - {emp.firstName} {emp.lastName} -

    { - removeEmployee(empId); - setValue( - "selectedEmployees", - selectedEmployees.filter( - (id) => id !== empId - ) - ); - }} - > - -

    -
    - ); - })} -
    -
    - )} -
    -
    + )} +
    -
    -
    - - -
    -
    -
    - {errors.plannedTask && ( -
    - {errors.plannedTask.message} -
    - )} -
    - {errors.selectedEmployees && ( -
    -

    {errors.selectedEmployees.message}

    -
    - )} - - ( -