From d5202e81715362e0ba27e0999776d7fb336205ea Mon Sep 17 00:00:00 2001 From: Tangi Date: Tue, 16 Apr 2024 12:00:46 +0200 Subject: [PATCH 1/4] docs:I made changes to this day 1 file --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ab8a87d..32b902d 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ -# DHIS2 Web App Development Academy +# DHIS2 Web App Development Academy - Day 1 work testing This is the repo that you will use during the Web Academy exercises. Please fork it, clone it and run it following the instructions on the workshop site: https://dhis2.github.io/academy-web-app-dev/docs/resources/set_up_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/ \ No newline at end of file +For more information about the academy and the topics taught, check the website: https://dhis2.github.io/academy-web-app-dev/ + +#Pinehas Johannes \ No newline at end of file From 74fadd6c7df058f37791ca7b9c075b0d520c3e62 Mon Sep 17 00:00:00 2001 From: pinehasj Date: Tue, 16 Apr 2024 12:31:50 +0200 Subject: [PATCH 2/4] docs:I made changes to this day 1 file --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 32b902d..d776e73 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,5 @@ Before participating, make sure you have gone through [the pre-requisites](https For more information about the academy and the topics taught, check the website: https://dhis2.github.io/academy-web-app-dev/ -#Pinehas Johannes \ No newline at end of file +#Pinehas Johannes +#Namibia \ No newline at end of file From 5c241906a6bf43323ac9aa4ef286b9641f5183ab Mon Sep 17 00:00:00 2001 From: pinehasj Date: Tue, 16 Apr 2024 15:54:29 +0200 Subject: [PATCH 3/4] changes for attrbutes was done --- src/navigation/Navigation.js | 4 +- src/views/Attributes.js | 51 +++++++++++++-- src/views/Form.js | 116 +++++++++++++++++++++++++++++++++-- 3 files changed, 161 insertions(+), 10 deletions(-) diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js index 38b5781..718a78a 100644 --- a/src/navigation/Navigation.js +++ b/src/navigation/Navigation.js @@ -1,5 +1,7 @@ +import { Menu, MenuItem } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' + // @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
{label}
+ return } NavigationItem.propTypes = { diff --git a/src/views/Attributes.js b/src/views/Attributes.js index 87b6a40..128991f 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,3 +1,15 @@ +import { + CenteredContent, + CircularLoader, + NoticeBox, + Table, + TableBody, + TableCell, + TableCellHead, + TableHead, + TableRow, + TableRowHead, +} from '@dhis2/ui' import React from 'react' import { useGetAttributes } from '../hooks/index.js' @@ -6,19 +18,48 @@ export const Attributes = () => { // we will update this implementation after learning about app-runtime const { loading, error, data } = useGetAttributes() + if (loading) { + return ( + + + + ) + } + + if (error) { + return {error?.message} + } + return (

Attributes

-

loading: {JSON.stringify(loading)}

-

error message: {error?.message}

{ // if there is any data available data?.attributes?.attributes && ( - 
-                        {JSON.stringify(data.attributes.attributes, null, 4)}
-
+ + + + Name + Unique + + + + {data.attributes.attributes.map( + ({ id, displayName, unique }) => ( + + {displayName} + + {unique ? 'Yes' : 'No'} + + + ) + )} + +
) }
) } + + diff --git a/src/views/Form.js b/src/views/Form.js index 1713331..929641d 100644 --- a/src/views/Form.js +++ b/src/views/Form.js @@ -1,4 +1,16 @@ -import { ReactFinalForm } from '@dhis2/ui' +import { + Button, + InputFieldFF, + SingleSelectFieldFF, + SwitchFieldFF, + composeValidators, + createEqualTo, + email, + hasValue, + dhis2Password, + dhis2Username, + ReactFinalForm, +} from '@dhis2/ui' import React from 'react' import styles from './Form.module.css' @@ -31,15 +43,111 @@ export const Form = () => (
+
+ +
+ + + +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
)} -) +) \ No newline at end of file From 0f8cee9c222ace7050e634869261b90aed2f18b0 Mon Sep 17 00:00:00 2001 From: pinehasj Date: Thu, 18 Apr 2024 11:30:25 +0200 Subject: [PATCH 4/4] Day 1 work saved --- i18n/en.pot | 48 +++++++++++++++ i18n/fr.po | 12 ++++ src/App.js | 1 + src/hooks/useGetAttributes.js | 1 + src/views/AttributeCreateForm.js | 102 +++++++++++++++++++++++++++++++ src/views/Attributes.js | 85 ++++++++++++++++++++++---- src/views/Attributes.module.css | 3 + src/views/Form.js | 18 +++++- src/views/Home.js | 15 ++++- 9 files changed, 268 insertions(+), 17 deletions(-) create mode 100644 i18n/en.pot create mode 100644 i18n/fr.po create mode 100644 src/views/AttributeCreateForm.js create mode 100644 src/views/Attributes.module.css diff --git a/i18n/en.pot b/i18n/en.pot new file mode 100644 index 0000000..609e7b1 --- /dev/null +++ b/i18n/en.pot @@ -0,0 +1,48 @@ +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-18T06:35:33.165Z\n" +"PO-Revision-Date: 2024-04-18T06:35:33.166Z\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 "Attributes" +msgstr "Attributes" + +msgid "Attributes visible to {{name}} ({{email}})" +msgstr "Attributes visible to {{name}} ({{email}})" + +msgid "Name" +msgstr "Name" + +msgid "Unique" +msgstr "Unique" + +msgid "Yes" +msgstr "Yes" + +msgid "No" +msgstr "No" + +msgid "DHIS2 Web App Academy 2024!" +msgstr "DHIS2 Web App Academy 2024!" diff --git a/i18n/fr.po b/i18n/fr.po new file mode 100644 index 0000000..9601d4e --- /dev/null +++ b/i18n/fr.po @@ -0,0 +1,12 @@ +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:10.180Z\n" +"PO-Revision-Date: 2024-04-16T16:01:10.180Z\n" + +msgid "DHIS2 Web App Academy 2024!" +msgstr "frech trans" diff --git a/src/App.js b/src/App.js index be72803..e402bb1 100644 --- a/src/App.js +++ b/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 = () => ( { export const useGetAttributes = () => { const [loading, setLoading] = useState(true) + // const error = new Error('something went wrong') const error = null const data = ATTRIBUTES diff --git a/src/views/AttributeCreateForm.js b/src/views/AttributeCreateForm.js new file mode 100644 index 0000000..7b317f6 --- /dev/null +++ b/src/views/AttributeCreateForm.js @@ -0,0 +1,102 @@ +import { useAlert, useDataMutation } from '@dhis2/app-runtime' +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' + +const { Field, Form: RFForm } = ReactFinalForm + +const mutation = { + resource: 'attributes', + type: 'create', + data: (dataValues) => ({ ...dataValues }), +} + +const AttributeCreateForm = () => { + const { show } = useAlert( + ({ id, error }) => { + if (error) { + return error + } + return `An attribute with ID ${id} was created.` + }, + ({ error }) => { + if (error) { + return { critical: true } + } + return { success: true } + } + ) + + const options = { + onComplete: ({ response }) => + show({ + id: response?.uid, + }), + onError: (error) => show({ error }), + } + const [mutate, { called, loading, error, data, refetch }] = useDataMutation( + mutation, + options + ) + + const onSubmit = async (values) => { + await mutate(values) + // @todo: add the mutation + } + + return ( +
+

{i18n.t('Add an attribute')}

+ + + {({ handleSubmit }) => ( +
+
+ +
+
+ +
+ +
+ +
+
+ )} + +
+ ) +} + +export default AttributeCreateForm \ No newline at end of file diff --git a/src/views/Attributes.js b/src/views/Attributes.js index 128991f..7096979 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,4 +1,7 @@ +import { useDataMutation, useDataQuery } from '@dhis2/app-runtime' +import i18n from '@dhis2/d2-i18n' import { + Button, CenteredContent, CircularLoader, NoticeBox, @@ -11,12 +14,35 @@ import { TableRowHead, } from '@dhis2/ui' import React from 'react' -import { useGetAttributes } from '../hooks/index.js' +import AttributeCreateForm from './AttributeCreateForm.js' +import styles from './Attributes.module.css' + +const query = { + myUserInfo: { + resource: 'me', + params: { + fields: ['displayName', 'email'], + }, + }, + attributes: { + resource: 'attributes', + params: { + order: 'created:desc', + fields: ['displayName', 'code', 'id', 'unique', 'valueType'], + pageSize: 5, + }, + }, +} + +const deleteMutation = { + resource: 'attributes', + type: 'delete', + id: ({ id }) => id, +} 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, refetch } = useDataQuery(query) + const [deleteAttribute] = useDataMutation(deleteMutation) if (loading) { return ( @@ -30,26 +56,62 @@ export const Attributes = () => { return {error?.message} } + const { + myUserInfo: { displayName, email }, + } = data + + const onDeleteAttribute = async (mutationId) => { + await deleteAttribute({ id: mutationId }) + refetch() + } + return (
-

Attributes

+

{i18n.t('Attributes')}

+
+ {i18n.t('Attributes visible to {{name}} ({{email}})', { + name: displayName, + email, + })} +
{ // if there is any data available data?.attributes?.attributes && ( - Name - Unique + {i18n.t('Name')} + + {i18n.t('Unique')} + + + {i18n.t('Value Type')} + + Delete? {data.attributes.attributes.map( - ({ id, displayName, unique }) => ( + ({ id, displayName, unique, valueType }) => ( {displayName} - {unique ? 'Yes' : 'No'} + {unique + ? i18n.t('Yes') + : i18n.t('No')} + + {valueType} + + ) @@ -58,8 +120,7 @@ export const Attributes = () => {
) } +
) -} - - +} \ No newline at end of file diff --git a/src/views/Attributes.module.css b/src/views/Attributes.module.css new file mode 100644 index 0000000..95aff71 --- /dev/null +++ b/src/views/Attributes.module.css @@ -0,0 +1,3 @@ +.tableInfo { + margin: 0px 0 16px; +} \ No newline at end of file diff --git a/src/views/Form.js b/src/views/Form.js index 929641d..379b743 100644 --- a/src/views/Form.js +++ b/src/views/Form.js @@ -13,6 +13,8 @@ import { } from '@dhis2/ui' import React from 'react' import styles from './Form.module.css' +import { AlertBar } from '@dhis2-ui/alert' +import { useAlert } from '@dhis2/app-runtime' /** * This is just a function to demonstrate the values when the form is submitted @@ -34,7 +36,19 @@ const alertValues = (values) => { const { Field, Form: RFForm } = ReactFinalForm -export const Form = () => ( +export const Form = () => { + + const{ show } = useAlert((values) => { + return 'All is Good' + JSON.stringify(values,null,2) + }) + + + + const alertValues = (values) => {show(values)} + + + + return (

Form

@@ -150,4 +164,4 @@ export const Form = () => ( )}
-) \ No newline at end of file +)} \ No newline at end of file diff --git a/src/views/Home.js b/src/views/Home.js index 76ef507..7bd32c3 100644 --- a/src/views/Home.js +++ b/src/views/Home.js @@ -1,9 +1,18 @@ import React from 'react' +import i18n from '@dhis2/d2-i18n' +import { Tag } from '@dhis2-ui/tag' +import {useConfig} from '@dhis2/app-runtime' -export const Home = () => ( +export const Home = () => { + const config = useConfig() + + return (

Home

-

DHIS2 Web App Academy 2024

+

{i18n.t('DHIS2 Web App Academy 2024!')}

+ Runing on API version {config.apiVersion}
-) + ) + +} \ No newline at end of file