SIMSBIOHUB-258 (#1134)

* Minor Fixes / UI Tweaks * Fix permit component list key * Rename old sampling method form to sampling strategy Co-authored-by: Nick Phura <[email protected]>
bcgov · Oct 23, 2023 · 0b116a7 · 0b116a7
1 parent 04d2912
commit 0b116a7
Show file tree

Hide file tree

Showing 15 changed files with 1,680 additions and 149 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/src/features/surveys/CreateSurveyPage.test.tsx b/app/src/features/surveys/CreateSurveyPage.test.tsx
@@ -95,7 +95,7 @@ describe.skip('CreateSurveyPage', () => {
     mockUseApi.project.getProjectForView.mockResolvedValue(getProjectForViewResponse);
     mockUseApi.codes.getAllCodeSets.mockResolvedValue(codes);
     mockUseApi.survey.getSurveyPermits.mockResolvedValue({
-      permits: [{ id: 1, permit_number: 'abcd1', permit_type: 'Wildlife permit' }]
+      permits: [{ permit_id: 1, permit_number: 'abcd1', permit_type: 'Wildlife permit' }]
     });
 
     const { getByText, getAllByText } = renderContainer();
@@ -134,8 +134,8 @@ describe.skip('CreateSurveyPage', () => {
 
     mockUseApi.survey.getSurveyPermits.mockResolvedValue({
       permits: [
-        { id: 1, permit_number: '123', permit_type: 'Scientific' },
-        { id: 2, permit_number: '456', permit_type: 'Wildlife' }
+        { permit_id: 1, permit_number: '123', permit_type: 'Scientific' },
+        { permit_id: 2, permit_number: '456', permit_type: 'Wildlife' }
       ]
     });
 
@@ -170,8 +170,8 @@ describe.skip('CreateSurveyPage', () => {
       mockUseApi.codes.getAllCodeSets.mockResolvedValue(codes);
       mockUseApi.survey.getSurveyPermits.mockResolvedValue({
         permits: [
-          { id: 1, permit_number: '123', permit_type: 'Scientific' },
-          { id: 2, permit_number: '456', permit_type: 'Wildlife' }
+          { permit_id: 1, permit_number: '123', permit_type: 'Scientific' },
+          { permit_id: 2, permit_number: '456', permit_type: 'Wildlife' }
         ]
       });
       mockUseApi.taxonomy.getSpeciesFromIds.mockResolvedValue({
@@ -217,8 +217,8 @@ describe.skip('CreateSurveyPage', () => {
       mockUseApi.codes.getAllCodeSets.mockResolvedValue(codes);
       mockUseApi.survey.getSurveyPermits.mockResolvedValue({
         permits: [
-          { id: 1, permit_number: '123', permit_type: 'Scientific' },
-          { id: 2, permit_number: '456', permit_type: 'Wildlife' }
+          { permit_id: 1, permit_number: '123', permit_type: 'Scientific' },
+          { permit_id: 2, permit_number: '456', permit_type: 'Wildlife' }
         ]
       });
       mockUseApi.taxonomy.getSpeciesFromIds.mockResolvedValue({

diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx
@@ -42,7 +42,7 @@ import PurposeAndMethodologyForm, {
   PurposeAndMethodologyInitialValues,
   PurposeAndMethodologyYupSchema
 } from './components/PurposeAndMethodologyForm';
-import SamplingMethodsForm from './components/SamplingMethodsForm';
+import SamplingStrategyForm from './components/SamplingStrategyForm';
 import StudyAreaForm, { SurveyLocationInitialValues, SurveyLocationYupSchema } from './components/StudyAreaForm';
 import { SurveyBlockInitialValues } from './components/SurveyBlockSection';
 import SurveyFundingSourceForm, {
@@ -386,9 +386,9 @@ const CreateSurveyPage = () => {
                 <Divider className={classes.sectionDivider} />
 
                 <HorizontalSplitFormComponent
-                  title="Sampling Methods"
+                  title="Sampling Strategy"
                   summary="Specify site selection methods, stratums and optional sampling blocks for this survey."
-                  component={<SamplingMethodsForm />}
+                  component={<SamplingStrategyForm />}
                 />
 
                 <Divider className={classes.sectionDivider} />

diff --git a/app/src/features/surveys/components/SamplingMethodForm.tsx b/app/src/features/surveys/components/SamplingMethodForm.tsx
@@ -170,13 +170,20 @@ const SamplingMethodForm = () => {
                   />
                   <CardContent
                     sx={{
-                      pt: 0,
-                      pb: '0 !important'
+                      pt: 1,
+                      pb: '12px !important'
                     }}>
-                    <Typography variant="body1" gutterBottom>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        m: 0,
+                        px: 2,
+                        py: 1,
+                        backgroundColor: grey[200]
+                      }}>
                       Time Periods
                     </Typography>
-                    <List>
+                    <List dense disablePadding>
                       {item.periods.map((period) => (
                         <ListItem key={`sample_period_${period.start_date}-${period.end_date}`} divider>
                           <ListItemIcon>
@@ -195,7 +202,7 @@ const SamplingMethodForm = () => {
             sx={{
               mt: 1
             }}
-            data-testid="sample-method-add-button"
+            data-testid="create-sample-method-add-button"
             variant="outlined"
             color="primary"
             title="Add Sample Method"

diff --git a/...urveys/components/SamplingMethodsForm.tsx → ...rveys/components/SamplingStrategyForm.tsx b/...urveys/components/SamplingMethodsForm.tsx → ...rveys/components/SamplingStrategyForm.tsx
@@ -6,7 +6,7 @@ import SurveyBlockSection from './SurveyBlockSection';
 import SurveySiteSelectionForm from './SurveySiteSelectionForm';
 import SurveyStratumForm from './SurveyStratumForm';
 
-const SamplingMethodsForm = () => {
+const SamplingStrategyForm = () => {
   const [showStratumForm, setShowStratumForm] = useState<boolean>(false);
 
   return (
@@ -53,4 +53,4 @@ const SamplingMethodsForm = () => {
   );
 };
 
-export default SamplingMethodsForm;
+export default SamplingStrategyForm;
diff --git a/app/src/features/surveys/edit/EditSurveyForm.tsx b/app/src/features/surveys/edit/EditSurveyForm.tsx
@@ -7,6 +7,7 @@ import { makeStyles } from '@mui/styles';
 import HorizontalSplitFormComponent from 'components/fields/HorizontalSplitFormComponent';
 import { ScrollToFormikError } from 'components/formik/ScrollToFormikError';
 import { DATE_FORMAT, DATE_LIMIT } from 'constants/dateTimeFormats';
+import SamplingStrategyForm from 'features/surveys/components/SamplingStrategyForm';
 import SurveyPartnershipsForm, {
   SurveyPartnershipsFormInitialValues,
   SurveyPartnershipsFormYupSchema
@@ -27,7 +28,6 @@ import GeneralInformationForm, {
 } from '../components/GeneralInformationForm';
 import ProprietaryDataForm, { ProprietaryDataYupSchema } from '../components/ProprietaryDataForm';
 import PurposeAndMethodologyForm, { PurposeAndMethodologyYupSchema } from '../components/PurposeAndMethodologyForm';
-import SamplingMethodsForm from '../components/SamplingMethodsForm';
 import StudyAreaForm, { SurveyLocationInitialValues, SurveyLocationYupSchema } from '../components/StudyAreaForm';
 import { SurveyBlockInitialValues } from '../components/SurveyBlockSection';
 import SurveyFundingSourceForm, {
@@ -240,9 +240,9 @@ const EditSurveyForm: React.FC<IEditSurveyForm> = (props) => {
           <Divider className={classes.sectionDivider} />
 
           <HorizontalSplitFormComponent
-            title="Sampling Methods"
+            title="Sampling Strategy"
             summary="Specify site selection methods, stratums and optional sampling blocks for this survey."
-            component={<SamplingMethodsForm />}
+            component={<SamplingStrategyForm />}
           />
 
           <Divider className={classes.sectionDivider} />

diff --git a/app/src/features/surveys/observations/ObservationsTable.tsx b/app/src/features/surveys/observations/ObservationsTable.tsx
@@ -606,6 +606,9 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => {
               borderColor: 'primary.main'
             }
           },
+          '& .MuiDataGrid-virtualScrollerContent': {
+            background: grey[100]
+          },
           '& .MuiDataGrid-footerContainer': {
             background: '#fff'
           }

diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx
@@ -232,7 +232,6 @@ const SamplingSiteList = () => {
                         return (
                           <ListItem
                             disableGutters
-                            divider
                             key={`${sampleMethod.survey_sample_site_id}-${sampleMethod.survey_sample_method_id}`}
                             sx={{
                               display: 'block',
@@ -257,7 +256,7 @@ const SamplingSiteList = () => {
                                     divider
                                     key={`${samplePeriod.survey_sample_method_id}-${samplePeriod.survey_sample_period_id}`}>
                                     <ListItemIcon>
-                                      <Icon path={mdiCalendarRange} size={0.9}></Icon>
+                                      <Icon path={mdiCalendarRange} size={1}></Icon>
                                     </ListItemIcon>
                                     <ListItemText
                                       primary={`${samplePeriod.start_date} to ${samplePeriod.end_date}`}></ListItemText>

diff --git a/app/src/features/surveys/observations/sampling-sites/components/SamplingSiteMapControl.tsx b/app/src/features/surveys/observations/sampling-sites/components/SamplingSiteMapControl.tsx
@@ -132,7 +132,7 @@ const SamplingSiteMapControl = (props: ISamplingSiteMapControlProps) => {
           <Paper variant="outlined">
             <Box position="relative" height={500}>
               <MapContainer
-                scrollWheelZoom={true}
+                scrollWheelZoom={false}
                 mapId={mapId}
                 staticLayers={[
                   {

diff --git a/...src/features/surveys/observations/sampling-sites/edit/components/SampleMethodEditForm.tsx b/...src/features/surveys/observations/sampling-sites/edit/components/SampleMethodEditForm.tsx
@@ -176,13 +176,20 @@ const SampleMethodEditForm = (props: SampleMethodEditFormProps) => {
                   />
                   <CardContent
                     sx={{
-                      pt: 0,
-                      pb: '0 !important'
+                      pt: 1,
+                      pb: '12px !important'
                     }}>
-                    <Typography variant="body1" gutterBottom>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        m: 0,
+                        px: 2,
+                        py: 1,
+                        backgroundColor: grey[200]
+                      }}>
                       Time Periods
                     </Typography>
-                    <List>
+                    <List dense disablePadding>
                       {item.periods.map((period) => (
                         <ListItem key={`sample_period_${period.survey_sample_period_id}`} divider>
                           <ListItemIcon>
@@ -201,7 +208,7 @@ const SampleMethodEditForm = (props: SampleMethodEditFormProps) => {
             sx={{
               mt: 1
             }}
-            data-testid="sample-method-add-button"
+            data-testid="edit-sample-method-add-button"
             variant="outlined"
             color="primary"
             title="Add Sample Method"

diff --git a/app/src/features/surveys/observations/sampling-sites/edit/components/SampleSiteEditForm.tsx b/app/src/features/surveys/observations/sampling-sites/edit/components/SampleSiteEditForm.tsx
@@ -87,11 +87,8 @@ const SampleSiteEditForm = (props: ISampleSiteEditFormProps) => {
             <Box display="flex" justifyContent="flex-end">
               <Box
                 sx={{
-                  '& button': {
+                  '& [class^="MuiButton"]': {
                     minWidth: '6rem'
-                  },
-                  '& button + button': {
-                    ml: 1
                   }
                 }}>
                 <LoadingButton
@@ -106,7 +103,10 @@ const SampleSiteEditForm = (props: ISampleSiteEditFormProps) => {
                   variant="outlined"
                   color="primary"
                   component={RouterLink}
-                  to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/observations`}>
+                  to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/observations`}
+                  sx={{
+                    ml: 1
+                  }}>
                   Cancel
                 </Button>
               </Box>

diff --git a/app/src/features/surveys/view/SurveyDetails.tsx b/app/src/features/surveys/view/SurveyDetails.tsx
@@ -3,9 +3,9 @@ import Icon from '@mdi/react';
 import Box from '@mui/material/Box';
 import { grey } from '@mui/material/colors';
 import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Permits from 'features/surveys/view/components/Permits';
@@ -39,12 +39,10 @@ const SurveyDetails = () => {
 
       <Divider sx={{ m: 0 }}></Divider>
 
-      <Box
+      <Stack
+        divider={<Divider />}
         p={3}
         sx={{
-          '& section + section': {
-            mt: 3
-          },
           '& h3': {
             mb: 2,
             flex: '0 0 auto',
@@ -76,77 +74,57 @@ const SurveyDetails = () => {
             flexDirection: 'row',
             flexWrap: { xs: 'wrap', md: 'nowrap' },
             gap: { xs: 0, md: '24px' },
+            mt: 0,
             py: 1,
             borderTop: '1px solid ' + grey[300]
           },
-          '& section.row': {
-            mt: 0
-          },
           '& hr': {
             my: 3
           }
         }}>
-        <Grid container spacing={3}>
-          <Grid item xs={12}>
-            <Box component="section">
-              <Typography component="h3">General Information</Typography>
-              <SurveyGeneralInformation />
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Study Area Location</Typography>
-              <SurveyStudyArea />
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Purpose and Methodology</Typography>
-              <SurveyPurposeAndMethodologyData />
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Sampling Methods</Typography>
-              <SamplingMethods />
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Survey Participants</Typography>
-              <SurveyParticipants />
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Funding Sources & Partnerships</Typography>
-              <Box flex="1 1 auto">
-                <SurveyFundingSources />
-                <Partnerships />
-              </Box>
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Permits</Typography>
-              <Permits />
-            </Box>
-
-            <Divider></Divider>
-
-            <Box component="section">
-              <Typography component="h3">Proprietary Information</Typography>
-              <SurveyProprietaryData />
-            </Box>
-          </Grid>
-        </Grid>
-      </Box>
+        <Box component="section">
+          <Typography component="h3">General Information</Typography>
+          <SurveyGeneralInformation />
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Study Area Location</Typography>
+          <SurveyStudyArea />
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Purpose and Methodology</Typography>
+          <SurveyPurposeAndMethodologyData />
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Sampling Methods</Typography>
+          <SamplingMethods />
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Survey Participants</Typography>
+          <SurveyParticipants />
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Funding Sources & Partnerships</Typography>
+          <Box flex="1 1 auto">
+            <SurveyFundingSources />
+            <Partnerships />
+          </Box>
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Permits</Typography>
+          <Permits />
+        </Box>
+
+        <Box component="section">
+          <Typography component="h3">Proprietary Information</Typography>
+          <SurveyProprietaryData />
+        </Box>
+      </Stack>
     </Paper>
   );
 };