dhis2-devs team mailing list archive

[Shivee Gupta <shiveegpt77@xxxxxxxxx>]

Hello devs,
I have developed a ReactJs app for quick entry of Tracker Capture data
under the Google Summer of Code program. I'd like to share the details of
the app and how it will help the community. This is the link to the  source
code <https://github.com/dhis2/tracker-quick-entry>.

*The purpose the app serves:*
The purpose of this project is to create a web app for quick entry of test
data in a tabular format based on a program's metadata with further
possibilities for configuring which test data to be entered. It makes the
data entry faster and more consolidated on one view. Following are the
features of the app:

*What's the app: *
1. Sidebar provided to select the organisation unit for which the program's
data is to be entered.
2. After selecting the organisation unit, the programs registered under
that organisation unit are loaded which you can select.
3. On selecting the program, a table is rendered using the program's
metadata. The columns are the TEI attributes. Each row saves the TEI
registration data on clicking "save".
4. If the TEI is successfully registered, a collapsible card opens with the
Program stages for the program the TEI is registered for.
5. On clicking the stage button a modal opens where new events can be
created. Multiple events can be created for repeatable program stages.
6. The data elements are posted to the API on clicking save.

This app is intended to provide a faster tabular data entry option for
tracker capture. I have used the d2 library for handling the metadata.
Examples:

   - GET request using D2 : GET with D2 example from the project
   <https://github.com/dhis2/tracker-quick-entry/blob/07c223619c891c492c153606dd1ce8afd66aef00/src/components/app.component.js#L56-L65>
   - POST to d2 API : POST with D2 example from the project
   <https://github.com/dhis2/tracker-quick-entry/blob/07c223619c891c492c153606dd1ce8afd66aef00/src/components/super-row.js#L100-L112>

I have used the RxJs library to handle the data returned from the D2 API.
For example, after the user selects an organisation unit I set an observable
<https://github.com/dhis2/tracker-quick-entry/blob/07c223619c891c492c153606dd1ce8afd66aef00/src/components/app.component.js#L48>
with
selected organisation unit id and then only load the drop down
<https://github.com/dhis2/tracker-quick-entry/blob/07c223619c891c492c153606dd1ce8afd66aef00/src/components/edit-table.js#L27-L35>
after
fetching the program list from the D2 API. The same happens for loading the
data about an individually selected program. For posting the data I have
first created the required JSON structure and used the D2 APIs post method.
I resolve the promise for success and failure according to the response of
the server.

This app also demonstrates how the Tracker Capture app can also be built on
ReactJs using RxJs and the handling of the D2 APIs for development.

This is the link to the demo: https://youtu.be/7Wes6vskmnM
<https://youtu.be/7Wes6vskmnM>

*Limitations / future work:*
Option to choose the organisation unit for the event can be provided as it
can be different from where the program was registered.
Future work includes a provision to configure which test data is to be
entered.

I hope the app proves useful to the community. Looking forward to feedback
:)

Best Regards,
Shivee Gupta