feat: add pt-BR/ja/ko to translation submission form

components/soumet/ajoute-tradiksyon.js

@@ -76,7 +76,7 @@ function AjouteTradiksyon({showSwitch, disableSwitch, tradiksyonOtomatik, setTra
           aria-haspopup='true'
           onClick={handleClick}
         >
-          Ajouter une traduction <br /> 🇺🇸 🇫🇷 🇪🇸 🇩🇪 🇮🇹
+          Ajouter une traduction <br /> 🇺🇸 🇫🇷 🇪🇸 🇩🇪 🇮🇹 🇧🇷 🇯🇵 🇰🇷
         </Button>
         <StyledMenu
           keepMounted
@@ -123,6 +123,27 @@ function AjouteTradiksyon({showSwitch, disableSwitch, tradiksyonOtomatik, setTra
             }}
             onClick={handleClose}
           >🇮🇹 Italien</StyledMenuItem>
+          <StyledMenuItem
+            id='pt'
+            classes={{
+              root: classes.root
+            }}
+            onClick={handleClose}
+          >🇧🇷 Portugais</StyledMenuItem>
+          <StyledMenuItem
+            id='ja'
+            classes={{
+              root: classes.root
+            }}
+            onClick={handleClose}
+          >🇯🇵 Japonais</StyledMenuItem>
+          <StyledMenuItem
+            id='ko'
+            classes={{
+              root: classes.root
+            }}
+            onClick={handleClose}
+          >🇰🇷 Coréen</StyledMenuItem>
         </StyledMenu>
       </Root>
     </>

components/soumet/ekri-teks.js

@@ -65,6 +65,21 @@ const textLabels = {
     title: 'Traduzione',
     help: 'Traduzione del testo',
     emoji: '🇮🇹'
+  },
+  pt: {
+    title: 'Tradução',
+    help: 'Tradução da letra',
+    emoji: '🇧🇷'
+  },
+  ja: {
+    title: '翻訳',
+    help: '歌詞の翻訳',
+    emoji: '🇯🇵'
+  },
+  ko: {
+    title: '번역',
+    help: '가사 번역',
+    emoji: '🇰🇷'
   }
 }
 
@@ -78,7 +93,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
   const {data: session} = useSession()
   const {jwt, user} = session
   const [teksEkri, setTeksEkri] = useState({awtis: '', tit: '', transkripsyon: ''})
-  const [tradiksyon, setTradiksyon] = useState({fr: '', en: '', es: '', de: '', it: ''})
+  const [tradiksyon, setTradiksyon] = useState({fr: '', en: '', es: '', de: '', it: '', pt: '', ja: '', ko: ''})
   const [kiChawLang, setKiChwalang] = useState(['fr'])
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
@@ -112,7 +127,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
   const handleClick = async () => {
     setLoading(true)
     const {awtis, tit, transkripsyon} = teksEkri
-    const {fr, en, es, de, it} = tradiksyon
+    const {fr, en, es, de, it, pt, ja, ko} = tradiksyon
 
     if (teksEkri.awtis === '' || teksEkri.tit === '' || teksEkri.transkripsyon === '') {
       setError({message: 'Certains champs sont obligatoires'})
@@ -139,7 +154,10 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
               anglais: en === '' ? null : en,
               espagnol: es === '' ? null : es,
               allemand: de === '' ? null : de,
-              italien: it === '' ? null : it
+              italien: it === '' ? null : it,
+              portugais: pt === '' ? null : pt,
+              japonais: ja === '' ? null : ja,
+              coreen: ko === '' ? null : ko
             },
             user: {
               id: user.id,
@@ -184,7 +202,10 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
               anglais: en === '' ? null : en,
               espagnol: es === '' ? null : es,
               allemand: de === '' ? null : de,
-              italien: it === '' ? null : it
+              italien: it === '' ? null : it,
+              portugais: pt === '' ? null : pt,
+              japonais: ja === '' ? null : ja,
+              coreen: ko === '' ? null : ko
             },
             user: {
               id: user.id,
@@ -211,7 +232,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
 
   const handleReset = () => {
     setTeksEkri({awtis: '', tit: '', transkripsyon: ''})
-    setTradiksyon({fr: '', en: '', es: '', de: '', it: ''})
+    setTradiksyon({fr: '', en: '', es: '', de: '', it: '', pt: '', ja: '', ko: ''})
     setKiChwalang(['fr'])
     setCurrentTeksId(null)
     setTradiksyonOtomatik(false)
@@ -244,7 +265,10 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
         en: selectedTeks?.traductions?.anglais || '',
         es: selectedTeks?.traductions?.espagnol || '',
         de: selectedTeks?.traductions?.allemand || '',
-        it: selectedTeks?.traductions?.italien || ''
+        it: selectedTeks?.traductions?.italien || '',
+        pt: selectedTeks?.traductions?.portugais || '',
+        ja: selectedTeks?.traductions?.japonais || '',
+        ko: selectedTeks?.traductions?.coreen || ''
       })
 
       const jennLangId = () => {
@@ -270,6 +294,18 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
           ids.push('it')
         }
 
+        if (selectedTeks?.traductions?.portugais) {
+          ids.push('pt')
+        }
+
+        if (selectedTeks?.traductions?.japonais) {
+          ids.push('ja')
+        }
+
+        if (selectedTeks?.traductions?.coreen) {
+          ids.push('ko')
+        }
+
         return ids
       }
 
@@ -373,7 +409,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
       </form>
       <AjouteTradiksyon
         showSwitch={Boolean(canAutoTranslate) && Boolean(!currentTeksId)}
-        disableSwitch={tradiksyon.fr === '' || tradiksyon.en !== '' || tradiksyon.es !== '' || tradiksyon.de !== '' || tradiksyon.it !== ''}
+        disableSwitch={tradiksyon.fr === '' || tradiksyon.en !== '' || tradiksyon.es !== '' || tradiksyon.de !== '' || tradiksyon.it !== '' || tradiksyon.pt !== '' || tradiksyon.ja !== '' || tradiksyon.ko !== ''}
         tradiksyonOtomatik={tradiksyonOtomatik}
         setTradiksyonOtomatik={setTradiksyonOtomatik}
         chwaLang={kiChawLang}

components/teks/teks.js

@@ -1,9 +1,10 @@
 'use client'
 
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -78,54 +79,30 @@ const Root = styled('div')((
   },
 }))
 
-const LANG_NAMES = {fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano'}
+const LANG_NAMES = {
+  fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano',
+  pt: 'Português', ja: '日本語', ko: '한국어',
+}
+
+const TRAD_FIELDS = [
+  {field: 'anglais', title: 'English'},
+  {field: 'francais', title: 'Français'},
+  {field: 'espagnol', title: 'Español'},
+  {field: 'allemand', title: 'Deutsch'},
+  {field: 'italien', title: 'Italiano'},
+  {field: 'portugais', title: 'Português'},
+  {field: 'japonais', title: '日本語'},
+  {field: 'coreen', title: '한국어'},
+]
 
 const langToArray = parole => {
-  const langArray = []
-
-  if (parole && parole.traductions) {
-    const {francais, anglais, espagnol, allemand, italien} = parole.traductions
-
-    if (anglais) {
-      langArray.push({title: 'English', lang: anglais})
+  if (!parole || !parole.traductions) {
+    return []
   }
 
-    if (francais) {
-      langArray.push({title: 'Français', lang: francais})
-    }
-
-    if (espagnol) {
-      langArray.push({title: 'Español', lang: espagnol})
-    }
-
-    if (allemand) {
-      langArray.push({title: 'Deutsch', lang: allemand})
-    }
-
-    if (italien) {
-      langArray.push({title: 'Italiano', lang: italien})
-    }
-  }
-
-  return langArray
-}
-
-const alignTeks = (langArray, isMobile) => {
-  if (langArray.length > 0 && !isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length > 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && !isMobile) {
-    return 'center'
-  }
+  return TRAD_FIELDS
+    .filter(({field}) => parole.traductions[field])
+    .map(({field, title}) => ({title, lang: parole.traductions[field]}))
 }
 
 const ExplicitTooltip = Tooltip
@@ -135,6 +112,7 @@ export default function Teks({parole}) {
   const langArray = langToArray(parole)
   const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
   const coverFmt = formatKuveti(parole.couverture)
+  const [tab, setTab] = useState(0)
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -231,35 +209,40 @@ export default function Teks({parole}) {
           </Box>
         )}
       </Box>
-      <Grid container justifycontent='center' spacing={1}>
-        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
-          <Box className={classes.gridText}>
-            <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-              Transcription
+      <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
+        <Tabs
+          value={tab}
+          onChange={(event, value) => setTab(value)}
+          variant='scrollable'
+          scrollButtons='auto'
+          centered={langArray.length === 0}
+          sx={{borderBottom: 1, borderColor: 'divider', mb: 2}}
+        >
+          <Tab label='Transcription' />
+          {langArray.map(({title}) => (
+            <Tab key={title} label={title} />
+          ))}
+        </Tabs>
+        {tab === 0 && (
+          <>
             {parole.langueSource && parole.langueSource !== 'ka' && (
-                <Typography component='span' variant='body2' color='text.secondary' sx={{ml: 1}}>
+              <Typography align='center' variant='body2' color='text.secondary' sx={{mb: 1}}>
                 ({LANG_NAMES[parole.langueSource]})
               </Typography>
             )}
-            </Typography>
-            <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
+            <Typography paragraph='true' align={isMobile ? 'justify' : 'center'} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
-          </Box>
-        </Grid>
-        {langArray.map(({title, lang}) => (
-          <Grid key={title} size={{xs: 12, md: 6}}>
-            <Box className={classes.gridText}>
-              <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-                {title}
-              </Typography>
-              <Typography paragraph='true' align='justify' component='span'>
+          </>
+        )}
+        {langArray.map(({title, lang}, index) => (
+          tab === index + 1 && (
+            <Typography key={title} paragraph='true' align='justify' component='span'>
               {formatJsonString(lang)}
             </Typography>
-            </Box>
-          </Grid>
+          )
         ))}
-      </Grid>
+      </Box>
     </Root>
   )
 }