Fixed issue #406

b

app/global-translations/locale-en.json

@@ -756,6 +756,7 @@
     "#Buttons": "..",
     "label.button.run": "Run",
     "label.button.createreport": "Create Report",
+    "label.button.parameters":"Parameters",
 
     "#Misc Labels": "..",
     "label.selectallowedparameter": "Select allowed parameter",

app/scripts/directives/ScrollbarTopDirective.js

@@ -0,0 +1,85 @@
+(function(module) {
+    mifosX.directives = _.extend(module, {
+        ScrollbarTopDirective: function() {
+            return {
+                link: function(scope, element, attrs) {
+                    // ng-repeat delays the actual width of the element.
+                    // this listens for the change and updates the scroll bar
+                    function widthListener() {
+                        if (anchor.width() != lastWidth)
+                            updateScroll();
+                    }
+
+                    function updateScroll() {
+                        // for whatever reason this gradually takes away 1 pixel when it sets the width.
+                        $div2.width(anchor.width() + 1);
+
+                        // make the scroll bars the same width
+                        $div1.width($div2.width());
+
+                        // sync the real scrollbar with the virtual one.
+                        $wrapper1.scroll(function(){
+                            $wrapper2.scrollLeft($wrapper1.scrollLeft());
+                        });
+
+                        // sync the virtual scrollbar with the real one.
+                        $wrapper2.scroll(function(){
+                            $wrapper1.scrollLeft($wrapper2.scrollLeft());
+                        });
+                    }
+
+                    var anchor = element.find('[data-anchor]'),
+                        lastWidth = anchor.width(),
+                        listener;
+
+                    // so that when you go to a new link it stops listening
+                    element.on('remove', function() {
+                        clearInterval(listener);
+                    });
+
+                    // creates the top virtual scrollbar
+                    element.wrapInner("<div class='div2' />");
+                    element.wrapInner("<div class='wrapper2' />");
+
+                    // contains the element with a real scrollbar
+                    element.prepend("<br/><div class='wrapper1'><div class='div1'></div></div>");
+
+                    var $wrapper1 = element.find('.wrapper1'),
+                        $div1 = element.find('.div1'),
+                        $wrapper2 = element.find('.wrapper2'),
+                        $div2 = element.find('.div2')
+
+                    // force our virtual scrollbar to work the way we want.
+                    $wrapper1.css({
+                        float: "left",
+                        width: "100%",
+                        border: "none 0px rgba(0, 0, 0, 0)",
+                        overflowX: "scroll",
+                        overflowY: "hidden",
+                        height: "20px"
+                    });
+
+                    $div1.css({
+                        height: "20px"
+                    });
+
+                    $wrapper2.css({
+                        width: "100%",
+                        overflowX: "scroll"
+                    });
+
+                    listener = setInterval(function() {
+                        widthListener();
+                    }, 650);
+
+                    updateScroll();
+                }
+            }
+
+        }
+    });
+}(mifosX.directives || {}));
+
+mifosX.ng.application.directive("scroll", [mifosX.directives.ScrollbarTopDirective]).run(function($log) {
+    $log.info("ScrollbarTopDirective initialized");
+});

app/scripts/mifosXComponents.js

@@ -178,7 +178,8 @@ define(['underscore', 'mifosX'], function() {
       'FormValidateDirective',
       'FormSubmitValidateDirective',
       'ApiValidationDirective',
-      'ActivitiesDisplayPanelDirective'
+      'ActivitiesDisplayPanelDirective',
+      'ScrollbarTopDirective'
     ]
   };
 

app/styles/app.css

@@ -917,4 +917,5 @@ nav:hover:after{
 
 .pointer:hover{
     color:deepskyblue;
-}
+}
+

app/views/reports/run_reports.html

@@ -1,7 +1,7 @@
 <div class="row alert-block form-horizontal span" ng-controller="RunReportsController">
     <api-validate></api-validate>
     <div class="row alert-block span" >
-        <h3><b>{{reportName}}</b>&nbsp;<a class="btn" ng-show="checkStatus()" ng-click="isCollapsed=!isCollapsed"><i class="icon-sort-down icon-white"></i></a></h3>
+        <h3><b>{{reportName}}</b>&nbsp;<a class="btn btn-primary" ng-show="checkStatus()" ng-click="isCollapsed=!isCollapsed">{{ 'label.button.parameters' | translate }}<i class="icon-sort-down icon-white"></i></a></h3>
     </div>
 
     <div ng-hide="isCollapsed" class="row alert-block span">
@@ -34,23 +34,22 @@
         </div>
         <span><a ng-click="runReport()" class="btn btn-primary control"><i class="icon-play icon-white"></i>&nbsp;&nbsp;{{ 'label.button.run' | translate }}</a></span>
     </div>
-
     <div data-ng-hide="hideTable">
-        <br>
-        <table class="table table-striped table-bordered">
-            <thead>
+        <div scroll>
+            <table class="table table-striped table-bordered" data-anchor>
+                <thead>
                 <tr class="graybg">
                     <th ng-repeat="columnHeader in reportData.columnHeaders" >{{columnHeader.columnName}}</th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 <tr ng-repeat="row in reportData.data" >
                     <td ng-repeat="col in row.row" >{{col}}</td>
                 </tr>
-            </tbody>
-        </table>
+                </tbody>
+            </table>
+        </div>
     </div>
-
     <div collapse="hidePentahoReport" class="row alert-block span tab-content">
         <br>
         <iframe id=rptLoadingFrame src="{{baseURL}}" frameborder="0" width="100%" height="600px"></iframe>';