#21 Add case template tasks drag&drop ordering

TheHive-Project · Apr 4, 2017 · 4264bd2 · 4264bd2
1 parent fbdc881
commit 4264bd2
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 9 deletions.
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -97,6 +97,8 @@
     <script src="bower_components/angular-page-loader/dist/angular-page-loader.js"></script>
     <script src="bower_components/angular-images-resizer/angular-images-resizer.js"></script>
     <script src="bower_components/angular-base64-upload/src/angular-base64-upload.js"></script>
+    <script src="bower_components/jquery-ui/jquery-ui.js"></script>
+    <script src="bower_components/angular-ui-sortable/sortable.js"></script>
     <!-- endbower -->
 
     <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>

diff --git a/ui/app/scripts/app.js b/ui/app/scripts/app.js
@@ -3,7 +3,7 @@ angular.module('theHiveServices', []);
 angular.module('theHiveFilters', []);
 angular.module('theHiveDirectives', []);
 
-angular.module('thehive', ['ngAnimate', 'ngMessages', 'ui.bootstrap', 'ui.router',
+angular.module('thehive', ['ngAnimate', 'ngMessages', 'ui.bootstrap', 'ui.router', 'ui.sortable',
         'theHiveControllers', 'theHiveServices', 'theHiveFilters',
         'theHiveDirectives', 'yaru22.jsonHuman', 'timer', 'angularMoment', 'ngCsv', 'ngTagsInput', 'btford.markdown',
         'ngResource', 'ui-notification', 'angularjs-dropdown-multiselect', 'base64', 'angular-clipboard',

diff --git a/ui/app/scripts/controllers/admin/AdminCaseTemplatesCtrl.js b/ui/app/scripts/controllers/admin/AdminCaseTemplatesCtrl.js
@@ -9,6 +9,14 @@
             $scope.metrics = [];
             $scope.templateIndex = -1;
 
+            $scope.sortableOptions = {
+                handle: '.drag-handle',
+                stop: function(/*e, ui*/) {
+                    $scope.reorderTasks();
+                },
+                axis: 'y'
+            };
+
             $scope.getMetrics = function() {
                 MetricsCacheSrv.all().then(function(metrics){
                     $scope.metrics = metrics;
@@ -61,12 +69,19 @@
                 $scope.templateIndex = -1;
             };
 
+            $scope.reorderTasks = function() {
+                _.each($scope.template.tasks, function(task, index) {
+                    task.order = index;
+                });
+            };
+
             $scope.removeTask = function(task) {
                 $scope.template.tasks = _.without($scope.template.tasks, task);
+                $scope.reorderTasks();
             };
 
             $scope.addTask = function() {
-                $scope.openTaskDialog({}, 'Add');
+                $scope.openTaskDialog({order: $scope.template.tasks.length}, 'Add');
             };
 
             $scope.editTask = function(task) {
@@ -142,7 +157,7 @@
                     templateId: $scope.template.id
                 }, _.omit($scope.template, ['id', 'user', 'type']), function() {
                     $scope.getList($scope.templateIndex);
-                    
+
                     $scope.$emit('templates:refresh');
 
                     AlertSrv.log('The template [' + $scope.template.name + '] has been successfuly updated', 'success');
@@ -178,7 +193,7 @@
                     templateId: $scope.template.id
                 }, function() {
                     $scope.getList(0);
-                    
+
                     $scope.$emit('templates:refresh');
 
                     $uibModalInstance.dismiss();

diff --git a/ui/app/scripts/controllers/case/CaseTasksCtrl.js b/ui/app/scripts/controllers/case/CaseTasksCtrl.js
@@ -32,7 +32,7 @@
                     }
                 }]
             },
-            sort: ['-flag', '+startDate', '+title']
+            sort: ['-flag', '+order', '+startDate', '+title']
         });
 
         $scope.showTask = function(task) {

diff --git a/ui/app/views/partials/admin/case-templates.html b/ui/app/views/partials/admin/case-templates.html
@@ -106,9 +106,12 @@ <h4 class="vpad10 text-primary">
                                     <i class="fa fa-plus"></i>
                                     Add task</a>
                             </h4>
-                            <div ng-if="template.tasks.length !== 0">
+                            <div ng-if="template.tasks.length !== 0" ui-sortable="sortableOptions" ng-model="template.tasks">
                                 <div class="panel panel-default" ng-init="isCollapsed=true" ng-repeat="t in template.tasks">
                                     <div class="panel-heading">
+                                        <span class="drag-handle text-primary clickable mr-xxs">
+                                            <i class="fa fa-bars"></i>
+                                        </span>
                                         <span>
                                             <a href ng-click="isCollapsed=!isCollapsed">
                                                 <i class="fa" ng-class="{'fa-caret-down': isCollapsed, 'fa-caret-up': !isCollapsed}"></i>
@@ -178,7 +181,7 @@ <h4 class="vpad10 text-primary">
                                     </div>
                                 </div>
                             </div>
-                            <div class="text-danger" ng-if="template.metricNames.length === 0">
+                            <div class="text-danger" ng-if="!template.metricNames ||template.metricNames.length === 0">
                                 <table class="table table-striped">
                                     <tr>
                                         <td>No metrics have been added</td>

diff --git a/ui/app/views/partials/case/case.tasks.html b/ui/app/views/partials/case/case.tasks.html
@@ -2,7 +2,7 @@
     <div class="col-md-12">
         <div class="btn-toolbar" role="toolbar">
             <div class="btn-group">
-                <button class="btn btn-primary" ng-click="state.isNewTask = true">
+                <button class="btn btn-sm btn-primary" ng-click="state.isNewTask = true">
                     <i class="glyphicon glyphicon-plus"></i>
                     Add Task
                 </button>

diff --git a/ui/bower.json b/ui/bower.json
@@ -46,7 +46,8 @@
     "angular-ui-ace": "bower",
     "angular-page-loader": "*",
     "angular-images-resizer": "^2.0.2",
-    "angular-base64-upload": "^0.1.19"
+    "angular-base64-upload": "^0.1.19",
+    "angular-ui-sortable": "^0.17.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.8"

diff --git a/ui/test/karma.conf.js b/ui/test/karma.conf.js
@@ -66,6 +66,8 @@ module.exports = function(config) {
       'bower_components/angular-page-loader/dist/angular-page-loader.js',
       'bower_components/angular-images-resizer/angular-images-resizer.js',
       'bower_components/angular-base64-upload/src/angular-base64-upload.js',
+      'bower_components/jquery-ui/jquery-ui.js',
+      'bower_components/angular-ui-sortable/sortable.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       "bower_components/cryptojslib/components/core-min.js",
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ @@
                         }
                     }]
                 },
-                sort: ['-flag', '+startDate', '+title']
+                sort: ['-flag', '+order', '+startDate', '+title']
             });
             $scope.showTask = function(task) {
@@ Expand Down @@