diff --git a/src/components/CalendarModal/CalendarModal.jsx b/src/components/CalendarModal/CalendarModal.jsx index b173404f8..bf462fd6f 100644 --- a/src/components/CalendarModal/CalendarModal.jsx +++ b/src/components/CalendarModal/CalendarModal.jsx @@ -79,6 +79,10 @@ const today = new Date() export function useCalendarState(startDateInit = today, endDateInit = today) { const [dateTimeStart, setStart] = useState(startDateInit) const [dateTimeEnd, setEnd] = useState(endDateInit) + const resetDates = () => { + setStart(startDateInit); + setEnd(startDateInit); + }; - return { dateTimeStart, dateTimeEnd, setStart, setEnd } + return { dateTimeStart, dateTimeEnd, setStart, setEnd, resetDates } } \ No newline at end of file diff --git a/src/views/AddTenant/addTenant.js b/src/views/AddTenant/addTenant.js index ccd9ddd7c..03666d4e1 100644 --- a/src/views/AddTenant/addTenant.js +++ b/src/views/AddTenant/addTenant.js @@ -23,7 +23,7 @@ const validationSchema = Yup.object().shape({ .min(7, "*Phone Number must have at least 7 characters") .max(20, "*Phone Number can't be longer than 20 characters") .required("*Phone Number is required"), - unitNum: Yup.number(), + unitNum: Yup.string(), occupants: Yup.number(), }); @@ -39,12 +39,16 @@ export const AddTenant = () => { const [propertyOptions, setPropertyOptions] = useState([]); const [propertySearchResults, setPropertySearchResults] = useState([]); const [showAddProperty, setShowAddProperty] = useState(false); + const [isValidationActive, setIsValidationActive] = useState(false); + const [propertyErrorText, setPropertyErrorText] = useState(""); const calendarState = useCalendarState(); - const { dateTimeStart, dateTimeEnd, } = calendarState; + const { dateTimeStart, dateTimeEnd, resetDates } = calendarState; useMountEffect(() => getProperties()); + useEffect(() => validateForm(), [propertySelection, dateTimeStart, dateTimeEnd]); + useEffect(() => { axios.post("/api/users/role", { userrole: RoleEnum.STAFF, @@ -88,13 +92,8 @@ export const AddTenant = () => { }; const handleFormSubmit = (data) => { - let body = { - ...data, - propertyID: propertySelection[0].key, - staffIDs: staffSelections && staffSelections.map(staff => staff.key) - }; axios - .post(`/api/tenants`, body, makeAuthHeaders(context)) + .post(`/api/tenants`, data, makeAuthHeaders(context)) .then((response) => { Toast("Tenant Created Successfully!", "success"); }) @@ -144,6 +143,17 @@ export const AddTenant = () => { setStaffSelections(selectedChoices); }; + const validateForm = (values) => { + setIsValidationActive(true); + + if (dateTimeStart !== dateTimeEnd) { + setPropertyErrorText(dateTimeStart !== dateTimeEnd && propertySelection.length + ? "" + : "*Property is a required field" + ); + } + }; + return (
@@ -158,16 +168,31 @@ export const AddTenant = () => { occupants: "", }} validationSchema={validationSchema} + validate={validateForm} validateOnBlur={false} - onSubmit={(values, { setSubmitting }) => { + onSubmit={(values, { setSubmitting, resetForm }) => { const toSubmit = { ...values, - dateTimeStart, - dateTimeEnd, + occupants: values.occupants || null, + unitNum: values.unitNum || null, + propertyID: propertySelection.length ? propertySelection[0].key : null, + staffIDs: staffSelections && staffSelections.map(staff => staff.key) }; + if (dateTimeStart !== dateTimeEnd) { + toSubmit.dateTimeStart = dateTimeStart; + toSubmit.dateTimeEnd = dateTimeEnd; + } setSubmitting(true); handleFormSubmit(toSubmit); + resetForm(); + setPropertySearchText(""); + setPropertySelection([]); + setStaffSearchText(""); + setStaffSelections([]); + setPropertyErrorText(""); + resetDates(); + setIsValidationActive(false); setSubmitting(false); }} > @@ -275,18 +300,22 @@ export const AddTenant = () => { onSelectionChange={setPropertySelection} onChange={handlePropertySearch} onClear={handlePropertySearch} + preSelectedChoices={propertySelection} shadow /> + {isValidationActive && propertyErrorText ? ( +
{propertyErrorText}
+ ) : null} + Create New Property +
-

UNIT

+

LEASE

+ { value={values.unitNum} placeholder="Unit Number (Optional)" /> - {errors.number ? ( -
{errors.number}
+ {errors.unitNum ? ( +
{errors.unitNum}
) : null}
@@ -321,7 +350,7 @@ export const AddTenant = () => { name="occupants" onChange={handleChange} value={values.occupants} - placeholder="Total number of unit tenants" + placeholder="Total number of unit tenants (Optional)" /> {errors.occupants ? (
{errors.occupants}
@@ -339,15 +368,14 @@ export const AddTenant = () => { className="column form-field" type="text" name="lease" - onChange={null} - value={dateTimeEnd !== dateTimeStart ? `${dateTimeStart.toDateString()} - ${dateTimeEnd.toDateString()}` : ""} - - placeholder="Lease dates (Start and End)" + onChange={validateForm} + value={dateTimeEnd !== dateTimeStart + ? `${dateTimeStart.toDateString()} - ${dateTimeEnd.toDateString()}` + : "" + } + placeholder="Lease dates (Optional)" /> - {errors.lease ? ( -
{errors.lease}
- ) : null}