Scroll down on thesis row click to show thesis details

UniversityOfHelsinkiCS · Sep 30, 2024 · 033319f · 033319f
1 parent ec3f5b8
commit 033319f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/client/components/ThesisPage/ThesesPage.tsx b/src/client/components/ThesisPage/ThesesPage.tsx
@@ -42,6 +42,7 @@ const PAGE_SIZE = 25
 
 const ThesesPage = () => {
   const apiRef = useGridApiRef()
+  const footerRef = useRef<HTMLDivElement>(null)
   const { t, i18n } = useTranslation()
   const { language } = i18n as { language: TranslationLanguage }
   const { user, isLoading: loggedInUserLoading } = useLoggedInUser()
@@ -100,6 +101,12 @@ const ThesesPage = () => {
     }
   }, [user.thesesTableFilters])
 
+  useEffect(() => {
+    if (rowSelectionModel.length > 0) {
+      footerRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [rowSelectionModel])
+
   const columns: GridColDef<Thesis>[] = [
     {
       field: 'programId',
@@ -256,9 +263,9 @@ const ThesesPage = () => {
           paginationModel={paginationModel}
           onPaginationModelChange={(newModel) => setPaginationModel(newModel)}
           rowSelectionModel={rowSelectionModel}
-          onRowSelectionModelChange={(newSelection: GridRowSelectionModel) =>
+          onRowSelectionModelChange={(newSelection: GridRowSelectionModel) => {
             setRowSelectionModel(newSelection)
-          }
+          }}
           localeText={
             dataGridLocale.components.MuiDataGrid.defaultProps.localeText
           }
@@ -274,6 +281,7 @@ const ThesesPage = () => {
               showOnlyOwnTheses,
             },
             footer: {
+              footerRef,
               rowSelectionModel,
               handleEditThesis: initializeThesisEdit,
               handleDeleteThesis: initializeThesisDelete,

diff --git a/src/client/components/ThesisPage/ViewThesisFooter.tsx b/src/client/components/ThesisPage/ViewThesisFooter.tsx
@@ -357,7 +357,8 @@ const PreviewSkeleton = () => (
 const ViewThesisFooter = (
   props: GridSlotProps['footer'] & ThesisFooterProps
 ) => {
-  const { rowSelectionModel, handleEditThesis, handleDeleteThesis } = props
+  const { rowSelectionModel, footerRef, handleEditThesis, handleDeleteThesis } =
+    props
 
   const { t } = useTranslation()
   const { thesis, isLoading: thesisLoading } = useSingleThesis(
@@ -366,7 +367,7 @@ const ViewThesisFooter = (
 
   return (
     <>
-      <GridFooter />
+      <GridFooter ref={footerRef} />
       {thesis ? (
         <Box sx={{ m: 2 }}>
           <Stack

diff --git a/src/client/types.tsx b/src/client/types.tsx
@@ -1,3 +1,4 @@
+import { MutableRefObject } from 'react'
 import { User } from '@backend/types'
 import { GridRowSelectionModel } from '@mui/x-data-grid/models/gridRowSelectionModel'
 
@@ -17,6 +18,7 @@ export interface SupervisorSelection {
 }
 
 export interface ThesisFooterProps {
+  footerRef: MutableRefObject<HTMLDivElement>
   rowSelectionModel: GridRowSelectionModel[]
   handleEditThesis: () => void
   handleDeleteThesis: () => void