Skip to content

Staging form viewer finale #4405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
plasticviking merged 11 commits into from
Feb 3, 2026
Merged

Staging form viewer finale #4405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1d8305e
Add maplibre and turf
LocalNewsTV Feb 2, 2026
75b8486
Add Map Component to FormViewer
LocalNewsTV Feb 2, 2026
2e7b680
Add DispersalMonitoring subtype
LocalNewsTV Feb 2, 2026
7ba6303
Add turf bbox
LocalNewsTV Feb 2, 2026
186a7a2
Center map around shape
LocalNewsTV Feb 2, 2026
f36abe9
Elvis target plant phenology
LocalNewsTV Feb 2, 2026
ef44d17
Split microsites
LocalNewsTV Feb 2, 2026
83437c2
Add Biocontrol Collection Subtype
LocalNewsTV Feb 2, 2026
72fdf9d
Add BiocontrolRelease subtype, flag empty array elements
LocalNewsTV Feb 2, 2026
d076539
remove errant log
LocalNewsTV Feb 2, 2026
964a7ba
Serializers Rename (#4406)
LocalNewsTV Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 72 additions & 3 deletions api-rework/client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions api-rework/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
"npm": ">= 6.0.0"
},
"dependencies": {
"@turf/bbox": "7.3.3",
"@turf/centroid": "7.3.3",
"esbuild": "^0.27.2",
"immer": "^11.1.3",
"json-diff-kit": "^1.0.34",
Expand All @@ -21,6 +23,7 @@
"lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"maplibre": "0.0.1-security",
"moment": "^2.30.1",
"react": "^19.2.3",
"react-dom": "^19.2.3",
Expand Down
174 changes: 97 additions & 77 deletions api-rework/client/src/activities/form-viewer/FormViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,86 +12,106 @@ import AquaticMechTreatment from 'activities/subtypes/AquaticMechTreatment';
import TerrestrialMechTreatment from 'activities/subtypes/TerrestrialMechTreatment';
import TerrestrialChemTreatment from 'activities/subtypes/TerrestrialChemTreatment';
import AquaticChemTreatment from 'activities/subtypes/AquaticChemTreatment';
import FormMap from 'common-components/form-map/FormMap';
import DispersalMonitoring from 'activities/subtypes/DispersalMonitoring';
import BiocontrolCollection from 'activities/subtypes/BiocontrolCollection';
import BiocontrolRelease from 'activities/subtypes/BiocontrolRelease';
import { useEffect } from 'react';

const FormViewer = ({ formData }) => (
<div className="content">
<div className="form-viewer">
<Fieldset label={'Basic Information'}>
<TextInput label={'short id'} value={formData?.short_id} />
<TextInput label={'activity date'} value={formData?.date} />
<TextInput label={'created by'} value={formData?.created_by} />
<TextInput label={'subtype'} value={formData?.subtype} />
<TextInput label={'form status'} value={formData?.form_status} />
const FormViewer = ({ formData }) => {
useEffect(() => {
// Inserts <p> tags into empty fieldsets where array data would otherwise populate. Used for flagging missing fields
const emptyFieldsets = document.querySelectorAll('fieldset:has(> legend):not(:has(> :not(legend)))');
emptyFieldsets.forEach((f) => (f.innerHTML += '<p class="warning">NO DATA</>'));
}, []);

return (
<div className="content">
<div className="form-viewer">
<Fieldset label={'Basic Information'}>
<TextInput label={'short id'} value={formData?.short_id} />
<TextInput label={'activity date'} value={formData?.date} />
<TextInput label={'created by'} value={formData?.created_by} />
<TextInput label={'subtype'} value={formData?.subtype} />
<TextInput label={'form status'} value={formData?.form_status} />
<FormMap
// TODO: geojson={} ADD GEOJSON WHEN READY
/>
<TextInput label={'latitude'} value={formData?.latitude} />
<TextInput label={'longitude'} value={formData?.longitude} />
<TextInput label={'area (m)'} value={formData?.area_m} />
<TextInput label={'UTM Easting'} value={formData?.utm_easting} />
<TextInput label={'UTM Northing'} value={formData?.utm_northing} />
<TextInput label={'UTM Zone'} value={formData?.utm_zone} />
<TextField label={'location description'} value={formData?.location_description} />
<TextField label={'access description'} value={formData?.access_description} />
<TextField label={'comment'} value={formData?.comment} />
</Fieldset>
<Fieldset label={'project codes'} small>
{formData?.projects.map(({ description }) => (
<TextInput value={description} />
))}
</Fieldset>
<Fieldset label={'employers'} small>
{formData?.employer.map(({ employer }) => (
<TextInput value={employer} />
))}
</Fieldset>
<Fieldset label={'funding agencies'} small>
{formData?.funding_agencies.map(({ invasive_species_agency_code }) => (
<TextInput value={invasive_species_agency_code} />
))}
</Fieldset>
<Fieldset label={'jurisdictions'} small>
{formData?.jurisdictions.map(({ jurisdiction, percent_covered }) => (
<div className="group-wrap">
<TextInput label={'jurisdiction'} value={jurisdiction} />
<TextInput label={'percent covered'} value={percent_covered} />
</div>
))}
</Fieldset>
<Fieldset label={'participants'} small>
{formData?.participants.map(({ name, pac_number }) => (
<div className="group-wrap">
{pac_number && <TextInput label={'PAC number'} value={pac_number} />}
<TextInput label={'name'} value={name} />
</div>
))}
</Fieldset>
<Fieldset label={'Linked Records'}>
{formData?.linked_activities?.map(({ full, short_id }) => (
<div className="group-wrap">
<TextInput label={'Short ID'} value={short_id} />
<TextInput label={'Full'} value={full} />
</div>
))}
</Fieldset>
<Spacer />
<Spacer />
<TextInput label={'latitude'} value={formData?.latitude} />
<TextInput label={'longitude'} value={formData?.longitude} />
<TextInput label={'area (m)'} value={formData?.area_m} />
<TextInput label={'UTM Easting'} value={formData?.utm_easting} />
<TextInput label={'UTM Northing'} value={formData?.utm_northing} />
<TextInput label={'UTM Zone'} value={formData?.utm_zone} />
<TextField label={'location description'} value={formData?.location_description} />
<TextField label={'access description'} value={formData?.access_description} />
<TextField label={'comment'} value={formData?.comment} />
</Fieldset>
<Fieldset label={'project codes'} small>
{formData?.projects.map(({ description }) => (
<TextInput value={description} />
))}
</Fieldset>
<Fieldset label={'employers'} small>
{formData?.employer.map(({ employer }) => (
<TextInput value={employer} />
))}
</Fieldset>
<Fieldset label={'funding agencies'} small>
{formData?.funding_agencies.map(({ invasive_species_agency_code }) => (
<TextInput value={invasive_species_agency_code} />
))}
</Fieldset>
<Fieldset label={'jurisdictions'} small>
{formData?.jurisdictions.map(({ jurisdiction, percent_covered }) => (
<div className="group-wrap">
<TextInput label={'jurisdiction'} value={jurisdiction} />
<TextInput label={'percent covered'} value={percent_covered} />
</div>
))}
</Fieldset>
<Fieldset label={'participants'} small>
{formData?.participants.map(({ name, pac_number }) => (
<div className="group-wrap">
{pac_number && <TextInput label={'PAC number'} value={pac_number} />}
<TextInput label={'name'} value={name} />
</div>
))}
</Fieldset>
<Fieldset label={'Linked Records'}>
{formData?.linked_activities?.map(({ full, short_id }) => (
<div className="group-wrap">
<TextInput label={'Short ID'} value={short_id} />
<TextInput label={'Full'} value={full} />
</div>
))}
</Fieldset>
<Spacer />
<Spacer />
<h2>Subtype Specific Details</h2>
{
<h2>Subtype Specific Details</h2>
{
Observation_Plant_Terrestrial: <TerrestrialObservation subtypeData={formData?.subtype_data} />,
Observation_Plant_Aquatic: <AquaticObservation subtypeData={formData?.subtype_data} />,
Monitoring_Chemical_Plant_Terrestrial_Aquatic: <ChemicalMonitoring subtypeData={formData?.subtype_data} />,
Monitoring_Mechanical_Plant_Terrestrial_Aquatic: (
<MechanicalMonitoring subtypeData={formData?.subtype_data} />
),
Monitoring_Biocontrol_Release_Plant_Terrestrial: <ReleaseMonitoring subtypeData={formData?.subtype_data} />,
Treatment_Mechanical_Plant_Terrestrial: <TerrestrialMechTreatment subtypeData={formData?.subtype_data} />,
Treatment_Mechanical_Plant_Aquatic: <AquaticMechTreatment subtypeData={formData?.subtype_data} />,
Treatment_Chemical_Plant_Terrestrial: <TerrestrialChemTreatment subtypeData={formData?.subtype_data} />,
Treatment_Chemical_Plant_Aquatic: <AquaticChemTreatment subtypeData={formData?.subtype_data} />
}[formData?.subtype]
}
{
Observation_Plant_Terrestrial: <TerrestrialObservation subtypeData={formData?.subtype_data} />,
Observation_Plant_Aquatic: <AquaticObservation subtypeData={formData?.subtype_data} />,
Monitoring_Chemical_Plant_Terrestrial_Aquatic: <ChemicalMonitoring subtypeData={formData?.subtype_data} />,
Monitoring_Mechanical_Plant_Terrestrial_Aquatic: (
<MechanicalMonitoring subtypeData={formData?.subtype_data} />
),
Monitoring_Biocontrol_Release_Plant_Terrestrial: <ReleaseMonitoring subtypeData={formData?.subtype_data} />,
Treatment_Mechanical_Plant_Terrestrial: <TerrestrialMechTreatment subtypeData={formData?.subtype_data} />,
Treatment_Mechanical_Plant_Aquatic: <AquaticMechTreatment subtypeData={formData?.subtype_data} />,
Treatment_Chemical_Plant_Terrestrial: <TerrestrialChemTreatment subtypeData={formData?.subtype_data} />,
Treatment_Chemical_Plant_Aquatic: <AquaticChemTreatment subtypeData={formData?.subtype_data} />,
Monitoring_Biocontrol_Dispersal_Plant_Terrestrial: (
<DispersalMonitoring subtypeData={formData?.subtype_data} />
),
Biocontrol_Collection: <BiocontrolCollection subtypeData={formData?.subtype_data} />,
Biocontrol_Release: <BiocontrolRelease subtypeData={formData?.subtype_data} />
}[formData?.subtype]
}
</div>
</div>
</div>
);
);
};

export default FormViewer;
2 changes: 1 addition & 1 deletion api-rework/client/src/activities/subtypes/AquaticChemTreatment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const AquaticChemTreatment = ({ subtypeData }: SubtypeData) => {
<>
<ChemTreatmentInfo subtypeData={subtypeData} />
<Fieldset label={'Chem Treatment Details'}>
<TextInput value={subtypeData?.chem_treatment_details} />
<TextInput value={subtypeData?.entries} />
</Fieldset>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion api-rework/client/src/activities/subtypes/AquaticMechTreatment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const AquaticMechTreatment = ({ subtypeData }: SubtypeData) => (
</div>
))}
</Fieldset>
<MechTreatmentInfo treatmentInfo={subtypeData?.mechanical_treatments} />
<MechTreatmentInfo entries={subtypeData?.entries} />
</>
);

Expand Down
2 changes: 1 addition & 1 deletion api-rework/client/src/activities/subtypes/AquaticObservation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const AquaticObservation = ({ subtypeData }: SubtypeData) => {
</Fieldset>

<Fieldset label={'observation details'}>
{subtypeData?.observation_details.map((od) => (
{subtypeData?.entries.map((od) => (
<div className="group-wrap">
<TextInput label="density" value={od.density} />
<TextInput label="distribution" value={od.distribution} />
Expand Down
Loading
Loading