From bb5e26317f549c9f5c656465d2b3c53463e93cff Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Wed, 17 Mar 2021 20:38:42 +0100
Subject: [PATCH] #1264 Add possibility to remove custom field from case.

---
 .../common/custom-field-input.component.js      |  9 ++++++++-
 .../scripts/controllers/case/CaseDetailsCtrl.js | 17 ++++++++++++++++-
 frontend/app/scripts/services/api/CaseSrv.js    |  4 ++++
 frontend/app/styles/main.css                    | 10 +++++++++-
 .../common/custom-field-input.component.html    |  7 ++++++-
 .../partials/case/details/custom.fields.html    |  2 ++
 6 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/frontend/app/scripts/components/common/custom-field-input.component.js b/frontend/app/scripts/components/common/custom-field-input.component.js
index 80a53c0070..f9deba706d 100644
--- a/frontend/app/scripts/components/common/custom-field-input.component.js
+++ b/frontend/app/scripts/components/common/custom-field-input.component.js
@@ -10,6 +10,11 @@
                         value: newValue
                     });
                 };
+                this.removeCustomField = function(fieldId) {
+                    this.onRemove({
+                        fieldId: fieldId
+                    })
+                }
             },
             controllerAs: '$ctrl',
             templateUrl: 'views/components/common/custom-field-input.component.html',
@@ -18,7 +23,9 @@
                 field: '<',
                 value: '=',
                 onUpdate: '&',
-                editable: '<'
+                onRemove: '&',
+                editable: '<',
+                removable: '<'
             }
         });
 })();
diff --git a/frontend/app/scripts/controllers/case/CaseDetailsCtrl.js b/frontend/app/scripts/controllers/case/CaseDetailsCtrl.js
index 063992240a..70cbb27cab 100644
--- a/frontend/app/scripts/controllers/case/CaseDetailsCtrl.js
+++ b/frontend/app/scripts/controllers/case/CaseDetailsCtrl.js
@@ -68,7 +68,7 @@
         };
     });
 
-    angular.module('theHiveControllers').controller('CaseCustomFieldsCtrl', function($scope, $uibModal, CustomFieldsSrv) {
+    angular.module('theHiveControllers').controller('CaseCustomFieldsCtrl', function($scope, $uibModal, NotificationSrv, ModalUtilsSrv, CustomFieldsSrv, CaseSrv) {
 
         $scope.getCustomFieldName = function(fieldDef) {
             return 'customFields.' + fieldDef.reference + '.' + fieldDef.type;
@@ -103,6 +103,21 @@
             });
         };
 
+        $scope.removeField = function(fieldId) {
+            ModalUtilsSrv.confirm('Remove custom field value', 'Are you sure you want to delete this case custom field value?', {
+                okText: 'Yes, remove it',
+                flavor: 'danger'
+            })
+                .then(function () {
+                    return CaseSrv.removeCustomField(fieldId);
+                })
+                .catch(function(err) {
+                    if(err && !_.isString(err)) {
+                        NotificationSrv.error('Remove custom field', err.data, err.status);
+                    }
+                });
+        }
+
         $scope.keys = function(obj) {
             return _.keys(obj);
         };
diff --git a/frontend/app/scripts/services/api/CaseSrv.js b/frontend/app/scripts/services/api/CaseSrv.js
index 558334e887..32a5446f16 100644
--- a/frontend/app/scripts/services/api/CaseSrv.js
+++ b/frontend/app/scripts/services/api/CaseSrv.js
@@ -126,6 +126,10 @@
                     }
                 });
             };
+
+            this.removeCustomField = function(customfFieldValueId) {
+                return $http.delete('./api/v1/case/customField/' + customfFieldValueId)
+            }
         });
 
 })();
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 60388c9b10..4d94843ef2 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -350,7 +350,7 @@ ul.observable-reports-summary li {
 
 .case-details dd,
 .case-custom-fields dd {
-    margin-left: 200px !important;
+    margin-left: 205px !important;
 }
 
 .case-custom-fields dt {
@@ -359,6 +359,14 @@ ul.observable-reports-summary li {
     border-left: 2px solid #337ab7;
 }
 
+.case-custom-fields dt a {
+    display: none;
+}
+
+.case-custom-fields dt:hover a {
+    display: block;
+}
+
 .case-custom-fields dd {
     margin-left: 205px;
 }
diff --git a/frontend/app/views/components/common/custom-field-input.component.html b/frontend/app/views/components/common/custom-field-input.component.html
index ec4ad46a5d..35534b998d 100644
--- a/frontend/app/views/components/common/custom-field-input.component.html
+++ b/frontend/app/views/components/common/custom-field-input.component.html
@@ -1,5 +1,10 @@
 <dl class="dl-horizontal custom-field-input">
-    <dt class="pull-left" uib-tooltip="{{$ctrl.field.description}}">{{$ctrl.field.name}}</dt>
+    <dt class="pull-left">
+        <span uib-tooltip="{{$ctrl.field.description}}">{{$ctrl.field.name}}</span>
+        <a ng-if="$ctrl.removable" class="pull-right mr-xxxs" href ng-click="$ctrl.removeCustomField($ctrl.field.id)" uib-tooltip="Delete">
+            <i class="fa fa-trash text-danger"></i>
+        </a>
+    </dt>
     <dd ng-if="$ctrl.editable && $ctrl.field.options.length > 0">
         <updatable-select
             options="$ctrl.field.options"
diff --git a/frontend/app/views/partials/case/details/custom.fields.html b/frontend/app/views/partials/case/details/custom.fields.html
index 27047213df..f57c3eb661 100644
--- a/frontend/app/views/partials/case/details/custom.fields.html
+++ b/frontend/app/views/partials/case/details/custom.fields.html
@@ -41,8 +41,10 @@ <h4 class="vpad10 text-primary">
                 <custom-field-input
                     index="$index"
                     editable="canEdit"
+                    removable="canEdit"
                     field="customFieldsCache[customField.name]"
                     on-update="updateField(fieldName, value)"
+                    on-remove="removeField(fieldId)"
                     value="customField.value"></custom-field-input>
             </div>
         </div>