Display Only "Re-activate" Button for Inactive Employees in Action Column #348

Merged
pramod.mahajan merged 2 commits from Kartik_Bug#944 into Issues_Aug_1W 2025-08-23 04:37:21 +00:00
3 changed files with 80 additions and 57 deletions

View File

@ -277,27 +277,37 @@ export const useSuspendEmployee = ({
);
return useMutation({
mutationFn: async (employeeId) => {
// Expect both employeeId and active status
mutationFn: async ({ employeeId, active }) => {
setemployeeLodaing(true);
return await EmployeeRepository.deleteEmployee(employeeId);
return await EmployeeRepository.deleteEmployee(employeeId, active);
},
onSuccess: (_, employeeId) => {
showToast("Employee suspended successfully.", "success");
onSuccess: (_, { employeeId, active }) => {
const message =
active === false
? "Employee suspended successfully."
: "Employee reactivated successfully.";
showToast(message, "success");
setIsDeleteModalOpen(false);
// Invalidate only the required employee-related queries
// Invalidate relevant queries
queryClient.invalidateQueries({ queryKey: ["employee", employeeId] });
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
if (selectedProjectId) {
queryClient.invalidateQueries({ queryKey: ["projectEmployees", selectedProjectId] });
queryClient.invalidateQueries({
queryKey: ["projectEmployees", selectedProjectId],
});
}
},
onError: (error) => {
showToast(
error.response?.data?.message || error.message || "An unexpected error occurred",
error.response?.data?.message ||
error.message ||
"An unexpected error occurred",
"error"
);
setIsDeleteModalOpen(false);
@ -309,6 +319,7 @@ export const useSuspendEmployee = ({
});
};
export const useUpdateEmployeeRoles = ({
onClose,
resetForm,

View File

@ -176,12 +176,10 @@ const EmployeeList = () => {
useEffect(() => {
if (!loading && Array.isArray(employees)) {
const sorted = [...employees].sort((a, b) => {
const nameA = `${a.firstName || ""}${a.middleName || ""}${
a.lastName || ""
}`.toLowerCase();
const nameB = `${b.firstName || ""}${b.middleName || ""}${
b.lastName || ""
}`.toLowerCase();
const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
}`.toLowerCase();
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
}`.toLowerCase();
return nameA?.localeCompare(nameB);
});
@ -274,12 +272,21 @@ const EmployeeList = () => {
>
<ConfirmModal
type={"delete"}
header={"Suspend Employee"}
message={"Are you sure you want delete?"}
onSubmit={suspendEmployee}
header={
selectedEmpFordelete?.isActive
? "Suspend Employee"
: "Reactivate Employee"
}
message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
} this employee?`}
onSubmit={() =>
suspendEmployee({
employeeId: selectedEmpFordelete.id,
active: !selectedEmpFordelete.isActive,
})
}
onClose={() => setIsDeleteModalOpen(false)}
loading={employeeLodaing}
paramData={selectedEmpFordelete}
/>
</div>
)}
@ -503,9 +510,8 @@ const EmployeeList = () => {
Status
</th>
<th
className={`sorting_disabled ${
!Manage_Employee && "d-none"
}`}
className={`sorting_disabled ${!Manage_Employee && "d-none"
}`}
rowSpan="1"
colSpan="1"
style={{ width: "50px" }}
@ -525,9 +531,9 @@ const EmployeeList = () => {
)}
{/* Conditional messages for no data or no search results */}
{!loading &&
displayData?.length === 0 &&
searchText &&
!showAllEmployees ? (
displayData?.length === 0 &&
searchText &&
!showAllEmployees ? (
<tr>
<td colSpan={8}>
<small className="muted">
@ -537,8 +543,8 @@ const EmployeeList = () => {
</tr>
) : null}
{!loading &&
displayData?.length === 0 &&
(!searchText || showAllEmployees) ? (
displayData?.length === 0 &&
(!searchText || showAllEmployees) ? (
<tr>
<td
colSpan={8}
@ -630,47 +636,56 @@ const EmployeeList = () => {
<i className="bx bx-dots-vertical-rounded bx-md"></i>
</button>
<div className="dropdown-menu dropdown-menu-end">
{/* View always visible */}
<button
onClick={() =>
navigate(`/employee/${item.id}`)
}
onClick={() => navigate(`/employee/${item.id}`)}
className="dropdown-item py-1"
>
<i className="bx bx-detail bx-sm"></i> View
</button>
<button
className="dropdown-item py-1"
onClick={() => {
handleEmployeeModel(item.id);
}}
>
<i className="bx bx-edit bx-sm"></i> Edit
</button>
{!item.isSystem && (
{/* If ACTIVE employee */}
{item.isActive && (
<>
<button
className="dropdown-item py-1"
onClick={() =>
handleOpenDelete(item.id)
}
onClick={() => handleEmployeeModel(item.id)}
>
<i className="bx bx-task-x bx-sm"></i>{" "}
Suspend
<i className="bx bx-edit bx-sm"></i> Edit
</button>
{/* Suspend only when active */}
{item.isActive && (
<button
className="dropdown-item py-1"
onClick={() => handleOpenDelete(item)}
>
<i className="bx bx-task-x bx-sm"></i> Suspend
</button>
)}
<button
className="dropdown-item py-1"
type="button"
data-bs-toggle="modal"
data-bs-target="#managerole-modal"
onClick={() =>
setEmpForManageRole(item.id)
}
onClick={() => setEmpForManageRole(item.id)}
>
<i className="bx bx-cog bx-sm"></i>{" "}
Manage Role
<i className="bx bx-cog bx-sm"></i> Manage Role
</button>
</>
)}
{/* If INACTIVE employee AND inactive toggle is ON */}
{!item.isActive && showInactive && (
<button
className="dropdown-item py-1"
onClick={() => handleOpenDelete(item)}
>
<i className="bx bx-refresh bx-sm me-1"></i> Re-activate
</button>
)}
</div>
</div>
</td>
@ -687,9 +702,8 @@ const EmployeeList = () => {
<nav aria-label="Page">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
className={`page-item ${
currentPage === 1 ? "disabled" : ""
}`}
className={`page-item ${currentPage === 1 ? "disabled" : ""
}`}
>
<button
className="page-link btn-xs"
@ -702,9 +716,8 @@ const EmployeeList = () => {
{[...Array(totalPages)]?.map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link"
@ -716,9 +729,8 @@ const EmployeeList = () => {
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"

View File

@ -10,7 +10,7 @@ const EmployeeRepository = {
updateEmployee: (id, data) => api.put(`/users/${id}`, data),
// deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
getEmployeeProfile: (id) => api.get(`/api/employee/profile/get/${id}`),
deleteEmployee: (id) => api.delete(`/api/employee/${id}`),
deleteEmployee: (id,active) => api.delete(`/api/employee/${id}?active=${active}`),
getEmployeeName: (projectId, search) => {
const params = new URLSearchParams();