From 9c7cea2b8474f20f8ebc8c1a671ad8bff7f3605c Mon Sep 17 00:00:00 2001
From: kmartial <koffimartial03@gmail.com>
Date: Tue, 16 Apr 2024 16:34:07 +0000
Subject: [PATCH] Task 3 Form

---
 src/navigation/Navigation.js |   8 ++-
 src/views/Attributes.js      |  29 +++++++++-
 src/views/Form.js            | 104 +++++++++++++++++++++++++++++++++--
 src/views/Form.module.css    |   4 ++
 4 files changed, 137 insertions(+), 8 deletions(-)

diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js
index 38b5781..a075a06 100644
--- a/src/navigation/Navigation.js
+++ b/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>
 )
diff --git a/src/views/Attributes.js b/src/views/Attributes.js
index 87b6a40..2465137 100644
--- a/src/views/Attributes.js
+++ b/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>
                 )
             }
diff --git a/src/views/Form.js b/src/views/Form.js
index 1713331..d919a7a 100644
--- a/src/views/Form.js
+++ b/src/views/Form.js
@@ -1,4 +1,5 @@
-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'
 
@@ -11,10 +12,12 @@ 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)
@@ -29,15 +32,108 @@ export const Form = () => (
         <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={'input'}
+                            label="Surname*"
+                            component={InputFieldFF}
                             className={styles.surname}
-                            initialValue={'Traore'}
+                            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>
diff --git a/src/views/Form.module.css b/src/views/Form.module.css
index e2b6665..a3acf76 100644
--- a/src/views/Form.module.css
+++ b/src/views/Form.module.css
@@ -19,6 +19,10 @@
     flex-grow: 1;
 }
 
+.username {
+    flex-grow: 1;
+}
+
 .email {
     flex-grow: 1;
 }