minor gui changes
This commit is contained in:
parent
284d36e5ac
commit
0fc43bb55b
@ -179,3 +179,13 @@
|
||||
.table-row-header {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.table > thead {
|
||||
vertical-align: middle;
|
||||
height: 2.2rem;
|
||||
}
|
||||
|
||||
.table > thead > tr :first-child {
|
||||
text-align: left;
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
|
@ -29,7 +29,7 @@ const EmployeeList = () => {
|
||||
const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
const { employees, loading, setLoading, error, recallEmployeeData } =
|
||||
useEmployeesAllOrByProjectId(selectedProject,showInactive);
|
||||
useEmployeesAllOrByProjectId(selectedProject, showInactive);
|
||||
const [projectsList, setProjectsList] = useState(projects || []);
|
||||
|
||||
const [employeeList, setEmployeeList] = useState([]);
|
||||
@ -46,16 +46,16 @@ const EmployeeList = () => {
|
||||
const handleSearch = (e) => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
setSearchText(value);
|
||||
|
||||
|
||||
if (!employeeList.length) return;
|
||||
|
||||
|
||||
const results = employeeList.filter((item) => {
|
||||
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
return fullName.includes(value);
|
||||
});
|
||||
|
||||
|
||||
setFilteredData(results);
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
@ -160,7 +160,6 @@ const EmployeeList = () => {
|
||||
recallEmployeeData(e.target.checked);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && (
|
||||
@ -325,22 +324,24 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-end mb-2">
|
||||
<label class="switch switch-primary">
|
||||
<label className="switch switch-primary">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="switch-input"
|
||||
className="switch-input"
|
||||
checked={showInactive}
|
||||
onChange={handleToggle}
|
||||
/>
|
||||
<span class="switch-toggle-slider">
|
||||
<span class="switch-on">
|
||||
<i class="icon-base bx bx-check"></i>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on">
|
||||
<i className="icon-base bx bx-check"></i>
|
||||
</span>
|
||||
<span class="switch-off">
|
||||
<i class="icon-base bx bx-x"></i>
|
||||
<span className="switch-off">
|
||||
<i className="icon-base bx bx-x"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="switch-label">Show Inactive Employees</span>
|
||||
<span className="switch-label">
|
||||
Show Inactive Employees
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<table
|
||||
@ -518,19 +519,21 @@ const EmployeeList = () => {
|
||||
{moment(item.joiningDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{showInactive ? <span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
:
|
||||
<span
|
||||
className="badge bg-label-success"
|
||||
text-capitalized=""
|
||||
>
|
||||
Active
|
||||
</span>}
|
||||
{showInactive ? (
|
||||
<span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="badge bg-label-success"
|
||||
text-capitalized=""
|
||||
>
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
{ManageEmployee && (
|
||||
<td className="text-end">
|
||||
@ -556,23 +559,29 @@ const EmployeeList = () => {
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</Link>
|
||||
{!item.isSystem && (<><button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => suspendEmployee(item.id)}
|
||||
>
|
||||
<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={() => handleConfigData(item.id)}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i> Manage
|
||||
Role
|
||||
</button></>)}
|
||||
{!item.isSystem && (
|
||||
<>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => suspendEmployee(item.id)}
|
||||
>
|
||||
<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={() =>
|
||||
handleConfigData(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i>{" "}
|
||||
Manage Role
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
@ -43,7 +43,6 @@ const ProjectListView = ({ projectData }) => {
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
};
|
||||
@ -58,7 +57,7 @@ const ProjectListView = ({ projectData }) => {
|
||||
building: projectDetails?.building,
|
||||
};
|
||||
|
||||
setProjectInfo( updatedProjectData );
|
||||
setProjectInfo(updatedProjectData);
|
||||
|
||||
if (getCachedData(`projectinfo-${projectInfo.id}`)) {
|
||||
cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData);
|
||||
@ -68,8 +67,10 @@ const ProjectListView = ({ projectData }) => {
|
||||
if (projects_list) {
|
||||
const updatedProjectsList = projects_list.map((project) =>
|
||||
project.id === projectInfo.id
|
||||
? { ...project, ...response.data,
|
||||
// tenant: project.tenant
|
||||
? {
|
||||
...project,
|
||||
...response.data,
|
||||
// tenant: project.tenant
|
||||
}
|
||||
: project
|
||||
);
|
||||
@ -111,19 +112,19 @@ const ProjectListView = ({ projectData }) => {
|
||||
</strong>
|
||||
</td>
|
||||
<td className="text-start small">{projectInfo.contactPerson}</td>
|
||||
<td className="small text-start">
|
||||
<td className="small text-center">
|
||||
<small>
|
||||
{projectInfo.startDate
|
||||
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</small>
|
||||
</td>
|
||||
<td className="mx-2 text-start small">
|
||||
<td className="mx-2 text-center small">
|
||||
{projectInfo.endDate
|
||||
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</td>
|
||||
<td className="mx-2 text-start small">{projectInfo.plannedWork}</td>
|
||||
<td className="mx-2 text-center small">{projectInfo.plannedWork}</td>
|
||||
<td className="py-6 mx-2 text-start small align-items-center">
|
||||
<ProgressBar
|
||||
plannedWork={projectInfo.plannedWork}
|
||||
@ -133,7 +134,7 @@ const ProjectListView = ({ projectData }) => {
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className="mx-6">
|
||||
<td className="mx-3">
|
||||
<p className="mb-0">
|
||||
<span
|
||||
className={`badge ${getProjectStatusColor(
|
||||
@ -145,7 +146,7 @@ const ProjectListView = ({ projectData }) => {
|
||||
</p>
|
||||
</td>
|
||||
|
||||
<td className={`mx-2 ${ManageProject ? "d-sm-table-cell":"d-none"}`}>
|
||||
<td className={`mx-2 ${ManageProject ? "d-sm-table-cell" : "d-none"}`}>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
|
Loading…
x
Reference in New Issue
Block a user