1774: Move translations to translations file

digitalfabrik · Dec 17, 2024 · 34e93cc · 34e93cc
1 parent ee4841d
commit 34e93cc
Show file tree

Hide file tree

Showing 82 changed files with 1,178 additions and 709 deletions.
diff --git a/administration/src/bp-modules/ErrorHandler.tsx b/administration/src/bp-modules/ErrorHandler.tsx
@@ -1,5 +1,6 @@
 import { Button, NonIdealState } from '@blueprintjs/core'
 import React, { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
 
 type ErrorHandlerProps = {
   title?: string
@@ -11,13 +12,16 @@ const ErrorHandler = ({
   refetch,
   title = 'Ein Fehler ist aufgetreten.',
   description,
-}: ErrorHandlerProps): ReactElement => (
-  <NonIdealState
-    icon='error'
-    title={title}
-    description={description}
-    action={<Button onClick={() => refetch()}>Erneut Versuchen</Button>}
-  />
-)
+}: ErrorHandlerProps): ReactElement => {
+  const { t } = useTranslation('errors')
+  return (
+    <NonIdealState
+      icon='error'
+      title={title}
+      description={description}
+      action={<Button onClick={() => refetch()}>{t('retry')}</Button>}
+    />
+  )
+}
 
 export default ErrorHandler
diff --git a/administration/src/bp-modules/NavigationBar.tsx b/administration/src/bp-modules/NavigationBar.tsx
@@ -1,5 +1,6 @@
 import { Alignment, Button, Navbar } from '@blueprintjs/core'
 import React, { ReactElement, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
 import { NavLink } from 'react-router-dom'
 import styled from 'styled-components'
 
@@ -21,6 +22,7 @@ type Props = {
 }
 
 const Navigation = ({ onSignOut }: Props): ReactElement => {
+  const { t } = useTranslation('misc')
   const config = useContext(ProjectConfigContext)
   const { region, role } = useContext(WhoAmIContext).me!
   const canSeeProjectSettings =
@@ -31,7 +33,9 @@ const Navigation = ({ onSignOut }: Props): ReactElement => {
       <Navbar.Group>
         <Navbar.Heading>
           <NavLink to='/' style={{ color: 'black', textDecoration: 'none', display: 'block' }}>
-            <div style={{ flexDirection: 'column' }}>{config.name} Verwaltung</div>
+            <div style={{ flexDirection: 'column' }}>
+              {config.name} {t('administration')}
+            </div>
             {!region ? null : (
               <span>
                 {region.prefix} {region.name} {`(${process.env.REACT_APP_VERSION})`}
@@ -44,41 +48,41 @@ const Navigation = ({ onSignOut }: Props): ReactElement => {
           <>
             {config.applicationFeature ? (
               <NavLink to='/applications'>
-                <Button minimal icon='form' text='Eingehende Anträge' />
+                <Button minimal icon='form' text={t('inComingApplications')} />
               </NavLink>
             ) : null}
             {config.cardCreation ? (
               <NavLink to='/cards'>
-                <Button minimal icon='id-number' text='Karten erstellen' />
+                <Button minimal icon='id-number' text={t('createCards')} />
               </NavLink>
             ) : null}
           </>
         ) : null}
         {role === Role.ProjectAdmin || role === Role.RegionAdmin ? (
           <>
             <NavLink to='/users'>
-              <Button minimal icon='people' text='Benutzer verwalten' />
+              <Button minimal icon='people' text={t('manageUsers')} />
             </NavLink>
             {config.cardStatistics.enabled ? (
               <NavLink to='/statistics'>
-                <Button minimal icon='stacked-chart' text='Statistiken' />
+                <Button minimal icon='stacked-chart' text={t('statistics')} />
               </NavLink>
             ) : null}
           </>
         ) : null}
         {role === Role.RegionAdmin && config.applicationFeature ? (
           <NavLink to='/region'>
-            <Button minimal icon='path-search' text='Region verwalten' />
+            <Button minimal icon='path-search' text={t('manageRegion')} />
           </NavLink>
         ) : null}
         {canSeeProjectSettings ? (
           <NavLink to='/project'>
-            <Button minimal icon='projects' text='Projekt verwalten' />
+            <Button minimal icon='projects' text={t('manageProject')} />
           </NavLink>
         ) : null}
         {role === Role.ProjectStoreManager ? (
           <NavLink to='/stores'>
-            <Button minimal icon='shop' text='Akzeptanzpartner verwalten' />
+            <Button minimal icon='shop' text={t('manageStores')} />
           </NavLink>
         ) : null}
       </Navbar.Group>

diff --git a/administration/src/bp-modules/PasswordInput.tsx b/administration/src/bp-modules/PasswordInput.tsx
@@ -1,9 +1,11 @@
 import { Button, InputGroup, InputGroupProps2, Label, Tooltip } from '@blueprintjs/core'
+import { TFunction } from 'i18next'
 import React, { ReactElement, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
-const ShowPasswordButton = ({ hidden, onClick }: { hidden: boolean; onClick: () => void }) => (
+const ShowPasswordButton = ({ hidden, onClick, t }: { hidden: boolean; onClick: () => void; t: TFunction }) => (
   <Tooltip
-    content={hidden ? 'Passwort anzeigen' : 'Passwort verstecken'}
+    content={hidden ? t('showPassword') : t('hidePassword')}
     renderTarget={({ isOpen, ref, ...tooltipProps }) => (
       <Button ref={ref} {...tooltipProps} minimal icon={hidden ? 'eye-open' : 'eye-off'} onClick={onClick} />
     )}
@@ -18,6 +20,7 @@ const PasswordInput = ({
   label: string
   setValue: ((value: string) => void) | null
 }): ReactElement => {
+  const { t } = useTranslation('misc')
   const [passwordHidden, setPasswordHidden] = useState(true)
   return (
     <Label>
@@ -28,7 +31,9 @@ const PasswordInput = ({
         type={passwordHidden ? 'password' : 'text'}
         onChange={event => setValue?.(event.currentTarget.value)}
         readOnly={setValue === null}
-        rightElement={<ShowPasswordButton hidden={passwordHidden} onClick={() => setPasswordHidden(!passwordHidden)} />}
+        rightElement={
+          <ShowPasswordButton hidden={passwordHidden} onClick={() => setPasswordHidden(!passwordHidden)} t={t} />
+        }
       />
     </Label>
   )

diff --git a/administration/src/bp-modules/UserMenu.tsx b/administration/src/bp-modules/UserMenu.tsx
@@ -1,5 +1,6 @@
 import { Button, Divider, Menu, Popover } from '@blueprintjs/core'
 import React, { ReactElement, useContext, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
@@ -41,6 +42,7 @@ const RoleInfo = styled.span`
 
 const UserMenu = ({ onSignOut }: UserMenuProps): ReactElement => {
   const { role, email } = useContext(WhoAmIContext).me!
+  const { t } = useTranslation('misc')
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const navigate = useNavigate()
   const signOutAndRedirect = () => {
@@ -52,9 +54,9 @@ const UserMenu = ({ onSignOut }: UserMenuProps): ReactElement => {
       <RoleInfo>Rolle: {roleToText(role)}</RoleInfo>
       <Divider style={{ margin: '4px 0px' }} />
       <NavLink to='/user-settings'>
-        <MenuItem minimal icon='settings' text='Benutzereinstellungen' />
+        <MenuItem minimal icon='settings' text={t('userSettings')} />
       </NavLink>
-      <MenuItem minimal icon='log-out' text='Logout' onClick={signOutAndRedirect} />
+      <MenuItem minimal icon='log-out' text={t('logout')} onClick={signOutAndRedirect} />
     </MenuContent>
   )
   return (

diff --git a/administration/src/bp-modules/applications/ApplicationCard.tsx b/administration/src/bp-modules/applications/ApplicationCard.tsx
@@ -11,6 +11,7 @@ import {
   Tooltip,
 } from '@blueprintjs/core'
 import React, { ReactElement, memo, useContext, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import getMessageFromApolloError from '../../errors/getMessageFromApolloError'
@@ -164,6 +165,7 @@ const ApplicationCard = ({
   onChange,
 }: ApplicationCardProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
+  const { t } = useTranslation('applications')
   const { createdDate: createdDateString, jsonValue, id, withdrawalDate, cardCreated } = application
   const jsonField: JsonField<'Array'> = JSON.parse(jsonValue)
   const config = useContext(ProjectConfigContext)
@@ -181,7 +183,7 @@ const ApplicationCard = ({
         onDelete()
       } else {
         console.error('Delete operation returned false.')
-        appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
+        appToaster?.show({ intent: 'danger', message: t('errors:unknown') })
       }
     },
   })
@@ -200,10 +202,12 @@ const ApplicationCard = ({
     <ApplicationViewCard
       title={
         <div>
-          <Title>Antrag vom {formatDateWithTimezone(createdDateString, config.timezone)}&emsp;</Title>{' '}
+          <Title>
+            {t('applicationFrom')} {formatDateWithTimezone(createdDateString, config.timezone)}&emsp;
+          </Title>{' '}
           {personalData && personalData.forenames !== undefined && personalData.surname !== undefined && (
             <CardContentHint>
-              Name: {personalData.surname}, {personalData.forenames}
+              {t('name')}: {personalData.surname}, {personalData.forenames}
             </CardContentHint>
           )}
         </div>
@@ -225,9 +229,9 @@ const ApplicationCard = ({
 
           {!!withdrawalDate && (
             <WithdrawAlert intent='warning'>
-              Der Antrag wurde vom Antragsteller am {formatDateWithTimezone(withdrawalDate, config.timezone)}{' '}
-              zurückgezogen. <br />
-              Bitte löschen Sie den Antrag zeitnah.
+              {t('withdrawalMessage', { withdrawalDate: formatDateWithTimezone(withdrawalDate, config.timezone) })}
+              <br />
+              {t('deleteApplicationSoonPrompt')}
             </WithdrawAlert>
           )}
         </SectionCardHeader>
@@ -245,35 +249,33 @@ const ApplicationCard = ({
       </SectionCard>
       <SectionCard>
         <ButtonContainer>
-          <Tooltip
-            disabled={!!createCardQuery}
-            content='Es existiert kein passendes Mapping, um aus diesem Antrag das Kartenformular vollständig auszufüllen.'>
+          <Tooltip disabled={!!createCardQuery} content={t('incompleteMappingTooltip')}>
             <PrintAwareAnchorButton
               disabled={!createCardQuery}
               href={createCardQuery ? `./cards/add${createCardQuery}` : undefined}
               icon='id-number'
               intent='primary'>
-              {cardCreated ? 'Karte erneut erstellen' : 'Karte erstellen'}
+              {cardCreated ? t('createCardAgain') : t('createCard')}
             </PrintAwareAnchorButton>
           </Tooltip>
           <PrintAwareButton onClick={() => setDeleteDialogOpen(true)} intent='danger' icon='trash'>
-            Antrag löschen
+            {t('deleteApplication')}
           </PrintAwareButton>
           <PrintAwareButton onClick={() => printApplicationById(id)} intent='none' icon='print'>
-            PDF exportieren
+            {t('exportPdf')}
           </PrintAwareButton>
           <CollapseIcon icon='chevron-up' onClick={() => setIsExpanded(!isExpanded)} style={{ marginLeft: 'auto' }} />
         </ButtonContainer>
         <Alert
-          cancelButtonText='Abbrechen'
-          confirmButtonText='Antrag löschen'
+          cancelButtonText={t('cancel')}
+          confirmButtonText={t('deleteApplication')}
           icon='trash'
           intent='danger'
           isOpen={deleteDialogOpen}
           loading={loading}
           onCancel={() => setDeleteDialogOpen(false)}
           onConfirm={() => deleteApplication({ variables: { applicationId: application.id } })}>
-          <p>Möchten Sie den Antrag unwiderruflich löschen?</p>
+          <p>{t('deleteApplicationConfirmationPrompt')}</p>
         </Alert>
       </SectionCard>
     </ApplicationViewCard>

diff --git a/administration/src/bp-modules/applications/ApplicationStatusBar.tsx b/administration/src/bp-modules/applications/ApplicationStatusBar.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import ApplicationStatusHelpButton from './ApplicationStatusBarHelpButton'
@@ -60,22 +61,25 @@ const ApplicationStatusBar = ({
   activeBarItem,
   barItems,
   setActiveBarItem,
-}: ApplicationStatusBarProps): ReactElement => (
-  <Container>
-    <Title>Status</Title>
-    <ApplicationStatusHelpButton />
-    <BarItemContainer>
-      {barItems.map(item => (
-        <ApplicationStatusBarItem
-          key={item.title}
-          count={getApplicationCount(applications, item.status)}
-          item={item}
-          setActiveBarItem={setActiveBarItem}
-          active={item === activeBarItem}
-        />
-      ))}
-    </BarItemContainer>
-  </Container>
-)
+}: ApplicationStatusBarProps): ReactElement => {
+  const { t } = useTranslation('applications')
+  return (
+    <Container>
+      <Title>{t('status')}</Title>
+      <ApplicationStatusHelpButton />
+      <BarItemContainer>
+        {barItems.map(item => (
+          <ApplicationStatusBarItem
+            key={item.title}
+            count={getApplicationCount(applications, item.status)}
+            item={item}
+            setActiveBarItem={setActiveBarItem}
+            active={item === activeBarItem}
+          />
+        ))}
+      </BarItemContainer>
+    </Container>
+  )
+}
 
 export default ApplicationStatusBar