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.
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: **
-
Sidebar provided to select the organisation unit for which the program’s data is to be entered.
-
After selecting the organisation unit, the programs registered under that organisation unit are loaded which you can select.
-
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”.
-
If the TEI is successfully registered, a collapsible card opens with the Program stages for the program the TEI is registered for.
-
On clicking the stage button a modal opens where new events can be created. Multiple events can be created for repeatable program stages.
-
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
- POST to d2 API : POST with D2 example from the project
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 with selected organisation unit id and then only load the drop down 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
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