feat: add localization to all DataGrid elements -refs: #207

UniversityOfHelsinkiCS · Dec 18, 2024 · 34f8cee · 34f8cee
1 parent e211a1b
commit 34f8cee
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/src/client/components/DepartmentAdmin/DepartmentAdmin.tsx b/src/client/components/DepartmentAdmin/DepartmentAdmin.tsx
@@ -14,6 +14,7 @@ import {
 } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { DataGrid, GridColDef } from '@mui/x-data-grid'
+import { fiFI, enUS } from '@mui/x-data-grid/locales'
 
 import { TranslationLanguage, DepartmentAdminData } from '@backend/types'
 
@@ -68,6 +69,8 @@ const DepartmentAdmin = () => {
   if (!user.isAdmin && !user.managedDepartmentIds?.length)
     return <Navigate to="/" />
 
+  const dataGridLocale = language === 'fi' ? fiFI : enUS
+
   const columns: GridColDef<DepartmentAdminData>[] = [
     {
       field: 'user',
@@ -127,6 +130,9 @@ const DepartmentAdmin = () => {
         rows={departmentAdmins}
         columns={columns}
         pageSizeOptions={[100]}
+        localeText={
+          dataGridLocale.components.MuiDataGrid.defaultProps.localeText
+        }
       />
       <Box
         sx={{

diff --git a/src/client/components/DepartmentStatistics/DepartmentStatistics.tsx b/src/client/components/DepartmentStatistics/DepartmentStatistics.tsx
@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next'
 import { Box, Tooltip, Typography } from '@mui/material'
 import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid'
 
+import { fiFI, enUS } from '@mui/x-data-grid/locales'
+
 import {
   ThesisStatistics,
   ThesisStatus,
@@ -52,6 +54,8 @@ const DepartmentStatistics = () => {
     } as { startedWithinHalfYearCount: number } & Record<ThesisStatus, number>
   )
 
+  const dataGridLocale = language === 'fi' ? fiFI : enUS
+
   const columns: GridColDef<ThesisStatistics>[] = [
     {
       field: 'supervisor',
@@ -160,6 +164,9 @@ const DepartmentStatistics = () => {
         columns={columns}
         getRowId={(row) => row.supervisor.id}
         slots={{ toolbar: GridToolbar }}
+        localeText={
+          dataGridLocale.components.MuiDataGrid.defaultProps.localeText
+        }
         columnGroupingModel={[
           {
             groupId: t('departmentStatisticsPage:thesisCountHeader'),

diff --git a/src/client/components/ProgramManagement/ProgramManagement.tsx b/src/client/components/ProgramManagement/ProgramManagement.tsx
@@ -19,6 +19,8 @@ import HowToRegIcon from '@mui/icons-material/HowToReg'
 import HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined'
 import { DataGrid, GridColDef } from '@mui/x-data-grid'
 
+import { fiFI, enUS } from '@mui/x-data-grid/locales'
+
 import useUsers from '../../hooks/useUsers'
 import usePrograms from '../../hooks/usePrograms'
 import { useDebounce } from '../../hooks/useDebounce'
@@ -87,6 +89,8 @@ const ProgramManagement = ({ filteringProgramId }: Props) => {
   if (!user.isAdmin && !user.managedProgramIds?.length)
     return <Navigate to="/" />
 
+  const dataGridLocale = language === 'fi' ? fiFI : enUS
+
   const columns: GridColDef<ProgramManagementData>[] = [
     {
       field: 'more-actions',
@@ -184,6 +188,9 @@ const ProgramManagement = ({ filteringProgramId }: Props) => {
         rows={programManagements}
         columns={columns}
         pageSizeOptions={[100]}
+        localeText={
+          dataGridLocale.components.MuiDataGrid.defaultProps.localeText
+        }
       />
       <Box
         sx={{