This is the default web application built on top of the Apache Fineract platform. The Mifos X Web App (formerly called Community App) is maintained by the Mifos Initiative as a reference solution for the financial inclusion community. It is a Single-Page App (SPA) written in web standard technologies like JavaScript, CSS and HTML5. It leverages common popular frameworks/libraries such as AngularJS 1.5, Bootstrap and Font Awesome
Go to file
Nayan Ambali 56b7a263cd Merge pull request #65 from Nayan/sidenav
side nav and ng-view set same height
2013-08-31 01:07:59 -07:00
font client loan account info is added 2013-08-29 11:20:01 +05:30
global-translations identity documents info added 2013-08-30 20:05:11 +05:30
html minor ui changes 2013-08-31 13:19:18 +05:30
image favicon 2013-08-19 21:40:57 +05:30
js identity documents info added 2013-08-30 20:05:11 +05:30
stylesheets side nav and ng-view set same height 2013-08-31 13:35:55 +05:30
test adding app name to url 2013-08-17 15:12:46 +05:30
.bowerrc removed fixed dependencies. added bower.json no manage them 2013-08-13 13:45:53 +05:30
.gitignore Pagination service and same is used for client pagination 2013-08-16 00:24:35 +05:30
bower.json added angular-translate 2013-08-19 13:18:23 +05:30
index.html side nav and ng-view set same height 2013-08-31 13:35:55 +05:30
README.md Updated with Online Demo link 2013-08-18 17:58:58 +05:30

prototype-app

Repository for putting prototype work from Thoughtworks HSP around building single page web app

Overview Video

To get a good overview of the code layout, and recommendations going ahead on the Angular.js Prototype application, please watch this video recording of a session taken by Silvio from ThoughtWorks:

YouTube Video on MifosX UI Prootype Code Walkthrough

Online Demo

Access the online demo version here

Building from source

  1. Note: Ensure you have npm installed - goto http://nodejs.org/download/ to downloand installer for your OS.

  2. Clone this respository to your local filesystem

  3. To download the dependencies, first install bower:

npm install -g bower
  1. Next run a clean install on the project root folder:
bower install

Done.

Adding dependencies

You can also add more dependencies on bower.json. You can search for them in http://sindresorhus.com/bower-components/ or even:

bower search <package>

Running the tests

Just open test/SpecRunner.html in the browser.

Background

The Mifos project (http://www.mifos.org/about) was originally setup and guided by Grameen Foundation. It has been open source since inception but in recent years the community for open source microfinance (http://www.openmf.org) took over maintanance and future development of the Mifos project.

Whilst the community continues to maintain and support the original Mifos MIS project, most development has shifted to the Mifos X project.

Mifos X

Mifos X is a MIS platform for microfinance. Its capabilities are exposed through a RESTful API.

Setting up Mifos X server

Troubleshooting

In case you get 'PermGen - Out of space' errors when running the tomcatRunWar task, increase the memory of your java process through the GRADLE_OPTS env variable

export GRADLE_OPTS="-Xmx512m -XX:MaxPermSize=265m"  

Scope of Work

For the prototype the following scenarios should suffice:

1 Navigate to Role-based landing screen after login

This scenario will involve:

  • provide login screen that will use platform authentication api (https://demo.openmf.org/api-docs/apiLive.htm#authentication)
  • on failure handle error response from platform authentication api
  • on success display appropriate screen based on the organisational role associated with authenticated user.

Existing users on demo server:

  • mifos/passowrd has a 'Super user' role
  • joejoe/password has a 'Branch Manager' role
  • jackjack/password has a 'Funder' role

Authentication API response

{
  "username": "mifos",
  "userId": 1,
  "base64EncodedAuthenticationKey": "bWlmb3M6cGFzc3dvcmQ=",
  "authenticated": true,
  "staffId": 1, 
  "staffDisplayName": "Director, Program", 
  "organisationalRole": { 
     "id": 100, 
     "code": 
     "staffOrganisationalRoleType.programDirector", 
     "value": "Program Director" 
  },
  "roles": [
    {
      "id": 1,
      "name": "Super user",
      "description": "This role provides all application permissions."
    }
  ],
  "permissions": [
    "ALL_FUNCTIONS"
  ]
}

On each of the different landing screens for 'Super user', 'Branch Manager' and 'Funder' role it would suffice to just indicate that these are different screens through static content. If you wish you can invoke different platform API calls on each of the different landing pages e.g.

2 CRUD screens around typical administrative area like users

Implement CRUD behaviour around the users resource (https://demo.openmf.org/api-docs/apiLive.htm#users)

Objective

Along with code to demostrate how the scenarios in scope of work can be implemented, the objective of this prototype/spike is to demonstrate a clean way of developing a single page app which exhibits the following qualities:

  1. Structured Approach
  2. Automation of dev code into production artifacts
  3. Localisation and Internationalisation
  4. Customisable and Extensible

Together with code to demostrate how the scenarios in scope of work are implemented