Choose orderable page: adjustment

This story is split out from https://openlmis.atlassian.net/browse/OLMIS-2096#icft=OLMIS-2096

As a storeroom clerk
I want to choose orderables
so that I can do an adjustment for them

Scope in:
Add new orderables;
Fill in adjustment quantity;
Remove added orderables;
Choose date and reasons;
Positive Integer quantity input validation;

Scope out:
Submit adjustment;
Create adjustment;
Save adjustment;
SOH negative validation check;

Acceptance Criteria:

• Given I am on the new adjustment page when I choose a product from the dropdown list and a reason from the reason dropdown list and click 'Add' button then the chosen product will be added to the table and its current SOH will be displayed. Refer to the mockup.

• Given I am on the new adjustment page and I haven't choose a product or a reason when I click 'Add' button then these blank fields are highlighted and no items are created in the table.

• Given I am on the new adjustment page, I can only choose past date or current date as the occurred date.

• Given I am on the new adjustment page when I click the product dropdown list then I can find all approved products for the facility and program I choose.

• Given I am on the new adjustment page, reason/date/quantity fields are changeable on the table.

• Given I am on the new adjustment page and have added some products when I click the 'Remove' button next to a product in the table then that product will be removed from table.

• Given I am on new adjustment page within added products when I input something is not positive integer for the quantity field then I will stay at the pop-up window and the quantity fields are highlighted within an '!' icon next to it and if I click the icon then there will pop up a message says "You must input positive integer"

• Given I am on the new adjustment page within products I added when I click 'Clear' button then there will pop up a modal says "You will lose your changes" and I can click either 'Cancel' or 'Clear' button.

  The 'Clear' button should be in red.

• Given I am on the pop-up modal when I click 'Cancel' button then the modal disappear and I stay the new adjustment page without any changes.

• Given I am on the pop-up modal when I click 'Clear' button then I will stay the new adjustment page but all products will be removed.

• Given I am on the new adjustment page if I do not add any products then either the clear button or the submit button are disabled.

• Given I am on the new adjustment page when I type in keywords in the search textbox and click search button then the content in the table matches my input keywords will be displayed

• Given I am on the new adjustment page and I search with keywords when I click clear button then all the results match my search keywords would be clear while others items do not match my search results will not be removed.

• Given I am on the new adjustment page when I input keywords and click search button then all the results match my keywords would be displayed even the reason textbox includes the keywords will be displayed.