GSoC'19 Work Product Submission Mifos X Web App | Abhay Chawla
I would like to thank Ed Cable and Pranjal Goswami for their guidance and support throughout the program. A special thanks to Santosh Math and Sampath Kumar G for their timely assistance.
Mifos X Web App is the revamped version of the Mifos X Community App, an effective financial inclusion solution and the default web application built on top of the Mifos X platform for the Mifos User Community. It provides the frontend for a core banking system. Due to the limitations of Angular 1.x, the community app is being rewritten as the web app leveraging Angular 6 and Material Design. This project strives to continue the work which began last year.
Originally, I had proposed to work on creating a self guided walkthrough (configuration wizard) but given the priority of rewrite of the new web app and the work remaining, I shifted my focus there.
- Update to Angular 7
- Javascript Heap Goes Out of Memory
- Dynamic Form Dialog Component
- Pipes
- Material Stepper Integration
- Products
To keep the web app upto date with the latest released stable version of Angular, it was decided to upgrade it to Angular 7.
- All dependencies were updated to their latest versions.
- Tslint configuration and rules were refactored.
- Travis configuration was updated to use Angular 7.
Related Issues:
[1] openMF/web-app#407
Related Pull Requests:
[1] openMF/web-app#408
[2] openMF/web-app#412
Production build was failing due to a limit on heap memory allocation in V8 (node.js) which lead to JavaScript heap going out of memory. I updated the production build script and Travis configuration to increase the same.
Related Issues:
[1] openMF/web-app#436
Related Pull Requests:
[1] openMF/web-app#437
I created a custom component for creating forms dynamically in a dialog which will be used as a replacement to the current scenario in the community app where formfields were being added to a table. Addition and Editing will be performed via the dialog while the data will be shown in the table.
- Added formfield, input, select and datepicker base (model)
- Added formgroup service
- Added formfield and form-dialog component
- Jivjyot worked on the same as well, and also added a checkbox base (model)
Related Issues:
[1] openMF/web-app#427
Related Pull Requests:
[1] openMF/web-app#428
Various pipes were created to assist the functionality of web app in general as well as the products section in particular. They include the following:
- Added find pipe to find a particular option's property within a set of options by a unique value.
- Added charges penalty filter pipe to filter charges that have penalty or not (as per requirement).
- Added charges filter pipe to filter charges by currency code or multi disburse loan (loan products)
Related Commits:
[1] https://github.com/openMF/web-app/commit/ac357fc846c94b0d408eb4274cea5da17ce11f6f
Angular material stepper was integrated within the web app to ensure a workflow similar to the one in community app wherein we have long forms. Earlier within the community app the entire code of stepper for a particular section eg. loan products was cluttered within a single file making it very difficult to understand. But now, each step for every section in creation of products is within its own component improving readability of the code as well as allowing its reuse (with some modifications) for the editing of products as well.
 |
 |
|---|
Various icons/colours indicating the current state of the stepper include:
- Pencil with Default colour - Edit
- Check mark with Green colour - Done
- Exclaimation mark with Red colour - Error
- Eye with Default colour - Preview
Features Completed:
- Loan Products
| List | Create | View | Edit |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#429
[2] openMF/web-app#188
[3] openMF/web-app#438
[4] openMF/web-app#439
Related Pull Requests:
[1] openMF/web-app#430
[2] openMF/web-app#434
[3] openMF/web-app#442
[4] openMF/web-app#451
- Savings Products
| List | Create | View | Edit |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#440
[2] openMF/web-app#189
[3] openMF/web-app#452
[4] openMF/web-app#453
Related Pull Requests:
[1] openMF/web-app#454
[2] openMF/web-app#455
[3] openMF/web-app#456
[4] openMF/web-app#457
- Shares Products
| List | Create | View | Edit |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#458
[2] openMF/web-app#190
[3] openMF/web-app#463
[4] openMF/web-app#464
Related Pull Requests:
[1] openMF/web-app#459
[2] openMF/web-app#462
[3] openMF/web-app#469
[4] openMF/web-app#470
- Deposit Products Interest Rate Chart step was enhanced so that multiple interest rate charts can now be added within the stepper itself.
| Create |
|---|
 |
Related Issues:
[1] openMF/web-app#458
Related Pull Requests:
[1] openMF/web-app#459
Other work:
- Working on getting the pending PRs (view and edit for deposit products) merged.
- Working on addition of tooltips before the final presentation.
Further Enhancements possible for future:
- Development of the rest features of the application.
- Translations: Mailing List Discussion Link
https://mifosforge.jira.com/wiki/spaces/RES/pages/823590915/2019+Google+Summer+of+Code
It has been a great experience again working with the Mifos community and I am looking forward to continue the same in the future.