267 ra all vlastne labels na resources stlpce a fieldy (#511)

* Added translation dependencies Attemting to resolve this mess * Added custom translation provider * Fixed lint issues * Season code now maps to strings (#481) * Season code now maps to strings * Moved string mappings to separate component Still trying to fix this mess * Added translations for resources and resource fields ugh... why? * Added tab labels * Added label translations * Improved translations * Fixed yarn.lock * fix typo * fix typo * Translation improvements --------- Co-authored-by: rtrembecky <[email protected]>
ZdruzenieSTROM · Dec 14, 2024 · 500385b · 500385b
1 parent dd0c1cb
commit 500385b
Show file tree

Hide file tree

Showing 45 changed files with 303 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,8 @@
     "mathjax-full": "^3.2.2",
     "mathjax-react": "^2.0.1",
     "next": "15.0.3",
+    "ra-i18n-polyglot": "^5.4.0",
+    "ra-language-slovak": "^3.6.2",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-admin": "^5.4.0",
     "react-cookie": "^4.1.1",

diff --git a/src/components/Admin/Admin.tsx b/src/components/Admin/Admin.tsx
@@ -3,6 +3,7 @@ import {Admin as ReactAdmin, Resource} from 'react-admin'
 
 import {AdminLayout} from './AdminLayout'
 import {dataProvider} from './dataProvider'
+import {myI18nProvider} from './i18nProvider'
 import {FlatpageCreate} from './resources/base/flat-page/FlatpageCreate'
 import {FlatpageEdit} from './resources/base/flat-page/FlatpageEdit'
 import {FlatpageList} from './resources/base/flat-page/FlatpageList'
@@ -51,7 +52,12 @@ export const Admin: FC = () => {
   const authProvider = useAuthProvider()
 
   return (
-    <ReactAdmin authProvider={authProvider} dataProvider={dataProvider} layout={AdminLayout}>
+    <ReactAdmin
+      authProvider={authProvider}
+      dataProvider={dataProvider}
+      layout={AdminLayout}
+      i18nProvider={myI18nProvider}
+    >
       <Resource name="cms/post" list={PostList} edit={PostEdit} show={PostShow} create={PostCreate} />
       <Resource
         name="cms/flat-page"

diff --git a/src/components/Admin/AdminLayout.tsx b/src/components/Admin/AdminLayout.tsx
@@ -2,12 +2,12 @@ import {Home, Logout} from '@mui/icons-material/'
 import {Button, Stack, Typography} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC, PropsWithChildren} from 'react'
-import {AppBar, Layout, useLogout} from 'react-admin'
+import {AppBar, Layout, useLogout, useTranslate} from 'react-admin'
 
 const AppMenuBar = () => {
   const router = useRouter()
   const logout = useLogout()
-
+  const translate = useTranslate()
   return (
     <AppBar
       userMenu={false}
@@ -17,14 +17,14 @@ const AppMenuBar = () => {
           <Button color="inherit" onClick={() => router.push('/strom')}>
             <Stack gap={1} direction="row">
               <Home />
-              <Typography variant="body1">Späť na hlavnú stránku</Typography>
+              <Typography variant="body1">{translate('controls.back_home')}</Typography>
             </Stack>
           </Button>
 
           <Button color="inherit" onClick={() => logout()}>
             <Stack gap={1} direction="row">
               <Logout />
-              <Typography variant="body1">Odhlásiť</Typography>
+              <Typography variant="body1">{translate('controls.logout')}</Typography>
             </Stack>
           </Button>
         </Stack>
@@ -34,6 +34,7 @@ const AppMenuBar = () => {
 }
 
 export const AdminLayout: FC<PropsWithChildren> = ({children}) => {
+  const translate = useTranslate()
   return (
     <>
       <Layout appBar={AppMenuBar}>{children}</Layout>
@@ -50,7 +51,7 @@ export const AdminLayout: FC<PropsWithChildren> = ({children}) => {
         }}
       >
         <Typography color={'#000000'} fontSize={'0.8em'}>
-          Všetky časy sú uvedené v časovom pásme Europe/Bratislava
+          {translate('content.footer.timezone_message')}
         </Typography>
       </Stack>
     </>

diff --git a/src/components/Admin/custom/LatexPreview.tsx b/src/components/Admin/custom/LatexPreview.tsx
@@ -7,7 +7,7 @@ export const LatexPreview: FC<FieldProps> = ({source}) => {
   if (!source) return null
 
   return (
-    <Labeled label="Preview">
+    <Labeled label="content.labels.preview">
       <FormDataConsumer>
         {({formData}) => {
           const data = formData[source]

diff --git a/src/components/Admin/custom/MyEditActions.tsx b/src/components/Admin/custom/MyEditActions.tsx
@@ -24,7 +24,7 @@ export const MyEditActions: FC = () => {
           we want to link to the specific show tab, not just resource show */}
       {/* @ts-ignore */}
       <ShowButton to={to} />
-      <ListButton label="Back to list" />
+      <ListButton label="content.labels.back_to_list" />
     </TopToolbar>
   )
 }
diff --git a/src/components/Admin/custom/MyShowActions.tsx b/src/components/Admin/custom/MyShowActions.tsx
@@ -21,7 +21,7 @@ export const MyShowActions: FC = () => {
   return (
     <TopToolbar>
       <EditButton to={to} />
-      <ListButton label="Back to list" />
+      <ListButton label="content.labels.back_to_list" />
     </TopToolbar>
   )
 }
diff --git a/src/components/Admin/custom/SeasonCodeField.tsx b/src/components/Admin/custom/SeasonCodeField.tsx
@@ -1,14 +1,16 @@
 import {FC} from 'react'
-import {FunctionField, FunctionFieldProps} from 'react-admin'
+import {FunctionField, FunctionFieldProps, useTranslate} from 'react-admin'
 
 import {seasonCodeStrings} from '../seasonCodeStrings'
 
 export const SeasonCodeField: FC<Omit<FunctionFieldProps, 'render'>> = ({source, ...rest}) => {
+  const translate = useTranslate()
+
   return (
     <FunctionField
       source={source}
       render={(record) => {
-        return `${seasonCodeStrings[record.season_code].name ?? ''}`
+        return translate(seasonCodeStrings[record.season_code].name ?? '')
       }}
       {...rest}
     />

diff --git a/src/components/Admin/i18nProvider.ts b/src/components/Admin/i18nProvider.ts
@@ -0,0 +1,5 @@
+import polyglotI18nProvider from 'ra-i18n-polyglot'
+
+import {sk_SK} from './translations/sk_SK'
+
+export const myI18nProvider = polyglotI18nProvider(() => sk_SK, 'sk', [{locale: 'sk', name: 'Slovak (sk_SK)'}])
diff --git a/src/components/Admin/resources/base/flat-page/FlatpageCreate.tsx b/src/components/Admin/resources/base/flat-page/FlatpageCreate.tsx
@@ -7,13 +7,13 @@ import {MyCreate} from '@/components/Admin/custom/MyCreate'
 export const FlatpageCreate: FC = () => (
   <MyCreate>
     <TabbedForm>
-      <FormTab label="general">
+      <FormTab label="content.labels.general">
         <NumberInput source="id" fullWidth disabled />
         <TextInput source="url" fullWidth validate={required()} />
         <TextInput source="title" fullWidth validate={required()} />
         <TextInput source="content" multiline fullWidth validate={required()} />
       </FormTab>
-      <FormTab label="preview">
+      <FormTab label="content.labels.preview">
         <FlatpagePreview />
       </FormTab>
     </TabbedForm>

diff --git a/src/components/Admin/resources/base/flat-page/FlatpageEdit.tsx b/src/components/Admin/resources/base/flat-page/FlatpageEdit.tsx
@@ -7,13 +7,13 @@ import {MyEdit} from '@/components/Admin/custom/MyEdit'
 export const FlatpageEdit: FC = () => (
   <MyEdit>
     <TabbedForm>
-      <FormTab label="general">
+      <FormTab label="content.labels.general">
         <NumberInput source="id" fullWidth disabled />
         <TextInput source="url" fullWidth validate={required()} />
         <TextInput source="title" fullWidth validate={required()} />
         <TextInput source="content" multiline fullWidth validate={required()} />
       </FormTab>
-      <FormTab label="preview">
+      <FormTab label="content.labels.preview">
         <FlatpagePreview />
       </FormTab>
     </TabbedForm>

diff --git a/src/components/Admin/resources/cms/post/PostCreate.tsx b/src/components/Admin/resources/cms/post/PostCreate.tsx
@@ -10,7 +10,7 @@ export const PostCreate: FC = () => {
   return (
     <MyCreate>
       <TabbedForm>
-        <FormTab label="general">
+        <FormTab label="content.labels.general">
           <TextInput source="caption" fullWidth validate={required()} />
           <TextInput source="short_text" fullWidth validate={maxLength(200, 'Text musí mať najviac 200 znakov.')} />
           <TextInput source="details" multiline fullWidth />
@@ -19,15 +19,15 @@ export const PostCreate: FC = () => {
           <MyDateTimeInput source="visible_until" fullWidth validate={required()} />
           <SitesCheckboxInput source="sites" validate={required()} />
         </FormTab>
-        <FormTab label="links">
+        <FormTab label="content.labels.links">
           <ArrayInput source="links" defaultValue={[]}>
             <SimpleFormIterator>
               <TextInput source="caption" fullWidth validate={required()} />
               <TextInput source="url" fullWidth validate={required()} />
             </SimpleFormIterator>
           </ArrayInput>
         </FormTab>
-        <FormTab label="preview">
+        <FormTab label="content.labels.preview">
           <PostPreview />
         </FormTab>
       </TabbedForm>

diff --git a/src/components/Admin/resources/cms/post/PostEdit.tsx b/src/components/Admin/resources/cms/post/PostEdit.tsx
@@ -9,7 +9,7 @@ import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
 export const PostEdit: FC = () => (
   <MyEdit>
     <TabbedForm>
-      <FormTab label="general">
+      <FormTab label="content.labels.general">
         <TextInput source="caption" fullWidth validate={required()} />
         <TextInput source="short_text" fullWidth validate={maxLength(200, 'Text musí mať najviac 200 znakov.')} />
         <TextInput source="details" multiline fullWidth />
@@ -18,15 +18,15 @@ export const PostEdit: FC = () => (
         <MyDateTimeInput source="visible_until" fullWidth validate={required()} />
         <SitesCheckboxInput source="sites" validate={required()} />
       </FormTab>
-      <FormTab label="links">
+      <FormTab label="content.labels.links">
         <ArrayInput source="links" defaultValue={[]}>
           <SimpleFormIterator>
             <TextInput source="caption" fullWidth validate={required()} />
             <TextInput source="url" fullWidth validate={required()} />
           </SimpleFormIterator>
         </ArrayInput>
       </FormTab>
-      <FormTab label="preview">
+      <FormTab label="content.labels.preview">
         <PostPreview />
       </FormTab>
     </TabbedForm>

diff --git a/src/components/Admin/resources/cms/post/PostList.tsx b/src/components/Admin/resources/cms/post/PostList.tsx
@@ -15,11 +15,7 @@ export const PostList: FC = () => (
       <DateTimeField source="visible_after" />
       <DateTimeField source="visible_until" />
       <SitesArrayField source="sites" />
-      <FunctionField<RaRecord>
-        source="links"
-        label="Link count"
-        render={(record) => record && <span>{record['links'].length}</span>}
-      />
+      <FunctionField<RaRecord> source="links" render={(record) => record && <span>{record['links'].length}</span>} />
     </Datagrid>
   </List>
 )
diff --git a/src/components/Admin/resources/cms/post/PostShow.tsx b/src/components/Admin/resources/cms/post/PostShow.tsx
@@ -8,7 +8,7 @@ import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
 export const PostShow: FC = () => (
   <Show actions={<MyShowActions />}>
     <TabbedShowLayout>
-      <Tab label="general">
+      <Tab label="content.labels.general">
         <SimpleShowLayout>
           <TextField source="caption" />
           <TextField source="short_text" />
@@ -19,7 +19,7 @@ export const PostShow: FC = () => (
           <SitesArrayField source="sites" />
         </SimpleShowLayout>
       </Tab>
-      <Tab label="links">
+      <Tab label="content.labels.links">
         <SimpleShowLayout>
           <ArrayField source="links">
             <Datagrid rowClick={false}>

diff --git a/src/components/Admin/resources/competition/competition/CompetitionEdit.tsx b/src/components/Admin/resources/competition/competition/CompetitionEdit.tsx
@@ -12,7 +12,7 @@ export const CompetitionEdit: FC = () => (
       <NumberInput source="start_year" fullWidth disabled />
       <TextInput source="description" multiline fullWidth />
       <TextInput source="rules" multiline fullWidth />
-      <TextInput source="competition_type.name" label="Competition type" fullWidth disabled />
+      <TextInput source="competition_type.name" label="content.labels.competition_type" fullWidth disabled />
       <SitesCheckboxInput source="sites" disabled />
       <TextInput source="who_can_participate" fullWidth />
       <NumberInput source="min_years_until_graduation" fullWidth disabled />

diff --git a/src/components/Admin/resources/competition/competition/CompetitionList.tsx b/src/components/Admin/resources/competition/competition/CompetitionList.tsx
@@ -12,13 +12,13 @@ export const CompetitionList: FC = () => (
       <TextField source="start_year" />
       <TruncatedTextField source="description" maxTextWidth={30} />
       <TruncatedTextField source="rules" maxTextWidth={30} />
-      <TextField source="competition_type.name" label="Competition type" />
+      <TextField source="competition_type.name" label="content.labels.competition_type" />
       <SitesArrayField source="sites" />
       <TextField source="who_can_participate" />
       <NumberField source="min_years_until_graduation" />
       <FunctionField<RaRecord>
         source="history_events"
-        label="History events count"
+        label="content.labels.history_events_count"
         render={(record) => record && <span>{record['history_events'].length}</span>}
       />
     </Datagrid>

diff --git a/src/components/Admin/resources/competition/competition/CompetitionShow.tsx b/src/components/Admin/resources/competition/competition/CompetitionShow.tsx
@@ -22,14 +22,14 @@ import {UpcomingOrCurrentEvent} from './UpcomingOrCurrentEvent'
 export const CompetitionShow: FC = () => (
   <MyShow>
     <TabbedShowLayout>
-      <Tab label="general">
+      <Tab label="content.labels.general">
         <SimpleShowLayout>
           <TextField source="name" />
           <TextField source="slug" />
           <TextField source="start_year" />
           <TruncatedTextField source="description" maxTextWidth={100} expandable />
           <TruncatedTextField source="rules" maxTextWidth={200} expandable />
-          <TextField source="competition_type.name" label="Competition type" />
+          <TextField source="competition_type.name" label="content.labels.competition_type" />
           <SitesArrayField source="sites" />
           <TextField source="who_can_participate" />
           <NumberField source="min_years_until_graduation" />
@@ -38,7 +38,7 @@ export const CompetitionShow: FC = () => (
           <UpcomingOrCurrentEvent />
         </SimpleShowLayout>
       </Tab>
-      <Tab label="history_events">
+      <Tab label="content.labels.history_events">
         <SimpleShowLayout>
           <ArrayField source="history_events">
             <Datagrid rowClick={(id) => `/competition/event/${id}/show`}>
@@ -49,7 +49,6 @@ export const CompetitionShow: FC = () => (
               <DateTimeField source="end" />
               <FunctionField<RaRecord>
                 source="publication_set"
-                label="Publication count"
                 render={(record) => record && <span>{record['publication_set'].length}</span>}
               />
             </Datagrid>

diff --git a/src/components/Admin/resources/competition/competition/UpcomingOrCurrentEvent.tsx b/src/components/Admin/resources/competition/competition/UpcomingOrCurrentEvent.tsx
@@ -20,7 +20,7 @@ export const UpcomingOrCurrentEvent: FC = () => {
 
   return (
     <Labeled
-      label="Prebiehajúca alebo najbližšia akcia"
+      label="content.labels.next_event"
       onClick={() => redirect('show', 'competition/event', record.upcoming_or_current_event.competition)}
       sx={{cursor: 'pointer'}}
     >
@@ -39,7 +39,6 @@ export const UpcomingOrCurrentEvent: FC = () => {
 
         <FunctionField<RaRecord>
           source="publication_set"
-          label="Publication count"
           // optional access because of weird behavior of nested FunctionFields for null record
           render={(record) => record && <span>{record['publication_set']?.length}</span>}
         />

diff --git a/src/components/Admin/resources/competition/event-registration/EventRegistrationList.tsx b/src/components/Admin/resources/competition/event-registration/EventRegistrationList.tsx
@@ -8,11 +8,11 @@ export const EventRegistrationList: FC = () => (
     <Datagrid>
       <FunctionField
         source="profile.last_name"
-        label="Meno a priezvisko"
+        label="content.labels.name"
         render={(record: EventRegistration) => `${record.profile.first_name} ${record.profile.last_name}`}
       />
-      <TextField source="school.abbreviation" label="Škola" />
-      <TextField source="grade.tag" label="Ročník" />
+      <TextField source="school.abbreviation" />
+      <TextField source="grade.tag" />
       <ReferenceField source="event" reference="competition/event" link={false} />
     </Datagrid>
   </List>

diff --git a/src/components/Admin/resources/competition/event-registration/EventRegistrationShow.tsx b/src/components/Admin/resources/competition/event-registration/EventRegistrationShow.tsx
@@ -9,11 +9,11 @@ export const EventRegistrationShow: FC = () => (
     <SimpleShowLayout>
       <FunctionField
         source="profile.last_name"
-        label="Meno a priezvisko"
+        label="content.labels.name"
         render={(record: EventRegistration) => `${record.profile.first_name} ${record.profile.last_name}`}
       />
-      <TextField source="school.abbreviation" label="Škola" />
-      <TextField source="grade.tag" label="Ročník" />
+      <TextField source="school.abbreviation" />
+      <TextField source="grade.tag" />
       <ReferenceField source="event" reference="competition/event" link={false} />
     </SimpleShowLayout>
   </MyShow>

diff --git a/src/components/Admin/resources/competition/event/EventCreate.tsx b/src/components/Admin/resources/competition/event/EventCreate.tsx
@@ -29,10 +29,10 @@ export const EventCreate: FC = () => {
         <TextInput source="location" fullWidth />
         <FormControlLabel
           control={<Checkbox checked={includeRegLink} onChange={(e) => setIncludeRegLink(e.target.checked)} />}
-          label="Pridať registračný link"
+          label="content.labels.reg_link_add"
         />
         {includeRegLink && (
-          <Labeled label="Registration link">
+          <Labeled label="content.labels.reg_link">
             <>
               <NumberInput source="registration_link.id" fullWidth disabled />
               <TextInput source="registration_link.url" fullWidth validate={required()} />

diff --git a/src/components/Admin/resources/competition/event/EventEdit.tsx b/src/components/Admin/resources/competition/event/EventEdit.tsx
@@ -31,10 +31,10 @@ export const EventEdit: FC = () => {
         <TextInput source="location" fullWidth />
         <FormControlLabel
           control={<Checkbox checked={includeRegLink} onChange={(e) => setIncludeRegLink(e.target.checked)} />}
-          label="Upraviť registračný link"
+          label="content.labels.reg_link_add"
         />
         {includeRegLink && (
-          <Labeled label="Registration link">
+          <Labeled label="content.labels.reg_link">
             <>
               <NumberInput source="registration_link.id" fullWidth disabled />
               <TextInput source="registration_link.url" fullWidth validate={required()} />

diff --git a/src/components/Admin/resources/competition/event/EventList.tsx b/src/components/Admin/resources/competition/event/EventList.tsx
@@ -18,7 +18,6 @@ export const EventList: FC = () => (
       <TextField source="registration_link.url" />
       <FunctionField<RaRecord>
         source="publication_set"
-        label="Publication count"
         render={(record) => record && <span>{record['publication_set'].length}</span>}
       />
     </Datagrid>