Web Academy 2024

i18n/en.pot

@@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2024-04-17T11:48:54.313Z\n"
+"PO-Revision-Date: 2024-04-17T11:48:54.313Z\n"
+
+msgid "Home"
+msgstr "Home"
+
+msgid "DHIS2 Web App Academy 2024"
+msgstr "DHIS2 Web App Academy 2024"
+
+msgid "Made by Edson"
+msgstr "Made by Edson"

i18n/fr.po

@@ -0,0 +1,21 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2024-04-16T16:25:40.484Z\n"
+"PO-Revision-Date: 2024-04-16T16:25:40.484Z\n"
+
+msgid "Form"
+msgstr "Formulario"
+
+msgid "Home"
+msgstr "Casa"
+
+msgid "DHIS2 Web App Academy 2024"
+msgstr "DHIS2 Web App Academy 2024"
+
+msgid "Made by Edson"
+msgstr "Made by Edson"

package.json

@@ -18,6 +18,8 @@
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.10.3",
+        "@dhis2/d2-i18n": "^1.1.3",
+        "@dhis2/ui": "9.4.3",
         "react-router-dom": "^6.22.3"
     }
 }

src/App.js

@@ -3,6 +3,7 @@ import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'
 import styles from './App.module.css'
 import { Navigation } from './navigation/index.js'
 import { Form, Home, Attributes } from './views/index.js'
+import i18n from './locales/index.js'
 
 const MyApp = () => (
     <HashRouter

src/components/fields/GenericFields.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import Text from './fieldsComponent/Text';
+import Select from './fieldsComponent/Select';
+import TrueOrFalse from './fieldsComponent/TrueOrFalse';
+
+function GenericFields({ type }) {
+    switch (type) {
+        case "text":
+            return <Text />
+
+        case "select":
+            return <Select />
+
+        case "boolean":
+            return <TrueOrFalse />
+
+        default:
+            <span>Type not mapped</span>
+    }
+}
+
+export default GenericFields

src/components/fields/fieldsComponent/Select.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Select() {
+  return (
+    <div>Select</div>
+  )
+}
+
+export default Select

src/components/fields/fieldsComponent/Text.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Text() {
+  return (
+    <div>Text</div>
+  )
+}
+
+export default Text

src/components/fields/fieldsComponent/TrueOrFalse.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function TrueOrFalse() {
+  return (
+    <div>TrueOrFalse</div>
+  )
+}
+
+export default TrueOrFalse

src/components/form/GroupForm.js

@@ -0,0 +1,147 @@
+import {
+    ReactFinalForm,
+    InputFieldFF,
+    SingleSelectFieldFF,
+    SwitchFieldFF,
+    composeValidators,
+    createEqualTo,
+    email,
+    hasValue,
+    Button,
+    dhis2Password
+} from '@dhis2/ui'
+import React from 'react'
+import styles from './Form.module.css'
+import useAlerts from '../../hooks/useAlert'
+
+function GroupForm() {
+    const { hide, show } = useAlerts()
+
+    const alertValues = (values) => {
+        const formattedValuesString = JSON.stringify(values, null, 2)
+        // console.log(values, formattedValuesString);
+
+        show({
+            message: formattedValuesString,
+            type: { critical: true }
+        });
+
+    }
+
+    setTimeout(() => {
+        console.log('hide', hide)
+        hide();
+    }, 3000);
+
+
+    return (
+        <div className={styles.container} >
+            <ReactFinalForm.Form onSubmit={alertValues}>
+                {({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                name="title"
+                                label="Title"
+                                component={SingleSelectFieldFF}
+                                className={styles.title}
+                                initialValue="none"
+                                options={[
+                                    { label: 'Professor', value: 'prof' },
+                                    { label: 'Doctor', value: 'doc' },
+                                    { label: 'None', value: 'none' },
+                                ]}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                required
+                                name="surname"
+                                label="Surname"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                validate={hasValue}
+                            />
+
+                            <ReactFinalForm.Field
+                                required
+                                name="firstname"
+                                label="First name"
+                                component={InputFieldFF}
+                                className={styles.firstname}
+                                validate={hasValue}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                required
+                                name="username"
+                                label="Username"
+                                component={InputFieldFF}
+                                className={styles.email}
+                                validate={hasValue}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                required
+                                name="password"
+                                label="Password"
+                                component={InputFieldFF}
+                                className={styles.email}
+                                validate={composeValidators(dhis2Password, hasValue)}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                required
+                                name="email"
+                                label="E-mail address"
+                                component={InputFieldFF}
+                                className={styles.email}
+                                validate={composeValidators(email, hasValue)}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                required
+                                name="email-confirmation"
+                                label="Confirm e-mail address"
+                                component={InputFieldFF}
+                                className={styles.email}
+                                validate={composeValidators(
+                                    createEqualTo('email'),
+                                    hasValue
+                                )}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <ReactFinalForm.Field
+                                type="checkbox"
+                                name="newsletter"
+                                label="I want to receive the newsletter"
+                                component={SwitchFieldFF}
+                                className={styles.newsletters}
+                                initialValue={false}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Button type="submit" primary>
+                                Submit form
+                            </Button>
+                        </div>
+                    </form>
+                )}
+            </ReactFinalForm.Form>
+        </div >
+    )
+}
+
+export default GroupForm

src/components/table/Table.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { CircularLoader, DataTable, CenteredContent, DataTableRow, DataTableCell, DataTableColumnHeader, TableHead, TableBody } from '@dhis2/ui'
+
+
+function Table({ data = [], loading }) {
+    const header = data?.length > 0 && Object.keys(data[0])
+
+    if (loading) {
+        return (
+            <CenteredContent>
+                <CircularLoader />
+            </CenteredContent>
+        )
+    }
+
+    return (
+        <DataTable>
+            <TableHead>
+                <DataTableRow>
+                    {header && header.map(head => {
+                        return (
+                            <DataTableColumnHeader>
+                                {head}
+                            </DataTableColumnHeader>
+                        )
+                    })}
+                </DataTableRow>
+            </TableHead>
+            <TableBody>
+                {data.length > 0 && data.map(row => {
+                    return (
+                        <DataTableRow>
+                            {header.map(head =>
+                            (
+                                <DataTableCell>
+                                    {row[head]}
+                                </DataTableCell>
+                            )
+                            )}
+                        </DataTableRow>
+                    )
+                })}
+            </TableBody>
+        </DataTable>
+    )
+}
+
+export default Table

src/components/table/index.js

@@ -0,0 +1 @@
+export * from './Table.js'