[dataquery] Translate dataquery module

Makefile

@@ -97,6 +97,8 @@ locales:
 	npx i18next-conv -l hi -s modules/datadict/locale/hi/LC_MESSAGES/datadict.po -t modules/datadict/locale/hi/LC_MESSAGES/datadict.json
 	npx i18next-conv -l ja -s modules/datadict/locale/ja/LC_MESSAGES/datadict.po -t modules/datadict/locale/ja/LC_MESSAGES/datadict.json
 	msgfmt -o modules/dataquery/locale/ja/LC_MESSAGES/dataquery.mo modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+	msgfmt -o modules/dataquery/locale/hi/LC_MESSAGES/dataquery.mo modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+	npx i18next-conv -l hi -s modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po -t modules/dataquery/locale/hi/LC_MESSAGES/dataquery.json
 	msgfmt -o modules/data_release/locale/ja/LC_MESSAGES/data_release.mo modules/data_release/locale/ja/LC_MESSAGES/data_release.po
 	npx i18next-conv -l ja -s modules/data_release/locale/ja/LC_MESSAGES/data_release.po -t modules/data_release/locale/ja/LC_MESSAGES/data_release.json
 	msgfmt -o modules/data_release/locale/hi/LC_MESSAGES/data_release.mo modules/data_release/locale/hi/LC_MESSAGES/data_release.po
@@ -153,8 +155,9 @@ data_release: modules/data_release/locale/hi/LC_MESSAGES/data_release.mo modules
 instrument_manager: modules/instrument_manager/locale/ja/LC_MESSAGES/instrument_manager.mo
 	target=instrument_manager npm run compile
 
-dataquery: modules/dataquery/locale/ja/LC_MESSAGES/dataquery.mo
-	msgfmt -o modules/dataquery/locale/ja/LC_MESSAGES/dataquery.mo modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+dataquery:
+	msgfmt -o modules/dataquery/locale/hi/LC_MESSAGES/dataquery.mo modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+	npx i18next-conv -l hi -s modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po -t modules/dataquery/locale/hi/LC_MESSAGES/dataquery.json
 	target=dataquery npm run compile
 
 login: modules/login/locale/ja/LC_MESSAGES/login.mo

jsx/I18nSetup.d.ts

@@ -0,0 +1,4 @@
+declare module 'I18nSetup' {
+  import i18n from 'i18next';
+  export default i18n;
+}

jsx/Modal.tsx

@@ -1,4 +1,5 @@
 import {useState, PropsWithChildren, CSSProperties, ReactNode} from 'react';
+import {useTranslation} from 'react-i18next';
 import Swal from 'sweetalert2';
 import Loader from './Loader';
 import {
@@ -38,20 +39,22 @@ const Modal = ({
 }: ModalProps) => {
   const [loading, setLoading] = useState(false); // Tracks loading during submit
   const [success, setSuccess] = useState(false); // Tracks success after submit
+  const {t} = useTranslation('loris');
 
   /**
    * Handles modal close event. Shows a confirmation if `throwWarning` is true.
    */
   const handleClose = () => {
     if (throwWarning) { // Display warning if enabled
       Swal.fire({
-        title: 'Are You Sure?',
-        text: 'Leaving the form will result in the loss of any information ' +
-          'entered.',
+        title: t('Are You Sure?', {ns: 'loris'}),
+        text: t('Leaving the form will result in the loss '
+          +'of any information entered.',
+        {ns: 'loris'}),
         type: 'warning',
         showCancelButton: true,
-        confirmButtonText: 'Proceed',
-        cancelButtonText: 'Cancel',
+        confirmButtonText: t('Proceed', {ns: 'loris'}),
+        cancelButtonText: t('Cancel', {ns: 'loris'}),
       }).then((result) => result.value && onClose());
     } else {
       onClose(); // Close immediately if no warning
@@ -175,7 +178,7 @@ const Modal = ({
   const loader = loading && (
     <div style={processStyle}>
       <Loader size={20}/>
-      <h5 className='animate-flicker'>Saving</h5>
+      <h5 className='animate-flicker'>{t('Saving', {ns: 'loris'})}</h5>
     </div>
   );
 
@@ -188,7 +191,7 @@ const Modal = ({
         style={{color: 'green', marginBottom: '2px'}}
         className='glyphicon glyphicon-ok-circle'
       />
-      <h5>Success!</h5>
+      <h5>{t('Success!', {ns: 'loris'})}</h5>
     </div>
   );
 

locale/hi/LC_MESSAGES/loris.po

@@ -130,6 +130,15 @@ msgstr "रद्द करें"
 msgid "Success!"
 msgstr "सफलता!"
 
+msgid "Saving"
+msgstr "सहेजा जा रहा है"
+
+msgid "Are You Sure?"
+msgstr "क्या आप सुनिश्चित हैं?"
+
+msgid "Leaving the form will result in the loss of any information entered."
+msgstr "फॉर्म छोड़ने पर दर्ज की गई सभी जानकारी खो जाएगी।"
+
 # Common candidate terms
 msgid "PSCID"
 msgstr "पीएससीआईडी"

locale/loris.pot

@@ -129,6 +129,15 @@ msgstr ""
 msgid "Success!"
 msgstr ""
 
+msgid "Saving"
+msgstr ""
+
+msgid "Are You Sure?"
+msgstr ""
+
+msgid "Leaving the form will result in the loss of any information entered."
+msgstr ""
+
 # Common candidate terms
 msgid "PSCID"
 msgstr ""

modules/dataquery/jsx/components/filterableselectgroup.tsx

@@ -1,4 +1,5 @@
 import Select, {SingleValue} from 'react-select';
+import {useTranslation} from 'react-i18next';
 
 type SelectOption = {
     label: string,
@@ -27,8 +28,9 @@ function FilterableSelectGroup(props: {
     groups: object,
     mapGroupName?: (module: string) => string,
 }) {
+  const {t} = useTranslation('dataquery');
   const groups: SelectGroup[] = [];
-  const placeholder = props.placeholder || 'Select a category';
+  const placeholder = props.placeholder || t('Select a category');
   for (const [module, subcategories]
     of Object.entries(props.groups)) {
     const options: SelectOption[] = [];

modules/dataquery/jsx/definefields.tsx

@@ -6,7 +6,7 @@ import {CheckboxElement} from 'jsx/Form';
 import {FullDictionary, FieldDictionary, DictionaryCategory} from './types';
 import {CategoriesAPIReturn} from './hooks/usedatadictionary';
 import {APIQueryField, VisitOption} from './types';
-
+import {useTranslation} from 'react-i18next';
 
 /**
  * Displays a single field to be selected for querying
@@ -46,6 +46,7 @@ function QueryField(props: {
     ) => void,
     defaultVisits: string[],
 }) {
+  const {t} = useTranslation('dataquery');
   const item=props.item;
   const className = props.selected ?
     'list-group-item active' :
@@ -93,14 +94,14 @@ function QueryField(props: {
 
     if (props.selected) {
       visits = <div onClick={(e) => e.stopPropagation()}>
-        <h4>Visits</h4>
+        <h4>{t('Visits')}</h4>
         <Select options={selectOptions.map((visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
         }
         isMulti
         onChange={selected}
-        placeholder='Select Visits'
+        placeholder={t('Select Visits', {ns: 'dataquery'})}
         value={selectedVisits.map( (visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
@@ -198,6 +199,7 @@ function DefineFields(props: {
         visits: string[]
     ) => void,
 }) {
+  const {t} = useTranslation('dataquery');
   const [activeFilter, setActiveFilter] = useState('');
   const [syncVisits, setSyncVisits] = useState<boolean>(false);
   const [zoomTo, setZoomTo] = useState<string|null>(null);
@@ -338,11 +340,12 @@ function DefineFields(props: {
         return {value: el, label: el};
       });
       defaultVisits = <div style={{paddingBottom: '1em', display: 'flex'}}>
-        <h4 style={{paddingRight: '1ex'}}>Default Visits</h4>
+        <h4 style={{paddingRight: '1ex'}}>{t('Default Visits',
+          {ns: 'dataquery'})}</h4>
         <Select options={allVisits}
           isMulti
           onChange={props.onChangeDefaultVisits}
-          placeholder='Select Visits'
+          placeholder={t('Select Visits', {ns: 'dataquery'})}
           menuPortalTarget={document.body}
           styles={
             {menuPortal:
@@ -359,20 +362,21 @@ function DefineFields(props: {
           closeMenuOnSelect={false}
         />
         <div>
-          <CheckboxElement label='Sync with selected fields'
-            name="syncVisits"
-            value={syncVisits}
-            onUserInput={
-              (name: string, value: boolean) => setSyncVisits(value)
-            } />
+          <CheckboxElement label={t('Sync with selected fields',
+            {ns: 'dataquery'})}
+          name="syncVisits"
+          value={syncVisits}
+          onUserInput={
+            (name: string, value: boolean) => setSyncVisits(value)
+          } />
         </div>
       </div>;
     }
 
     fieldList = (<div>
       <div style={{display: 'flex', flexWrap: 'wrap',
         justifyContent: 'space-between'}}>
-        <h2>{cname} fields</h2>
+        <h2>{cname} {t('fields')}</h2>
         <div style={{marginTop: '1em',
           display: 'flex',
           flexWrap: 'nowrap',
@@ -383,7 +387,7 @@ function DefineFields(props: {
             <input onChange={setFilter}
               className='form-control'
               type="text"
-              placeholder="Filter within category"
+              placeholder={t('Filter within category', {ns: 'dataquery'})}
               aria-describedby="input-filter-addon"
               value={activeFilter} />
             <span className="input-group-addon">
@@ -398,11 +402,11 @@ function DefineFields(props: {
           }}>
             <button type="button" className="btn btn-primary"
               onClick={addAll}>
-                            Add all
+              {t('Add all', {ns: 'dataquery'})}
             </button>
             <button type="button" className="btn btn-primary"
               onClick={removeAll}>
-                            Remove all
+              {t('Remove all', {ns: 'dataquery'})}
             </button>
           </div>
         </div>
@@ -415,7 +419,7 @@ function DefineFields(props: {
     <div>
       <div style={{display: 'flex', flexWrap: 'nowrap'}}>
         <div style={{width: '80vw', padding: '1em'}}>
-          <h1>Available Fields</h1>
+          <h1>{t('Available Fields', {ns: 'dataquery'})}</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
@@ -437,11 +441,11 @@ function DefineFields(props: {
               alignItems: 'flex-end',
               marginBottom: '1em',
             }}>
-              <h2>Selected Fields</h2>
+              <h2>{t('Selected Fields', {ns: 'dataquery'})}</h2>
               <div>
                 <button type="button" className="btn btn-primary"
                   style={{marginBottom: 7}}
-                  onClick={props.onClearAll}>Clear</button>
+                  onClick={props.onClearAll}>{t('Clear')}</button>
               </div>
             </div>
             <SelectedFieldList