#176 Refine case template page

TheHive-Project · Nov 17, 2017 · fa8fcce · fa8fcce
1 parent d5a762f
commit fa8fcce
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 48 deletions.
diff --git a/ui/app/styles/case-template.css b/ui/app/styles/case-template.css
@@ -4,3 +4,8 @@
     padding: 10px;
     margin-bottom: 5px;
 }
+
+.task-item {
+    background-color: #f9f9f9;    
+    margin-bottom: 5px;
+}
diff --git a/ui/app/views/partials/admin/case-template/custom-fields.html b/ui/app/views/partials/admin/case-template/custom-fields.html
@@ -1,6 +1,9 @@
 <div class="case-template-section">
     <h4 class="vpad10 text-primary">
         Custom fields ({{$vm.keys($vm.template.customFields).length}})
+        <a class="pull-right" href ng-click="$vm.addCustomFieldRow()">
+            <i class="fa fa-plus"></i>
+        </a>
     </h4>
 
     <div class="empty-message" ng-if="$vm.templateCustomFields.length === 0">
@@ -37,10 +40,5 @@ <h4 class="vpad10 text-primary">
                 </div>
             </div>
         </div>
-        <div ng-if="$vm.templateCustomFields.length > 0" class="mv-xs">
-            <a href ng-click="$vm.addCustomFieldRow()">
-                <i class="fa fa-plus"></i> Add a custom field
-            </a>
-        </div>
     </div>
 </div>
diff --git a/ui/app/views/partials/admin/case-template/metrics.html b/ui/app/views/partials/admin/case-template/metrics.html
@@ -1,13 +1,15 @@
 <div class="case-template-section">
     <h4 class="vpad10 text-primary">
         Metrics ({{$vm.keys($vm.template.metrics).length}})
+        <a class="pull-right" href ng-click="$vm.addMetricRow()">
+            <i class="fa fa-plus"></i>
+        </a>
     </h4>
 
     <div class="empty-message" ng-if="$vm.templateMetrics.length === 0">
         No metrics have been added. <a href class="mr-xxxs" ng-click="$vm.addMetricRow()">Add a metric</a>
     </div>
 
-
     <div ng-if="$vm.templateMetrics.length !== 0">
         <div class="metric-item" ng-repeat="m in $vm.templateMetrics">
             <div class="row">
@@ -25,10 +27,5 @@ <h4 class="vpad10 text-primary">
                 </div>
             </div>
         </div>
-        <div ng-if="$vm.templateMetrics.length > 0" class="mv-xs">
-            <a href ng-click="$vm.addMetricRow()">
-                <i class="fa fa-plus"></i> Add a metric
-            </a>
-        </div>
     </div>
 </div>
diff --git a/ui/app/views/partials/admin/case-template/tasks.html b/ui/app/views/partials/admin/case-template/tasks.html
@@ -1,39 +1,44 @@
-<h4 class="vpad10 text-primary">
-    Tasks ({{$vm.template.tasks.length || 0}})
-    <a class="pull-right" href ng-click="$vm.addTask()">
-        <i class="fa fa-plus"></i>
-        Add task</a>
-</h4>
-<div ng-if="$vm.template.tasks.length !== 0" ui-sortable="$vm.sortableOptions" ng-model="$vm.template.tasks">
-    <div class="panel panel-default" ng-init="$vm.isCollapsed=true" ng-repeat="t in $vm.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="$vm.isCollapsed=!$vm.isCollapsed">
-                    <i class="fa" ng-class="{'fa-caret-down': $vm.isCollapsed, 'fa-caret-up': !$vm.isCollapsed}"></i>
-                </a>
-            </span>
-            <span class="hpad5">{{t.title}}</span>
-            <span class="mr-xxs" ng-if="t.owner">(Assigned to <em>{{$vm.getUserInfo.get(t.owner) | getField:'name'}}</em>)</span>
+<div class="case-template-section">
+    <h4 class="vpad10 text-primary">
+        Tasks ({{$vm.template.tasks.length || 0}})
+        <a class="pull-right" href ng-click="$vm.addTask()">
+            <i class="fa fa-plus"></i>
+        </a>
+    </h4>
 
-            <span class="pull-right">
-                <a class="text-default" href ng-click="$vm.editTask(t)">
-                    <i class="fa fa-pencil"></i>&nbsp;Edit</a>
-                <span class="hpad5"></span>
-            <a class="text-danger" href ng-click="$vm.removeTask(t)">
-                <i class="fa fa-times"></i>&nbsp;Delete</a>
-            </span>
-        </div>
-        <div class="panel-body" ng-hide="$vm.isCollapsed">
-            <p btf-markdown="t.description" ng-show="t.description != ''"></p>
-            <p class="text-warning" ng-show="!t.description || t.description===''">
-                <em>No description specified</em>
-            </p>
+    <div class="empty-message" ng-if="!$vm.template.tasks || $vm.template.tasks.length === 0">
+        No tasks have been specified.
+    </div>
+
+    <div ng-if="$vm.template.tasks.length !== 0" ui-sortable="$vm.sortableOptions" ng-model="$vm.template.tasks">
+        <div class="task-item" ng-init="isCollapsed=true" ng-repeat="t in $vm.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>
+                    </a>
+                </span>
+                <span class="hpad5">{{t.title}}</span>
+                <span class="mr-xxs" ng-if="t.owner">(Assigned to <em>{{$vm.getUserInfo.get(t.owner) | getField:'name'}}</em>)</span>
+
+                <span class="pull-right">
+                    <a class="text-default" href ng-click="$vm.editTask(t)">
+                        <i class="fa fa-pencil"></i>&nbsp;Edit</a>
+                    <span class="hpad5"></span>
+                <a class="text-danger" href ng-click="$vm.removeTask(t)">
+                    <i class="fa fa-trash"></i>&nbsp;Delete</a>
+                </span>
+            </div>
+            <div class="panel-body" ng-hide="isCollapsed">
+                <p btf-markdown="t.description" ng-show="t.description != ''"></p>
+                <p class="text-warning" ng-show="!t.description || t.description===''">
+                    <em>No description specified</em>
+                </p>
+            </div>
         </div>
     </div>
-</div>
-<div class="empty-message" ng-if="!$vm.template.tasks || $vm.template.tasks.length === 0">
-    No tasks have been specified
+
 </div>
diff --git a/ui/app/views/partials/admin/case-templates.html b/ui/app/views/partials/admin/case-templates.html
@@ -13,7 +13,7 @@ <h3 class="box-title">Case template management</h3>
                 <h4 class="mt-m text-primary">Current templates</h4>
                 <ul class="nav nav-pills nav-stacked" ng-show="$vm.templates">
                     <li ng-class="{'active': $index === $vm.templateIndex}" ng-repeat="template in $vm.templates">
-                        <a href ng-click="$vm.loadTemplate(template)">{{template.name}}</a>
+                        <a href ng-click="$vm.loadTemplate(template)">{{template.name}}</a>                        
                     </li>
                 </ul>
                 <div ng-hide="$vm.templates.length != 0">
@@ -24,7 +24,9 @@ <h4 class="mt-m text-primary">Current templates</h4>
 
                 <form class="form-horizontal" name="templateEditForm" ng-submit="$vm.saveTemplate()" novalidate>
                     <div class="row">
-                        <div class="col-md-6" ng-include="'views/partials/admin/case-template/details.html'"></div>
+                        <div class="col-md-6">
+                            <div class="mt-xs" ng-include="'views/partials/admin/case-template/details.html'"></div>
+                        </div>
                         <div class="col-md-6">
                             <div class="mt-xs" ng-include="'views/partials/admin/case-template/tasks.html'"></div>
                             <div class="mt-xs" ng-include="'views/partials/admin/case-template/metrics.html'"></div>