Focused auto-saving behavior notifications

As a storeroom manager, I want to be reassured that my offline/online requisition is being saved and I will not lose my work so that I don't need worry about if it is being saved or not and can focus on entering data.

This ticket is coming from feedback from Malawi on saving comments and the issue with having alerts pop up at the same time. The team would like to improve this functionality and redesign the alerts around autosaving. Perhaps alerts are near where data is entered? perhaps saved inputs look different? We should follow a design process to see what a good improvement would be for this.

Acceptance Criteria

• Auto-saving objects will have a auto-save indicator placed near their page element

  • If the object's page element is a single form element (input, select, text area) - then the auto-save indicator will be below the element and right aligned

  • If the object's page element is more complex and contains multiple inputs - then the auto save notification is at the top of the element and right aligned

• When changes are made to the form element, and the user input is un-focuses (meaning on-blur) the "auto-save" indicator will change from its saving state to its un-saved state

  • If the change is immediate – like when an object is saved offline in local storage – then the auto-save indicator will spin for 3 seconds (which should be configurable in config.json)

• When an object is fully saved, the auto-save indicator reads: "All changes are saved"

• When an object is saving, the auto-save indicator reads: "Saving changes"

• The auto-saving styles and instructions are documented in the "Forms" section of the OpenLMIS Styleguide

• Changes are applied to the requisition product grid pages

Ideally a directive would be used to keep the implementation of the auto-save indicator DRY, but is not a priority for this ticket.

Mock up