Vaibhav_Task-#89 #29

Merged
vikas.nale merged 3 commits from Vaibhav_Task-#89 into Feature_Task_Management 2025-04-19 04:52:06 +00:00
6 changed files with 123 additions and 56 deletions

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 left
</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 left
</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>
)}

View File

@ -21,8 +21,9 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
const [CurrentProject,setCurrentProject] = useState()
const [ isloading, setLoading ] = useState( false )
const [addressLength, setAddressLength] = useState(0);
const maxAddressLength = 500;
const projectSchema = z.object( {
...(project?.id ? { id: z.number().optional() } : {}),
name: z.string().min( 1, {message: "Project Name is required"} ),
@ -79,7 +80,9 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
projectStatusId: String(project.projectStatusId) || "0" ,
} :{}
)
setAddressLength(project?.projectAddress?.length || 0);
},[project,reset,])
@ -205,16 +208,20 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
</label>
<div className="input-group">
<textarea
type="text"
id="projectAddress"
name="projectAddress"
className="form-control"
{...register( "projectAddress" )}
maxLength={maxAddressLength}
{...register("projectAddress")}
onChange={(e) => {
setAddressLength(e.target.value.length);
}}
/>
</div>
<div className="text-end" style={{ fontSize: "12px" }}>
{maxAddressLength - addressLength} characters left
</div>
{errors.projectAddress && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.projectAddress.message}</div>}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3" >

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>
)}

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>
)}

View File

@ -64,13 +64,17 @@ const EditJobRole = ({data,onClose}) => {
};
useEffect(()=>{
useEffect(() => {
reset({
role:data?.name,
description:data?.description
})
role: data?.name,
description: data?.description
});
setDescriptionLength(data?.description?.length || 0);
}, [data, reset]);
},[data,reset])
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
const maxDescriptionLength = 255;
return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
@ -84,14 +88,22 @@ const EditJobRole = ({data,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>
{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 text-center">

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 " >