minor formatting changes, adding enhanced shortcut implementation to …

…datagrids, fully fleshing out reentry data modal system
Smithsonian · Jun 24, 2024 · d6c1ed7 · d6c1ed7
1 parent ed10f40
commit d6c1ed7
Show file tree

Hide file tree

Showing 15 changed files with 185 additions and 229 deletions.
diff --git a/frontend/app/(hub)/dashboard/page.tsx b/frontend/app/(hub)/dashboard/page.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionGroup,
-  AccordionSummary,
-  Box,
-  IconButton,
-  List,
-  ListItem,
-  Tooltip,
-  Typography
-} from "@mui/joy";
+import { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, Box, IconButton, List, ListItem, Tooltip, Typography} from "@mui/joy";
 import WarningIcon from '@mui/icons-material/Warning';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import Avatar from "@mui/joy/Avatar";

diff --git a/frontend/app/(hub)/layout.tsx b/frontend/app/(hub)/layout.tsx
@@ -27,6 +27,7 @@ import {
 } from "@/app/contexts/listselectionprovider";
 import {createAndUpdateCensusList} from "@/config/sqlrdsdefinitions/orgcensusrds";
 import {siteConfig} from "@/config/macros/siteconfigs";
+import { useDataValidityContext } from "../contexts/datavalidityprovider";
 
 const Sidebar = dynamic(() => import('@/components/sidebar'), { ssr: false });
 const Header = dynamic(() => import('@/components/header'), { ssr: false });
@@ -78,6 +79,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
   const currentCensus = useOrgCensusContext();
   const currentQuadrat = useQuadratContext();
   const { data: session } = useSession();
+  const {validity} = useDataValidityContext();
   const previousSiteRef = useRef<string | undefined>(undefined);
 
   const [siteListLoaded, setSiteListLoaded] = useState(false);
@@ -109,7 +111,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
     setLoading(false);
     setCensusListLoaded(true);
     return { success: true };
-  }, [censusListContext, censusListDispatch, currentPlot, currentSite, setLoading]);
+  }, [censusListContext, censusListDispatch, currentPlot, currentSite, setLoading, validity]);
 
   const loadPlotsData = useCallback(async () => {
     if (!currentSite) return { success: false, message: 'Site must be selected to load plot data' };
@@ -128,7 +130,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
     setLoading(false);
     setPlotListLoaded(true);
     return { success: true };
-  }, [plotListContext, plotListDispatch, currentSite, setLoading]);
+  }, [plotListContext, plotListDispatch, currentSite, setLoading, validity]);
 
   const loadQuadratsData = useCallback(async () => {
     if (!currentPlot || !currentCensus) return {
@@ -150,7 +152,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
     setLoading(false);
     setQuadratListLoaded(true);
     return { success: true };
-  }, [quadratListContext, quadratListDispatch, currentPlot, currentCensus, currentSite, setLoading]);
+  }, [quadratListContext, quadratListDispatch, currentPlot, currentCensus, currentSite, setLoading, validity]);
 
   const loadSubquadratsData = useCallback(async () => {
     if (!currentPlot || !currentCensus || !currentQuadrat) return {
@@ -172,7 +174,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
     setLoading(false);
     setSubquadratListLoaded(true);
     return { success: true };
-  }, [subquadratListContext, subquadratListDispatch, currentPlot, currentCensus, currentQuadrat, currentSite, setLoading]);
+  }, [subquadratListContext, subquadratListDispatch, currentPlot, currentCensus, currentQuadrat, currentSite, setLoading, validity]);
 
   const fetchSiteList = useCallback(async () => {
     setLoading(true, 'Loading Sites...');
@@ -190,7 +192,7 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
       siteListDispatch ? await siteListDispatch({siteList: allsites}) : undefined;
     }
     setLoading(false);
-  }, [session, siteListLoaded, siteListDispatch, setLoading]);
+  }, [session, siteListLoaded, siteListDispatch, setLoading, validity]);
 
   useEffect(() => {
     if (session && !siteListLoaded) {

diff --git a/frontend/app/(hub)/measurementshub/summary/page.tsx b/frontend/app/(hub)/measurementshub/summary/page.tsx
@@ -3,29 +3,10 @@ import React, { useEffect, useState } from "react";
 import { GridRowModes, GridRowModesModel, GridRowsProp } from "@mui/x-data-grid";
 import { Alert, AlertProps, LinearProgress, Tooltip, TooltipProps, styled, tooltipClasses } from "@mui/material";
 import { gridColumnsArrayMSVRDS, initialMeasurementsSummaryViewRDSRow } from '@/config/sqlrdsdefinitions/views/measurementssummaryviewrds';
-import {
-  Box,
-  ListItemContent,
-  ListItem,
-  List,
-  Modal,
-  ModalDialog,
-  Typography,
-  Button,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Snackbar,
-  Stack,
-} from "@mui/joy";
+import { Box, ListItemContent, ListItem, List, Modal, ModalDialog, Typography, Button, DialogTitle, DialogContent, DialogActions, Snackbar, Stack,} from "@mui/joy";
 import Select, { SelectOption } from "@mui/joy/Select";
 import { useSession } from "next-auth/react";
-import {
-  useOrgCensusContext,
-  usePlotContext,
-  useQuadratDispatch,
-  useSiteContext
-} from "@/app/contexts/userselectionprovider";
+import { useOrgCensusContext, usePlotContext, useQuadratDispatch, useSiteContext} from "@/app/contexts/userselectionprovider";
 import { randomId } from "@mui/x-data-grid-generator";
 import UploadParentModal from "@/components/uploadsystemhelpers/uploadparentmodal";
 import { useQuadratListContext } from "@/app/contexts/listselectionprovider";

diff --git a/frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx b/frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx
@@ -7,11 +7,7 @@ import {randomId} from "@mui/x-data-grid-generator";
 import {useSession} from "next-auth/react";
 import React, {useEffect, useState} from "react";
 import DataGridCommons from "../datagridcommons";
-import {
-  useOrgCensusContext,
-  usePlotContext,
-  useSiteContext
-} from "@/app/contexts/userselectionprovider";
+import { useOrgCensusContext, usePlotContext, useSiteContext} from "@/app/contexts/userselectionprovider";
 import {useDataValidityContext} from "@/app/contexts/datavalidityprovider";
 import {GridSelections} from "@/config/macros";
 import { initialQuadratPersonnelRDSRow } from "@/config/sqlrdsdefinitions/tables/quadratpersonnelrds";

diff --git a/frontend/components/datagrids/applications/quadratsdatagrid.tsx b/frontend/components/datagrids/applications/quadratsdatagrid.tsx
@@ -3,10 +3,7 @@ import {GridRowModes, GridRowModesModel, GridRowsProp} from "@mui/x-data-grid";
 import {AlertProps} from "@mui/material";
 import React, { useState} from "react";
 import {QuadratsGridColumns as BaseQuadratsGridColumns, initialQuadratRDSRow} from '@/config/sqlrdsdefinitions/tables/quadratrds';
-import {
-  useOrgCensusContext,
-  usePlotContext,
-} from "@/app/contexts/userselectionprovider";
+import { useOrgCensusContext, usePlotContext, } from "@/app/contexts/userselectionprovider";
 import {randomId} from "@mui/x-data-grid-generator";
 import DataGridCommons from "@/components/datagrids/datagridcommons";
 import {Box, Button, Typography} from "@mui/joy";

diff --git a/frontend/components/datagrids/datagridcommons.tsx b/frontend/components/datagrids/datagridcommons.tsx
@@ -1,24 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  GridActionsCellItem,
-  GridColDef,
-  GridEventListener,
-  GridRowEditStopReasons,
-  GridRowId,
-  GridRowModel,
-  GridRowModes,
-  GridRowModesModel,
-  GridToolbar,
-  GridToolbarContainer,
-  GridToolbarProps,
-  ToolbarPropsOverrides
-} from '@mui/x-data-grid';
-import {
-  Alert,
-  Button,
-  Snackbar
-} from '@mui/material';
+import { GridActionsCellItem, GridColDef, GridEventListener, GridRowEditStopReasons, GridRowId, GridRowModel, GridRowModes, GridRowModesModel, GridToolbar, GridToolbarContainer, GridToolbarProps, ToolbarPropsOverrides, useGridApiRef, GridCellParams, } from '@mui/x-data-grid';
+import { Alert, Button, Snackbar, } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/DeleteOutlined';
@@ -28,20 +11,9 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import Box from "@mui/joy/Box";
 import { Tooltip, Typography } from "@mui/joy";
 import { StyledDataGrid } from "@/config/styleddatagrid";
-import {
-  createDeleteQuery,
-  createFetchQuery,
-  createPostPatchQuery,
-  getColumnVisibilityModel,
-  getGridID,
-} from "@/config/datagridhelpers";
+import { createDeleteQuery, createFetchQuery, createPostPatchQuery, getColumnVisibilityModel, getGridID } from "@/config/datagridhelpers";
 import { useSession } from "next-auth/react";
-import {
-  useOrgCensusContext,
-  usePlotContext,
-  useQuadratContext,
-  useSiteContext
-} from "@/app/contexts/userselectionprovider";
+import { useOrgCensusContext, usePlotContext, useQuadratContext, useSiteContext } from "@/app/contexts/userselectionprovider";
 import { redirect } from 'next/navigation';
 import { HTTPResponses, UnifiedValidityFlags } from '@/config/macros';
 import { useDataValidityContext } from '@/app/contexts/datavalidityprovider';
@@ -112,6 +84,7 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
   const [locked, setLocked] = useState(false);
   const [pendingAction, setPendingAction] = useState<PendingAction>({ actionType: '', actionId: null });
   const [promiseArguments, setPromiseArguments] = useState<{ resolve: (value: GridRowModel) => void, reject: (reason?: any) => void, newRow: GridRowModel, oldRow: GridRowModel } | null>(null);
+  const [isSaveHighlighted, setIsSaveHighlighted] = useState(false);
 
   const currentPlot = usePlotContext();
   const currentCensus = useOrgCensusContext();
@@ -125,6 +98,8 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
 
   useSession();
 
+  const apiRef = useGridApiRef();
+
   useEffect(() => {
     if (currentCensus !== undefined) {
       setLocked(currentCensus.dateRanges[0].endDate !== undefined);
@@ -346,7 +321,6 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
       setRowCount(data.totalCount);
 
       if (isNewRowAdded && pageToFetch === newLastPage) {
-        console.log('isNewRowAdded true, on new last page');
         addNewRowToGrid();
         setIsNewRowAdded(false);
       }
@@ -419,7 +393,6 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
     if (rowInEditMode) {
       const [id] = rowInEditMode;
       const row = rows.find(row => String(row.id) === String(id));
-      console.log('handleRowModesModelChange triggered on row: ', row);
     }
   };
 
@@ -437,14 +410,20 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
   const handleEditClick = (id: GridRowId) => () => {
     if (locked) return;
     const row = rows.find(row => String(row.id) === String(id));
-    console.log('handleEditClick row: ', row);
     if (row && handleSelectQuadrat) {
       handleSelectQuadrat(row.quadratID);
     }
     setRowModesModel((prevModel) => ({
       ...prevModel,
       [id]: { mode: GridRowModes.Edit },
     }));
+    // Auto-focus on the first editable cell when entering edit mode
+    setTimeout(() => {
+      const firstEditableColumn = filteredColumns.find((col) => col.editable);
+      if (firstEditableColumn) {
+        apiRef.current.setCellFocus(id, firstEditableColumn.field);
+      }
+    });
   };
 
   const handleCancelClick = (id: GridRowId, event?: React.MouseEvent) => {
@@ -527,6 +506,44 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
     else return columns;
   }, [rows, columns]);
 
+  const handleEnterKeyNavigation = async (params: GridCellParams, event: React.KeyboardEvent) => {
+    event.defaultPrevented = true;
+    const columnIndex = filteredColumns.findIndex(col => col.field === params.field);
+    const isLastColumn = columnIndex === filteredColumns.length - 2;
+    const currentColumn = filteredColumns[columnIndex];
+
+    if (isSaveHighlighted) {
+      openConfirmationDialog('save', params.id);
+      setIsSaveHighlighted(false);
+    } else if (currentColumn.type === 'singleSelect') {
+      const cell = apiRef.current.getCellElement(params.id, params.field);
+      if (cell) {
+        const select = cell.querySelector('select');
+        if (select) {
+          select.focus();
+        }
+      }
+    } else if (isLastColumn) {
+      setIsSaveHighlighted(true);
+      apiRef.current.setCellFocus(params.id, 'actions');
+    } else {
+      apiRef.current.setCellFocus(params.id, filteredColumns[columnIndex + 1].field);
+    }
+  };
+
+  const handleSelectKeyDown = (params: GridCellParams, event: React.KeyboardEvent) => {
+    const column = filteredColumns.find(col => col.field === params.field);
+    if (column && column.type === 'singleSelect' && event.key === 'Enter') {
+      const cell = apiRef.current.getCellElement(params.id, params.field);
+      if (cell) {
+        const select = cell.querySelector('select');
+        if (select) {
+          select.blur();
+        }
+      }
+    }
+  };
+
   if (!currentSite || !currentPlot || !currentCensus) {
     redirect('/dashboard');
   } else {
@@ -547,6 +564,7 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
             Note: The Grid is filtered by your selected Plot and Plot ID
           </Typography>
           <StyledDataGrid
+            apiRef={apiRef}
             sx={{ width: '100%' }}
             rows={rows}
             columns={filteredColumns}
@@ -562,8 +580,7 @@ export default function DataGridCommons(props: Readonly<DataGridCommonProps>) {
             }}
             onCellKeyDown={(params, event) => {
               if (event.key === 'Enter') {
-                event.defaultMuiPrevented = true;
-                openConfirmationDialog('save', params.id);
+                handleEnterKeyNavigation(params, event);
               }
             }}
             loading={refresh}

diff --git a/frontend/components/datagrids/msvdatagrid.tsx b/frontend/components/datagrids/msvdatagrid.tsx
@@ -1,30 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  GridActionsCellItem,
-  GridCellParams,
-  GridColDef,
-  GridEventListener,
-  GridRowEditStopReasons,
-  GridRowId,
-  GridRowModel,
-  GridRowModes,
-  GridRowModesModel,
-  GridSortModel,
-  GridToolbar,
-  GridToolbarContainer,
-  GridToolbarProps,
-  GridValidRowModel,
-  ToolbarPropsOverrides
-} from '@mui/x-data-grid';
-import {
-  Alert,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Snackbar
-} from '@mui/material';
+import { GridActionsCellItem, GridCellParams, GridColDef, GridEventListener, GridRowEditStopReasons, GridRowId, GridRowModel, GridRowModes, GridRowModesModel, GridSortModel, GridToolbar, GridToolbarContainer, GridToolbarProps, GridValidRowModel, ToolbarPropsOverrides} from '@mui/x-data-grid';
+import { Alert, Button, Checkbox, FormControlLabel, FormGroup, Snackbar} from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/DeleteOutlined';
@@ -34,19 +11,9 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import Box from "@mui/joy/Box";
 import { Stack, Tooltip, Typography } from "@mui/joy";
 import { StyledDataGrid } from "@/config/styleddatagrid";
-import {
-  createDeleteQuery,
-  createFetchQuery,
-  createPostPatchQuery,
-  getGridID,
-} from "@/config/datagridhelpers";
+import { createDeleteQuery, createFetchQuery, createPostPatchQuery, getGridID,} from "@/config/datagridhelpers";
 import { CMError } from "@/config/macros/uploadsystemmacros";
-import {
-  useOrgCensusContext,
-  usePlotContext,
-  useQuadratContext,
-  useSiteContext
-} from "@/app/contexts/userselectionprovider";
+import { useOrgCensusContext, usePlotContext, useQuadratContext, useSiteContext} from "@/app/contexts/userselectionprovider";
 import { redirect } from 'next/navigation';
 import { CoreMeasurementsRDS } from '@/config/sqlrdsdefinitions/tables/coremeasurementsrds';
 import moment from 'moment';