/
UI/UX Overview + Backlog

UI/UX Overview + Backlog

Nov 20, 2017

This page outlines improvements and technical debt that needs to happen to the OpenLMIS-UI. Tickets listed on this page are may not be ready for work, and can actively be picked up once placed on a backlog grooming page.

Backlog

Consistency

Problem

Solution

Tickets

 

 

 

 

 

 

 

 

 

 

 

 

It is too easy to click off the modal in the add screen of stock management and loose all the work the user has done

 

 

Unit Tests

  • Testing a directive is tricky

  • UI-Routes could use some tests

 

 

sticky-columns can't be "easily used"

 

 

 

CSS restyling:

  • Comments status message

  • openlmis-table borders

 

 

 

 

 

 

 

Performance

Problem

Solution

Tickets

 

 

 

As the application evolves, we need to make sure the OpenLMIS-UI continues to download and start quickly.

  • Establish data budget

  • Selenium to track application size - vendor libraries, html, translation strings, image sizes

  • Selenium to track download time on 3g connection

 

 

 

 

Extensibility

Problem

Solution

Tickets

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Tooling

Problem

Solution

Tickets

There are large files that have too much functionality, which makes their classes difficult to extend or change.

A large part of the problem is identifying the files that need to be changes and fixing them.

Add some tooling to identify these large files, and make secondary tickets to refactor the files to be smaller

  • A known file is the RequisitionService

 

Jasmine 1.3 is outdated

Update to latest version of Jasmine (Overview of process here)

 

Scaffolding new modules or file types involves lots of boiler plate

  • Add grunt/yoman command

  • Automatically add IFFE enclosure to all javascript files

  • Automate minification strings with ngAnnotate

 

 

Set up Javascript linter

 

 

Set up Sass linter

 

 

 

 

 

 

 

 

Malawi

Problem

Solution

Tickets

User Input

In requisitions, losses and adjustments error messages don't clear until the page is refreshed

In requisitions, product grid cells are not shrinking to their minimal size

  • Once a login has failed, a user can't login successfully until the UI page is reloaded

  • Submit vs Sync with server doesn't seem well understuff

    • Christine said: "users don't understand when to use sync with server"

  • When filling in requisition product grid, not 100% obvious which lineitem you are working on

    • SCM manager had popover that showed label of lineitem

  • If there is an error message on page 17 of a requisition, and you are on page 1 → you can't see the error in the pagination component

  • Pagination "First" and "Last" links would be helpful

 

SORTING

Bug?

Notifications are wacko

 

Offline

Offline is described to be super sensitive. The UI will show that it's in the offline state, when it really isn't.

  • UI doesn't work on a 2g connection - either stuck offline or page doesn't load at all (in a reasonable manner) 

 

Memory/runtime/wtf

  • Main navigation links are not clickable *sometimes* after user login

    • The second page is non-responsive

  • Often have to "refresh" to make page work correctly

  • Loading modal spinner will sometimes stop spinning – this indicates the browser is dropping frames

  • Chrome will ask to kill a page because it is "non-responsive" 3-4 times while editing a user

  • Users and facility administration pages are horribly slow

  • Editing user information page is an act of patience (takes forever to load/start)

  • Timeliness and reporting rates reports are super slow

 

Caching

  • Dropdown list will say "No Options" but once refreshed will show values

 

WTF

  • Working on the initialize/authorize requisition periods page is rough for a user

    • Takes long time to load

    • Needs to be refreshed often

    • Periods could be paginated and sorted

 

Un-Forking

 

Unit Testing

http://docs.openlmis.org/en/latest/conventions/uiCodeConventions.html#unit-testing-guidelines

 

 

Examples

Brittle

 

Checks markup, not meaning
https://github.com/OpenLMIS/openlmis-cce-ui/blob/master/src/cce-edit-inventory-item/edit-inventory-item.html.spec.js#L66-L73

Set up view that is available in router?

 

https://github.com/OpenLMIS/openlmis-cce-ui/blob/master/src/cce-edit-inventory-item/edit-inventory-item.html.spec.js#L655-L672

Testing utils bundled into applicaiton?

 

https://github.com/OpenLMIS/openlmis-cce-ui/blob/master/src/openlmis-testing-utils/openlmis-testing-utils.module.js

Misc Notes

Todo list clearing

  • Add HTML5 mode to nginx
    https://gist.github.com/cjus/b46a243ba610661a7efb

  • Add postCSS - some styles are not getting poly-filled

  • Documentation update for directives and cleaning scope

  • Add documentation for layout patterns. Should be markdown eventually – but confluence is good for now

  • extra-data component

2017-09-15 Alfred/Dercio/Nick

  • Hide as many columns as possible

    • In Stock Management Recieve - reason entry isn't needed as there is only one choice, the column should not even show

    • There are blank areas from lot/vaccination groups → its weird

  • Odoo allows users to define groups of data, remembering the order that a use clicked buttons to create the group

    • This made complex data reporting and editing easier

  • Make all editable fields in a table required

    • Odoo allows users to add additional information to a row in a secondary view (modal-ish)

  • Odoo allows devs to configure if the system should do 'live' validation or validate once a form is submitted

  • Module development in Odoo, allows an implementer/user to see the packages that are installed – which makes talking and reasoning about the system possible

Comments

OpenLMIS: the global initiative for powerful LMIS software