Merge pull request #9363 from jibees/9316-new-action-dropdown-for-bulk-invoice-printing

Admin, Orders list: new actions dropdown for bulk invoice printing

app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee

@@ -10,6 +10,7 @@
           scope.$emit "offClick"
 
     element.click (event) ->
+      return if event.target.closest(".ofn-drop-down").classList.contains "disabled" || event.target.classList.contains "disabled" 
       if !scope.expanded
         event.stopPropagation()
         scope.deregistrationCallback = scope.$on "offClick", ->

app/views/spree/admin/orders/_per_page_controls.html.haml

@@ -1,4 +1,5 @@
-.per-page{'ng-show' => '!RequestMonitor.loading && orders.length > 0'}
+- position ||= ""
+.per-page{'ng-show' => '!RequestMonitor.loading && orders.length > 0', class: ("right" if position == "right") }
   %input.per-page-select.ofn-select2{type: 'number', data: 'per_page_options', 'min-search' => 999, 'ng-model' => 'per_page', 'ng-change' => 'fetchResults()'}
 
   %span.per-page-feedback

app/views/spree/admin/orders/index.html.haml

@@ -20,11 +20,23 @@
   = render partial: 'filters'
 
 .row.index-controls{'ng-show' => '!RequestMonitor.loading && orders.length > 0'}
-  = render partial: 'per_page_controls'
+  %div{style: "display: flex; justify-content: space-between;"}
+    - if Spree::Config[:enable_invoices?]
+      .ofn-drop-down-with-prepend
+        .ofn-drop-down-prepend{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"}
+          {{ selected_orders.length }}
+          =t('.selected')
+        .ofn-drop-down{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"}
+          %span{ :class => 'icon-reorder' }
+            ="#{t('admin.actions')}".html_safe
+          %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
+          %div.menu{ 'ng-show' => "expanded" }
+            %div.menu_item
+              %span.name.invoices-modal{'ng-controller' => 'bulkInvoiceCtrl', 'ng-click' => 'createBulkInvoice()' }
+                = t('.print_invoices')
 
-  - if Spree::Config[:enable_invoices?]
-    %button.invoices-modal{'ng-controller' => 'bulkInvoiceCtrl', 'ng-click' => 'createBulkInvoice()', 'ng-disabled' => 'selected_orders.length == 0'}
-      = t('.print_invoices')
+    
+    = render partial: 'per_page_controls', locals: { position: "right" }
 
 %table#listing_orders.index.responsive{width: "100%", 'ng-init' => 'initialise()', 'ng-show' => "!RequestMonitor.loading && orders.length > 0" }
   %colgroup

app/webpacker/css/admin/components/per_page_controls.scss

@@ -1,6 +1,17 @@
 .per-page {
   float: left;
 
+  &.right {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+
+    .per-page-feedback {
+      margin-right: 1em;
+      margin-left: 0;
+    }
+  }
+
   .per-page-feedback {
     margin-left: 1em;
   }

app/webpacker/css/admin/dropdown.scss

@@ -11,14 +11,12 @@
 	color: #575757;
 }
 
-.ofn-drop-down {
+@mixin ofn-drop-down-style {
 	padding: 7px 15px;
 	border-radius: 3px;
 	border: 1px solid #d4d4d4;
 	background-color: #f5f5f5;
-	position: relative;
 	display: block;
-	float: left;
 	color: #828282;
 	cursor: pointer;
 	-moz-user-select: none;
@@ -29,6 +27,47 @@
 	text-align: center;
   margin-right: 10px;
 
+	&.disabled {
+		opacity: 0.5;
+		
+		&:hover {
+			cursor: default;
+			border-color: #d4d4d4;
+			color: #828282;
+		}
+	}
+}
+
+.ofn-drop-down-with-prepend {
+	display: flex;
+
+	&.right {
+		float: right;
+
+	}
+
+	.ofn-drop-down {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.ofn-drop-down-prepend {
+		@include ofn-drop-down-style;
+		
+		border-right: none;
+		margin-left: 0;
+		margin-right: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		cursor: default;
+	}
+}
+
+.ofn-drop-down {
+	@include ofn-drop-down-style;
+	position: relative;
+	float: left;
+
 	&.right {
 		float: right;
     margin-right: 0px;

config/locales/en.yml

@@ -3768,6 +3768,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
           results_found: "%{number} Results found."
           viewing: "Viewing %{start} to %{end}."
           print_invoices: "Print Invoices"
+          selected: selected
         sortable_header:
           payment_state: "Payment State"
           shipment_state: "Shipment State"

spec/system/admin/orders_spec.rb

@@ -113,12 +113,14 @@ describe '
         page.find("#listing_orders thead th:first-child input[type=checkbox]").click
         expect(page.find("#listing_orders tbody tr td:first-child input[type=checkbox]")).to be_checked
         # enables print invoices button
-        expect(page).to have_button('Print Invoices', disabled: false)
+        page.find("span.icon-reorder", text: "ACTIONS").click
+        expect(page).to have_content "Print Invoices"
         # unselect all orders
         page.find("#listing_orders thead th:first-child input[type=checkbox]").click
         expect(page.find("#listing_orders tbody tr td:first-child input[type=checkbox]")).to_not be_checked
         # disables print invoices button
-        expect(page).to have_button('Print Invoices', disabled: true)
+        page.find("span.icon-reorder", text: "ACTIONS").click
+        expect(page).to_not have_content "Print Invoices"
       end
     end