Merge pull request #1192 from openmsupply/1164-tetum-language

Tetum language support part II

Author: mark-prins

client/packages/common/src/intl/locales/en/app.json

@@ -80,6 +80,7 @@
   "searching": "Searching...",
   "select-report": "Select Template",
   "select-store": "Select store",
+  "select-language": "Select language",
   "stock": "View Stock",
   "stocktakes": "Stocktakes",
   "store-details": "Store code: {{code}}",

client/packages/common/src/intl/utils/IntlUtils.ts

@@ -5,6 +5,14 @@ import { LanguageType } from '../../types/schema';
 
 export { useTranslationNext };
 
+const languageOptions = [
+  { label: 'عربي', value: 'ar' },
+  { label: 'Français', value: 'fr' },
+  { label: 'English', value: 'en' },
+  { label: 'Española', value: 'es' },
+  { label: 'Tetum', value: 'tet' },
+];
+
 const locales = [
   'ar' as const,
   'en' as const,
@@ -53,6 +61,9 @@ export const IntlUtils = {
     }
     return 'en';
   },
+  languageOptions,
+  getLanguageName: (language: string) =>
+    languageOptions.find(option => option.value === language)?.label,
 };
 
 const parseLanguage = (language?: LanguageType) => {
@@ -71,6 +82,8 @@ const parseLanguage = (language?: LanguageType) => {
       return 'ru';
     case LanguageType.Spanish:
       return 'es';
+    case LanguageType.Tetum:
+      return 'tet';
     default:
       return undefined;
   }

client/packages/common/src/types/schema.ts

@@ -1466,7 +1466,8 @@ export enum LanguageType {
   Laos = 'LAOS',
   Portuguese = 'PORTUGUESE',
   Russian = 'RUSSIAN',
-  Spanish = 'SPANISH'
+  Spanish = 'SPANISH',
+  Tetum = 'TETUM'
 }
 
 export type LocationConnector = {

client/packages/host/src/components/Footer/Footer.tsx

@@ -2,18 +2,22 @@ import React from 'react';
 import {
   Box,
   HomeIcon,
+  IntlUtils,
   styled,
   Tooltip,
+  TranslateIcon,
   Typography,
   useAuthContext,
   UserIcon,
   useTranslation,
 } from '@openmsupply-client/common';
 import { StoreSelector } from './StoreSelector';
+import { LanguageSelector } from './LanguageSelector';
 
 export const Footer: React.FC = () => {
   const { user, store } = useAuthContext();
   const t = useTranslation('app');
+  const i18n = IntlUtils.useI18N();
   const PaddedCell = styled(Box)({ display: 'flex' });
   const iconStyles = { color: 'gray.main', height: '16px', width: '16px' };
   const textStyles = {
@@ -38,6 +42,16 @@ export const Footer: React.FC = () => {
           <Typography sx={textStyles}>{user.name}</Typography>
         </PaddedCell>
       ) : null}
+      <LanguageSelector>
+        <PaddedCell>
+          <TranslateIcon sx={iconStyles} />
+          <Tooltip title={t('select-language', { ...store })}>
+            <Typography sx={textStyles}>
+              {IntlUtils.getLanguageName(i18n.language)}
+            </Typography>
+          </Tooltip>
+        </PaddedCell>
+      </LanguageSelector>
     </Box>
   );
 };

client/packages/host/src/components/Footer/LanguageSelector.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from 'react';
+import {
+  Box,
+  FlatButton,
+  PaperPopoverSection,
+  usePaperClickPopover,
+  useTranslation,
+  IntlUtils,
+  useNavigate,
+} from '@openmsupply-client/common';
+
+import { PropsWithChildrenOnly } from '@common/types';
+
+export const LanguageSelector: FC<PropsWithChildrenOnly> = ({ children }) => {
+  const navigate = useNavigate();
+  const { hide, PaperClickPopover } = usePaperClickPopover();
+  const t = useTranslation('app');
+
+  const i18n = IntlUtils.useI18N();
+
+  const languageButtons = IntlUtils.languageOptions.map(l => (
+    <FlatButton
+      label={l.label}
+      disabled={l.value === i18n.language}
+      onClick={() => {
+        i18n.changeLanguage(l.value);
+        hide();
+        navigate(0);
+      }}
+      key={l.value}
+      sx={{
+        whiteSpace: 'nowrap',
+        overflowX: 'hidden',
+        overflowY: 'visible',
+        textOverflow: 'ellipsis',
+        display: 'block',
+        textAlign: 'left',
+      }}
+    />
+  ));
+  return (
+    <PaperClickPopover
+      placement="top"
+      width={300}
+      Content={
+        <PaperPopoverSection label={t('select-language')}>
+          <Box
+            style={{
+              overflowY: 'auto',
+              maxHeight: 300,
+            }}
+          >
+            {languageButtons}
+          </Box>
+        </PaperPopoverSection>
+      }
+    >
+      {children}
+    </PaperClickPopover>
+  );
+};

client/packages/host/src/components/LanguageMenu.tsx

@@ -16,14 +16,6 @@ export const LanguageMenu: React.FC = () => {
     navigate(0);
   };
 
-  const options = [
-    { label: 'عربي', value: 'ar' },
-    { label: 'Français', value: 'fr' },
-    { label: 'English', value: 'en' },
-    { label: 'Española', value: 'es' },
-    { label: 'Tetum', value: 'tet' },
-  ];
-
   const renderOption = (option: Option) => (
     <MenuItem
       key={option.value}
@@ -37,7 +29,7 @@ export const LanguageMenu: React.FC = () => {
   return (
     <Select
       onChange={handleChange}
-      options={options}
+      options={IntlUtils.languageOptions}
       value={i18n.language}
       renderOption={renderOption}
     />

server/graphql/types/src/types/user.rs

@@ -50,6 +50,7 @@ pub enum LanguageType {
     Khmer,
     Portuguese,
     Russian,
+    Tetum,
 }
 
 #[derive(SimpleObject)]
@@ -133,6 +134,7 @@ impl LanguageType {
             Language::Khmer => Self::Khmer,
             Language::Portuguese => Self::Portuguese,
             Language::Russian => Self::Russian,
+            Language::Tetum => Self::Tetum,
         }
     }
 }

server/repository/migrations/postgres/2022-10-27T09-15_v103/up.sql

@@ -1,11 +1,13 @@
-CREATE TYPE language_type AS ENUM (
+CREATE TYPE language_type AS ENUM
+(
     'ENGLISH',
     'FRENCH',
     'SPANISH',
     'LAOS',
     'KHMER',
     'PORTUGUESE',
-    'RUSSIAN'
+    'RUSSIAN',
+    'TETUM'
 );
 
 ALTER TABLE user_account

server/repository/src/db_diesel/user_row.rs

@@ -26,6 +26,7 @@ pub enum Language {
     Khmer,
     Portuguese,
     Russian,
+    Tetum,
 }
 
 impl Default for Language {

server/repository/src/migrations/v1_01_03/mod.rs

@@ -41,6 +41,12 @@ impl Migration for V1_01_03 {
         );"#
         )?;
 
+        #[cfg(feature = "postgres")]
+        sql!(
+            connection,
+            r#"ALTER TYPE language_type ADD VALUE IF NOT EXISTS 'TETUM';"#
+        )?;
+
         Ok(())
     }
 }

server/service/src/login.rs

@@ -237,6 +237,7 @@ impl LoginService {
                 4 => Language::Khmer,
                 5 => Language::Portuguese,
                 6 => Language::Russian,
+                7 => Language::Tetum,
                 _ => Language::English,
             },
         };