Employee Profile Page Not Updating without refresh page ,After Edit
This commit is contained in:
parent
d80fa27906
commit
9af7a5ceb2
@ -34,9 +34,13 @@ const EmpDashboard = ({ profile }) => {
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="d-flex">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-primary">
|
||||
<span
|
||||
className={`avatar-initial rounded ${project.removedDate ? "bg-label-warning" : "bg-label-success"
|
||||
}`}
|
||||
>
|
||||
<i className="icon-base bx bx-buildings icon-lg"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<h6 className="mb-0">{project.projectShortName}</h6>
|
||||
@ -49,6 +53,14 @@ const EmpDashboard = ({ profile }) => {
|
||||
<em>NA</em>
|
||||
)}
|
||||
</div>
|
||||
{project.removedDate && (
|
||||
<div className="mt-0 d-flex flex-column flex-sm-row justify-content-between">
|
||||
<div className="label-secondary">
|
||||
Unassigned:{" "}
|
||||
{new Date(project.removedDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -59,14 +71,7 @@ const EmpDashboard = ({ profile }) => {
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
{project.removedDate && (
|
||||
<div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
|
||||
<div className="label-secondary">
|
||||
Unassigned:{" "}
|
||||
{new Date(project.removedDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
@ -11,6 +11,17 @@ import { queryClient } from "../layouts/AuthLayout";
|
||||
|
||||
// Query ---------------------------------------------------------------------------
|
||||
|
||||
export const useEmployee = (employeeId) => {
|
||||
return useQuery({
|
||||
queryKey: ["employeeProfile", employeeId],
|
||||
queryFn: async () => {
|
||||
const res = await EmployeeRepository.getEmployeeProfile(employeeId)
|
||||
return res.data;
|
||||
},
|
||||
enabled:!!employeeId
|
||||
});
|
||||
};
|
||||
|
||||
export const useAllEmployees = (showInactive) => {
|
||||
const {
|
||||
data = [],
|
||||
@ -197,6 +208,9 @@ export const useEmployeesNameByProject = (projectId) => {
|
||||
|
||||
// Mutation------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
export const useUpdateEmployee = () => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
@ -211,6 +225,7 @@ export const useUpdateEmployee = () => {
|
||||
const isAllEmployee = variables.IsAllEmployee;
|
||||
|
||||
// Cache invalidation
|
||||
queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
|
||||
// queryClient.invalidateQueries(['employeeProfile', id]);
|
||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
||||
@ -232,40 +247,6 @@ export const useUpdateEmployee = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
|
||||
// const queryClient = useQueryClient();
|
||||
// const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
// return useMutation({
|
||||
// mutationFn: (id) => {
|
||||
// setemployeeLodaing(true);
|
||||
// return EmployeeRepository.deleteEmployee(id);
|
||||
// },
|
||||
|
||||
// onSuccess: () => {
|
||||
|
||||
// // queryClient.invalidateQueries( ['allEmployee',false]);
|
||||
// queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
// queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
|
||||
// showToast("Employee deleted successfully.", "success");
|
||||
// setIsDeleteModalOpen(false);
|
||||
// },
|
||||
|
||||
// onError: (error) => {
|
||||
// const message =
|
||||
// error.response?.data?.message ||
|
||||
// error.message ||
|
||||
// "An unexpected error occurred";
|
||||
// showToast(message, "error");
|
||||
// setIsDeleteModalOpen(false);
|
||||
// },
|
||||
|
||||
// onSettled: () => {
|
||||
// setemployeeLodaing(false);
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
// Manage Role
|
||||
|
||||
export const useSuspendEmployee = ({
|
||||
setIsDeleteModalOpen,
|
||||
@ -353,4 +334,4 @@ export const useUpdateEmployeeRoles = ({
|
||||
isError: mutation.isError,
|
||||
error: mutation.error,
|
||||
};
|
||||
};
|
||||
};
|
@ -3,6 +3,7 @@ import { useSearchParams, useParams, useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
useEmployee,
|
||||
useEmployeeProfile,
|
||||
useEmployees,
|
||||
useEmployeesByProject,
|
||||
@ -28,38 +29,20 @@ const EmployeeProfile = () => {
|
||||
|
||||
const projectID = useSelector((store) => store.localVariables.projectId);
|
||||
const { employeeId } = useParams();
|
||||
// const {employee,loading} = useEmployeeProfile(employeeId)
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [SearchParams] = useSearchParams();
|
||||
const tab = SearchParams.get("for");
|
||||
const [activePill, setActivePill] = useState(tab || "profile");
|
||||
const [currentEmployee, setCurrentEmployee] = useState();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const {data:currentEmployee,isLoading,isError,error} = useEmployee(employeeId)
|
||||
const handlePillClick = (pillKey) => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
const fetchEmployeeProfile = async (employeeID) => {
|
||||
try {
|
||||
const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
|
||||
setCurrentEmployee(resp.data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (employeeId) {
|
||||
fetchEmployeeProfile(employeeId);
|
||||
}
|
||||
}, [employeeId]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const renderContent = () => {
|
||||
if (loading) return <div>Loading</div>;
|
||||
if (isLoading) return <div>Loading</div>;
|
||||
switch (activePill) {
|
||||
case "profile": {
|
||||
return (
|
||||
@ -101,9 +84,10 @@ const EmployeeProfile = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
if(isError) return <div >{error.message}</div>
|
||||
return (
|
||||
<>
|
||||
<div className="container-fluid">
|
||||
@ -138,4 +122,4 @@ const EmployeeProfile = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeProfile;
|
||||
export default EmployeeProfile;
|
Loading…
x
Reference in New Issue
Block a user