Improve UI for for exports in inventory with stock enabled [SCI-9225]

app/assets/stylesheets/repositories.scss

@@ -1,5 +1,6 @@
 // scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
 // scss-lint:disable NestingDepth ImportantRule
+// scss-lint:disable IdSelector
 
 .repository-show {
   margin: 0;
@@ -100,6 +101,41 @@
     }
   }
 
+  #actionToolbar {
+    #exportDropdown {
+      background-color: var(--sn-white);
+      color: var(--sn-blue);
+      height: 36px;
+
+      &:hover {
+        background-color: var(--sn-blue);
+        color: var(--sn-white);
+      }
+    }
+
+    .sci-dropdown {
+      &.open {
+        [data-toggle="dropdown"] {
+          border-color: transparent;
+          border-radius: .25rem;
+        }
+      }
+
+      .dropdown-menu {
+        padding: .5rem;
+
+        li > a {
+          color: var(--sn-blue);
+          padding: .375rem .625rem;
+
+          &:hover {
+            background-color: $color-concrete;
+          }
+        }
+      }
+    }
+  }
+
   .dataTables_scroll {
     display: flex;
     flex-direction: column;

app/javascript/vue/components/action_toolbar.vue

@@ -11,12 +11,52 @@
         {{ i18n.t('action_toolbar.no_actions') }}
       </div>
       <div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0">
+          <div v-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length > 1" class="export-actions-dropdown sci-dropdown dropup">
+            <button class="btn btn-primary dropdown-toggle single-object-action rounded" type="button" id="exportDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+              <i class="sn-icon sn-icon-export"></i>
+              <span>{{ action.group_label }}</span>
+              <span class="caret pull-right"></span>
+            </button>
+            <ul class="sci-dropdown dropup dropdown-menu dropdown-menu-right px-2" aria-labelledby="<%= id %>">
+              <li v-for="groupAction in action.actions" class="">
+                <a :class="`flex gap-2 items-center bg-sn-white color-sn-blue no-underline ${action.button_class}`"
+                  :href="(['link', 'remote-modal']).includes(groupAction.type) ? groupAction.path : '#'"
+                  :id="groupAction.button_id"
+                  :title="groupAction.label"
+                  :data-url="groupAction.path"
+                  :data-target="groupAction.target"
+                  :data-toggle="groupAction.type === 'modal' && 'modal'"
+                  :data-object-type="groupAction.item_type"
+                  :data-object-id="groupAction.item_id"
+                  :data-action="groupAction.type"
+                  @click="closeExportDropdown($event); doAction(groupAction, $event);">
+                  <span class="sn-action-toolbar__button-text">{{ groupAction.label }}</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.actions[0].button_class}`"
+            v-else-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length == 1"
+            :href="(['link', 'remote-modal']).includes(action.actions[0].type) ? action.actions[0].path : '#'"
+            :id="action.actions[0].button_id"
+            :title="action.group_label"
+            :data-url="action.actions[0].path"
+            :data-target="action.actions[0].target"
+            :data-toggle="action.actions[0].type === 'modal' && 'modal'"
+            :data-object-type="action.actions[0].item_type"
+            :data-object-id="action.actions[0].item_id"
+            :data-action="action.actions[0].type"
+            @click="doAction(action.actions[0], $event);">
+            <i :class="action.actions[0].icon"></i>
+            <span class="sn-action-toolbar__button-text">{{ action.group_label }}</span>
+          </a>
           <a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.button_class}`"
             :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
             :id="action.button_id"
             :title="action.label"
             :data-url="action.path"
             :data-target="action.target"
+            v-else
             :data-toggle="action.type === 'modal' && 'modal'"
             :data-object-type="action.item_type"
             :data-object-id="action.item_id"
@@ -151,6 +191,10 @@
             });
             break;
         }
+      },
+      closeExportDropdown(event) {
+        event.preventDefault();
+        $(event.target).closest('.export-actions-dropdown').removeClass('open')
       }
     }
   }

app/services/toolbars/repository_rows_service.rb

@@ -32,8 +32,7 @@ module Toolbars
         edit_action,
         assign_action,
         duplicate_action,
-        export_items_action,
-        export_consumption_action,
+        export_actions,
         print_label_action,
         archive_action,
         delete_action
@@ -107,7 +106,7 @@ module Toolbars
 
       {
         name: 'export_records',
-        label: I18n.t('repositories.export_records'),
+        label: I18n.t('repositories.exports.records'),
         icon: 'sn-icon sn-icon-export',
         button_class: 'export-repository-row-btn',
         button_id: 'exportRepositoryRowsButton',
@@ -120,7 +119,7 @@ module Toolbars
 
       {
         name: 'export_consumption',
-        label: I18n.t('repositories.export_stock_consumption'),
+        label: I18n.t('repositories.exports.stock_consumption'),
         icon: 'sn-icon sn-icon-reports',
         button_class: 'export-repository-stock-consumption-btn',
         button_id: 'exportStockConsumptionButton',
@@ -128,6 +127,14 @@ module Toolbars
       }
     end
 
+    def export_actions
+      {
+        type: :group,
+        group_label: I18n.t('repositories.exports.export'),
+        actions: [export_items_action, export_consumption_action].compact
+      }
+    end
+
     def print_label_action
       return unless can_read_repository?(@repository)
 

config/locales/en.yml

@@ -2107,8 +2107,10 @@ en:
     archive_record: "Archive"
     restore_record: "Restore"
     print_label: "Print label"
-    export_records: "Export items"
-    export_stock_consumption: "Export consumption"
+    exports:
+      export: "Export"
+      records: "Items"
+      stock_consumption: "Consumption"
     save_record: "Save"
     cancel_save: "Cancel"
     hide_reminders: "Clear all reminders"