From febc46fa69aa00ecd47083a26522458addc1ca05 Mon Sep 17 00:00:00 2001
From: David Cook <dcook@prosentient.com.au>
Date: Sun, 27 Oct 2024 23:19:45 +0000
Subject: [PATCH] Bug 38275: Fix patron card creator image delete

This change changes the patron card creator image delete from a
GET to a POST, and supports single delete and multi-delete.

Test plan:
1. Apply the patch (and refresh browser JS cache)
2. Go to http://localhost:8081/cgi-bin/koha/patroncards/image-manage.pl
3. Upload multiple images
4. Select all the images using the checkboxes
5. Delete one image using the "Delete" button in the row
6. Note that only the image selected using the "Delete" button is
deleted and the other images are de-selected
7. Delete multiple images using the "Delete selected" button
8. Note that the correct images are noted in the confirm message,
and the correct images are deleted

Signed-off-by: David Nind <david@davidnind.com>
---
 .../en/modules/patroncards/image-manage.tt    | 53 ++++++++++++-------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/image-manage.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/image-manage.tt
index 73d6aff04a..ee67c6cebe 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/image-manage.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/image-manage.tt
@@ -113,9 +113,9 @@
                                     [% FOREACH text_field IN TABL.text_fields %]
                                     [% IF ( text_field.select_field ) %]
                                         <td>
-                                            <a class="delete_image btn btn-default btn-xs" href="/cgi-bin/koha/patroncards/image-manage.pl?op=delete&image_id=[% text_field.field_value | html %]"><i class="fa fa-trash-can"></i> Delete</a>
+                                            <a class="delete_image btn btn-default btn-xs" data-image_id="[% text_field.field_value | html %]" href="/cgi-bin/koha/patroncards/image-manage.pl?op=delete&image_id=[% text_field.field_value | html %]"><i class="fa fa-trash-can"></i> Delete</a>
                                         </td>
-                                        <td align="center"><input type="checkbox" name="action" value="[% text_field.field_value | html %]" /></td>
+                                        <td align="center"><input type="checkbox" id="image_id_[% text_field.field_value | html %]" name="image_id" value="[% text_field.field_value | html %]" /></td>
                                     [% ELSIF ( text_field.field_value ) %]
                                         <td>[% text_field.field_value | html %]</td>
                                     [% ELSE %]
@@ -165,12 +165,15 @@
 [% MACRO jsinclude BLOCK %]
     <script>
         function DeleteConfirm() {
-            var results = selected_images("delete");
-            if (results.images) {
+            var results = selected_images();
+            if (results) {
                 var msg = _("Are you sure you want to delete image(s): %s?").format(results.image_ids);
                 var answer = confirm(msg);
                 if (answer) {
-                    window.location = "/cgi-bin/koha/patroncards/image-manage.pl?op=delete&" + results.images;
+                    const delete_form = document.delete_images;
+                    if (delete_form){
+                        delete_form.submit();
+                    }
                 } else {
                     return; // abort delete
                 }
@@ -179,30 +182,42 @@
             }
         }
 
-        function selected_images(op) {
-            var selected = new Array;
+        function selected_images() {
             var image_ids = new Array;
-            if (document.delete_images.action.length) {
-                for (i=0;i<document.delete_images.action.length;i++){
-                    if (document.delete_images.action[i].checked){
-                        selected.push("image_id=" + document.delete_images.action[i].value);
-                        image_ids.push(document.delete_images.action[i].value);
+            if (document.delete_images.image_id.length) {
+                for (i=0;i<document.delete_images.image_id.length;i++){
+                    if (document.delete_images.image_id[i].checked){
+                        image_ids.push(document.delete_images.image_id[i].value);
                     }
                 }
-                images = selected.join("&");
-                return {images:images, image_ids:image_ids};
             }
-            else if (document.delete_images.action.checked){
-                    return {images:"image_id="+document.delete_images.action.value, image_ids:document.delete_images.action.value};
+            if (image_ids.length){
+                return {image_ids:image_ids};
             }
-            return (-1);
+            return null;
         }
         $(document).ready(function() {
             $("#delete").click(function(){
                 return DeleteConfirm();
             });
-            $(".delete_image").on("click", function(){
-                return confirmDelete( _("Are you sure you want to delete this image?") );
+            $(".delete_image").on("click", function(ev){
+                ev.preventDefault();
+                const this_image = ev.target;
+                const image_id = this_image.dataset.image_id;
+                for (i=0;i<document.delete_images.image_id.length;i++){
+                    const row_image_id = document.delete_images.image_id[i].value;
+                    const row_checkbox = document.querySelector(`#image_id_${row_image_id}`);
+                    if (image_id === row_image_id){
+                        row_checkbox.checked = true;
+                    }
+                    else {
+                        row_checkbox.checked = false;
+                    }
+                }
+                const confirmed = confirmDelete( _("Are you sure you want to delete image: %s?").format(image_id) );
+                if (confirmed){
+                    document.delete_images.submit();
+                }
             });
         });
     </script>
-- 
2.39.5