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,11 +4,6 @@ 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, {
|
||||
@ -16,7 +11,6 @@ export const roleSchema = z.object({
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
const AssignEmployeeTable = ({
|
||||
employee,
|
||||
jobRoles,
|
||||
@ -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,7 +77,7 @@ 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>
|
||||
@ -90,7 +86,9 @@ const AssignEmployeeTable = ({
|
||||
<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" : ""}`}
|
||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
||||
errors.jobRole ? "is-invalid" : ""
|
||||
}`}
|
||||
{...register("jobRole")}
|
||||
onChange={handleRoleSelect}
|
||||
>
|
||||
@ -101,7 +99,6 @@ const AssignEmployeeTable = ({
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
{errors.jobRole && (
|
||||
<div className="invalid-feedback">{errors.jobRole.message}</div>
|
||||
@ -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";
|
||||
@ -21,27 +23,29 @@ const Teams = ({ project }) => {
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [filteredEmployees, setFilteredEmployees] = useState([]);
|
||||
const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
|
||||
const [ assignedLoading, setAssignedLoading ] = useState( false )
|
||||
const [employeeLodaing,setEmployeeLoading] = useState(false)
|
||||
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);
|
||||
console.log(response.data);
|
||||
setFilteredEmployees(response.data.filter((emp) => emp.isActive));
|
||||
setEmployeeLoading(false)
|
||||
setEmployeeLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setError("Failed to fetch data.");
|
||||
setEmployeeLoading(false)
|
||||
setEmployeeLoading(false);
|
||||
});
|
||||
} catch (err) {
|
||||
setError("Failed to fetch activities.");
|
||||
@ -54,7 +58,7 @@ const Teams = ({ project }) => {
|
||||
showToast("Details updated successfully.", "success");
|
||||
fetchEmployees();
|
||||
setRemovingEmployeeId(null);
|
||||
setAssignedLoading(false)
|
||||
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>
|
||||
@ -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>
|
||||
@ -258,13 +259,18 @@ const Teams = ({ project }) => {
|
||||
onClick={() => removeAllocation(item)}
|
||||
>
|
||||
{" "}
|
||||
{removingEmployeeId === item.id ? <div
|
||||
{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>}
|
||||
|
||||
<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>}
|
||||
@ -274,7 +280,7 @@ const Teams = ({ project }) => {
|
||||
</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