SIMSBIOHUB-286: Upload Telemetry Files on Device Creation

app/src/components/file-upload/FileUpload.tsx

@@ -32,7 +32,7 @@ export interface IFileUploadProps {
    * @type {IUploadHandler}
    * @memberof IFileUploadProps
    */
-  uploadHandler: IUploadHandler;
+  uploadHandler?: IUploadHandler;
   /**
    * Callback fired for each accepted file in the list (that do not have any `DropZone` errors (size, count, extension).
    *

app/src/components/file-upload/FileUploadItem.tsx

@@ -44,12 +44,12 @@
 
 export interface IFileUploadItemProps {
   /**
-   * A file upload callback fired for each file.
+   * An optional file upload callback fired for each file.
    *
    * @type {IUploadHandler}
    * @memberof IFileUploadItemProps
    */
-  uploadHandler: IUploadHandler;
+  uploadHandler?: IUploadHandler;
   /**
    * An optional callback fired if the file upload is successful.
    *
@@ -223,16 +223,18 @@
       onSuccess?.(response);
     };
 
-    uploadHandler(file, cancelToken, handleFileUploadProgress)
-      .then(handleFileUploadSuccess, (error: APIError) => {
-        setError(error?.message);
-        setErrorDetails(
-          error.errors?.map((error) => {
-            return { _id: v4(), message: String(error) };
-          })
-        );
-      })
-      .catch();
+    if (uploadHandler) {
+      uploadHandler(file, cancelToken, handleFileUploadProgress)
+        .then(handleFileUploadSuccess, (error: APIError) => {
+          setError(error?.message);
+          setErrorDetails(
+            error?.errors?.map((e) => {
+              return { _id: v4(), message: e?.toString() };
+            })
+          );
+        })
+        .catch();
+    }
 
     setStatus(UploadFileStatus.UPLOADING);
   }, [

app/src/constants/attachments.ts

@@ -22,6 +22,7 @@ export enum ProjectSurveyAttachmentValidExtensions {
   DATA = '.txt, .xls, .xlsx, .xlsm, .xlsb, .accdb, .mdb, .ods, .csv',
   IMAGE = '.gif, .png, .jpg, .jpeg, .svg, .tiff, .bmp, .tif',
   KEYX = '.keyx, .zip',
+  CONFIG = '.cfg',
   REPORT = '.doc, .docx, .pdf',
   SPATIAL = '.kml, .gpx, .zip',
   VIDEO = '.mp4, .mov, .wmv, .ave',

app/src/features/surveys/view/SurveyAnimals.tsx

@@ -4,6 +4,7 @@
 import HelpButtonTooltip from 'components/buttons/HelpButtonTooltip';
 import EditDialog from 'components/dialog/EditDialog';
 import { H2ButtonToolbar } from 'components/toolbar/ActionToolbars';
+import { AttachmentType } from 'constants/attachments';
 import { SurveyAnimalsI18N } from 'constants/i18n';
 import { DialogContext } from 'contexts/dialogContext';
 import { SurveyContext } from 'contexts/surveyContext';
@@ -16,10 +17,18 @@
 import yup from 'utils/YupSchema';
 import NoSurveySectionData from '../components/NoSurveySectionData';
 import { AnimalSchema, AnimalSex, Critter, IAnimal } from './survey-animals/animal';
-import { AnimalTelemetryDeviceSchema, Device, IAnimalTelemetryDevice } from './survey-animals/device';
+import {
+  AnimalTelemetryDeviceSchema,
+  Device,
+  IAnimalTelemetryDevice,
+  IDeploymentTimespan
+} from './survey-animals/device';
 import IndividualAnimalForm from './survey-animals/IndividualAnimalForm';
 import { SurveyAnimalsTable } from './survey-animals/SurveyAnimalsTable';
-import TelemetryDeviceForm, { TELEMETRY_DEVICE_FORM_MODE } from './survey-animals/TelemetryDeviceForm';
+import TelemetryDeviceForm, {
+  IAnimalTelemetryDeviceFile,
+  TELEMETRY_DEVICE_FORM_MODE
+} from './survey-animals/TelemetryDeviceForm';
 
 const SurveyAnimals: React.FC = () => {
   const bhApi = useBiohubApi();
@@ -151,44 +160,75 @@
     }
   };
 
-  const handleTelemetrySave = async (survey_critter_id: number, data: IAnimalTelemetryDevice[]) => {
+  const handleAddTelemetry = async (survey_critter_id: number, data: IAnimalTelemetryDeviceFile[]) => {
     const critter = critterData?.find((a) => a.survey_critter_id === survey_critter_id);
-    const critterTelemetryDevice = { ...data[0], critter_id: critter?.critter_id ?? '' };
-    if (telemetryFormMode === TELEMETRY_DEVICE_FORM_MODE.ADD) {
-      try {
-        await bhApi.survey.addDeployment(projectId, surveyId, survey_critter_id, critterTelemetryDevice);
-        setPopup('Successfully added deployment.');
-      } catch (e) {
+    const { attachmentFile, attachmentType, ...critterTelemetryDevice } = {
+      ...data[0],
+      critter_id: critter?.critter_id ?? ''
+    };
+    try {
+      // Upload attachment if there is one
+      if (attachmentFile && attachmentType === AttachmentType.KEYX) {
+        await bhApi.survey.uploadSurveyKeyx(projectId, surveyId, attachmentFile);
+      } else if (attachmentFile && attachmentType === AttachmentType.OTHER) {
+        await bhApi.survey.uploadSurveyAttachments(projectId, surveyId, attachmentFile);
+      }
+      // create new deployment record
+      await bhApi.survey.addDeployment(projectId, surveyId, survey_critter_id, critterTelemetryDevice);
+      setPopup('Successfully added deployment.');
+      surveyContext.artifactDataLoader.refresh(projectId, surveyId);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        setPopup('Failed to add deployment' + (error?.message ? `: ${error.message}` : '.'));
+      } else {
         setPopup('Failed to add deployment.');
       }
-    } else if (telemetryFormMode === TELEMETRY_DEVICE_FORM_MODE.EDIT) {
-      for (const formValues of data) {
-        const existingDevice = deploymentData?.find((a) => a.device_id === formValues.device_id);
-        const formDevice = new Device({ collar_id: existingDevice?.collar_id, ...formValues });
-        if (existingDevice && !_deepEquals(new Device(existingDevice), formDevice)) {
-          //Verify whether the data entered in the form changed from the device metadata we already have.
-          try {
-            await telemetryApi.devices.upsertCollar(formDevice); //If it's different, upsert. Note that this alone does not touch a deployment.
-          } catch (e) {
-            setPopup(`Failed to update device ${formDevice.device_id}`);
-          }
-        }
-        for (const formDeployment of formValues.deployments ?? []) {
-          //Iterate over the deployments under this device.
-          const existingDeployment = deploymentData?.find((a) => a.deployment_id === formDeployment.deployment_id); //Find the deployment info we already have.
-          if (
-            !datesSameNullable(formDeployment?.attachment_start, existingDeployment?.attachment_start) ||
-            !datesSameNullable(formDeployment?.attachment_end, existingDeployment?.attachment_end) //Helper function necessary for this date comparison since moment(null) !== moment(null) normally.
-          ) {
-            try {
-              await bhApi.survey.updateDeployment(projectId, surveyId, survey_critter_id, formDeployment);
-            } catch (e) {
-              setPopup(`Failed to update deployment ${formDeployment.deployment_id}`);
-            }
-          }
+    }
+  };
+
+  const updateDevice = async (formValues: IAnimalTelemetryDevice) => {
+    const existingDevice = deploymentData?.find((deployment) => deployment.device_id === formValues.device_id);
+    const formDevice = new Device({ collar_id: existingDevice?.collar_id, ...formValues });
+    if (existingDevice && !_deepEquals(new Device(existingDevice), formDevice)) {
+      try {
+        await telemetryApi.devices.upsertCollar(formDevice);
+      } catch (error) {
+        setPopup(`Failed to update device ${formDevice.device_id}`);
+      }
+    }
+  };
+
+  const updateDeployments = async (formDeployments: IDeploymentTimespan[], survey_critter_id: number) => {
+    for (const formDeployment of formDeployments ?? []) {
+      const existingDeployment = deploymentData?.find(
+        (animalDeployment) => animalDeployment.deployment_id === formDeployment.deployment_id
+      );
+      if (
+        !datesSameNullable(formDeployment?.attachment_start, existingDeployment?.attachment_start) ||
+        !datesSameNullable(formDeployment?.attachment_end, existingDeployment?.attachment_end)
+      ) {
+        try {
+          await bhApi.survey.updateDeployment(projectId, surveyId, survey_critter_id, formDeployment);
+        } catch (error) {
+          setPopup(`Failed to update deployment ${formDeployment.deployment_id}`);
         }
       }
-      setPopup('Updated deployment and device data successfully.');
+    }
+  };
+
+  const handleEditTelemetry = async (survey_critter_id: number, data: IAnimalTelemetryDeviceFile[]) => {
+    for (const { attachmentFile, attachmentType, ...formValues } of data) {
+      await updateDevice(formValues);
+      await updateDeployments(formValues.deployments ?? [], survey_critter_id);
+    }
+    setPopup('Updated deployment and device data successfully.');
+  };
+
+  const handleTelemetrySave = async (survey_critter_id: number, data: IAnimalTelemetryDeviceFile[]) => {
+    if (telemetryFormMode === TELEMETRY_DEVICE_FORM_MODE.ADD) {
+      await handleAddTelemetry(survey_critter_id, data);
+    } else if (telemetryFormMode === TELEMETRY_DEVICE_FORM_MODE.EDIT) {
+      await handleEditTelemetry(survey_critter_id, data);
     }
 
     setOpenDeviceDialog(false);

app/src/features/surveys/view/survey-animals/TelemetryDeviceForm.tsx

@@ -3,18 +3,44 @@
 import CustomTextField from 'components/fields/CustomTextField';
 import SingleDateField from 'components/fields/SingleDateField';
 import TelemetrySelectField from 'components/fields/TelemetrySelectField';
+import { AttachmentType } from 'constants/attachments';
 import { Form, useFormikContext } from 'formik';
 import useDataLoader from 'hooks/useDataLoader';
 import { useTelemetryApi } from 'hooks/useTelemetryApi';
 import moment from 'moment';
 import { Fragment, useEffect, useState } from 'react';
 import { IAnimalTelemetryDevice, IDeploymentTimespan } from './device';
+import { TelemetryFileUpload } from './TelemetryFileUpload';
 
 export enum TELEMETRY_DEVICE_FORM_MODE {
   ADD = 'add',
   EDIT = 'edit'
 }
 
+export interface IAnimalTelemetryDeviceFile extends IAnimalTelemetryDevice {
+  attachmentFile?: File;
+  attachmentType?: AttachmentType;
+}
+
+const AttchmentFormSection = ({ index, deviceMake }: { index: number; deviceMake: string }): JSX.Element => {
+  return (
+    <Paper sx={{ padding: 3 }}>
+      {deviceMake === 'Vectronic' && (
+        <>
+          <Typography sx={{ ml: 1, mb: 3 }}>{`Upload Vectronic KeyX File`}</Typography>
+          <TelemetryFileUpload attachmentType={AttachmentType.KEYX} index={index} />
+        </>
+      )}
+      {deviceMake === 'Lotek' && (
+        <>
+          <Typography sx={{ ml: 1, mb: 3 }}>{`Upload Lotek Config File`}</Typography>
+          <TelemetryFileUpload attachmentType={AttachmentType.OTHER} index={index} />
+        </>
+      )}
+    </Paper>
+  );
+};
+
 const DeploymentFormSection = ({
   index,
   deployments
@@ -48,12 +74,12 @@
 
 interface IDeviceFormSectionProps {
   mode: TELEMETRY_DEVICE_FORM_MODE;
-  values: IAnimalTelemetryDevice[];
+  values: IAnimalTelemetryDeviceFile[];
   index: number;
 }
 
 const DeviceFormSection = ({ values, index, mode }: IDeviceFormSectionProps): JSX.Element => {
-  const { setStatus } = useFormikContext<{ formValues: IAnimalTelemetryDevice[] }>();
+  const { setStatus } = useFormikContext<{ formValues: IAnimalTelemetryDeviceFile[] }>();
   const [bctwErrors, setBctwErrors] = useState<Record<string, string | undefined>>({});
   const api = useTelemetryApi();
 
@@ -123,6 +149,12 @@
           <CustomTextField label="Device Model" name={`${index}.device_model`} />
         </Grid>
       </Grid>
+      {mode === TELEMETRY_DEVICE_FORM_MODE.ADD &&
+        (values[index].device_make === 'Vectronic' || values[index].device_make === 'Lotek') && (
+          <Box sx={{ mt: 3 }}>
+            <AttchmentFormSection index={index} deviceMake={values[index].device_make} />
+          </Box>
+        )}
       <Box sx={{ mt: 3 }}>
         <Paper sx={{ padding: 3 }}>
           <Typography sx={{ ml: 1, mb: 3 }}>Deployments</Typography>
@@ -147,7 +179,7 @@
 }
 
 const TelemetryDeviceForm = ({ mode }: ITelemetryDeviceFormProps) => {
-  const { values } = useFormikContext<IAnimalTelemetryDevice[]>();
+  const { values } = useFormikContext<IAnimalTelemetryDeviceFile[]>();
 
   return (
     <Form>

app/src/features/surveys/view/survey-animals/TelemetryFileUpload.tsx

@@ -0,0 +1,38 @@
+import FileUpload, { IReplaceHandler } from 'components/file-upload/FileUpload';
+import { IFileHandler, UploadFileStatus } from 'components/file-upload/FileUploadItem';
+import { AttachmentType, ProjectSurveyAttachmentValidExtensions } from 'constants/attachments';
+import { useFormikContext } from 'formik';
+import React from 'react';
+import { IAnimalTelemetryDeviceFile } from './TelemetryDeviceForm';
+
+export const TelemetryFileUpload: React.FC<{ attachmentType: AttachmentType; index: number }> = (props) => {
+  const { setFieldValue } = useFormikContext<{ formValues: IAnimalTelemetryDeviceFile[] }>();
+  const fileHandler: IFileHandler = (file) => {
+    setFieldValue(`${props.index}.attachmentFile`, file);
+    setFieldValue(`${props.index}.attachmentType`, props.attachmentType);
+  };
+
+  const replaceHandler: IReplaceHandler = () => {
+    setFieldValue(`${props.index}.attachmentFile`, null);
+    setFieldValue(`${props.index}.attachmentType`, props.attachmentType);
+  };
+
+  return (
+    <FileUpload
+      fileHandler={fileHandler}
+      onReplace={replaceHandler}
+      dropZoneProps={{
+        maxNumFiles: 1,
+        multiple: false,
+        acceptedFileExtensions:
+          props.attachmentType === AttachmentType.KEYX
+            ? ProjectSurveyAttachmentValidExtensions.KEYX
+            : ProjectSurveyAttachmentValidExtensions.CONFIG
+      }}
+      replace={true}
+      status={UploadFileStatus.STAGED}
+    />
+  );
+};
+
+export default TelemetryFileUpload;