Staging Form Viewer pt.2

api-rework/client/src/activities/activities.scss

@@ -10,7 +10,7 @@ table.activities {
     }
 
     tr:hover {
-      background-color: #BBDCFF;
+      background-color: #bbdcff;
     }
   }
 
@@ -39,7 +39,6 @@ div.activities-detail {
       padding: 1em 0;
       gap: 1.5em;
 
-
       li {
         display: inline-block;
         border: blueviolet;
@@ -60,5 +59,5 @@ div.activities-detail {
 }
 
 .warning {
-  color: red;
+  color: #b2102f;
 }

api-rework/client/src/activities/form-viewer/FormViewer.tsx

@@ -5,70 +5,93 @@ import './formViewer.css';
 import Spacer from 'common-components/inputs/Spacer';
 import TerrestrialObservation from 'activities/subtypes/TerrestrialObservation';
 import AquaticObservation from 'activities/subtypes/AquaticObservation';
+import ChemicalMonitoring from 'activities/subtypes/ChemicalMonitoring';
+import MechanicalMonitoring from 'activities/subtypes/MechanicalMonitoring';
+import ReleaseMonitoring from 'activities/subtypes/ReleaseMonitoring';
+import AquaticMechTreatment from 'activities/subtypes/AquaticMechTreatment';
+import TerrestrialMechTreatment from 'activities/subtypes/TerrestrialMechTreatment';
+import TerrestrialChemTreatment from 'activities/subtypes/TerrestrialChemTreatment';
+import AquaticChemTreatment from 'activities/subtypes/AquaticChemTreatment';
 
-const FormViewer = ({ formData }) => {
-  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} />
-          <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>
+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} />
         <Spacer />
-        <Spacer />
-        <h2>Subtype Specific Details</h2>
+        <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>
+      {
         {
-          {
-            Observation_Plant_Terrestrial: <TerrestrialObservation subtypeData={formData?.subtype_data} />,
-            Observation_Plant_Aquatic: <AquaticObservation subtypeData={formData?.subtype_data} />
-          }[formData?.subtype]
-        }
-      </div>
+          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]
+      }
     </div>
-  );
-};
+  </div>
+);
+
 export default FormViewer;

api-rework/client/src/activities/form-viewer/formViewer.css

@@ -9,7 +9,7 @@
 }
 
 .contained label {
-  font-family: 'Comic Sans MS', Arial, sans-serif;
+  font-family: Calibri, Arial, sans-serif;
   padding-right: 1rem;
   text-transform: capitalize;
 
@@ -18,6 +18,16 @@
   }
 }
 
+h2 {
+  font-family: Calibri, Arial, sans-serif;
+  text-align: start;
+  width: 100%;
+}
+
+fieldset input {
+  width: 95%;
+}
+
 .content {
   display: flex;
   width: 100%;
@@ -32,7 +42,7 @@
   align-items: flex-start;
   flex-flow: row wrap;
   max-width: 850px;
-  background-color: #66996650;
+  background-color: #f2f7f3;
 }
 
 .group-wrap {
@@ -57,7 +67,7 @@
   .chit {
     box-sizing: border-box;
     border-radius: 6pt;
-    background-color: lightgreen;
+    background-color: #66996675;
     border: 1pt solid black;
     margin-right: 5px;
     font-size: 12px;
@@ -70,13 +80,17 @@
 }
 
 fieldset {
-  font-family: 'Comic Sans MS', Arial, sans-serif;
+  font-family: Calibri, Arial, sans-serif;
   display: flex;
   flex-flow: row wrap;
   text-wrap: wrap;
   word-break: break-all;
   width: 100%;
   justify-content: space-between;
+  background-color: #e4eee7;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  font-weight: bold;
 
   legend {
     text-transform: capitalize;
@@ -87,3 +101,7 @@ fieldset {
     overflow: hidden;
   }
 }
+
+fieldset fieldset .group-wrap {
+  background-color: #9fb6a8;
+}

api-rework/client/src/activities/subtypes/AquaticChemTreatment.tsx

@@ -0,0 +1,16 @@
+import TextInput from 'common-components/inputs/TextInput';
+import { SubtypeData } from 'constants';
+import Fieldset from 'common-components/inputs/Fieldset';
+import ChemTreatmentInfo from './common/ChemTreatmentInfo';
+
+const AquaticChemTreatment = ({ subtypeData }: SubtypeData) => {
+  return (
+    <>
+      <ChemTreatmentInfo subtypeData={subtypeData} />
+      <Fieldset label={'Chem Treatment Details'}>
+        <TextInput value={subtypeData?.chem_treatment_details} />
+      </Fieldset>
+    </>
+  );
+};
+export default AquaticChemTreatment;

api-rework/client/src/activities/subtypes/AquaticMechTreatment.tsx

@@ -0,0 +1,25 @@
+import Fieldset from 'common-components/inputs/Fieldset';
+import { SubtypeData } from 'constants';
+import MechTreatmentInfo from './common/MechTreatmentInfo';
+import TextInput from 'common-components/inputs/TextInput';
+import Spacer from 'common-components/inputs/Spacer';
+
+const AquaticMechTreatment = ({ subtypeData }: SubtypeData) => (
+  <>
+    <Fieldset label={'Authorization Info'}>
+      <TextInput value={subtypeData?.authorization_info} />
+    </Fieldset>
+    <Spacer />
+    <Fieldset label={'Shoreline Types'}>
+      {subtypeData?.shoreline_types?.map((st) => (
+        <div className="group-wrap">
+          <TextInput label={'Shoreline type'} value={st?.shoreline_type} />
+          <TextInput label={'Percent Covered'} value={st?.percent_covered} />
+        </div>
+      ))}
+    </Fieldset>
+    <MechTreatmentInfo treatmentInfo={subtypeData?.mechanical_treatments} />
+  </>
+);
+
+export default AquaticMechTreatment;

api-rework/client/src/activities/subtypes/ChemicalMonitoring.tsx

@@ -0,0 +1,20 @@
+import Fieldset from 'common-components/inputs/Fieldset';
+import { SubtypeData } from 'constants';
+import MonitoringInfo from './common/MonitoringInfo';
+import NearestWells from './common/NearestWells';
+
+const ChemicalMonitoring = ({ subtypeData }: SubtypeData) => {
+  console.log(subtypeData);
+  return (
+    <>
+      <NearestWells data={subtypeData?.nearest_wells} />
+      <Fieldset label={'Monitoring Information'}>
+        {subtypeData?.treatment_monitoring_information?.map((d) => (
+          <MonitoringInfo data={d} />
+        ))}
+      </Fieldset>
+    </>
+  );
+};
+
+export default ChemicalMonitoring;

api-rework/client/src/activities/subtypes/MechanicalMonitoring.tsx

@@ -0,0 +1,13 @@
+import Fieldset from 'common-components/inputs/Fieldset';
+import { SubtypeData } from 'constants';
+import MonitoringInfo from './common/MonitoringInfo';
+
+const MechanicalMonitoring = ({ subtypeData }: SubtypeData) => (
+  <Fieldset label={'Monitoring Information'}>
+    {subtypeData?.treatment_monitoring_information?.map((d) => (
+      <MonitoringInfo data={d} />
+    ))}
+  </Fieldset>
+);
+
+export default MechanicalMonitoring;

api-rework/client/src/activities/subtypes/ReleaseMonitoring.tsx

@@ -0,0 +1,28 @@
+import Fieldset from 'common-components/inputs/Fieldset';
+import TextInput from 'common-components/inputs/TextInput';
+import { SubtypeData } from 'constants';
+import BiocontrolMonitoring from './common/BiocontrolMonitoring';
+import TargetPlantPhenology from './common/TargetPlantPhenology';
+
+const ReleaseMonitoring = ({ subtypeData }: SubtypeData) => (
+  <>
+    <Fieldset label={'microsite conditions'}>
+      <TextInput label={'site surface shape'} value={subtypeData?.microsite_conditions?.site_surface_shape} />
+      <TextInput label={'mesoslope position'} value={subtypeData?.microsite_conditions?.mesoslope_position} />
+    </Fieldset>
+    <BiocontrolMonitoring monitoring_information={subtypeData.monitoring_information} />
+    <TargetPlantPhenology targetPlantPhenology={subtypeData?.target_plant_phenology} />
+    <Fieldset label={'Spread Results'}>
+      <TextInput
+        label={'Spread details recorded'}
+        value={subtypeData?.max_spread_distance_m != undefined ? 'Yes' : 'No'}
+      />
+      <TextInput label={'Agent density (%)'} value={subtypeData?.agent_density} />
+      <TextInput label={'Plant Attack (%)'} value={subtypeData?.plant_attack} />
+      <TextInput label={'max spread distance (m)'} value={subtypeData?.max_spread_distance_m} />
+      <TextInput label={'max spread aspect (deg)'} value={subtypeData?.max_spread_aspect_deg} />
+    </Fieldset>
+  </>
+);
+
+export default ReleaseMonitoring;

api-rework/client/src/activities/subtypes/TerrestrialChemTreatment.tsx

@@ -0,0 +1,16 @@
+import TextInput from 'common-components/inputs/TextInput';
+import { SubtypeData } from 'constants';
+import Fieldset from 'common-components/inputs/Fieldset';
+import ChemTreatmentInfo from './common/ChemTreatmentInfo';
+
+const TerrestrialChemTreatment = ({ subtypeData }: SubtypeData) => {
+  return (
+    <>
+      <ChemTreatmentInfo subtypeData={subtypeData} />
+      <Fieldset label={'Chem Treatment Details'}>
+        <TextInput value={subtypeData?.chem_treatment_details} />
+      </Fieldset>
+    </>
+  );
+};
+export default TerrestrialChemTreatment;

api-rework/client/src/activities/subtypes/TerrestrialMechTreatment.tsx

@@ -0,0 +1,7 @@
+import { SubtypeData } from 'constants';
+import MechTreatmentInfo from './common/MechTreatmentInfo';
+
+const TerrestrialMechTreatment = ({ subtypeData }: SubtypeData) => (
+  <MechTreatmentInfo treatmentInfo={subtypeData?.mechanical_treatments} />
+);
+export default TerrestrialMechTreatment;