feat(settings): add navbar dropdown and settings page

package.json

@@ -5,7 +5,7 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@hospitalrun/components": "^1.5.0",
+    "@hospitalrun/components": "^1.6.0",
     "@reduxjs/toolkit": "~1.3.0",
     "@types/escape-string-regexp": "~2.0.1",
     "@types/pouchdb-find": "~6.3.4",

src/HospitalRun.tsx

@@ -14,6 +14,7 @@ import { ButtonBarProvider } from './page-header/ButtonBarProvider'
 import ButtonToolBar from './page-header/ButtonToolBar'
 import Patients from './patients/Patients'
 import Appointments from './scheduling/appointments/Appointments'
+import Settings from './settings/Settings'
 import { RootState } from './store'
 
 const HospitalRun = () => {
@@ -45,6 +46,7 @@ const HospitalRun = () => {
                   <PrivateRoute isAuthenticated path="/patients" component={Patients} />
                   <PrivateRoute isAuthenticated path="/labs" component={Labs} />
                   <PrivateRoute isAuthenticated path="/incidents" component={Incidents} />
+                  <PrivateRoute isAuthenticated path="/settings" component={Settings} />
                 </Switch>
               </div>
               <Toaster autoClose={5000} hideProgressBar draggable />

src/components/Navbar.tsx

@@ -12,7 +12,7 @@ const Navbar = () => {
       variant="dark"
       navItems={[
         {
-          type: 'icon',
+          type: 'image',
           src:
             'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53%0D%0AMy5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5r%0D%0AIiB2aWV3Qm94PSIwIDAgMjk5IDI5OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGlu%0D%0AZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVu%0D%0AdCIgeDE9IjcyLjU4IiB5MT0iMTYuMDQiIHgyPSIyMjcuMzEiIHkyPSIyODQuMDIiIGdyYWRpZW50%0D%0AVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMDEiIHN0b3AtY29sb3I9IiM2%0D%0AMGQxYmIiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iIzFhYmM5YyIvPjxzdG9wIG9m%0D%0AZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwOWI5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0%0D%0AaXRsZT5jcm9zcy1pY29uPC90aXRsZT48cGF0aCBpZD0iY3Jvc3MiIGNsYXNzPSJjbHMtMSIgZD0i%0D%0ATTI5Mi45NCw5Ny40NkgyMDUuM1Y3LjA2QTYuNTYsNi41NiwwLDAsMCwxOTguNzQuNUgxMDEuMjZB%0D%0ANi41Niw2LjU2LDAsMCwwLDk0LjcsNy4wNnY5MC40SDcuMDZBNi41OCw2LjU4LDAsMCwwLC41LDEw%0D%0ANFYxOTYuM2E2LjIzLDYuMjMsMCwwLDAsNi4yMyw2LjI0aDg4djkwLjRhNi41Niw2LjU2LDAsMCww%0D%0ALDYuNTYsNi41Nmg5Ny40OGE2LjU2LDYuNTYsMCwwLDAsNi41Ni02LjU2di05MC40aDg4YTYuMjMs%0D%0ANi4yMywwLDAsMCw2LjIzLTYuMjRWMTA0QTYuNTgsNi41OCwwLDAsMCwyOTIuOTQsOTcuNDZaIiB0%0D%0AcmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41IC0wLjUpIi8+PC9zdmc+',
           onClick: () => {
@@ -100,6 +100,24 @@ const Navbar = () => {
           onClickButton: () => undefined,
           onChangeInput: () => undefined,
         },
+        {
+          type: 'link-list-icon',
+          alignRight: true,
+          children: [
+            {
+              type: 'link',
+              label: t('settings.label'),
+              onClick: () => {
+                history.push('/settings')
+              },
+            },
+          ],
+          className: 'pl-4',
+          iconClassName: 'align-bottom',
+          label: 'Patient',
+          name: 'patient',
+          size: 'lg',
+        },
       ]}
     />
   )

src/i18n.ts

@@ -14,38 +14,49 @@ import translationPtBR from './locales/ptBr/translations'
 import translationRU from './locales/ru/translations'
 import translationZhCN from './locales/zhCN/translations'
 
-const resources = {
+const resources: { [language: string]: any } = {
   it: {
+    name: 'Italian',
     translation: translationIT,
   },
   ar: {
+    name: 'Arabic',
     translation: translationAR,
   },
   de: {
+    name: 'German',
     translation: translationDE,
   },
   en: {
+    name: 'English, American',
     translation: translationEnUs,
   },
   es: {
+    name: 'Spanish',
     translation: translationES,
   },
   fr: {
+    name: 'French',
     translation: translationFR,
   },
   id: {
+    name: 'Indonesian',
     translation: translationID,
   },
   ja: {
+    name: 'Japanese',
     translation: translationJA,
   },
   ptBR: {
+    name: 'Portuguese',
     translation: translationPtBR,
   },
   ru: {
+    name: 'Russian',
     translation: translationRU,
   },
   zhCN: {
+    name: 'Chinese',
     translation: translationZhCN,
   },
 }
@@ -70,3 +81,4 @@ i18n
   })
 
 export default i18n
+export { resources }

src/locales/ar/translations/index.ts

@@ -2,10 +2,12 @@ import actions from './actions'
 import dashboard from './dashboard'
 import patient from './patient'
 import patients from './patients'
+import settings from './settings'
 
 export default {
   ...actions,
   ...dashboard,
   ...patient,
   ...patients,
+  ...settings,
 }

src/locales/ar/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/de/translations/index.ts

@@ -5,6 +5,7 @@ import labs from './labs'
 import patient from './patient'
 import patients from './patients'
 import scheduling from './scheduling'
+import settings from './settings'
 import sex from './sex'
 import states from './states'
 
@@ -13,6 +14,7 @@ export default {
   ...dashboard,
   ...patient,
   ...patients,
+  ...settings,
   ...scheduling,
   ...states,
   ...sex,

src/locales/de/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/enUs/translations/index.ts

@@ -5,6 +5,7 @@ import labs from './labs'
 import patient from './patient'
 import patients from './patients'
 import scheduling from './scheduling'
+import settings from './settings'
 import sex from './sex'
 import states from './states'
 
@@ -18,4 +19,5 @@ export default {
   ...sex,
   ...labs,
   ...incidents,
+  ...settings,
 }

src/locales/enUs/translations/settings/index.ts

@@ -0,0 +1,8 @@
+export default {
+  settings: {
+    label: 'Settings',
+    language: {
+      label: 'Language',
+    },
+  },
+}

src/locales/es/translations/index.ts

@@ -3,11 +3,13 @@ import dashboard from './dashboard'
 import labs from './labs'
 import patient from './patient'
 import patients from './patients'
+import settings from './settings'
 
 export default {
   ...actions,
   ...dashboard,
   ...labs,
   ...patient,
   ...patients,
+  ...settings,
 }

src/locales/es/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/fr/translations/index.ts

@@ -4,6 +4,7 @@ import labs from './labs'
 import patient from './patient'
 import patients from './patients'
 import scheduling from './scheduling'
+import settings from './settings'
 import sex from './sex'
 import states from './states'
 
@@ -16,4 +17,5 @@ export default {
   ...states,
   ...sex,
   ...labs,
+  ...settings,
 }

src/locales/fr/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/id/translations/index.ts

@@ -3,11 +3,13 @@ import dashboard from './dashboard'
 import labs from './labs'
 import patient from './patient'
 import patients from './patients'
+import settings from './settings'
 
 export default {
   ...actions,
   ...dashboard,
   ...labs,
   ...patient,
   ...patients,
+  ...settings,
 }

src/locales/id/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/it/translations/index.ts

@@ -4,6 +4,7 @@ import labs from './labs'
 import patient from './patient'
 import patients from './patients'
 import scheduling from './scheduling'
+import settings from './settings'
 import sex from './sex'
 import states from './states'
 
@@ -16,4 +17,5 @@ export default {
   ...states,
   ...sex,
   ...labs,
+  ...settings,
 }

src/locales/it/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/ja/translations/index.ts

@@ -3,11 +3,13 @@ import dashboard from './dashboard'
 import labs from './labs'
 import patient from './patient'
 import patients from './patients'
+import settings from './settings'
 
 export default {
   ...actions,
   ...dashboard,
   ...labs,
   ...patient,
   ...patients,
+  ...settings,
 }

src/locales/ja/translations/settings/index.ts

@@ -0,0 +1,8 @@
+export default {
+  settings: {
+    label: '設定',
+    language: {
+      label: '言語',
+    },
+  },
+}

src/locales/ptBr/translations/index.ts

@@ -4,6 +4,7 @@ import labs from './labs'
 import patient from './patient'
 import patients from './patients'
 import scheduling from './scheduling'
+import settings from './settings'
 import sex from './sex'
 import states from './states'
 
@@ -16,4 +17,5 @@ export default {
   ...states,
   ...sex,
   ...labs,
+  ...settings,
 }

src/locales/ptBr/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/ru/translations/index.ts

@@ -3,11 +3,13 @@ import dashboard from './dashboard'
 import labs from './labs'
 import patient from './patient'
 import patients from './patients'
+import settings from './settings'
 
 export default {
   ...actions,
   ...dashboard,
   ...labs,
   ...patient,
   ...patients,
+  ...settings,
 }

src/locales/ru/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/locales/zhCN/translations/index.ts

@@ -3,11 +3,13 @@ import dashboard from './dashboard'
 import labs from './labs'
 import patient from './patient'
 import patients from './patients'
+import settings from './settings'
 
 export default {
   ...actions,
   ...dashboard,
   ...labs,
   ...patient,
   ...patients,
+  ...settings,
 }

src/locales/zhCN/translations/settings/index.ts

@@ -0,0 +1,3 @@
+export default {
+  settings: {},
+}

src/settings/Settings.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
+import i18n, { resources } from '../i18n'
+import useTitle from '../page-header/useTitle'
+
+const Settings = () => {
+  const { t } = useTranslation()
+  useTitle(t('settings.label'))
+
+  // Language section
+  const languageOptions = Object.keys(resources)
+    .map((abbr) => ({
+      label: resources[abbr].name,
+      value: abbr,
+    }))
+    .sort((a, b) => (a.label > b.label ? 1 : -1))
+
+  const onLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = event.target.value
+    i18n.changeLanguage(selected)
+  }
+
+  // Temp
+  const tempOptions = [
+    { label: 'Option A', value: 'option-a' },
+    { label: 'Option B', value: 'option-b' },
+  ]
+
+  const [temp, setTemp] = useState(tempOptions[0].value)
+
+  const onTempChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setTemp(event.target.value)
+  }
+
+  return (
+    <>
+      {/* language selection */}
+      <div className="w-75" style={{ minWidth: '350px', maxWidth: '500px' }}>
+        <SelectWithLabelFormGroup
+          name="language"
+          value={i18n.language}
+          label={t('settings.language.label')}
+          isEditable
+          options={languageOptions}
+          onChange={onLanguageChange}
+        />
+      </div>
+
+      {/* temp: another setting */}
+      <div className="w-75" style={{ minWidth: '350px', maxWidth: '500px' }}>
+        <SelectWithLabelFormGroup
+          name="temp"
+          value={temp}
+          label="Temp setting"
+          isEditable
+          options={tempOptions}
+          onChange={onTempChange}
+        />
+      </div>
+    </>
+  )
+}
+
+export default Settings