diff --git a/app/src/features/surveys/observations/create/CreateObservationPage.tsx b/app/src/features/surveys/observations/create/CreateObservationPage.tsx index f825867889..3f7b2dda91 100644 --- a/app/src/features/surveys/observations/create/CreateObservationPage.tsx +++ b/app/src/features/surveys/observations/create/CreateObservationPage.tsx @@ -222,71 +222,71 @@ const CreateObservationPage = () => { return ( <> - - - '}> - - {projectName} - - - {surveyName} - - - Observations - - - Create Observation - - - } - buttonJSX={ - <> - formikRef.current?.submitForm()} - data-testid="submit-observation-button"> - Save and Exit - - - - } - /> + + '}> + + {projectName} + + + {surveyName} + + + Observations + + + Create Observation + + + } + buttonJSX={ + <> + formikRef.current?.submitForm()} + data-testid="submit-observation-button"> + Save and Exit + + + + } + /> - - + + + createObservation(formikData)} formikRef={formikRef} /> - - formikRef.current?.submitForm()} - data-testid="submit-observation-button"> - Save and Exit - - - - - - + + + formikRef.current?.submitForm()} + data-testid="submit-observation-button"> + Save and Exit + + + + + ); }; diff --git a/app/src/features/surveys/observations/form/ObservationForm.interface.tsx b/app/src/features/surveys/observations/form/ObservationForm.interface.tsx index 9629c863d8..957bbbda00 100644 --- a/app/src/features/surveys/observations/form/ObservationForm.interface.tsx +++ b/app/src/features/surveys/observations/form/ObservationForm.interface.tsx @@ -11,13 +11,19 @@ import { export interface IObservationSubcountForm { _id?: string; // Temporary id for react key observation_subcount_id: number | null; - observation_subcount_sign_id: number | null; subcount: number | null; comment: string | null; measurements: (SubcountQualitativeMeasurement | SubcountQuantitativeMeasurement)[]; + markings?: never[]; // TODO - future enhancement + // TODO - move environments out of subcounts and into standard columns + observation_subcount_sign_id: number | null; + // TODO - move environments out of subcounts and into standard columns environments: (SubcountQualitativeEnvironment | SubcountQuantitativeEnvironment)[]; } +/** + * Defines the form data structure for the ObservationForm component. + */ export interface IObservationForm { standardColumns: Omit & { survey_observation_id: number | null; diff --git a/app/src/features/surveys/observations/form/ObservationForm.tsx b/app/src/features/surveys/observations/form/ObservationForm.tsx index 08d19b0194..93215aa46f 100644 --- a/app/src/features/surveys/observations/form/ObservationForm.tsx +++ b/app/src/features/surveys/observations/form/ObservationForm.tsx @@ -116,7 +116,7 @@ const ObservationForm = ( {/* Species Form */} - + @@ -135,13 +135,14 @@ const ObservationForm = ( {/* Location */} - + + {/* Datetime Form */} - + @@ -150,21 +151,21 @@ const ObservationForm = ( - + {/* Subcounts Form */} - + {/* Comments Form */} - + diff --git a/app/src/features/surveys/observations/form/comment/ObservationCommentForm.tsx b/app/src/features/surveys/observations/form/comment/ObservationCommentForm.tsx index 19ebafe66b..c58d1b7595 100644 --- a/app/src/features/surveys/observations/form/comment/ObservationCommentForm.tsx +++ b/app/src/features/surveys/observations/form/comment/ObservationCommentForm.tsx @@ -4,20 +4,26 @@ import Button from '@mui/material/Button'; import CustomTextField from 'components/fields/CustomTextField'; import { useState } from 'react'; +export interface IObservationCommentFormProps { + formikSectionName: string; +} + /** * Returns form controls for adding comments to the observation * * @template FormikValuesType * @return {*} */ -export const ObservationCommentForm = () => { +export const ObservationCommentForm = (props: IObservationCommentFormProps) => { + const { formikSectionName } = props; + const [showComment, setShowComment] = useState(false); return ( <> {showComment ? ( { - const { formikFieldName } = props; + const { formikSectionName } = props; return ( - - + + ); }; diff --git a/app/src/features/surveys/observations/form/environments/ObservationEnvironmentForm.tsx b/app/src/features/surveys/observations/form/environments/ObservationEnvironmentForm.tsx index 60e773d4f7..1a71b5230b 100644 --- a/app/src/features/surveys/observations/form/environments/ObservationEnvironmentForm.tsx +++ b/app/src/features/surveys/observations/form/environments/ObservationEnvironmentForm.tsx @@ -25,7 +25,7 @@ const initialEnvironmentValues = { }; interface IObservationEnvironmentFormProps { - formikFieldName: string; // Accept formikFieldName as a prop + formikSectionName: string; } /** @@ -35,7 +35,8 @@ interface IObservationEnvironmentFormProps { * @return {*} */ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormProps) => { - const { formikFieldName } = props; + const { formikSectionName } = props; + const { values } = useFormikContext(); const biohubApi = useBiohubApi(); @@ -49,11 +50,11 @@ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormPro const environments: ( | ObservationSubcountQualitativeEnvironmentObject | ObservationSubcountQuantitativeEnvironmentObject - )[] = get(values, formikFieldName) ?? []; + )[] = get(values, formikSectionName) ?? []; return ( { return ( <> @@ -73,7 +74,7 @@ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormPro label: item.name })) ]} - categoryFormikFieldName={`${formikFieldName}[${index}].environment_quantitative_id`} + categoryFormikFieldName={`${formikSectionName}[${index}].environment_quantitative_id`} getCategoryDataType={(categoryId) => { const quantitative = (environmentsDataLoader.data?.quantitative_environments ?? []).find( (item) => item.environment_quantitative_id === categoryId @@ -111,8 +112,8 @@ export const ObservationEnvironmentForm = (props: IObservationEnvironmentFormPro (item) => item.environment_quantitative_id === categoryId ); return quantitative - ? `${formikFieldName}[${index}].value` - : `${formikFieldName}[${index}].environment_qualitative_option_id`; + ? `${formikSectionName}[${index}].value` + : `${formikSectionName}[${index}].environment_qualitative_option_id`; }} onDelete={() => arrayHelpers.remove(index)} /> diff --git a/app/src/features/surveys/observations/form/location/ObservationLocationForm.tsx b/app/src/features/surveys/observations/form/location/ObservationLocationForm.tsx index 71800bfbbd..3cc4a734d2 100644 --- a/app/src/features/surveys/observations/form/location/ObservationLocationForm.tsx +++ b/app/src/features/surveys/observations/form/location/ObservationLocationForm.tsx @@ -2,16 +2,16 @@ import Stack from '@mui/material/Stack'; import CustomTextField from 'components/fields/CustomTextField'; interface IObservationLocationFormProps { - formikFieldName: string; + formikSectionName: string; } const ObservationLocationForm = (props: IObservationLocationFormProps) => { - const { formikFieldName } = props; + const { formikSectionName } = props; return ( - - + + ); }; diff --git a/app/src/features/surveys/observations/form/sampling/ObservationSamplingForm.tsx b/app/src/features/surveys/observations/form/sampling/ObservationSamplingForm.tsx index 6e8963006f..ec9d36d810 100644 --- a/app/src/features/surveys/observations/form/sampling/ObservationSamplingForm.tsx +++ b/app/src/features/surveys/observations/form/sampling/ObservationSamplingForm.tsx @@ -18,6 +18,8 @@ const ObservationSamplingForm = (props: IObservationSamplingFormProps) => { const samplingInformationCache = useSamplingInformationCache(); + // Initialize the cached sampling information. + // Optional when creating new records. Necessary when editing existing records. samplingInformationCache.initCachedSamplingInformationRef({ periods: [] }); return ( diff --git a/app/src/features/surveys/observations/form/sampling/components/MethodTechniqueField.tsx b/app/src/features/surveys/observations/form/sampling/components/MethodTechniqueField.tsx index c7c6b072b2..70016bc5a6 100644 --- a/app/src/features/surveys/observations/form/sampling/components/MethodTechniqueField.tsx +++ b/app/src/features/surveys/observations/form/sampling/components/MethodTechniqueField.tsx @@ -72,8 +72,6 @@ export const MethodTechniqueField = (props: IMethodTechniqueFieldProps) => { keyword }); - console.log(response); - if (!isMounted()) { return; } diff --git a/app/src/features/surveys/observations/form/species/ObservationSpeciesForm.tsx b/app/src/features/surveys/observations/form/species/ObservationSpeciesForm.tsx index 041fea8112..66d0f62df7 100644 --- a/app/src/features/surveys/observations/form/species/ObservationSpeciesForm.tsx +++ b/app/src/features/surveys/observations/form/species/ObservationSpeciesForm.tsx @@ -4,19 +4,19 @@ import Stack from '@mui/material/Stack'; import AutocompleteField from 'components/fields/AutocompleteField'; import SpeciesAutocompleteField from 'components/species/components/SpeciesAutocompleteField'; import SpeciesSelectedCard from 'components/species/components/SpeciesSelectedCard'; +import { IObservationForm } from 'features/surveys/observations/form/ObservationForm.interface'; import { useFormikContext } from 'formik'; import { useCodesContext } from 'hooks/useContext'; -import { ICreateObservationRequest } from 'interfaces/useObservationApi.interface'; import { get } from 'lodash-es'; import { useEffect } from 'react'; import { TransitionGroup } from 'react-transition-group'; interface IObservationSpeciesFormProps { - formikFieldName: string; + formikSectionName: string; } const ObservationSpeciesForm = (props: IObservationSpeciesFormProps) => { - const { formikFieldName } = props; + const { formikSectionName } = props; const codesContext = useCodesContext(); @@ -24,22 +24,22 @@ const ObservationSpeciesForm = (props: IObservationSpeciesFormProps) => { codesContext.codesDataLoader.load(); }, [codesContext.codesDataLoader]); - const { setFieldValue, values, errors } = useFormikContext(); + const { setFieldValue, values, errors } = useFormikContext(); return ( { if (species.tsn) { - setFieldValue(`${formikFieldName}.itis_tsn`, species.tsn); - setFieldValue(`${formikFieldName}.itis_scientific_name`, species.scientificName); + setFieldValue(`${formikSectionName}.itis_tsn`, species.tsn); + setFieldValue(`${formikSectionName}.itis_scientific_name`, species.scientificName); } }} clearOnSelect={true} - error={get(errors, `${formikFieldName}.itis_tsn`)} + error={get(errors, `${formikSectionName}.itis_tsn`)} /> {values.standardColumns.itis_tsn && values.standardColumns.itis_scientific_name && ( @@ -52,7 +52,7 @@ const ObservationSpeciesForm = (props: IObservationSpeciesFormProps) => { tsn: values.standardColumns.itis_tsn ?? '' }} handleRemove={() => { - setFieldValue(`${formikFieldName}.itis_tsn`, null); + setFieldValue(`${formikSectionName}.itis_tsn`, null); }} /> @@ -60,8 +60,8 @@ const ObservationSpeciesForm = (props: IObservationSpeciesFormProps) => { ({ label: sign.name, diff --git a/app/src/features/surveys/observations/form/subcounts/SubcountForm.tsx b/app/src/features/surveys/observations/form/subcounts/SubcountForm.tsx index 189691add5..5387a9dc15 100644 --- a/app/src/features/surveys/observations/form/subcounts/SubcountForm.tsx +++ b/app/src/features/surveys/observations/form/subcounts/SubcountForm.tsx @@ -11,13 +11,21 @@ import { v4 } from 'uuid'; import { MeasurementsSearch } from '../../observations-table/configure-columns/components/measurements/search/MeasurementsSearch'; import { MeasurementRow } from './measurements/ObservationMeasurementRowForm'; +export interface ISubcountFormProps { + formikSectionName: string; +} + /** * Returns a grid-like stack of autocomplete components for creating subcounts with optional measurements * + * @param {ISubcountFormProps} props * @returns */ -export const SubcountForm = () => { +export const SubcountForm = (props: ISubcountFormProps) => { + const { formikSectionName } = props; + const { values, setFieldValue } = useFormikContext(); + const [, allSpeciesWithParentsTsns] = useFocalOrObservedSpeciesTsns(); // Keep selected measurements in state to get measurement names @@ -40,7 +48,7 @@ export const SubcountForm = () => { ] })); - setFieldValue('subcounts', subcounts); + setFieldValue(formikSectionName, subcounts); }; const handleRemoveMeasurement = (taxonMeasurementId: string) => { @@ -50,12 +58,12 @@ export const SubcountForm = () => { measurements: subcount.measurements.filter((measurement) => measurement.measurement_id !== taxonMeasurementId) })); - setFieldValue('subcounts', updatedSubcounts); + setFieldValue(formikSectionName, updatedSubcounts); }; const handleRemoveSubcount = (_id: string) => { const updatedSubcounts = values.subcounts.filter((subcount) => subcount._id !== _id); - setFieldValue('subcounts', updatedSubcounts); + setFieldValue(formikSectionName, updatedSubcounts); }; return ( @@ -105,7 +113,7 @@ export const SubcountForm = () => { ); // Create a new subcount with unique measurements and null values - setFieldValue('subcounts', [ + setFieldValue(formikSectionName, [ ...values.subcounts, { _id: v4(),