Vaibhav_Task-#89 #29
@ -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>
|
||||
)}
|
||||
|
@ -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" >
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -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">
|
||||
|
@ -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 " >
|
||||
|
Loading…
x
Reference in New Issue
Block a user