SIMSBIOHUB-223: Implement UI improvements + changes for observations …

…table (#1106) * Implements UI improvements + changes for observations table.
bcgov · Oct 5, 2023 · dfa7a99 · dfa7a99
1 parent 80ff9e3
commit dfa7a99
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 133 deletions.
diff --git a/api/src/repositories/observation-repository.ts b/api/src/repositories/observation-repository.ts
@@ -141,7 +141,12 @@ export class ObservationRepository extends BaseRepository {
         longitude = EXCLUDED.longitude
     `);
 
-    sqlStatement.append(`RETURNING *;`);
+    sqlStatement.append(`
+      RETURNING
+        *,
+        latitude::double precision,
+        longitude::double precision
+    ;`);
 
     const response = await this.connection.sql(sqlStatement, ObservationRecord);
 
@@ -156,7 +161,12 @@ export class ObservationRepository extends BaseRepository {
    * @memberof ObservationRepository
    */
   async getSurveyObservations(surveyId: number): Promise<ObservationRecord[]> {
-    const sqlStatement = getKnex().select('*').from('survey_observation').where('survey_id', surveyId);
+    const knex = getKnex();
+    const sqlStatement = knex
+      .queryBuilder()
+      .select('*', knex.raw('latitude::double precision'), knex.raw('longitude::double precision'))
+      .from('survey_observation')
+      .where('survey_id', surveyId);
 
     const response = await this.connection.knex(sqlStatement, ObservationRecord);
     return response.rows;

diff --git a/app/src/constants/i18n.ts b/app/src/constants/i18n.ts
@@ -388,3 +388,10 @@ export const CreateSamplingSiteI18N = {
   createErrorText:
     'An error has occurred while attempting to create your sampling site(s). Please try again. If the error persists, please contact your system administrator.'
 };
+
+export const ObservationsTableI18N = {
+  removeAllDialogTitle: 'Discard changes?',
+  removeAllDialogText: 'Are you sure you want to discard all your changes? This action cannot be undone.',
+  removeRecordDialogTitle: 'Discard record?',
+  removeRecordDialogText: 'Are you sure you want to discard this record? This action cannot be undone.'
+};
diff --git a/app/src/features/surveys/observations/ObservationComponent.tsx b/app/src/features/surveys/observations/ObservationComponent.tsx
@@ -1,17 +1,20 @@
-import { mdiCogOutline, mdiFloppy, mdiImport, mdiPlus, mdiTrashCan } from '@mdi/js';
+import { mdiCogOutline, mdiFloppy, mdiPlus, mdiTrashCan } from '@mdi/js';
 import Icon from '@mdi/react';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import YesNoDialog from 'components/dialog/YesNoDialog';
+import { ObservationsTableI18N } from 'constants/i18n';
 import { ObservationsContext } from 'contexts/observationsContext';
 import ObservationsTable from 'features/surveys/observations/ObservationsTable';
 import { useContext, useState } from 'react';
 
 const ObservationComponent = () => {
   const observationsContext = useContext(ObservationsContext);
   const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [showConfirmRemoveAllDialog, setShowConfirmRemoveAllDialog] = useState<boolean>(false);
 
   const handleSaveChanges = () => {
     setIsSaving(true);
@@ -24,76 +27,83 @@ const ObservationComponent = () => {
   const showSaveButton = observationsContext.hasUnsavedChanges();
 
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      flex="1 1 auto"
-      sx={{
-        overflow: 'hidden'
-      }}>
-      {/* Observations Component */}
-      <Toolbar
+    <>
+      <YesNoDialog
+        dialogTitle={ObservationsTableI18N.removeAllDialogTitle}
+        dialogText={ObservationsTableI18N.removeAllDialogText}
+        yesButtonProps={{ color: 'error' }}
+        yesButtonLabel={'Discard Changes'}
+        noButtonProps={{ color: 'primary', variant: 'contained' }}
+        noButtonLabel={'Cancel'}
+        open={showConfirmRemoveAllDialog}
+        onYes={() => {
+          setShowConfirmRemoveAllDialog(false);
+          observationsContext.revertRecords();
+        }}
+        onClose={() => setShowConfirmRemoveAllDialog(false)}
+        onNo={() => setShowConfirmRemoveAllDialog(false)}
+      />
+      <Box
+        display="flex"
+        flexDirection="column"
+        flex="1 1 auto"
         sx={{
-          flex: '0 0 auto',
-          borderBottom: '1px solid #ccc',
-          '& Button + Button': {
-            ml: 1
-          }
+          overflow: 'hidden'
         }}>
-        <Typography
+        <Toolbar
           sx={{
-            flexGrow: '1'
+            flex: '0 0 auto',
+            borderBottom: '1px solid #ccc',
+            '& Button + Button': {
+              ml: 1
+            }
           }}>
-          <strong>Observations</strong>
-        </Typography>
-        {showSaveButton && (
-          <>
-            <LoadingButton
-              loading={isSaving}
-              variant="contained"
-              color="primary"
-              startIcon={<Icon path={mdiFloppy} size={1} />}
-              onClick={() => handleSaveChanges()}>
-              Save Changes
-            </LoadingButton>
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<Icon path={mdiTrashCan} size={1} />}
-              onClick={() => observationsContext.revertRecords()}>
-              Cancel
-            </Button>
-          </>
-        )}
-        <Button variant="contained" color="primary" startIcon={<Icon path={mdiImport} size={1} />}>
-          Import
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          startIcon={<Icon path={mdiPlus} size={1} />}
-          onClick={() => observationsContext.createNewRecord()}>
-          Add Record
-        </Button>
-        <Button
-          variant="outlined"
-          sx={{
-            mr: -1
-          }}
-          startIcon={<Icon path={mdiCogOutline} size={1} />}>
-          Configure
-        </Button>
-      </Toolbar>
-      <Box display="flex" flexDirection="column" flex="1 1 auto">
-        {/* Map View */}
-
-        {/* <ObservationMapView /> */}
-
-        {/* Table View */}
-
-        <ObservationsTable />
+          <Typography
+            sx={{
+              flexGrow: '1'
+            }}>
+            <strong>Observations</strong>
+          </Typography>
+          {showSaveButton && (
+            <>
+              <LoadingButton
+                loading={isSaving}
+                variant="contained"
+                color="primary"
+                startIcon={<Icon path={mdiFloppy} size={1} />}
+                onClick={() => handleSaveChanges()}>
+                Save
+              </LoadingButton>
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<Icon path={mdiTrashCan} size={1} />}
+                onClick={() => setShowConfirmRemoveAllDialog(true)}>
+                Discard Changes
+              </Button>
+            </>
+          )}
+          <Button
+            variant="contained"
+            color="primary"
+            startIcon={<Icon path={mdiPlus} size={1} />}
+            onClick={() => observationsContext.createNewRecord()}>
+            Add Record
+          </Button>
+          <Button
+            variant="outlined"
+            sx={{
+              mr: -1
+            }}
+            startIcon={<Icon path={mdiCogOutline} size={1} />}>
+            Configure
+          </Button>
+        </Toolbar>
+        <Box display="flex" flexDirection="column" flex="1 1 auto">
+          <ObservationsTable />
+        </Box>
       </Box>
-    </Box>
+    </>
   );
 };