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