Day3

i18n/en.pot

@@ -0,0 +1,15 @@
+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-17T09:43:15.949Z\n"
+"PO-Revision-Date: 2024-04-17T09:43:15.950Z\n"
+
+msgid "Home"
+msgstr "Home"
+
+msgid "DHIS2 Web App Academy 2024"
+msgstr "DHIS2 Web App Academy 2024"

src/navigation/Navigation.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import {Menu, MenuItem} from '@dhis2/ui'
+
 // @TODO: Import the `Menu` and `MenuItem` components
 import { useNavigate, useMatch } from 'react-router-dom'
 
@@ -17,7 +19,7 @@ const NavigationItem = ({ path, label }) => {
     const onClick = () => navigate(path)
 
     // @TODO: Use the `MenuItem` component instead of the `div`
-    return <div>{label}</div>
+    return <MenuItem active={isActive} label={label} onClick={onClick}></MenuItem>
 }
 
 NavigationItem.propTypes = {
@@ -27,7 +29,7 @@ NavigationItem.propTypes = {
 
 export const Navigation = () => (
     // @TODO: Use the `Menu` components instead of the `div`
-    <div>
+    <Menu>
         <NavigationItem
             // Menu item for the home page
             label="Home"
@@ -45,5 +47,5 @@ export const Navigation = () => (
             label="Form"
             path="/form"
         />
-    </div>
+    </Menu>
 )

src/views/Attributes.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useGetAttributes } from '../hooks/index.js'
+import {Table, TableHead, TableRowHead, TableCellHead, TableBody, TableRow, TableCell, TableFoot} from '@dhis2-ui/table'
 
 export const Attributes = () => {
     // we get the data using a custom hook
@@ -15,7 +16,33 @@ export const Attributes = () => {
                 // if there is any data available
                 data?.attributes?.attributes && (
                     <pre>
-                        {JSON.stringify(data.attributes.attributes, null, 4)}
+                          <Table>
+                            <TableHead>
+                                <TableRowHead>
+                                    <TableCellHead>
+                                        Name
+                                    </TableCellHead>
+                                    <TableCellHead>
+                                        Unique
+                                    </TableCellHead>
+                                </TableRowHead>
+                            </TableHead>
+                            <TableBody>
+                                {data.attributes.attributes.map(attr =>(
+                                    <TableRow>
+                                    <TableCell>
+                                        {attr.displayName}
+                                    </TableCell>
+                                    <TableCell>
+                                         {attr.unique ?"Yes":"No"}
+                                    </TableCell>
+                               </TableRow>
+
+                                ))}
+                            </TableBody>
+
+                        </Table>
+
                     </pre>
                 )
             }

src/views/Form.js

@@ -1,6 +1,7 @@
-import { ReactFinalForm } from '@dhis2/ui'
+import { ReactFinalForm, SingleSelectFieldFF, InputFieldFF, SwitchFieldFF, hasValue, email, composeValidators, Button, createEqualTo, dhis2Username, dhis2Password} from '@dhis2/ui'
 import React from 'react'
 import styles from './Form.module.css'
+import {useAlert} from '@dhis2/app-runtime'
 
 /**
  * This is just a function to demonstrate the values when the form is submitted
@@ -11,35 +12,138 @@ import styles from './Form.module.css'
  * @param {string} values.title
  * @param {string} values.surname
  * @param {string} values.firstname
+ * @param {string} values.username
  * @param {string} values.email
  * @param {string} values.email-confirmation
  * @param {bool} values.newsletter
  */
-const alertValues = (values) => {
-    const formattedValuesString = JSON.stringify(values, null, 2)
-    alert(formattedValuesString)
-}
+
+
 
 const { Field, Form: RFForm } = ReactFinalForm
 
-export const Form = () => (
-    <div>
-        <h1>Form</h1>
-
-        <RFForm onSubmit={alertValues}>
-            {({ handleSubmit }) => (
-                <form onSubmit={handleSubmit}>
-                    <div className={styles.row}>
-                        <Field
-                            name="surname"
-                            label="Surname"
-                            component={'input'}
-                            className={styles.surname}
-                            initialValue={'Traore'}
-                        />
-                    </div>
-                </form>
-            )}
-        </RFForm>
-    </div>
-)
+export const Form = () => {
+    const {show}= useAlert(
+        values => {
+            return values
+
+        },
+
+        ()=> {
+            return {
+                critical: true
+
+            }
+
+        }   )
+        const alertValues = (values) => {
+            const formattedValuesString = JSON.stringify(values, null, 2)
+            show(formattedValuesString)
+        }
+
+    return (
+        <div>
+            <h1>Form</h1>
+
+            <RFForm onSubmit={alertValues}>
+                {({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <div className={styles.row}>
+                            <Field
+                                name="Title"
+                                label="Title"
+                                component={SingleSelectFieldFF}
+                                className={styles.title}
+                                initialValue="a"
+                                options={[
+                                    { label: 'None', value: 'a' },
+                                    { label: 'Professor', value: 'b' },
+                                    { label: 'Doctor', value: 'm' },
+                                ]} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="surname"
+                                label="Surname*"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                initialValue=""
+                                validate={hasValue} />
+                            <Field
+                                name="firstname"
+                                label="firstname*"
+                                component={InputFieldFF}
+                                className={styles.firstname}
+                                initialValue=""
+                                validate={hasValue} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="dhis2Username"
+                                label="username*"
+                                component={InputFieldFF}
+                                className={styles.dhis2Username}
+                                initialValue=""
+                                validate={hasValue} />
+
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="password"
+                                label="password*"
+                                type="password"
+                                component={InputFieldFF}
+                                className={styles.username}
+                                initialValue=""
+                                validate={composeValidators(
+                                    dhis2Password,
+                                    hasValue)} />
+
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                name="email"
+                                label="E-mail address*"
+                                component={InputFieldFF}
+                                className={styles.email}
+                                initialValue=""
+                                validate={composeValidators(email, hasValue)} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="confirm_email"
+                                label="Confirm e-mail address*"
+                                component={InputFieldFF}
+                                className={styles.email}
+                                initialValue=""
+                                validate={composeValidators(createEqualTo("email", "", hasValue))} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="newsletter"
+                                label="I want to recieve the newsletter*"
+                                type="checkbox"
+                                component={SwitchFieldFF}
+                                className={styles.newsletter}
+                                initialValue=""
+                                validate={hasValue} />
+                        </div>
+                        <Button
+                            ariaLabel="Button"
+                            name="Primary button"
+                            type="submit"
+                            primary
+                            title="Button"
+                            value="default"
+                        >
+                            Submit form
+                        </Button>
+
+
+                    </form>
+                )}
+            </RFForm>
+        </div>
+    )
+}

src/views/Form.module.css

@@ -19,6 +19,10 @@
     flex-grow: 1;
 }
 
+.username {
+    flex-grow: 1;
+}
+
 .email {
     flex-grow: 1;
 }

src/views/Home.js

@@ -1,9 +1,23 @@
+import {useConfig} from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
 import React from 'react'
+import { Tag } from '@dhis2-ui/tag'
 
-export const Home = () => (
-    <div>
-        <h1>Home</h1>
+export const Home = () => {
+    const config = useConfig()
+    return (
+        <div>
+        <h1>{i18n.t('Home')}</h1>
 
-        <p>DHIS2 Web App Academy 2024</p>
+        <p>{i18n.t('DHIS2 Web App Academy 2024')}</p>
+        {/* Todo: find which UI component to use instead of h2 */}
+
+        <Tag positive>
+        Running on API version : {config.apiVersion}
+        </Tag>
+
     </div>
-)
+
+    )
+
+}