Michael Eshete Working "chore:first commit"

d2.config.js

@@ -1,6 +1,6 @@
 const config = {
     type: 'app',
-
+    direction:'auto', 
     entryPoints: {
         app: './src/App.js',
     },

i18n/en.pot

@@ -0,0 +1,36 @@
+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-17T14:57:07.004Z\n"
+"PO-Revision-Date: 2024-04-17T14:57:07.004Z\n"
+
+msgid "Add an attribute"
+msgstr "Add an attribute"
+
+msgid "Attribute name"
+msgstr "Attribute name"
+
+msgid "Value Type"
+msgstr "Value Type"
+
+msgid "Text"
+msgstr "Text"
+
+msgid "Number"
+msgstr "Number"
+
+msgid "Save"
+msgstr "Save"
+
+msgid "Home"
+msgstr "Home"
+
+msgid "This is Dhis2 web Acadamy"
+msgstr "This is Dhis2 web Acadamy"
+
+msgid "Running on API version: {{apiVersion}}"
+msgstr "Running on API version: {{apiVersion}}"

i18n/fr.po

@@ -0,0 +1,36 @@
+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:01:35.096Z\n"
+"PO-Revision-Date: 2024-04-16T16:01:35.096Z\n"
+
+msgid "Home"
+msgstr "Maison"
+
+msgid "This is Dhis2 web Acadamy"
+msgstr "C'est Dhis2 web Acadamy" 
+
+msgid "Running on API version: {{apiVersion}}"
+msgstr "fonctionnant sur la version API: {{apiVersion}}"
+
+msgid "Add an attribute"
+msgstr "Ajouter un attribut"
+
+msgid "Attribute name"
+msgstr "Nom d'attribut"
+
+msgid "Value Type"
+msgstr "Type de valeur"
+
+msgid "Text"
+msgstr "Texte"
+
+msgid "Number"
+msgstr "Nombre"
+
+msgid "Save"
+msgstr "Sauvegarder"

package.json

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

src/App.js

@@ -3,7 +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 './locales/index.js'
 const MyApp = () => (
     <HashRouter
     // HashRouter is used as there is not integration with DHIS2 server

src/navigation/Navigation.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 // @TODO: Import the `Menu` and `MenuItem` components
+import { Menu, MenuItem } from '@dhis2/ui'
 import { useNavigate, useMatch } from 'react-router-dom'
 
 const NavigationItem = ({ path, label }) => {
@@ -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,7 +28,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 +46,5 @@ export const Navigation = () => (
             label="Form"
             path="/form"
         />
-    </div>
+    </Menu>
 )

src/views/AttributeCreateForm.js

@@ -0,0 +1,78 @@
+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)
+    const onSubmit = async (values) => {
+        console.log(values)
+        mutate(values)
+
+    }
+
+    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,24 +1,75 @@
 import React from 'react'
 import { useGetAttributes } from '../hooks/index.js'
+import { CircularLoader, CenteredContent, Table, DataTable, TableHead, TableCellHead, TableBody, TableRow, TableCell, } from '@dhis2/ui'
+import { useDataQuery } from '@dhis2/app-runtime'
+import AttributeCreateForm from './AttributeCreateForm.js'
+import { NoticeBox } from '@dhis2/ui'
 
+const query = {
+
+    attributes: {
+        resource: "attributes",
+        params: {
+            fields: ['code', 'displayName', 'unique', 'id'],
+            order: 'displayName:desc',
+            // pageSize: 5
+        }
+    },
+    me: {
+        resource: "me",
+        params: {
+            fields: ["displayName"]
+
+        }
+    }
+
+}
 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>
+    }
+
     return (
         <div>
             <h1>Attributes</h1>
-            <p>loading: {JSON.stringify(loading)}</p>
-            <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?.attributes?.attributes && (
+                <Table>
+                    <TableHead>
+                        <TableCellHead>Name</TableCellHead>
+                        <TableCellHead>Unique</TableCellHead>
+                    </TableHead>
+
+                    <TableBody>
+                        {data.attributes.attributes.map(
+                            (atribute) => {
+                                const { id, displayName, unique } = atribute
+                                return (
+                                    <TableRow key={id}>
+                                        <TableCell>{displayName}</TableCell>
+                                        <TableCell>
+                                            {unique ? 'Yes' : 'No'}
+                                        </TableCell>
+                                    </TableRow>
+                                )
+                            }
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+            <AttributeCreateForm/>
+
+
+
         </div>
     )
 }