60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import RoleBadge from './RoleBadge';
|
|
import Avatar from '../common/Avatar';
|
|
|
|
const AssignEmployeeCard = ({
|
|
employee,
|
|
jobRoles,
|
|
isChecked,
|
|
onRoleChange,
|
|
onCheckboxChange,
|
|
}) => {
|
|
const [currentJobRole, setCurrentJobRole] = useState(employee.jobRoleId);
|
|
|
|
useEffect(() => {
|
|
setCurrentJobRole(employee.jobRoleId);
|
|
}, [employee.jobRoleId]);
|
|
|
|
const handleRoleChange = (newRoleId) => {
|
|
setCurrentJobRole(newRoleId);
|
|
onRoleChange(employee.id, newRoleId);
|
|
};
|
|
|
|
const handleCheckboxChange = () => {
|
|
if (!employee.isActive) {
|
|
onCheckboxChange(employee.id);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="assign-employee-card d-flex justify-content-between align-items-center px-2 py-1 border-bottom">
|
|
<div className="d-flex align-items-center flex-grow-1">
|
|
<div className="avatar me-3">
|
|
|
|
<Avatar firstName={employee.firstName} lastName={employee.l} />
|
|
</div>
|
|
<div className="employee-info">
|
|
<p className="mb-0 d-none d-sm-block">{employee.firstName} {employee.lastName} </p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex align-items-center">
|
|
<RoleBadge
|
|
JobRoles={jobRoles}
|
|
currentJobRole={currentJobRole}
|
|
onRoleChange={handleRoleChange}
|
|
/>
|
|
<input
|
|
className="form-check-input ms-3"
|
|
type="checkbox"
|
|
checked={isChecked}
|
|
disabled={employee.isActive}
|
|
onChange={handleCheckboxChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AssignEmployeeCard; |