Animal Form UI Fixes (#1109)

* Removed Animal count indicator from animal dialog title * Added "ID" as subtitle when editing an animal * Removed "Created On" column from animal table * Renamed "Edit Critter Details" action to "Edit Animal"
bcgov · Oct 5, 2023 · 23374a8 · 23374a8
1 parent d4aa9c4
commit 23374a8
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 53 deletions.
diff --git a/app/src/components/buttons/HelpButtonTooltip.tsx b/app/src/components/buttons/HelpButtonTooltip.tsx
@@ -6,6 +6,7 @@ import { ReactNode } from 'react';
 interface HelpButtonTooltipProps {
   content: string;
   children?: ReactNode;
+  iconSx?: object;
 }
 
 /**
@@ -16,7 +17,7 @@ interface HelpButtonTooltipProps {
  * @return {*}
  */
 
-const HelpButtonTooltip = ({ content, children }: HelpButtonTooltipProps) => {
+const HelpButtonTooltip = ({ content, children, iconSx }: HelpButtonTooltipProps) => {
   return (
     <Box
       sx={{
@@ -59,7 +60,8 @@ const HelpButtonTooltip = ({ content, children }: HelpButtonTooltipProps) => {
             position: 'absolute',
             top: '8px',
             right: '8px',
-            color: '#38598A'
+            color: '#38598A',
+            ...iconSx
           }}>
           <Icon path={mdiHelpCircleOutline} size={1} />
         </IconButton>

diff --git a/app/src/features/surveys/view/SurveyAnimals.tsx b/app/src/features/surveys/view/SurveyAnimals.tsx
@@ -15,7 +15,7 @@ import { useTelemetryApi } from 'hooks/useTelemetryApi';
 import { IDetailedCritterWithInternalId } from 'interfaces/useSurveyApi.interface';
 import { isEqual as _deepEquals } from 'lodash-es';
 import React, { useContext, useState } from 'react';
-import { datesSameNullable, pluralize } from 'utils/Utils';
+import { datesSameNullable } from 'utils/Utils';
 import yup from 'utils/YupSchema';
 import NoSurveySectionData from '../components/NoSurveySectionData';
 import { AnimalSchema, AnimalSex, Critter, IAnimal } from './survey-animals/animal';
@@ -45,7 +45,6 @@ const SurveyAnimals: React.FC = () => {
   const [openRemoveCritterDialog, setOpenRemoveCritterDialog] = useState(false);
   const [openAddCritterDialog, setOpenAddCritterDialog] = useState(false);
   const [openDeviceDialog, setOpenDeviceDialog] = useState(false);
-  const [animalCount, setAnimalCount] = useState(0);
   const [selectedCritterId, setSelectedCritterId] = useState<number | null>(null);
   const [telemetryFormMode, setTelemetryFormMode] = useState<TELEMETRY_DEVICE_FORM_MODE>(
     TELEMETRY_DEVICE_FORM_MODE.ADD
@@ -182,16 +181,18 @@ const SurveyAnimals: React.FC = () => {
         <EditDialog
           dialogTitle={
             <Box>
-              <HelpButtonTooltip content={SurveyAnimalsI18N.animalIndividualsHelp}>
-                <Typography variant="h3">Individuals</Typography>
+              <HelpButtonTooltip
+                content={SurveyAnimalsI18N.animalIndividualsHelp}
+                iconSx={{ position: 'relative', top: '-4px', right: '0px' }}>
+                <Typography variant="h3" component="span">
+                  {animalFormMode === ANIMAL_FORM_MODE.EDIT ? 'Edit Animal' : 'Add Animal'}
+                </Typography>
               </HelpButtonTooltip>
-              <Typography component="span" variant="subtitle1" color="textSecondary" mt={2}>
-                {`${
-                  animalCount
-                    ? `${animalCount} ${pluralize(animalCount, 'Animal')} reported in this survey`
-                    : `No individual animals were captured or reported in this survey`
-                }`}
-              </Typography>
+              {animalFormMode === ANIMAL_FORM_MODE.EDIT && (
+                <Typography variant="body2" color={'textSecondary'}>
+                  ID: {currentCritterbaseCritterId}
+                </Typography>
+              )}
             </Box>
           }
           open={openAddCritterDialog}
@@ -200,16 +201,11 @@ const SurveyAnimals: React.FC = () => {
           }}
           onCancel={toggleDialog}
           component={{
-            element: (
-              <IndividualAnimalForm
-                critter_id={currentCritterbaseCritterId}
-                mode={animalFormMode}
-                getAnimalCount={setAnimalCount}
-              />
-            ),
+            element: <IndividualAnimalForm />,
             initialValues: initialValues,
             validationSchema: AnimalSchema
           }}
+          dialogSaveButtonLabel="Save"
         />
       );
     }

diff --git a/app/src/features/surveys/view/survey-animals/IndividualAnimalForm.tsx b/app/src/features/surveys/view/survey-animals/IndividualAnimalForm.tsx
@@ -1,4 +1,3 @@
-import { Typography } from '@mui/material';
 import FormikDevDebugger from 'components/formik/FormikDevDebugger';
 import { Form, useFormikContext } from 'formik';
 import { Critter, IAnimal } from './animal';
@@ -24,23 +23,11 @@ export enum ANIMAL_FORM_MODE {
   EDIT = 'edit'
 }
 
-interface IndividualAnimalFormProps {
-  getAnimalCount: (num: number) => void;
-  critter_id?: string;
-  mode: ANIMAL_FORM_MODE;
-}
-
-const IndividualAnimalForm = ({ getAnimalCount, critter_id, mode }: IndividualAnimalFormProps) => {
+const IndividualAnimalForm = () => {
   const { values } = useFormikContext<IAnimal>();
 
   return (
     <Form>
-      <Typography variant="h4">{mode === ANIMAL_FORM_MODE.ADD ? 'Add New Individual' : 'Edit Individual'}</Typography>
-      {mode === ANIMAL_FORM_MODE.EDIT && (
-        <Typography variant="body2" color={'textSecondary'}>
-          Critter ID: {critter_id}
-        </Typography>
-      )}
       <GeneralAnimalForm />
       <CollectionUnitAnimalForm />
       <CaptureAnimalForm />

diff --git a/app/src/features/surveys/view/survey-animals/SurveyAnimalsTable.tsx b/app/src/features/surveys/view/survey-animals/SurveyAnimalsTable.tsx
@@ -1,10 +1,7 @@
-import { Typography } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { CustomDataGrid } from 'components/tables/CustomDataGrid';
-import { DATE_FORMAT } from 'constants/dateTimeFormats';
 import { IDetailedCritterWithInternalId } from 'interfaces/useSurveyApi.interface';
 import moment from 'moment';
-import { getFormattedDate } from 'utils/Utils';
 import { IAnimalDeployment } from './device';
 import SurveyAnimalsTableActions from './SurveyAnimalsTableActions';
 
@@ -26,10 +23,6 @@ interface ISurveyAnimalsTableProps {
   onEditCritter: (critter_id: number) => void;
 }
 
-const noOpPlaceHolder = (critter_id: number) => {
-  // This function intentionally left blank - used as placeholder.
-};
-
 export const SurveyAnimalsTable = ({
   animalData,
   deviceData,
@@ -68,14 +61,6 @@ export const SurveyAnimalsTable = ({
       flex: 1,
       renderCell: (params) => <>{params.value ? params.value : 'None'}</>
     },
-    {
-      field: 'create_timestamp',
-      headerName: 'Created On',
-      flex: 1,
-      renderCell: (params) => (
-        <Typography>{getFormattedDate(DATE_FORMAT.ShortDateFormatMonthFirst, params.value)}</Typography>
-      )
-    },
     {
       field: 'current_devices',
       headerName: 'Current Devices',
@@ -115,7 +100,6 @@ export const SurveyAnimalsTable = ({
           devices={params.row?.deployments}
           onMenuOpen={onMenuOpen}
           onAddDevice={onAddDevice}
-          onRemoveDevice={noOpPlaceHolder}
           onEditCritter={onEditCritter}
           onEditDevice={onEditDevice}
           onRemoveCritter={onRemoveCritter}

diff --git a/app/src/features/surveys/view/survey-animals/SurveyAnimalsTableActions.test.tsx b/app/src/features/surveys/view/survey-animals/SurveyAnimalsTableActions.test.tsx
@@ -16,7 +16,6 @@ describe('SurveyAnimalsTableActions', () => {
         onEditCritter={onEditCritter}
         onRemoveCritter={onRemoveCritter}
         onMenuOpen={() => {}}
-        onRemoveDevice={() => {}}
       />
     );
 

diff --git a/app/src/features/surveys/view/survey-animals/SurveyAnimalsTableActions.tsx b/app/src/features/surveys/view/survey-animals/SurveyAnimalsTableActions.tsx
@@ -13,7 +13,6 @@ export interface ITableActionsMenuProps {
   devices?: IAnimalDeployment[];
   onMenuOpen: (critter_id: number) => void;
   onAddDevice: (critter_id: number) => void;
-  onRemoveDevice: (critter_id: number) => void;
   onEditDevice: (critter_id: number) => void;
   onEditCritter: (critter_id: number) => void;
   onRemoveCritter: (critter_id: number) => void;
@@ -86,7 +85,7 @@ const SurveyAnimalsTableActions = (props: ITableActionsMenuProps) => {
           <ListItemIcon>
             <Icon path={mdiPencilOutline} size={1} />
           </ListItemIcon>
-          <Typography variant="inherit">Edit Critter Details</Typography>
+          <Typography variant="inherit">Edit Animal</Typography>
         </MenuItem>
         {!props.devices?.length && (
           <MenuItem