Merge branch 'Ashutosh_Enhancement#132_Int_To_Guid' of https://git.marcoaiot.com/admin/marco.pms.web into Ashutosh_Enhancement#132_Int_To_Guid
This commit is contained in:
Pramod Mahajan
commit
4a326fb1ea
@ -6,8 +6,16 @@ const HorizontalBarChart = ({
|
||||
seriesData = [],
|
||||
categories = [],
|
||||
colors = [
|
||||
"#1E90FF", "#00BFFF", "#9370DB", "#6A0DAD", "#A9A9A9",
|
||||
"#6A5ACD", "#FFA500", "#FF4500", "#20B2AA", "#708090",
|
||||
"#1E90FF",
|
||||
"#00BFFF",
|
||||
"#9370DB",
|
||||
"#6A0DAD",
|
||||
"#A9A9A9",
|
||||
"#6A5ACD",
|
||||
"#FFA500",
|
||||
"#FF4500",
|
||||
"#20B2AA",
|
||||
"#708090",
|
||||
],
|
||||
loading = false,
|
||||
}) => {
|
||||
@ -31,7 +39,6 @@ const HorizontalBarChart = ({
|
||||
if (!hasValidData) {
|
||||
return <div className="text-center text-gray-500">No data to display</div>;
|
||||
}
|
||||
|
||||
// Combine seriesData and categories, then sort in descending order
|
||||
const combined = seriesData.map((value, index) => ({
|
||||
value,
|
||||
@ -40,11 +47,13 @@ const HorizontalBarChart = ({
|
||||
const sorted = combined.sort((a, b) => b.value - a.value);
|
||||
|
||||
// Extract sorted values
|
||||
const sortedSeriesData = sorted.map(item => item.value);
|
||||
const sortedCategories = sorted.map(item => item.label);
|
||||
const sortedSeriesData = sorted.map((item) => item.value);
|
||||
const sortedCategories = sorted.map((item) => item.label);
|
||||
|
||||
// Replace 0 with 1 for visual purposes, but display "0%" in labels
|
||||
const adjustedSeriesData = sortedSeriesData.map(val => (val === 0 ? 1 : val));
|
||||
const adjustedSeriesData = sortedSeriesData.map((val) =>
|
||||
val === 0 ? 0.1 : val
|
||||
);
|
||||
|
||||
// Dynamically adjust chart height if only one data point
|
||||
const chartHeight = seriesData.length === 1 ? 80 : 380;
|
||||
@ -99,14 +108,13 @@ const HorizontalBarChart = ({
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
show: true,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
x: { show: true },
|
||||
y: {
|
||||
title: {
|
||||
formatter: () => "",
|
||||
formatter: function (val) {
|
||||
return (val < 1 ? Math.floor(val) : val) + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -116,7 +124,7 @@ const HorizontalBarChart = ({
|
||||
<div className="w-full">
|
||||
<ReactApexChart
|
||||
options={chartOptions}
|
||||
series={[{ data: adjustedSeriesData }]}
|
||||
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