Merge branch 'pramod_Bug#29InputLimmit' into Feature_Task_Management
This commit is contained in:
commit
a38d811603
@ -12,7 +12,7 @@ import {checkIfCurrentDate} from "../../utils/dateUtils";
|
||||
|
||||
const schema = z.object({
|
||||
markTime: z.string().nonempty({message:"Time is required"}),
|
||||
description:z.string().optional()
|
||||
description:z.string().max(200,"description should less than 200 chracters").optional()
|
||||
});
|
||||
|
||||
const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
@ -29,7 +29,8 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
reset,
|
||||
setValue,
|
||||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
resolver: zodResolver( schema ),
|
||||
mode:"onChange"
|
||||
});
|
||||
|
||||
const onSubmit = ( data ) =>
|
||||
@ -84,7 +85,8 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
|
||||
rows="3"
|
||||
name="description"
|
||||
className="form-control"
|
||||
{...register("description")}
|
||||
{...register( "description" )}
|
||||
maxLength={200}
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-danger">{errors.description.message}</p>
|
||||
|
||||
@ -32,7 +32,7 @@ const ManageEmployee = () => {
|
||||
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" }),
|
||||
@ -123,6 +123,7 @@ const ManageEmployee = () => {
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
getValues,
|
||||
@ -146,8 +147,11 @@ const ManageEmployee = () => {
|
||||
PhoneNumber: currentEmployee?.phoneNumber || "",
|
||||
JobRoleId: currentEmployee?.jobRoleId || "",
|
||||
},
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const AadharNumberValue = watch("AadharNumber") || "";
|
||||
|
||||
const onSubmit = (data) => {
|
||||
setLoading(true);
|
||||
|
||||
@ -342,6 +346,7 @@ const ManageEmployee = () => {
|
||||
{...register("PhoneNumber")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
{errors.PhoneNumber && (
|
||||
<div
|
||||
@ -444,7 +449,10 @@ const ManageEmployee = () => {
|
||||
{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>
|
||||
)}
|
||||
@ -470,7 +478,10 @@ const ManageEmployee = () => {
|
||||
{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>
|
||||
)}
|
||||
@ -487,7 +498,7 @@ const ManageEmployee = () => {
|
||||
<div className="form-text text-start">Role</div>
|
||||
<div className="input-group input-group-merge ">
|
||||
<select
|
||||
className="form-select form-select-sm "
|
||||
className="form-select form-select-sm"
|
||||
{...register("JobRoleId")}
|
||||
id="JobRoleId"
|
||||
aria-label=""
|
||||
@ -520,6 +531,7 @@ const ManageEmployee = () => {
|
||||
{...register("EmergencyContactPerson")}
|
||||
className="form-control form-control-sm"
|
||||
id="EmergencyContactPerson"
|
||||
maxLength={50}
|
||||
placeholder="Contact Person"
|
||||
/>
|
||||
{errors.EmergencyContactPerson && (
|
||||
@ -541,6 +553,7 @@ const ManageEmployee = () => {
|
||||
className="form-control form-control-sm phone-mask"
|
||||
id="EmergencyPhoneNumber"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
/>
|
||||
{errors.EmergencyPhoneNumber && (
|
||||
<div
|
||||
@ -562,6 +575,8 @@ const ManageEmployee = () => {
|
||||
className="form-control form-control-sm"
|
||||
id="AadharNumber"
|
||||
placeholder="AADHAR Number"
|
||||
maxLength={12}
|
||||
inputMode="numeric"
|
||||
/>
|
||||
{errors.AadharNumber && (
|
||||
<div className="danger-text text-start">
|
||||
@ -578,6 +593,7 @@ const ManageEmployee = () => {
|
||||
className="form-control form-control-sm"
|
||||
id="PanNumber"
|
||||
placeholder="PAN Number"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.PanNumber && (
|
||||
<div
|
||||
|
||||
@ -1,110 +1,125 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm,Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {z} from 'zod';
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
|
||||
|
||||
const currentDate = new Date().toISOString().split('T')[0];
|
||||
const currentDate = new Date().toISOString().split("T")[0];
|
||||
const formatDate = (date) => {
|
||||
if (!date) {
|
||||
return currentDate;
|
||||
return currentDate;
|
||||
}
|
||||
const d = new Date(date);
|
||||
if (isNaN(d.getTime())) {
|
||||
return currentDate;
|
||||
}
|
||||
return d.toISOString().split('T')[0];
|
||||
return d.toISOString().split("T")[0];
|
||||
};
|
||||
const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
{
|
||||
|
||||
const [CurrentProject,setCurrentProject] = useState()
|
||||
const [ isloading, setLoading ] = useState( false )
|
||||
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"} ),
|
||||
contactPerson: z.string().min( 1, {message: "Contact Person Name is required"} ),
|
||||
projectAddress: z.string().min( 1, {message: "Address is required"} ).max(500, 'Address must not exceed 150 characters'),
|
||||
startDate: z.string().min( 1, {message: "Start Date is required"} ).default(currentDate),
|
||||
endDate: z.string().min( 1, {message: "End Date is required"} ).default(currentDate),
|
||||
projectStatusId: z
|
||||
.string()
|
||||
.min(1, { message: "Status is required" })
|
||||
.transform((val) => {
|
||||
const num = Number(val);
|
||||
if (isNaN(num)) {
|
||||
throw new Error("Status must be a valid number");
|
||||
const projectSchema = z
|
||||
.object({
|
||||
...(project?.id ? { id: z.number().optional() } : {}),
|
||||
name: z.string().min(1, { message: "Project Name is required" }),
|
||||
contactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Contact Person Name is required" }),
|
||||
projectAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Address is required" })
|
||||
.max(500, "Address must not exceed 150 characters"),
|
||||
startDate: z
|
||||
.string()
|
||||
.min(1, { message: "Start Date is required" })
|
||||
.default(currentDate),
|
||||
endDate: z
|
||||
.string()
|
||||
.min(1, { message: "End Date is required" })
|
||||
.default(currentDate),
|
||||
projectStatusId: z
|
||||
.string()
|
||||
.min(1, { message: "Status is required" })
|
||||
.transform((val) => {
|
||||
const num = Number(val);
|
||||
if (isNaN(num)) {
|
||||
throw new Error("Status must be a valid number");
|
||||
}
|
||||
return num;
|
||||
}),
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
const start = new Date(data.startDate);
|
||||
const end = new Date(data.endDate);
|
||||
return end > start;
|
||||
},
|
||||
{
|
||||
path: ["endDate"], // attaches the error to the endDate field
|
||||
message: "End Date must be greater than Start Date",
|
||||
}
|
||||
return num;
|
||||
}),
|
||||
|
||||
} ) .refine((data) => {
|
||||
const start = new Date(data.startDate);
|
||||
const end = new Date(data.endDate);
|
||||
return end > start;
|
||||
}, {
|
||||
path: ['endDate'], // attaches the error to the endDate field
|
||||
message: 'End Date must be greater than Start Date',
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(projectSchema),
|
||||
defaultValues: {
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || currentDate,
|
||||
endDate: formatDate(project?.endDate) || currentDate,
|
||||
projectStatusId: String(project?.projectStatusId || "0"),
|
||||
},
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
|
||||
const {register, control, handleSubmit, formState: {errors}, reset, getValues} = useForm( {
|
||||
resolver: zodResolver( projectSchema ),
|
||||
defaultValues: {
|
||||
id:project?.id || "",
|
||||
name:project?.name || "",
|
||||
contactPerson:project?.contactPerson || "",
|
||||
projectAddress:project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate )|| currentDate,
|
||||
endDate: formatDate(project?.endDate ) || currentDate,
|
||||
projectStatusId: String(project?.projectStatusId || "0"),
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
useEffect( () =>
|
||||
{
|
||||
setCurrentProject(project)
|
||||
useEffect(() => {
|
||||
setCurrentProject(project);
|
||||
reset(
|
||||
project ? {
|
||||
id:project?.id || "",
|
||||
name:project?.name || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate:formatDate(project?.startDate )|| "",
|
||||
endDate: formatDate(project?.endDate ) || "",
|
||||
projectStatusId: String(project.projectStatusId) || "0" ,
|
||||
|
||||
} :{}
|
||||
|
||||
)
|
||||
setAddressLength(project?.projectAddress?.length || 0);
|
||||
},[project,reset,])
|
||||
project
|
||||
? {
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || "",
|
||||
endDate: formatDate(project?.endDate) || "",
|
||||
projectStatusId: String(project.projectStatusId) || "0",
|
||||
}
|
||||
: {}
|
||||
);
|
||||
setAddressLength(project?.projectAddress?.length || 0);
|
||||
}, [project, reset]);
|
||||
|
||||
|
||||
const onSubmitForm = (updatedProject) => {
|
||||
setLoading(true);
|
||||
handleSubmitForm(updatedProject);
|
||||
};
|
||||
|
||||
const onSubmitForm = (updatedProject) => {
|
||||
setLoading( true )
|
||||
handleSubmitForm( updatedProject )
|
||||
};
|
||||
|
||||
useEffect( () =>
|
||||
{
|
||||
return ()=>setLoading(false)
|
||||
},[])
|
||||
useEffect(() => {
|
||||
return () => setLoading(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal" role="document">
|
||||
<div
|
||||
className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
|
||||
role="document"
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-body p-sm-4 p-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
@ -122,12 +137,18 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
|
||||
className="form-control"
|
||||
placeholder="Project Name"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.name.message}</div>}
|
||||
{errors.name && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.name.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-12">
|
||||
<label className="form-label" htmlFor="contactPerson">
|
||||
@ -141,8 +162,14 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
placeholder="Contact Person"
|
||||
{...register("contactPerson")}
|
||||
/>
|
||||
{errors.contactPerson && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.contactPerson.message}</div>}
|
||||
|
||||
{errors.contactPerson && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.contactPerson.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6">
|
||||
@ -152,13 +179,18 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
type="date"
|
||||
|
||||
name="startDate"
|
||||
{...register("startDate")}
|
||||
id="startDate"
|
||||
/>
|
||||
{errors.startDate && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.startDate.message}</div>}
|
||||
|
||||
{errors.startDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.startDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label" htmlFor="endDate">
|
||||
@ -167,13 +199,18 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
type="date"
|
||||
|
||||
name="endDate"
|
||||
{...register("endDate")}
|
||||
id="endDate"
|
||||
/>
|
||||
{errors.endDate && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.endDate.message}</div>}
|
||||
|
||||
{errors.endDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.endDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
@ -186,7 +223,7 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
aria-label="Default select example"
|
||||
{...register("projectStatusId", {
|
||||
required: "Status is required",
|
||||
valueAsNumber: false
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
<option disabled>Status</option>
|
||||
@ -198,8 +235,14 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
|
||||
<option value="4">Completed</option>
|
||||
</select>
|
||||
{errors.projectStatusId && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.projectStatusId.message}</div>}
|
||||
|
||||
{errors.projectStatusId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.projectStatusId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
@ -221,13 +264,20 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
|
||||
<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>}
|
||||
{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" >
|
||||
{isloading ? "Please Wait" : project?.id ? "Update":"Submit"}
|
||||
<button type="submit" className="btn btn-sm btn-primary me-3">
|
||||
{isloading ? "Please Wait" : project?.id ? "Update" : "Submit"}
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={onClose}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user