Working on reports

app/Ninja/Reports/AbstractReport.php

@@ -75,7 +75,11 @@ class AbstractReport
             $class = count($class) ? implode(' ', $class) : 'group-false';
             $label = trans("texts.{$field}");
 
-            $columns_labeled[] = ['label' => $label, 'class' => $class, 'key' => $field];
+            $columns_labeled[] = [
+                'label' => $label,
+                'class' => $class,
+                'key' => $field
+            ];
         }
 
         return $columns_labeled;
@@ -87,7 +91,7 @@ class AbstractReport
         $str = '';
 
         foreach ($columns_labeled as $field => $attr)
-            $str .= "<th class=\"{$attr['class']}\">{$attr['label']}</th>";
+            $str .= "<th class=\"{$attr['class']}\" data-priority=\"3\">{$attr['label']}</th>";
 
         return $str;
     }

gulpfile.js

@@ -125,6 +125,7 @@ elixir(function(mix) {
         bowerDir + '/tablesorter/dist/js/widgets/widget-grouping.min.js',
         bowerDir + '/tablesorter/dist/js/widgets/widget-uitheme.min.js',
         bowerDir + '/tablesorter/dist/js/widgets/widget-filter.min.js',
+        bowerDir + '/tablesorter/dist/js/widgets/widget-columnSelector.min.js',
     ], 'public/js/tablesorter.min.js');
 
     mix.scripts([

resources/lang/en/texts.php

@@ -2654,6 +2654,7 @@ $LANG = array(
     'custom_fields_tip' => 'Use <code>Label|Option1,Option2</code> to show a select box.',
     'client_information' => 'Client Information',
     'updated_client_details' => 'Successfully updated client details',
+    'auto' => 'Auto',
 
 );
 

resources/views/reports/report_builder.blade.php

@@ -3,14 +3,14 @@
 @section('head')
 	@parent
 
-    <script src="{{ asset('js/daterangepicker.min.js') }}" type="text/javascript"></script>
-    <link href="{{ asset('css/daterangepicker.css') }}" rel="stylesheet" type="text/css"/>
+    <script src="{{ asset('js/daterangepicker.min.js') }}?no_cache={{ NINJA_VERSION }}" type="text/javascript"></script>
+    <link href="{{ asset('css/daterangepicker.css') }}?no_cache={{ NINJA_VERSION }}" rel="stylesheet" type="text/css"/>
 
-    <link href="{{ asset('css/tablesorter.css') }}" rel="stylesheet" type="text/css"/>
-    <script src="{{ asset('js/tablesorter.min.js') }}" type="text/javascript"></script>
+    <link href="{{ asset('css/tablesorter.css') }}?no_cache={{ NINJA_VERSION }}" rel="stylesheet" type="text/css"/>
+    <script src="{{ asset('js/tablesorter.min.js') }}?no_cache={{ NINJA_VERSION }}" type="text/javascript"></script>
 
-	<link href="{{ asset('css/select2.css') }}" rel="stylesheet" type="text/css"/>
-    <script src="{{ asset('js/select2.min.js') }}" type="text/javascript"></script>
+	<link href="{{ asset('css/select2.css') }}?no_cache={{ NINJA_VERSION }}" rel="stylesheet" type="text/css"/>
+    <script src="{{ asset('js/select2.min.js') }}?no_cache={{ NINJA_VERSION }}" type="text/javascript"></script>
 
 	<style type="text/css">
 		table.tablesorter th {
@@ -22,6 +22,14 @@
 			width: 100%;
 		}
 
+		.tablesorter-column-selector label {
+			display: block;
+		}
+
+		.tablesorter-column-selector input {
+			margin-right: 8px;
+		}
+
 	</style>
 
 @stop
@@ -232,11 +240,22 @@
 				->appendIcon(Icon::create('time')) !!}
 
 	 	</span> &nbsp;&nbsp;
+
 		{!! Button::success(trans('texts.run'))
 				->withAttributes(array('id' => 'submitButton'))
 				->submit()
 				->appendIcon(Icon::create('play'))
 				->large() !!}
+
+		<button id="popover" type="button" class="btn btn-default btn-lg">
+		  {{ trans('texts.columns') }}
+		  {!! Icon::create('th-list') !!}
+		</button>
+
+		<div class="hidden">
+		  <div id="popover-target"></div>
+		</div>
+
 	</center>
 
 	@if (request()->report_type)
@@ -279,16 +298,6 @@
 		<p>&nbsp;</p>
         @endif
 
-		<!--
-		<div class="columnSelectorWrapper">
-		  <input id="colSelect1" type="checkbox" class="hidden">
-		  <label class="columnSelectorButton" for="colSelect1">Column</label>
-
-		  <div id="columnSelector" class="columnSelector">
-		  </div>
-		</div>
-		-->
-
         <table class="tablesorter tablesorter-data" style="display:none">
         <thead>
             <tr>
@@ -526,7 +535,7 @@
 					return direction ? a - b : b - a;
 				},
 				widgetOptions : {
-					columnSelector_container : $('#columnSelector'),
+					columnSelector_mediaqueryName: "{{ trans('texts.auto') }}",
 					filter_cssFilter: 'form-control',
 					group_collapsed: true,
 					group_saveGroups: false,
@@ -548,6 +557,16 @@
 			    }
 			}).show();
 
+			// call this function to copy the column selection code into the popover
+			$.tablesorter.columnSelector.attachTo( $('.tablesorter-data'), '#popover-target');
+
+			$('#popover')
+			  .popover({
+				placement: 'right',
+				html: true, // required if content has HTML
+				content: $('#popover-target')
+			  });
+
 			$(".tablesorter-totals").tablesorter({
 				theme: 'bootstrap',
 				widgets: ['zebra', 'uitheme'],