As a DIVO, I want to view the CCE status of the facility I am local fulfilling so that I can ensure they have cold chain functionality to support the stock headed their way.
Update existing test case for View Orders details (if test case does not exist, create a new one and link to this ticket)
Create a reusable Facility CCE Status component
Built within the openlmis-cce-ui repository
Takes a facility object as an argument
Loads facility CCE status data after the reusable component is rendered
Note: This data might be cached or pre-loaded in a separate ticket
The component has the following states
"All functioning" if all CCE inventory items are functional
Status icon is a green dot
"Not fully functioning" if at least one CCE inventory item is functioning and at least one CCE inventory item is not functioning
Status icon is a yellow dot
"Not functioning" if no CCE inventory items are functional
Status icon is a gray red dot
"Loading" displayed while the facility CCE Status component is loading data from the services
Status icon is the loading icon, in $brand_primary
"Unknown" displayed if the Facility CCE Status component failed to load information from the CCE services or the current user doesn't have permission to view CCE status for the specific facility.
Status icon is gray
The client within component iteratively call the paginated endpoint with the client set default page size (10 items), until it has all the inventory items for a facility.
Reuse CSS from other CCE-UI, see CCE-UI inventory-item-details and inventory-item-status
Facility CCE Status component is placed on the Order Details page, directly below the page title
Orders detail page should put Facility CCE Status in <aside> element, and place label text "CCE Status" above Facility CCE Status component (This is done because adding labels into reusable components always becomes hard to maintain).
NOTE: We want to do our best to avoid making a dependency CCE-UI to Fulfillment-UI. For now it is ok to place a component from CCE-UI into a Fulfillment-UI page, as the HTML won't cause a "hard" error if the CCE-UI is loaded. In an ideal world, there would be an extension point to add the component from the CCE-UI into the Fulfillment-UI.
Update about dependencies
I just posted this to the dev list – but, please add a dependency from fulfillment-ui to cce-ui.
I hear the objections to iterating through the Inventory Item pages – I'm happy if you all want to implement this by doing something clever.
I'm realizing now that none of us should assume there will be a popover for this component – as it hasn't been decided yet.
The decision to show CCE Inventory Items in a popover (or modal) is based on best practices in complex form design, which is: "Don't let the user leave the context of the form they are trying to complete, because the chance of them getting lost on the way back is extremely high."
I've seen descriptions of future workflows, there are going to be more pages and page elements that need to display other information as we go.
We can optimize for performance later
The purpose of optimizing later, is to hurry up and get the work done today. We have deadlines, let's all try to be thoughtful about the battles we choose – and make TechDebt tickets....
I tested the ticket, and noticed several minor issues.
1. The CCE status component is too wide on the page - it is as wide as the screen, though according to the mock-up, it should be as wide as the table and order details.
2. When the status is Not fully functioning, the dot should be yellow. If I see correctly, it is orange now.
3. I don't know if perftest has current data, but the CCE statuses are not translated there. I was unable to check whether they change accordingly because currently, it's impossible to add inventory items on this server - there are options in the facility and program selects in the modal enabling one to add an inventory item.
4. Please add the changelog.
Please find the attached screenshots.
1. I see in mockup that it's on the 100% width of screen (are you looking at the newest one?). And it was also accepted on #UI slack channel..... and follow our styleguide, and ticket description (aside tag)
2. Interesting, I didn't find such color in our constants (maybe yellow is too shiny) so used orange one. But can change if that's problem
3. I don't know if perftest has current data, but the CCE statuses are not translated there.
Can you make sure if recent changes are on perftest and then testing there? You can also write on slack directly to me or #help
4. Yep, always forget.
1. Yes, I see that on the mock-up it's as wide as the screen and at the same time, as the table with order details. But in the implementation, the table is much narrower than the component, so the widths don't match. But since this solution was accepted on #UI and it follows styleguide, I think we can leave it like that.
2. Too me personally, the current color is fine but I think that we need to stick to acceptance criteria, and yellow is mentioned there. So please change this color to more-obviously yellow.
3. All right, I will always ask you or any other developer, depending on the ticket, whether the most recent changes had been deployed to perftest, as I know that problems sometimes occur on that server (that's why I wasn't sure).
Issues should be fixed