ATLAS-1964 : UI, Support to resize and order columns in Search table

dashboardv2/gruntfile.js

@@ -103,7 +103,8 @@ module.exports = function(grunt) {
                     'query-builder.standalone.min.js': { 'jQuery-QueryBuilder/dist/js': 'jQueryQueryBuilder/js' },
                     'daterangepicker.js': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/js' },
                     'nv.d3.min.js': { 'nvd3/build': 'nvd3' },
-                    'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' }
+                    'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' },
+                    'table-dragger.js': { 'table-dragger/dist': 'table-dragger' }
                 }
 
             },
@@ -164,6 +165,7 @@ module.exports = function(grunt) {
                         { 'nvd3': 'nvd3/' }
                     ],
                     'license.txt': [{ 'backbone.marionette': 'backbone-marionette' }],
+                    'license': [{ 'table-dragger': 'table-dragger' }],
                     'LICENSE-MIT': [{ 'backbone.paginator': 'backbone-paginator' },
                         { 'backgrid': 'backgrid' },
                         { 'backgrid-filter': 'backgrid-filter' },

dashboardv2/package.json

@@ -44,6 +44,7 @@
     "requirejs": "2.3.3",
     "requirejs-text": "2.0.15",
     "select2": "4.0.3",
+    "table-dragger": "^1.0.2",
     "underscore": "1.8.3"
   },
   "devDependencies": {

dashboardv2/public/css/scss/search.scss

@@ -102,4 +102,23 @@ $color_celeste_approx: #1D1F2B;
     .btn {
         display: block;
     }
+}
+
+.gu-mirror {
+    .table-quickMenu {
+        border: none;
+        td {
+            height: 54px;
+        }
+    }
+}
+
+.sindu_dragger {
+    @extend .gu-mirror;
+    .gu-transit {
+        box-shadow: 0px 1px 15px inset;
+    }
+    table {
+        background: rgba(0, 0, 0, 0.18) !important;
+    }
 }
\ No newline at end of file

dashboardv2/public/js/main.js

@@ -159,7 +159,8 @@ require.config({
         'query-builder': 'libs/jQueryQueryBuilder/js/query-builder.standalone.min',
         'daterangepicker': 'libs/bootstrap-daterangepicker/js/daterangepicker',
         'nvd3': 'libs/nvd3/nv.d3.min',
-        'sparkline': 'libs/sparkline/jquery.sparkline.min'
+        'sparkline': 'libs/sparkline/jquery.sparkline.min',
+        'table-dragger' : 'libs/table-dragger/table-dragger'
     },
 
     /**

dashboardv2/public/js/utils/Utils.js

@@ -448,7 +448,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
         titleBoxEl.fadeIn();
     }
     Utils.findAndMergeRefEntity = function(attributeObject, referredEntities) {
-        var megeObject = function(obj) {
+        var mergeObject = function(obj) {
             if (obj) {
                 if (obj.attributes) {
                     Utils.findAndMergeRefEntity(obj.attributes, referredEntities);
@@ -462,10 +462,10 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
                 if (_.isObject(obj)) {
                     if (_.isArray(obj)) {
                         _.each(obj, function(value) {
-                            megeObject(value);
+                            mergeObject(value);
                         });
                     } else {
-                        megeObject(obj);
+                        mergeObject(obj);
                     }
                 }
             });

dashboardv2/public/js/views/search/SearchResultLayoutView.js

@@ -18,6 +18,7 @@
 
 define(['require',
     'backbone',
+    'table-dragger',
     'hbs!tmpl/search/SearchResultLayoutView_tmpl',
     'modules/Modal',
     'models/VEntity',
@@ -29,7 +30,7 @@ define(['require',
     'utils/Messages',
     'utils/Enums',
     'utils/UrlLinks'
-], function(require, Backbone, SearchResultLayoutViewTmpl, Modal, VEntity, Utils, Globals, VSearchList, VCommon, CommonViewFunction, Messages, Enums, UrlLinks) {
+], function(require, Backbone, tableDragger, SearchResultLayoutViewTmpl, Modal, VEntity, Utils, Globals, VSearchList, VCommon, CommonViewFunction, Messages, Enums, UrlLinks) {
     'use strict';
 
     var SearchResultLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -129,6 +130,7 @@ define(['require',
                 this.bradCrumbList = [];
                 this.arr = [];
                 this.searchType = 'Basic Search';
+                this.columnOrder = null;
                 if (this.value) {
                     if (this.value.searchType && this.value.searchType == 'dsl') {
                         this.searchType = 'Advanced Search';
@@ -239,7 +241,7 @@ define(['require',
                     },
                     gridOpts: {
                         emptyText: 'No Record found!',
-                        className: 'table table-hover backgrid table-quickMenu'
+                        className: 'table table-hover backgrid table-quickMenu colSort'
                     },
                     filterOpts: {},
                     paginatorOpts: {}
@@ -494,7 +496,7 @@ define(['require',
                         },
                         setPositions: function() {
                             _.each(this.models, function(model, index) {
-                                model.set("displayOrder", index + 1, { silent: true });
+                                model.set("displayOrder", (that.columnOrder == null ? index : that.columnOrder[model.get('label')]) + 1, { silent: true });
                             });
                             return this;
                         }
@@ -511,9 +513,19 @@ define(['require',
                         that.ui.containerCheckBox.hide();
                     }
                     that.$(".ellipsis .inputAssignTag").hide();
+                    tableDragger(document.querySelector(".colSort")).on('drop', function(from, to, el) {
+                        that.columnOrder = that.getColumnOrder(el.querySelectorAll('th'));
+                    });
                     that.checkTableFetch();
                 });
             },
+            getColumnOrder: function(arr) {
+                var obj = {};
+                for (var i = 0; i < arr.length; ++i) {
+                    obj[(arr[i].innerText == "" ? 'Select' : arr[i].innerText)] = i;
+                }
+                return obj;
+            },
             checkTableFetch: function() {
                 if (this.asyncFetchCounter <= 0) {
                     this.hideLoader();