Reports: Improve UI

app/views/admin/reports/_date_range_form.html.haml

@@ -1,9 +1,9 @@
 .row.date-range-filter
-  = label_tag nil, t(:date_range)
-  %br
-  = label_tag nil, t(:start), :class => 'inline'
-  = text_field_tag "q[order_completed_at_gt]", params.dig(:q, :order_completed_at_gt), :class => 'datetimepicker datepicker-from'
-  %span.range-divider
-    %i.icon-arrow-right
-  = text_field_tag "q[order_completed_at_lt]", params.dig(:q, :order_completed_at_lt), :class => 'datetimepicker datepicker-to'
-  = label_tag nil, t(:end), :class => 'inline'
+  .alpha.two.columns
+    = label_tag nil, t(:date_range)
+  .omega.fourteen.columns
+    = text_field_tag "q[order_completed_at_gt]", params.dig(:q, :order_completed_at_gt), :class => 'datetimepicker datepicker-from', :placeholder => t(:start)
+    %span.range-divider
+      %i.icon-arrow-right
+    = text_field_tag "q[order_completed_at_lt]", params.dig(:q, :order_completed_at_lt), :class => 'datetimepicker datepicker-to', :placeholder => t(:stop)
+

app/views/admin/reports/_rendering_options.html.haml

@@ -1,8 +1,8 @@
 .row.rendering-options
-  = label_tag :report_format, t(".generate_report")
-  %br
-  = select_tag :report_format, options_for_select({t('.on_screen') => '', t('.csv_spreadsheet') => 'csv', t('.excel_spreadsheet') => 'xlsx', t('.openoffice_spreadsheet') => 'ods'})
-
+  .alpha.two.columns
+    = label_tag :report_format, t(".generate_report")
+  .omega.fourteen.columns
+    = select_tag :report_format, options_for_select({t('.on_screen') => '', t('.csv_spreadsheet') => 'csv', t('.excel_spreadsheet') => 'xlsx', t('.openoffice_spreadsheet') => 'ods'})
   -#.inline-checkbox
   -#  = check_box_tag "options[exclude_summaries]", true, params[:options].andand[:exclude_summaries]
   -#  = label_tag t(".hide_summary_rows")

app/views/admin/reports/_table.html.haml

@@ -15,6 +15,3 @@
       - if @report.table_rows.empty?
         %tr
           %td{colspan: @report.table_headers.count}= t(:none)
-- else
-  %p.report__message
-    = t(".select_and_search", option: msg_option.upcase)

app/views/admin/reports/packing.html.haml

@@ -1,31 +1,36 @@
 = form_tag main_app.admin_reports_path, report_type: 'packing' do
-  = render partial: 'date_range_form'
+  %fieldset.no-border-bottom
+    %legend{ align: 'center'}= t(:report_filters)
+    = render partial: 'date_range_form'
 
-  .row
-    .alpha.two.columns= label_tag nil, t(:report_hubs)
-    .omega.fourteen.columns
-      = collection_select("q", "order_distributor_id_in", @distributors, :id, :name, {selected: params.dig(:q, :order_distributor_id_in)}, {class: "select2 fullwidth", multiple: true})
+    .row
+      .alpha.two.columns= label_tag nil, t(:report_hubs)
+      .omega.fourteen.columns
+        = collection_select("q", "order_distributor_id_in", @distributors, :id, :name, {selected: params.dig(:q, :order_distributor_id_in)}, {class: "select2 fullwidth", multiple: true})
 
-  .row
-    .alpha.two.columns= label_tag nil, t(:report_producers)
-    .omega.fourteen.columns
-      = select_tag("q[supplier_id_in]", options_from_collection_for_select(@suppliers, :id, :name, params.dig(:q, :supplier_id_in)), {class: "select2 fullwidth", multiple: true})
+    .row
+      .alpha.two.columns= label_tag nil, t(:report_producers)
+      .omega.fourteen.columns
+        = select_tag("q[supplier_id_in]", options_from_collection_for_select(@suppliers, :id, :name, params.dig(:q, :supplier_id_in)), {class: "select2 fullwidth", multiple: true})
 
-  .row
-    .alpha.two.columns= label_tag nil, t(:report_customers_cycle)
-    .omega.fourteen.columns
-      = select_tag("q[order_cycle_id_in]", options_for_select(report_order_cycle_options(@order_cycles), params.dig(:q, :order_cycle_id_in)), {class: "select2 fullwidth", multiple: true})
+    .row
+      .alpha.two.columns= label_tag nil, t(:report_customers_cycle)
+      .omega.fourteen.columns
+        = select_tag("q[order_cycle_id_in]", options_for_select(report_order_cycle_options(@order_cycles), params.dig(:q, :order_cycle_id_in)), {class: "select2 fullwidth", multiple: true})
 
-  .row
-    .alpha.two.columns= label_tag nil, t(:report_type)
-    .omega.fourteen.columns
-      = select_tag(:report_subtype, options_for_select(@report_subtypes, @report_subtype))
+  %fieldset
+    %legend{ align: 'center'}= t(:report_display_options)
+    .row
+      .alpha.two.columns= label_tag nil, t(:report_type)
+      .omega.fourteen.columns
+        = select_tag(:report_subtype, options_for_select(@report_subtypes, @report_subtype))
 
-  = render partial: "rendering_options"
+    = render partial: "rendering_options"
 
-  .row
-  = button t(:search)
+    .actions.filter-actions
+      = button t(:go), "report__submit-btn"
 
-= render partial: "spree/admin/reports/customer_names_message"
+- if params[:q].present?
+  = render partial: "spree/admin/reports/customer_names_message"
 
-= render "table", id: "listing_orders", msg_option: t(:search)
+= render "table", id: "listing_orders"

app/views/spree/admin/reports/_customer_names_message.html.haml

@@ -1,2 +1,2 @@
-%p.customer-names-tip
+%p.report__message
   = t(".customer_names_tip")

app/views/spree/admin/reports/_date_range_form.html.haml

@@ -1,9 +1,7 @@
 .row.date-range-filter
-  = label_tag nil, t(:date_range)
-  %br
-  = label_tag nil, t(:start), :class => 'inline'
-  = f.text_field :completed_at_gt, :class => 'datetimepicker datepicker-from'
-  %span.range-divider
-    %i.icon-arrow-right
-  = f.text_field :completed_at_lt, :class => 'datetimepicker datepicker-to'
-  = label_tag nil, t(:end), :class => 'inline'
+  .alpha.two.columns= label_tag nil, t(:date_range)
+  .omega.fourteen.columns
+    = f.text_field :completed_at_gt, :class => 'datetimepicker datepicker-from', :placeholder => t(:start)
+    %span.range-divider
+      %i.icon-arrow-right
+    = f.text_field :completed_at_lt, :class => 'datetimepicker datepicker-to', :placeholder => t(:stop)

app/views/spree/admin/reports/_table.html.haml

@@ -18,6 +18,3 @@
       - if @table.empty?
         %tr
           %td{colspan: @header.count}= t(:none)
-- else
-  %p.report__message
-    = t(".select_and_search", option: msg_option.upcase)

app/views/spree/admin/reports/orders_and_distributors.html.haml

@@ -6,6 +6,7 @@
   %br
   = button t(:search)
 
-= render partial: "customer_names_message"
+- if render_content?
+  = render partial: "customer_names_message"
 
 = render "table", id: "listing_orders", msg_option: t(:search)

app/views/spree/admin/reports/orders_and_fulfillment.html.haml

@@ -25,6 +25,7 @@
   .row
   = button t(:search)
 
-= render partial: "customer_names_message"
+- if render_content?
+  = render partial: "customer_names_message"
 
 = render "table", id: "listing_orders", msg_option: t(:search)

app/webpacker/css/admin/components/date-picker.scss

@@ -3,6 +3,7 @@
 .date-range-filter {
   .range-divider {
     padding: 0;
+    margin-left: 5px;
   }
   input.datepicker {
     width: 96px !important;

app/webpacker/css/admin/reports.scss

@@ -27,3 +27,8 @@
     float: left;
   }
 }
+
+.report__submit-btn {
+  margin: 0 !important;
+  width: 120px;
+}

config/locales/en.yml

@@ -1330,7 +1330,7 @@ en:
           is_temperature_controlled: "TempControlled?"
           temp_controlled: "TempControlled?"
       rendering_options:
-        generate_report: "Generate report:"
+        generate_report: "Generate report"
         on_screen: "On screen"
         csv_spreadsheet: "CSV Spreadsheet"
         excel_spreadsheet: "Excel Spreadsheet"
@@ -2622,20 +2622,22 @@ See the %{link} to find out more about %{sitename}'s features and to start using
   report_customers_cycle: "Order Cycle"
   report_customers_type: "Report Type"
   report_customers_csv: "Download as csv"
-  report_producers: "Producers: "
-  report_type: "Report Type: "
-  report_hubs: "Hubs: "
-  report_payment: "Payment Methods: "
-  report_distributor: "Distributor: "
+  report_producers: "Producers"
+  report_type: "Report Type"
+  report_hubs: "Hubs"
+  report_payment: "Payment Methods"
+  report_distributor: "Distributor"
   report_payment_by: 'Payments By Type'
   report_itemised_payment: 'Itemised Payment Totals'
   report_payment_totals: 'Payment Totals'
   report_all: 'all'
-  report_order_cycle: "Order Cycle: "
-  report_enterprises: "Enterprises: "
-  report_users: "Users: "
+  report_order_cycle: "Order Cycle"
+  report_enterprises: "Enterprises"
+  report_users: "Users"
   report_tax_rates: Tax rates
   report_tax_types: Tax types
+  report_filters: Report Filters
+  report_display_options: Display Options
   report_header_order_cycle: Order Cycle
   report_header_user: User
   report_header_email: Email

spec/system/admin/reports_spec.rb

@@ -39,7 +39,6 @@ describe '
     it "customers report" do
       click_link "Mailing List"
       expect(page).to have_select('report_type', selected: 'Mailing List')
-      expect(page).to have_content "click on GO"
       click_button "Go"
 
       rows = find("table#listing_customers").all("thead tr")