Add new table with collapsible locations for banks with many locations

The "Items, Quantity, and Location" table has a nasty horizontal scroll
if the bank has many locations, which can be common for banks that allow
volunteers to take inventory back to their residences to package into
kits. This is very unwieldly for them, but other banks with few
locations have a great scannable view of where their inventory is. We're
reproducing this table with the locations collapsed under a heading for
banks with many locations in a new tab to preserve the experience for
banks with few locations.

ExpandableTable from AdminLTE is being used to handle the expansion.
Location is being stored slightly differently in the query to make it
easier to access.

app/queries/items_by_storage_collection_and_quantity_query.rb

@@ -18,15 +18,17 @@ def call
     @items_by_storage_collection.each do |row|
       unless @items_by_storage_collection_and_quantity.key?(row.id)
         @items_by_storage_collection_and_quantity[row.id] = {
+          item_id: row.id,
           item_name: row.name,
           item_on_hand_minimum_quantity: row.on_hand_minimum_quantity,
           item_on_hand_recommended_quantity: row.on_hand_recommended_quantity,
           item_value: row.value_in_cents,
-          item_barcode_count: row.barcode_count
+          item_barcode_count: row.barcode_count,
+          locations: {},
+          quantity: 0
         }
       end
-      @items_by_storage_collection_and_quantity[row.id][row.storage_id] = row.quantity
-      @items_by_storage_collection_and_quantity[row.id][:quantity] ||= 0
+      @items_by_storage_collection_and_quantity[row.id][:locations][row.storage_name] = row.quantity
       @items_by_storage_collection_and_quantity[row.id][:quantity] += row.quantity || 0
     end
 

app/views/items/_item_row_inventory.html.erb

@@ -0,0 +1,14 @@
+<% row_item = row.last %>
+<tr data-widget="expandable-table" aria-expanded="false">
+  <td><%= link_to(row_item[:item_name], item_url(row_item[:item_id])) %></td>
+  <td class="numeric"><%= row_item[:quantity] %></td>
+  <td class="numeric"><%= row_item[:item_on_hand_minimum_quantity] %></td>
+  <td class="numeric"><%= row_item[:item_on_hand_recommended_quantity] %></td>
+</tr>
+<tr class="expandable-body">
+  <td colspan="4">
+    <% row_item[:locations].each do |location_name, quantity| %>
+      <p><%= "#{location_name} - #{quantity} units" %></p>
+    <% end %>
+  </td>
+</tr>

app/views/items/_items_inventory.html.erb

@@ -0,0 +1,20 @@
+<div class="tab-pane fade" id="custom-tabs-three-inventory" role="tabpanel" aria-labelledby="custom-tabs-three-inventory-tab">
+  <div class='flex justify-end mb-4'>
+    <%= new_button_to new_item_path(organization_id: current_organization), {text: "New Item"} %>
+  </div>
+
+  <table class="table table-items-location">
+    <thead>
+    <tr>
+      <th>Name</th>
+      <th class="numeric">Quantity</th>
+      <th class="numeric">Minimum Quantity</th>
+      <th class="numeric">Recommended Quantity</th>
+    </tr>
+    </thead>
+    <tbody>
+      <%= render partial: "item_row_inventory", collection: @items_by_storage_collection_and_quantity, as: :row %>
+    </tbody>
+  </table>
+</div><!-- /.box-body.table-responsive -->
+

app/views/items/index.html.erb

@@ -76,12 +76,16 @@
               </li>
               </li>
               <li class="nav-item">
-                <a class="nav-link" id="custom-tabs-three-profile-tab" data-toggle="pill" href="#custom-tabs-three-categories" role="tab" aria-controls="custom-tabs-three-categories" aria-selected="false">Item Categories</a>
+                <a class="nav-link" id="custom-tabs-three-categories-tab" data-toggle="pill" href="#custom-tabs-three-categories" role="tab" aria-controls="custom-tabs-three-categories" aria-selected="false">Item Categories</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" id="custom-tabs-three-profile-tab" data-toggle="pill" href="#custom-tabs-three-profile" role="tab" aria-controls="custom-tabs-three-profile" aria-selected="false">Items,
                   Quantity, and Location</a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" id="custom-tabs-three-inventory-tab" data-toggle="pill" href="#custom-tabs-three-inventory" role="tab" aria-controls="custom-tabs-three-inventory" aria-selected="false">
+                  Item Inventory</a>
+              </li>
               <li class="nav-item">
                 <a class="nav-link" id="custom-tabs-three-kits-tab" data-toggle="pill" href="#custom-tabs-three-kits" role="tab" aria-controls="custom-tabs-three-kits" aria-selected="false">Kits</a>
               </li>
@@ -92,6 +96,7 @@
               <%= render partial: 'item_list', locals: { items: @items } %>
               <%= render partial: 'item_categories', locals: { item_categories: @item_categories } %>
               <%= render partial: 'items_quantity_and_location' %>
+              <%= render partial: 'items_inventory' %>
               <%= render partial: 'kits' %>
             </div>
           </div>

spec/system/item_system_spec.rb

@@ -189,6 +189,22 @@
       expect(tab_items_quantity_location_text).to have_content item_pullups.name
       expect(tab_items_quantity_location_text).to have_content item_tampons.name
     end
+
+    it "should display items in separate tabs", js: true do
+      click_link "Item Inventory" # href="#sectionD"
+      tab_items_quantity_location_text = page.find(".table-items-location", visible: true).text
+      expect(tab_items_quantity_location_text).to have_content "Quantity"
+      expect(tab_items_quantity_location_text).to have_content storage_name
+      expect(tab_items_quantity_location_text).to have_content num_pullups_in_donation
+      expect(tab_items_quantity_location_text).to have_content num_pullups_second_donation
+      expect(tab_items_quantity_location_text).to have_content num_pullups_in_donation + num_pullups_second_donation
+      expect(tab_items_quantity_location_text).to have_content num_tampons_in_donation
+      expect(tab_items_quantity_location_text).to have_content num_tampons_second_donation
+      expect(tab_items_quantity_location_text).to have_content num_tampons_in_donation + num_tampons_second_donation
+      expect(tab_items_quantity_location_text).to have_content item_pullups.name
+      expect(tab_items_quantity_location_text).to have_content item_tampons.name
+      click_link item_pullups.name # href="#sectionD"
+    end
   end
 
   describe 'Item Category Management' do