From bc8a6ae4b8af66bf364ddb91a26cb2bc19736a0d Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Sat, 19 Nov 2022 21:53:48 +1100
Subject: [PATCH] Part image delete (#3963)

* Add button to remove an associated image from a part

- Also fixes some issues with onclick event propagation

* Similar feature for company image
---
 InvenTree/InvenTree/static/css/inventree.css  |  4 +-
 .../templates/company/company_base.html       | 34 +++++++++++++++-
 InvenTree/part/templates/part/part_base.html  | 40 +++++++++++++++----
 InvenTree/part/templates/part/part_thumb.html |  3 ++
 InvenTree/templates/js/translated/modals.js   | 10 ++---
 5 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 3658a216cf..176caff571 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -458,7 +458,7 @@ main {
 }
 
 .part-thumb-container:hover .part-thumb-overlay {
-    opacity: 1;
+    opacity: 0.75;
 }
 
 .part-thumb-overlay {
@@ -467,8 +467,6 @@ main {
     left: 0;
     opacity: 0;
     transition: .25s ease;
-    padding-top: 10px;
-    padding-left: 25px;
     margin: 5px;
 }
 
diff --git a/InvenTree/company/templates/company/company_base.html b/InvenTree/company/templates/company/company_base.html
index bb27a69d25..6a28e5ba67 100644
--- a/InvenTree/company/templates/company/company_base.html
+++ b/InvenTree/company/templates/company/company_base.html
@@ -58,6 +58,9 @@
             {% if allow_download %}
             <button type='button' class='btn btn-outline-secondary' title="{% trans 'Download image from URL' %}" id='company-image-url'><span class='fas fa-cloud-download-alt'></span></button>
             {% endif %}
+            {% if company.image %}
+            <button type='button' class='btn btn-outline-secondary' title='{% trans "Delete image" %}' id='company-image-delete'><span class='fas fa-trash-alt icon-red'></span></button>
+            {% endif %}
         </div>
     </div>
 </div>
@@ -194,10 +197,37 @@
     $('#company-image').click(function() {
         showModalImage('{{ company.image.url }}');
     });
+
+    $('#company-image-delete').click(function(event) {
+        event.stopPropagation();
+        showQuestionDialog(
+            '{% trans "Remove Image" %}',
+            '{% trans "Remove associated image from this company" %}',
+            {
+                accept_text: '{% trans "Remove" %}',
+                submitClass: 'danger',
+                accept: function() {
+                    inventreePut(
+                        '{% url "api-company-detail" company.pk %}',
+                        {
+                            'image': null,
+                        },
+                        {
+                            method: 'PATCH',
+                            success: function() {
+                                location.reload();
+                            }
+                        }
+                    );
+                }
+            }
+        );
+    });
+
     {% endif %}
 
-    $("#company-image-upload").click(function() {
-
+    $("#company-image-upload").click(function(event) {
+        event.stopPropagation();
         constructForm(
             '{% url "api-company-detail" company.pk %}',
             {
diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html
index e94b561302..2ce09dcbc5 100644
--- a/InvenTree/part/templates/part/part_base.html
+++ b/InvenTree/part/templates/part/part_base.html
@@ -502,8 +502,34 @@
         });
     });
 
-    $("#part-image-upload").click(function() {
+    $('#part-image-delete').click(function(event) {
+        event.stopPropagation();
+        showQuestionDialog(
+            '{% trans "Remove Image" %}',
+            '{% trans "Remove associated image from this part" %}',
+            {
+                accept_text: '{% trans "Remove" %}',
+                submitClass: 'danger',
+                accept: function() {
+                    inventreePut(
+                        '{% url "api-part-detail" part.pk %}',
+                        {
+                            'image': null,
+                        },
+                        {
+                            method: 'PATCH',
+                            success: function(data) {
+                                location.reload();
+                            }
+                        }
+                    );
+                }
+            }
+        );
+    });
 
+    $("#part-image-upload").click(function(event) {
+        event.stopPropagation();
         constructForm(
             '{% url "api-part-detail" part.pk %}',
             {
@@ -576,12 +602,12 @@
         });
     }
 
-    $("#part-image-select").click(function() {
-        launchModalForm("{% url 'part-image-select' part.id %}",
-                        {
-                            reload: true,
-                            after_render: onSelectImage
-                        });
+    $("#part-image-select").click(function(event) {
+        event.stopPropagation();
+        launchModalForm("{% url 'part-image-select' part.id %}", {
+            reload: true,
+            after_render: onSelectImage
+        });
     });
 
     $("#part-edit").click(function() {
diff --git a/InvenTree/part/templates/part/part_thumb.html b/InvenTree/part/templates/part/part_thumb.html
index 17dac80a5c..f35646dd0f 100644
--- a/InvenTree/part/templates/part/part_thumb.html
+++ b/InvenTree/part/templates/part/part_thumb.html
@@ -13,6 +13,9 @@
             {% if allow_download %}
             <button type='button' class='btn btn-outline-secondary' title="{% trans 'Download image from URL' %}" id='part-image-url'><span class='fas fa-cloud-download-alt'></span></button>
             {% endif %}
+            {% if part.image %}
+            <button type='button' class='btn btn-outline-secondary' title='{% trans "Delete image" %}' id='part-image-delete'><span class='fas fa-trash-alt icon-red'></span></button>
+            {% endif %}
         </div>
     </div>
     {% endif %}
diff --git a/InvenTree/templates/js/translated/modals.js b/InvenTree/templates/js/translated/modals.js
index ebf7a6ea61..a0492bac44 100644
--- a/InvenTree/templates/js/translated/modals.js
+++ b/InvenTree/templates/js/translated/modals.js
@@ -621,11 +621,11 @@ function showQuestionDialog(title, content, options={}) {
      *   cancel - Functino to run if the user presses 'Cancel'
      */
 
-    var modal = createNewModal({
-        title: title,
-        submitText: options.accept_text || '{% trans "Accept" %}',
-        closeText: options.cancel_text || '{% trans "Cancel" %}',
-    });
+    options.title = title;
+    options.submitText = options.accept_text || '{% trans "Accept" %}';
+    options.closeText = options.cancel_text || '{% trans "Cancel" %}';
+
+    var modal = createNewModal(options);
 
     modalSetContent(modal, content);