PR_YEO

README.md

@@ -4,4 +4,4 @@ This is the repo that you will use during the Web Academy exercises. Please fork
 
 Before participating, make sure you have gone through [the pre-requisites](https://dhis2.github.io/academy-web-app-dev/docs/before-academy/) for the academy.
 
-For more information about the academy and the topics taught, check the website: https://dhis2.github.io/academy-web-app-dev/
+For more information about the academy and the topics taught, check the website: https://dhis2.github.io/academy-web-app-dev/

package.json

@@ -18,6 +18,7 @@
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.10.3",
+        "@dhis2/ui": "^9.4.4",
         "react-router-dom": "^6.22.3"
     }
 }

src/navigation/Navigation.js

@@ -1,3 +1,4 @@
+import { Menu, MenuItem} from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 // @TODO: Import the `Menu` and `MenuItem` components
@@ -17,7 +18,7 @@ const NavigationItem = ({ path, label }) => {
     const onClick = () => navigate(path)
 
     // @TODO: Use the `MenuItem` component instead of the `div`
-    return <div>{label}</div>
+    return <MenuItem label={label} active={isActive} onClick={onClick} />
 }
 
 NavigationItem.propTypes = {
@@ -27,23 +28,23 @@ 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"
+            label="Accueil"
             path="/"
         />
 
         <NavigationItem
             // Menu item for the meta data page
-            label="Attributes"
+            label="Attributs"
             path="/attributes"
         />
 
         <NavigationItem
             // Menu item for the Form page
-            label="Form"
+            label="Formulaire"
             path="/form"
         />
-    </div>
+    </Menu>
 )

src/views/AttributeCreateForm.js

@@ -0,0 +1,80 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+    Button,
+    InputFieldFF,
+    hasValue,
+    ReactFinalForm,
+    SingleSelectFieldFF,
+} from '@dhis2/ui'
+import React from 'react'
+import styles from './Form.module.css'
+import { useDataMutation } from '@dhis2/app-runtime'
+
+const { Field, Form: RFForm } = ReactFinalForm
+
+const mutation= {
+    resource : 'attributes',
+    type: 'create',
+    data: (values) =>values,
+}
+
+const AttributeCreateForm = () => {
+    const [mutate] = useDataMutation(mutation, {
+        onComplete : () => { alert('success')},
+        onError : () => { alert('error')}
+
+    }) 
+    const onSubmit = async (values) => {
+        mutate(values)
+        // @todo: add the mutation
+    }
+
+    return (
+        <div>
+            <h1>{i18n.t('Add an attribute')}</h1>
+
+            <RFForm onSubmit={onSubmit}>
+                {({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="name"
+                                label={i18n.t('Attribute name')}
+                                component={InputFieldFF}
+                                validate={hasValue}
+                            />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="valueType"
+                                label={i18n.t('Value Type')}
+                                component={SingleSelectFieldFF}
+                                className={styles.title}
+                                initialValue="TEXT"
+                                options={[
+                                    {
+                                        label: i18n.t('Text'),
+                                        value: 'TEXT',
+                                    },
+                                    {
+                                        label: i18n.t('Number'),
+                                        value: 'NUMBER',
+                                    },
+                                ]}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Button type="submit" primary>
+                                {i18n.t('Save')}
+                            </Button>
+                        </div>
+                    </form>
+                )}
+            </RFForm>
+        </div>
+    )
+}
+
+export default AttributeCreateForm

src/views/Attributes.js

@@ -1,10 +1,33 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { CircularLoader, CenteredContent, NoticeBox, Table, TableBody, TableCell, TableCellHead, TableHead, TableRow, TableRowHead } from '@dhis2/ui'
 import React from 'react'
-import { useGetAttributes } from '../hooks/index.js'
+import AttributeCreateForm from './AttributeCreateForm'
+
+const query = {
+    attributesList: {
+        resource: 'attributes',
+        params: {
+            fields: ['displayName', 'code', 'unique'],
+            order: 'created:desc',
+        },
+    }
+}
 
 export const Attributes = () => {
     // we get the data using a custom hook
     // we will update this implementation after learning about app-runtime
-    const { loading, error, data } = useGetAttributes()
+    const { loading, error, data } = useDataQuery(query)
+    if (loading){
+        return(
+            <CenteredContent>
+                <CircularLoader />
+            </CenteredContent>
+        )
+    }
+    if (error){
+        return<NoticeBox error>{error?.message}</NoticeBox>
+    }
+    console.log(data)
 
     return (
         <div>
@@ -13,12 +36,32 @@ export const Attributes = () => {
             <p>error message: {error?.message}</p>
             {
                 // if there is any data available
-                data?.attributes?.attributes && (
-                    <pre>
-                        {JSON.stringify(data.attributes.attributes, null, 4)}
-                    </pre>
+                data?.attributesList?.attributes && (
+                    <Table>
+                        <TableHead>
+                            <TableRowHead>
+                                <TableCellHead>Name</TableCellHead>
+                                <TableCellHead>Unique</TableCellHead>
+                            </TableRowHead>
+                        </TableHead>
+                        <TableBody>
+                        {data.attributesList.attributes.map(
+                            ({id, displayName, unique}) => (
+                                <TableRow key={id}>
+                                    <TableCell>
+                                        {displayName}
+                                    </TableCell>
+                                    <TableCell>
+                                        {unique ? 'Yes' : 'No'}
+                                    </TableCell>
+                                </TableRow>
+                            )
+                        )}
+                        </TableBody>
+                    </Table>
                 )
             }
+            <AttributeCreateForm/>
         </div>
     )
 }

src/views/Form.js

@@ -1,7 +1,10 @@
-import { ReactFinalForm } from '@dhis2/ui'
+import { useAlert } from '@dhis2/app-runtime'
+import { InputFieldFF, ReactFinalForm, SingleSelectFieldFF, SwitchFieldFF, composeValidators, dhis2Password, hasValue, Button } from '@dhis2/ui'
 import React from 'react'
 import styles from './Form.module.css'
 
+
+
 /**
  * This is just a function to demonstrate the values when the form is submitted
  * It takes the form's values (which is an object), transforms it into readable JSON,
@@ -15,31 +18,125 @@ import styles from './Form.module.css'
  * @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((stringValues) => {
+        return 'All is Good' + stringValues
+    },
+    (values) => {
+        if(values.title === 'Professor'){
+            return{
+                critical: true,
+                }
+        }
+        return{
+            success: true,
+        }
+    })
+
+    const alertValues = (values) => {
+        const formattedValuesString = JSON.stringify(values, null, 2)
+        show(formattedValuesString)
+        }
+
+    return (
+        <div>
+            <h1>Formulaire</h1>
+
+            <RFForm onSubmit={alertValues}>
+                {({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <div className={styles.row}>
+                            <Field
+                                name="title"
+                                label="Title"
+                                component={SingleSelectFieldFF}
+                                className={styles.title}
+                                initialValue="none"
+                                options={[
+                                    { label: 'None', value: 'none' },
+                                    { label: 'Professor', value: 'professor' },
+                                    { label: 'Doctor', value: 'doctor' },
+                                ]} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="surname"
+                                label="Surname"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                validate={hasValue} />
+                            <Field
+                                required
+                                name="firtname"
+                                label="First Name"
+                                component={InputFieldFF}
+                                className={styles.firtname}
+                                validate={hasValue} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="username"
+                                label="Username"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                validate={hasValue} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="password"
+                                label="Password"
+                                type='password'
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                validate={composeValidators(
+                                    dhis2Password,
+                                    hasValue
+                                )} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="emailadress"
+                                label="E-mail adress"
+                                placeholder="example@domaine.com"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                validate={hasValue} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="emailadress"
+                                label="Confirm E-mail adress"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                                validate={hasValue} />
+                        </div>
+                        <div className={styles.row}>
+                            <Field
+                                name="newsletter"
+                                type="checkbox"
+                                label="I want to receive newsletter"
+                                component={SwitchFieldFF}
+                                className={styles.surname}
+                                initialValue={false} />
+                        </div>
+                        <div className={styles.row}>
+                            <Button type="submit" primary>
+                                Submit Form
+                            </Button>
+                        </div>
+
+                    </form>
+                )}
+            </RFForm>
+        </div>
+    )
+}

src/views/Home.js

@@ -1,9 +1,17 @@
+import {useConfig} from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { Tag } from '@dhis2-ui/tag'
 import React from 'react'
 
-export const Home = () => (
-    <div>
-        <h1>Home</h1>
+export const Home = () => {
+    const config = useConfig()
+    return (
+        <div>
+            <h1>{i18n.t('Bienvenue')}</h1>
+            <p>{i18n.t(`DHIS2 Web App Academy 2024, Abidjan - Côte d'Ivoire`)}</p>
+
+            <Tag positive> Running on API version: {config.apiVersion}</Tag>
+        </div>
+    )
+}
 
-        <p>DHIS2 Web App Academy 2024</p>
-    </div>
-)