Resizable table columns

wazuh · Mar 8, 2019 · d2bf8ee · d2bf8ee
1 parent 6895745
commit d2bf8ee
Show file tree

Hide file tree

Showing 5 changed files with 454 additions and 7 deletions.
diff --git a/public/app.js b/public/app.js
@@ -168,6 +168,8 @@ import './utils/fontawesome/css/font-awesome.min.css';
 // Dev tools
 import './utils/codemirror';
 
+import './utils/table-col-resizable'
+
 // Material
 import 'angular-material/angular-material.css';
 import 'angular-aria/angular-aria';

diff --git a/public/directives/wz-table/wz-table-directive.js b/public/directives/wz-table/wz-table-directive.js
@@ -56,8 +56,11 @@ app.directive('wzTable', function () {
       $sce
     ) {
       $scope.showColumns = false;
+      $scope.showTable = true;
       $scope.originalkeys = $scope.keys.map((key, idx) => ({ key, idx }));
       $scope.updateColumns = key => {
+        $("#wz_table").colResizable({ disable: true });
+        $scope.showTable = false;
         const str = key.key.value || key.key;
         const cleanArray = $scope.keys.map(item => item.value || item);
         if (cleanArray.includes(str)) {
@@ -75,6 +78,8 @@ app.directive('wzTable', function () {
             $scope.keys.push(key.key);
           }
         }
+        init()
+          .then(() => ($scope.setColResizable()))
       };
       $scope.exists = key => {
         const str = key.key.value || key.key;
@@ -114,7 +119,10 @@ app.directive('wzTable', function () {
           $scope.rowsPerPage = calcTableRows($window.innerHeight, rowSizes);
           $scope.itemsPerPage = $scope.rowsPerPage;
           init()
-            .then(() => (resizing = false))
+            .then(() => {
+              resizing = false;
+              if ($scope.customColumns) { $scope.setColResizable() }
+            })
             .catch(() => (resizing = false));
         }, 150);
       };
@@ -241,8 +249,8 @@ app.directive('wzTable', function () {
       /**
        * On controller loads
        */
-      const init = async () =>
-        initTable(
+      const init = async () => {
+        await initTable(
           $scope,
           fetch,
           wzTableFilter,
@@ -252,7 +260,12 @@ app.directive('wzTable', function () {
           globalState,
           $window
         );
-
+        if ($scope.customColumns) {
+          setTimeout(() => {
+            $scope.setColResizable()
+          }, 100);
+        }
+      }
       /**
        * Pagination variables and functions
        */
@@ -445,6 +458,12 @@ app.directive('wzTable', function () {
         }
         $c.remove();
       };
+
+      $scope.setColResizable = () => {
+        $scope.showTable = true;
+        $("#wz_table").colResizable({ liveDrag: true, minWidth: 100, partialRefresh: true, draggingClass: false });
+        $scope.$applyAsync();
+      }
     },
     template
   };

diff --git a/public/directives/wz-table/wz-table.html b/public/directives/wz-table/wz-table.html
@@ -15,9 +15,9 @@
             class="fa fa-fw fa-gear"></i></span>
 </div>
 
-<div layout="row" ng-show="!error && !wazuh_table_loading && items.length" ng-if="!isPolicyMonitoring() && !isSyscheck()">
-    <table class="table table-striped table-condensed table-hover no-margin-bottom" style="table-layout: fixed !important"
-        id="wz_table">
+<div ng-show="!error && !wazuh_table_loading && items.length" ng-if="!isPolicyMonitoring() && !isSyscheck()">
+    <table class="table table-striped table-condensed table-hover no-margin-bottom" ng-class="customColumns ? 'table-resizable' : ''"
+        ng-if="showTable" style="table-layout: fixed !important" id="wz_table">
         <thead class="wz-text-bold">
             <th ng-repeat="key in keys" class="wz-text-left" ng-class="{ 'cursor-pointer' : !key.nosortable, 'col-lg-1' : !key.size, 'col-lg-{{key.size}}' : key.size }"
                 ng-click="!key.nosortable && sort(key)" ng-style="(path === '/agents' && key === 'id') && {'width':'65px'}">

diff --git a/public/less/common.less b/public/less/common.less
@@ -859,3 +859,7 @@ wz-xml-file-editor {
 .table-striped-duo>tbody tr:not(.no-duo):nth-child(4n+1):not(:hover), .table-striped-duo>tbody tr:not(.no-duo):nth-child(4n+2):not(:hover) {
     background: #fff;
 }
+
+.table-resizable>thead th:not(:first-child){
+    border-left: 1px dashed #ddd;
+}