admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add character length tracking for address and description fields in employee management forms

Browse Source
This commit is contained in:
Vaibhav Surve 2025-04-18 17:40:47 +05:30
parent 7308bd8d03
commit 4a16e27a1e
4 changed files with 85 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Employee/ManageEmployee.jsx
View File

@ -30,7 +30,9 @@ const ManageEmployee = () => {
const [isloading, setLoading] = useState(false);
const navigation = useNavigate();
const [currentEmployee, setCurrentEmployee] = useState();
const [currentAddressLength, setCurrentAddressLength] = useState(0);
const [permanentAddressLength, setPermanentAddressLength] = useState(0);
const userSchema = z.object({
...(employeeId ? { Id: z.number().optional() } : {}),
FirstName: z.string().min(1, { message: "First Name is required" }),
@ -217,6 +219,8 @@ const ManageEmployee = () => {
}
: {} // Empty object resets the form
);
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
}, [currentEmployee, reset]);
return (
@ -430,12 +434,17 @@ const ManageEmployee = () => {
aria-label="Current Address"
aria-describedby="basic-icon-default-message2"
{...register("CurrentAddress")}
onChange={(e) => {
setCurrentAddressLength(e.target.value.length);
// let react-hook-form still handle it
register("CurrentAddress").onChange(e);
}}
></textarea>
<div className="text-end small">
{500 - currentAddressLength} characters remaining
</div>
{errors.CurrentAddress && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.CurrentAddress.message}
</div>
)}
@ -452,12 +461,16 @@ const ManageEmployee = () => {
aria-label="Permanent Address"
aria-describedby="basic-icon-default-message2"
{...register("PermanentAddress")}
onChange={(e) => {
setPermanentAddressLength(e.target.value.length);
register("PermanentAddress").onChange(e);
}}
></textarea>
<div className="text-end small">
{500 - permanentAddressLength} characters remaining
</div>
{errors.PermanentAddress && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.PermanentAddress.message}
</div>
)}

33
src/components/master/CreateJobRole.jsx
View File

@ -54,18 +54,20 @@ const CreateJobRole = ({onClose}) => {
};
const resetForm =()=>{
reset({
role:"",
description:""
})
}
const resetForm = () => {
reset({
role: "",
description: ""
});
setDescriptionLength(0);
}
useEffect(()=>{
return ()=>resetForm()
},[])
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@ -79,11 +81,18 @@ const CreateJobRole = ({onClose}) => {
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
></textarea>
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}

24
src/components/master/CreateRole.jsx
View File

@ -73,6 +73,11 @@ const onSubmit = (values) => {
};
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
useEffect(() => {
setDescriptionLength(0);
}, []);
return (
@ -91,11 +96,20 @@ const onSubmit = (values) => {
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
></textarea>
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
// Also update react-hook-form's value
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}

34
src/components/master/EditRole.jsx
View File

@ -121,13 +121,18 @@ const EditMaster=({master,onClose})=> {
};
useEffect(()=>{
useEffect(() => {
reset({
role: master?.item?.role,
description: master?.item?.description,
permissions: initialPermissions,
})
},[master,reset])
});
setDescriptionLength(master?.item?.description?.length || 0);
}, [master, reset]);
const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
const maxDescriptionLength = 255;
return (
@ -144,14 +149,21 @@ const EditMaster=({master,onClose})=> {
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
></textarea>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
<textarea
rows="3"
{...register("description")}
className={`form-control ${errors.description ? 'is-invalids' : ''}`}
onChange={(e) => {
setDescriptionLength(e.target.value.length);
register("description").onChange(e);
}}
></textarea>
<div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left
</div>
{errors.description && (
<p className="text-danger">{errors.description.message}</p>
)}
</div>
<div className="col-12 col-md-12 mx-2s " >