finish-monitor-log-submissions

src/components/MonitorLog/EditLogFooter.jsx

@@ -0,0 +1,51 @@
+import { ButtonGroup, Button } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const EditLogFooter = ({ role, submitForm, formMethods }) => {
+  if (role === 'admin') {
+    return (
+      <>
+        <ButtonGroup>
+          <Button>Exit Edit Mode</Button>
+          <Button
+            colorScheme="cyan"
+            type="submit"
+            onClick={() => {
+              formMethods.setValue({ status: 'RESUBMITTED' });
+              submitForm();
+            }}
+          >
+            {/* {prefilledData !== undefined ? 'Save' : 'Add'} to Tracker */}
+            Save Changes
+          </Button>
+        </ButtonGroup>
+      </>
+    );
+  }
+
+  return (
+    <Button>
+      <Button
+        colorScheme="cyan"
+        type="submit"
+        onClick={() => {
+          formMethods.setValue({ status: 'RESUBMITTED' });
+          submitForm();
+        }}
+      >
+        {/* {prefilledData !== undefined ? 'Save' : 'Add'} to Tracker */}
+        Save Changes
+      </Button>
+    </Button>
+  );
+};
+
+EditLogFooter.propTypes = {
+  role: PropTypes.string.isRequired,
+  submitForm: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  formMethods: PropTypes.object.isRequired,
+};
+
+export default EditLogFooter;

src/components/MonitorLog/EditLogPopup.jsx

@@ -0,0 +1,159 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+  Button,
+  RadioGroup,
+  Radio,
+  Textarea,
+  Text,
+  ButtonGroup,
+  useToast,
+} from '@chakra-ui/react';
+import { React, useState } from 'react';
+import { FiEdit2 } from 'react-icons/fi';
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+
+const EditLog = ({ setModalStep, onClose, user }) => {
+  const [selected, setSelected] = useState(null);
+  const navigate = useNavigate();
+  return (
+    <>
+      <ModalHeader>Edit Log</ModalHeader>
+      <ModalBody>
+        <Text>Would you rather...</Text>
+        <RadioGroup
+          value={selected}
+          onChange={val => {
+            setSelected(val);
+          }}
+        >
+          <Radio value="directly">Directly edit the log</Radio>
+          <Radio value="request">Request the surveyor to revise & resubmit the log</Radio>
+        </RadioGroup>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup gap="2">
+          <Button
+            onClick={() => {
+              onClose();
+              setModalStep('editLog');
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            bg="ochBlue"
+            onClick={() => {
+              if (selected === 'request') {
+                setModalStep(selected);
+              } else {
+                navigate(`/edit-log/${user}`);
+              }
+            }}
+            variant="solidNoHover"
+            isDisabled={!selected}
+          >
+            Next
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
+};
+
+const RequestEdits = ({ setModalStep, onClose }) => {
+  const toast = useToast();
+  const [value, setValue] = useState('');
+  return (
+    <>
+      <ModalHeader>You are requesting edits to this monitor log.</ModalHeader>
+      <ModalBody>
+        <Text>Reason</Text>
+        <Textarea
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          placeholder="Type here..."
+        />
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup gap="2">
+          <Button
+            onClick={() => {
+              onClose();
+              setModalStep('editLog');
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            bg="ochBlue"
+            variant="solidNoHover"
+            onClick={() => {
+              onClose();
+              toast({
+                title: <Text>Requested Edits!</Text>,
+                description: <Text>You&apos;ve requested edits to </Text>,
+                status: 'warning',
+              });
+              setModalStep('editLog');
+            }}
+            isDisabled={value === ''}
+          >
+            Send Request
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
+};
+
+const EditLogPopup = ({ user }) => {
+  const [modalStep, setModalStep] = useState('editLog');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  // useEffect(() => {
+  //   setModalStep('reminderSelect');
+  // });
+
+  const modalContent = {
+    editLog: <EditLog setModalStep={setModalStep} onClose={onClose} user={user} />,
+    request: <RequestEdits setModalStep={setModalStep} onClose={onClose} />,
+  };
+
+  return (
+    <>
+      <Button colorScheme="green" type="submit" onClick={onOpen}>
+        {/* {prefilledData !== undefined ? 'Save' : 'Add'} to Tracker */}
+        Edit Log <FiEdit2 style={{ marginLeft: '4px' }} />
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>{modalContent[modalStep]}</ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+EditLog.propTypes = {
+  setModalStep: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  user: PropTypes.string.isRequired,
+};
+
+RequestEdits.propTypes = {
+  setModalStep: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditLogPopup.propTypes = {
+  user: PropTypes.string.isRequired,
+};
+
+export default EditLogPopup;

src/components/MonitorLog/GeneralInfoTab.jsx

@@ -210,7 +210,7 @@ function GeneralInfoTab({ assignedSegments, monitorPartners, isDisabled, showHea
             {/* Added Partners will be notified when this monitor log is submitted for review. */}
           </Text>
           <ReactHookFormSelect
-            name="partners"
+            name="sessionPartners"
             options={partnerSelectOptions}
             optionKey="_id"
             isDisabled={isDisabled}

src/components/MonitorLog/HumanActivityTab.jsx

@@ -16,10 +16,10 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-const FORM_PREFIX = 'humanActivity.';
+const FORM_PREFIX = 'humanActivity';
 const HUMAN_ACTIVITIES = [
   [
     'Beach Activity',
@@ -38,8 +38,19 @@ const HUMAN_ACTIVITIES = [
   ['[On Leash] Domestic Animals', 'Dogs, Cats, Other', 'onLeashAnimals'],
 ];
 
-const HumanActivityField = ({ activityName, activityDesc, activityId, isDisabled }) => {
+const HumanActivityField = ({
+  activityName,
+  activityDesc,
+  activityNum,
+  activityId,
+  isDisabled,
+}) => {
   const { setValue, getValues } = useFormContext();
+  const formKey = `${FORM_PREFIX}[${activityNum}]`;
+
+  useEffect(() => {
+    setValue(formKey, { activity: activityId, count: getValues(formKey)?.count || 0 });
+  }, []);
 
   return (
     <GridItem colSpan={1}>
@@ -62,8 +73,8 @@ const HumanActivityField = ({ activityName, activityDesc, activityId, isDisabled
         <NumberInput
           isDisabled={isDisabled}
           min={0}
-          onChange={(_, val) => setValue(FORM_PREFIX + activityId, val)}
-          defaultValue={getValues(FORM_PREFIX + activityId) || 0}
+          onChange={(_, val) => setValue(formKey, { activity: activityId, count: val })}
+          defaultValue={getValues(formKey)?.count || 0}
         >
           <NumberInputField />
           <NumberInputStepper>
@@ -79,6 +90,7 @@ const HumanActivityField = ({ activityName, activityDesc, activityId, isDisabled
 HumanActivityField.propTypes = {
   activityName: PropTypes.string.isRequired,
   activityDesc: PropTypes.string.isRequired,
+  activityNum: PropTypes.number.isRequired,
   activityId: PropTypes.string.isRequired,
   isDisabled: PropTypes.bool.isRequired,
 };
@@ -98,10 +110,11 @@ const HumanActivityTab = ({ showHeader, isDisabled }) => {
         spacingX="64px"
         spacingY={{ md: '68px', base: '30px' }}
       >
-        {HUMAN_ACTIVITIES.map(([name, desc, value]) => (
+        {HUMAN_ACTIVITIES.map(([name, desc, value], idx) => (
           <HumanActivityField
             key={value}
             activityName={name}
+            activityNum={idx}
             activityDesc={desc}
             activityId={value}
             isDisabled={isDisabled}
@@ -122,7 +135,7 @@ const HumanActivityTab = ({ showHeader, isDisabled }) => {
         <Textarea
           disabled={isDisabled}
           placeholder="Type here..."
-          {...register(`${FORM_PREFIX}outreach`)}
+          {...register(`${FORM_PREFIX}Outreach`)}
         />
         <Spacer />
         <Spacer />
@@ -134,7 +147,7 @@ const HumanActivityTab = ({ showHeader, isDisabled }) => {
         <Textarea
           disabled={isDisabled}
           placeholder="Type here..."
-          {...register(`${FORM_PREFIX}otherNotes`)}
+          {...register(`${FORM_PREFIX}OtherNotes`)}
         />
         <Spacer />
         <Spacer />

src/components/MonitorLog/PredatorsTab.jsx

@@ -22,6 +22,11 @@ const FORM_PREFIX = 'predators';
 
 const PredatorField = ({ predatorName, predatorId, isDisabled, predatorIndex }) => {
   const { setValue, getValues } = useFormContext();
+  const formKey = `${FORM_PREFIX}[${predatorIndex}]`;
+
+  React.useEffect(() => {
+    setValue(formKey, { species: predatorId, count: getValues(formKey)?.count || 0 });
+  }, []);
 
   return (
     <GridItem colSpan={1} rowSpan={1} width={{ md: '90%', base: '80%' }}>
@@ -32,10 +37,8 @@ const PredatorField = ({ predatorName, predatorId, isDisabled, predatorIndex })
         <NumberInput
           min={0}
           isDisabled={isDisabled}
-          onChange={(_, val) =>
-            setValue(`${FORM_PREFIX}[${predatorIndex}]`, { species: predatorId, count: val })
-          }
-          defaultValue={getValues(`${FORM_PREFIX}[${predatorIndex}]`)?.count || 0}
+          onChange={(_, val) => setValue(formKey, { species: predatorId, count: val })}
+          defaultValue={getValues(formKey)?.count || 0}
         >
           <NumberInputField />
           <NumberInputStepper>