Display middle name for employee on Teams and Employees page
This commit is contained in:
parent
3cf13d0bb6
commit
1bd858ca73
@ -124,7 +124,7 @@ const HorizontalBarChart = ({
|
||||
<div className="w-full">
|
||||
<ReactApexChart
|
||||
options={chartOptions}
|
||||
series={[{ data: adjustedSeriesData, name: "Complete Status" }]}
|
||||
series={[{ data: adjustedSeriesData, name: "Complete Work" }]}
|
||||
type="bar"
|
||||
height={chartHeight}
|
||||
/>
|
||||
|
@ -4,18 +4,12 @@ import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const roleSchema = z.object({
|
||||
jobRole: z.string().min(1, "Job Role is required"),
|
||||
isChecked: z.literal(true, {
|
||||
errorMap: () => ({ message: "You must check the box first" }),
|
||||
}),
|
||||
} );
|
||||
|
||||
});
|
||||
|
||||
const AssignEmployeeTable = ({
|
||||
employee,
|
||||
@ -24,7 +18,9 @@ const AssignEmployeeTable = ({
|
||||
onRoleChange,
|
||||
onCheckboxChange,
|
||||
}) => {
|
||||
const [currentJobRole, setCurrentJobRole] = useState(employee.jobRoleId?.toString() || "");
|
||||
const [currentJobRole, setCurrentJobRole] = useState(
|
||||
employee.jobRoleId?.toString() || ""
|
||||
);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -81,27 +77,28 @@ const AssignEmployeeTable = ({
|
||||
<Avatar firstName={employee.firstName} lastName={employee.lastName} />
|
||||
<div className="d-flex flex-column">
|
||||
<span className="text-heading text-truncate cursor-pointer fw-normal">
|
||||
{employee.firstName} {employee.lastName}
|
||||
{employee.firstName} {employee.middleName} {employee.lastName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="text-end justify-content-end d-none d-sm-table-cell">
|
||||
<div className="d-flex justify-content-end">
|
||||
<select
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${errors.jobRole ? "is-invalid" : ""}`}
|
||||
{...register("jobRole")}
|
||||
onChange={handleRoleSelect}
|
||||
>
|
||||
{/* <option value="">Select a Job Role</option> */}
|
||||
{jobRoles.map((role) => (
|
||||
<option key={role.id} value={role.id}>
|
||||
{role.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<select
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
||||
errors.jobRole ? "is-invalid" : ""
|
||||
}`}
|
||||
{...register("jobRole")}
|
||||
onChange={handleRoleSelect}
|
||||
>
|
||||
{/* <option value="">Select a Job Role</option> */}
|
||||
{jobRoles.map((role) => (
|
||||
<option key={role.id} value={role.id}>
|
||||
{role.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errors.jobRole && (
|
||||
<div className="invalid-feedback">{errors.jobRole.message}</div>
|
||||
@ -110,7 +107,7 @@ const AssignEmployeeTable = ({
|
||||
<div className="invalid-feedback d-block">
|
||||
{errors.isChecked.message}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
@ -127,4 +124,3 @@ const AssignEmployeeTable = ({
|
||||
};
|
||||
|
||||
export default AssignEmployeeTable;
|
||||
|
||||
|
@ -1,5 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import MapUsers from "./MapUsers";
|
||||
import { Link, NavLink, useNavigate } from "react-router-dom";
|
||||
|
||||
import showToast from "../../services/toastService";
|
||||
import Avatar from "../common/Avatar";
|
||||
import moment from "moment";
|
||||
@ -20,28 +22,30 @@ const Teams = ({ project }) => {
|
||||
const [empJobRoles, setEmpJobRoles] = useState(null);
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
||||
const [ removingEmployeeId, setRemovingEmployeeId ] = useState( null );
|
||||
const [ assignedLoading, setAssignedLoading ] = useState( false )
|
||||
const [employeeLodaing,setEmployeeLoading] = useState(false)
|
||||
const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
|
||||
const [assignedLoading, setAssignedLoading] = useState(false);
|
||||
const [employeeLodaing, setEmployeeLoading] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
|
||||
|
||||
const fetchEmployees = async () => {
|
||||
try
|
||||
{
|
||||
setEmployeeLoading(true)
|
||||
|
||||
try {
|
||||
setEmployeeLoading(true);
|
||||
|
||||
// if (!empRoles) {
|
||||
ProjectRepository.getProjectAllocation(project.id)
|
||||
.then((response) => {
|
||||
setEmployees(response.data);
|
||||
setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
|
||||
setEmployeeLoading(false)
|
||||
console.log(response.data);
|
||||
setFilteredEmployees(response.data.filter((emp) => emp.isActive));
|
||||
setEmployeeLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setError( "Failed to fetch data." );
|
||||
setEmployeeLoading(false)
|
||||
setError("Failed to fetch data.");
|
||||
setEmployeeLoading(false);
|
||||
});
|
||||
} catch (err) {
|
||||
setError("Failed to fetch activities.");
|
||||
@ -53,8 +57,8 @@ const Teams = ({ project }) => {
|
||||
.then((response) => {
|
||||
showToast("Details updated successfully.", "success");
|
||||
fetchEmployees();
|
||||
setRemovingEmployeeId( null );
|
||||
setAssignedLoading(false)
|
||||
setRemovingEmployeeId(null);
|
||||
setAssignedLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
showToast(error.message, "error");
|
||||
@ -190,7 +194,7 @@ const Teams = ({ project }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{employeeLodaing && (<p>Loading..</p>)}
|
||||
{employeeLodaing && <p>Loading..</p>}
|
||||
{!employeeLodaing && employees && employees.length > 0 && (
|
||||
<table className="table ">
|
||||
<thead>
|
||||
@ -204,7 +208,7 @@ const Teams = ({ project }) => {
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{filteredEmployees &&
|
||||
filteredEmployees.map( ( item ) => (
|
||||
filteredEmployees.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
@ -214,17 +218,14 @@ const Teams = ({ project }) => {
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
href="#"
|
||||
onClick={( e ) =>
|
||||
{
|
||||
e.preventDefault(); // Prevent default link behavior
|
||||
window.location.href =
|
||||
"/employee/" + item.employee.id;
|
||||
}}
|
||||
className="text-heading text-truncate"
|
||||
onClick={() =>
|
||||
navigate(`/employee/${item.id}?for=account`)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-medium">
|
||||
{item.firstName} {item.lastName}
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -232,20 +233,20 @@ const Teams = ({ project }) => {
|
||||
</td>
|
||||
<td>
|
||||
{" "}
|
||||
{moment( item.allocationDate ).format(
|
||||
{moment(item.allocationDate).format(
|
||||
"DD-MMM-YYYY"
|
||||
)}{" "}
|
||||
</td>
|
||||
<td>
|
||||
{item.reAllocationDate
|
||||
? moment( item.reAllocationDate ).format(
|
||||
"DD-MMM-YYYY"
|
||||
)
|
||||
? moment(item.reAllocationDate).format(
|
||||
"DD-MMM-YYYY"
|
||||
)
|
||||
: "Present"}
|
||||
</td>
|
||||
<td>
|
||||
<span className="badge bg-label-primary me-1">
|
||||
{getRole( item.jobRoleId )}
|
||||
{getRole(item.jobRoleId)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
@ -255,26 +256,31 @@ const Teams = ({ project }) => {
|
||||
type="button"
|
||||
title="Remove from project"
|
||||
className="btn p-0 dropdown-toggle hide-arrow"
|
||||
onClick={() => removeAllocation( item )}
|
||||
onClick={() => removeAllocation(item)}
|
||||
>
|
||||
{" "}
|
||||
{removingEmployeeId === item.id ? <div
|
||||
class="spinner-border spinner-border-sm text-primary"
|
||||
role="status"
|
||||
>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div> : <i className="bx bx-trash me-1 text-danger"></i>}
|
||||
|
||||
{removingEmployeeId === item.id ? (
|
||||
<div
|
||||
class="spinner-border spinner-border-sm text-primary"
|
||||
role="status"
|
||||
>
|
||||
<span class="visually-hidden">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<i className="bx bx-trash me-1 text-danger"></i>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{!item.isActive && <span>Not in project</span>}
|
||||
</td>
|
||||
</tr>
|
||||
) )}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{(!employeeLodaing && employees.length == 0 ) && (
|
||||
{!employeeLodaing && employees.length == 0 && (
|
||||
<span>No employees assigned to the project</span>
|
||||
)}
|
||||
</div>
|
||||
|
@ -11,7 +11,8 @@ const useSearch = (data, query) => {
|
||||
return data.filter(
|
||||
(item) =>
|
||||
item.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
item.lastName.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
item.middleName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
item.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
item.phoneNumber.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
@ -428,7 +428,8 @@ const EmployeeList = () => {
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.lastName}
|
||||
{item.firstName} {item.middleName}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user