Add Item Inventory for Banks with many locations

[ChaelCodes]

Resolves #3776

Description

Move to using an ExpandableTable from AdminLTE. The current table horizontally scrolls when there are too many locations configured for the organization. Instead, we'll show locations and quantities in a collapsible row when you click on the row. Also, add a link to the item, so they can access additional details about the item from the table.

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

1. Log in as an org admin - org_admin1@example.com/password!
2. Create many Locations with long names - /diaper_bank/storage_locations/new
3. Go to the /diaper-bank/items page
4. Select the "Item Inventory" tab
5. Scroll to the Item Inventory table
6. Click on a particular item - observe inventory in different locations, no locations with 0 inventory are listed

Screenshots

[cielf]

Hrm. @ChaelCodes Tried this with a copy of production data, and I'm not seeing the storage locations on Sylvia's Sisters
<img width="1509" alt="Screenshot 2023-07-29 at 11 29 40 AM" src="https://github.com/rubyforgood/human-essentials/assets/10157589/809e7198-880b-4594-b546-ce4c074944a3". Curious.

[cielf]

Hrm. @ChaelCodes Tried this with a copy of production data, and I'm not seeing the storage locations on Sylvia's Sisters <img width="1509" alt="Screenshot 2023-07-29 at 11 29 40 AM" src="https://github.com/rubyforgood/human-essentials/assets/10157589/809e7198-880b-4594-b546-ce4c074944a3". Curious.

Oh -- I see -- you have to click to expand them. Hrm. If I didn't immediately see that, the banks won't either (likely). What can we do to make it more obvious? It might be enough to put a note in the header ("Click for location breakdown")

[cielf]

Except, when I click, it's expanding, but then going to the Item Information screen. I'm using Chrome FWIW.

[ChaelCodes]

Except, when I click, it's expanding, but then going to the Item Information screen. I'm using Chrome FWIW.

So, I made the item names link to the items! But I also made clicking the row anywhere expand it. Maybe if I add a little icon at the end of the row to clue them in that they can click the row? Clicking the icon would expand it, but they'd figure out they could technically click anywhere on the row.

[cielf]

Except, when I click, it's expanding, but then going to the Item Information screen. I'm using Chrome FWIW.

So, I made the item names link to the items! But I also made clicking the row anywhere expand it. Maybe if I add a little icon at the end of the row to clue them in that they can click the row? Clicking the icon would expand it, but they'd figure out they could technically click anywhere on the row.

Yeah... Maybe putting an explicit "Expand" button would work. Maybe the size of the View/edit/print/reclaim buttons that you would see in the distribution index.

[cielf]

Hey @ChaelCodes -- this is me being cautious -- but I just realized you're using AdminLTE, and I know there was something about AdminLTE not being ready for bootstrap5 in the issue that's prompted Howard's work there -- can you touch base with him, if you haven't already?

[ChaelCodes]

Hey @ChaelCodes -- this is me being cautious -- but I just realized you're using AdminLTE, and I know there was something about AdminLTE not being ready for bootstrap5 in the issue that's prompted Howard's work there -- can you touch base with him, if you haven't already?

I mentioned it to him, but I double-checked based on this comment. @h-m-m says it's okay because we're sticking with AdminLTE for now, and if we want to remove it, we'll have to do a whole site redesign, so it'll just be part of that larger effort.

So, I made the item names link to the items! But I also made clicking the row anywhere expand it. Maybe if I add a little icon at the end of the row to clue them in that they can click the row? Clicking the icon would expand it, but they'd figure out they could technically click anywhere on the row.

Yeah... Maybe putting an explicit "Expand" button would work. Maybe the size of the View/edit/print/reclaim buttons that you would see in the distribution index.

I saw this after implementing +/- icons. The whole row is still clickable, but this hints that it expands. I think we definitely need to provide a hint/clue. Does this look better?

[scooter-dangle]

This makes sense. I want to run this past the stakeholder who mentioned the issue to make sure she doesn't expect to lose value by no longer being able to look down across an entire column.

[ChaelCodes]

This makes sense. I want to run this past the stakeholder who mentioned the issue to make sure she doesn't expect to lose value by no longer being able to look down across an entire column.

This is a good idea. We moved it into a separate tab - Item Inventory, to make sure that we didn't impact banks that can currently scan the whole column.

[scooter-dangle]

This is a good idea. We moved it into a separate tab - Item Inventory, to make sure that we didn't impact banks that can currently scan the whole column.

Nice…thanks!

[scooter-dangle]

Great! Let's mergeroo!