Bug 22032: Improve local cover image tab on detail page

This patch makes a variety of improvements to the images tab of the
staff client's bibliographic detail page.

To test, apply the patch and regenerate the staff client CSS.

 - Enable the LocalCoverImages system preference.
 - Locate a bibliographic record which has no images attached.
   - There should be a "no images" message and an upload button.
     - Upload an image and return to the detail page.
       - The "Images" tab should have a nicely-styled thumbnail of the
         image you uploaded.
         - Test the "Delete image" link: It should ask for a
           confirmation. If you confirm, the image should disappear and
           a "loading" spinner should appear.
           - When the image has been deleted the thumbnail container
             should disappear and the "no images" message should
             reappear.
 - Test this process with AllowMultipleCovers enabled and disabled.

Extra credit: Modify the AJAX url in the removeLocalImage
function in detail.tt. After misspelling a parameter name or the URL
path, clicking the "Delete image" link should trigger an alert and
re-show the image thumbnail.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 9d946c7..61b2605 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -2268,10 +2268,28 @@ li {
 .thumbnail {
     display: block;
     margin: auto;
+}
 
-    > li {
+.thumbnails {
+    li {
+        display: inline-block;
         list-style-type: none;
     }
+
+    .remove {
+        border-top: 1px solid #EEE;
+        display: block;
+        font-size: 90%;
+        margin: 4px -4px 2px -4px;
+        padding-top: .5em;
+        text-align: center;
+    }
+
+    & + p {
+        border-top: 1px solid #eee;
+        margin-top: 1em;
+        padding-top: 1em;
+    }
 }
 
 #searchresults {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
index 07c44de..fe0188b 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
@@ -812,26 +812,31 @@
 [% END %]
 
 [% IF ( LocalCoverImages ) %]
-<div id="images">
-[% IF ( localimages.0 ) %]
-    <p>Click on an image to view it in the image viewer</p>
-    <ul class="thumbnails">
-[% FOREACH image IN localimages %]
-    [% IF image %]
-        <li id="imagenumber-[% image | html %]">
-            <a class="thumbnail" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% image | html %]">
-                <img alt="remove this image" src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | html %]" />
-                [% IF CAN_user_tools_upload_local_cover_images %]
-                  <span class="remove" title="remove this image">Delete image</span>
+    <div id="images">
+        [% IF ( localimages.0 ) %]
+            <p>Click on an image to view it in the image viewer</p>
+            <ul class="thumbnails">
+                [% FOREACH image IN localimages %]
+                    [% IF image %]
+                        <li id="imagenumber-[% image | html %]" class="thumbnail">
+                            <a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image | uri %]">
+                                <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | uri %]" />
+                            </a>
+                            [% IF CAN_user_tools_upload_local_cover_images %]
+                                <a href="#" class="remove"><i class="fa fa-trash"></i> Delete image</a>
+                            [% END %]
+                        </li>
+                    [% END %]
                 [% END %]
-            </a>
-        </li>
-    [% END %]
-[% END %]
-    </ul>
-[%# ELSE - No image passed JavaScript takes care %]
-[% END %]
-</div>
+            </ul>
+        [% ELSE # - No image passed JavaScript takes care %]
+            No images have been uploaded for this bibliographic record yet.
+        [% END %]
+        [% IF ( CAN_user_tools_upload_local_cover_images ) %]
+            <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
+            </p>
+        [% END %]
+    </div>
 [% END %]
 
 [% IF ( HTML5MediaEnabled ) %]
@@ -909,6 +914,8 @@
     [% Asset.js("js/catalog.js") | $raw %]
     [% INCLUDE 'greybox.inc' %]
     <script>
+        var interface = "[% interface | html %]";
+        var theme = "[% theme | html %]";
         // http://www.oreillynet.com/pub/a/javascript/2003/10/21/amazonhacks.html
         function verify_images() {
             $("#bookcoverimg").each(function(i){
@@ -941,12 +948,18 @@
         }
 
         function removeLocalImage(imagenumber) {
+            var thumbnail = $("#imagenumber-" + imagenumber );
+            var copy = thumbnail.html();
+            thumbnail.html("<div><img style='padding:50px' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' /></div>");
             $.ajax({
                 url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
                 success: function(data) {
                     $(data).each( function(i) {
                         if ( this.deleted == 1 ) {
-                            $('#imagenumber-' + this.imagenumber).remove();
+                            thumbnail.remove();
+                        } else {
+                            thumbnail.html( copy );
+                            alert(_("An error occurred on deleting this image"));
                         }
                         if ( $('ul.thumbnails > li').length == 0 ) {
                             showNoImageMessage();
@@ -954,6 +967,7 @@
                     });
                 },
                 error: function(data) {
+                    thumbnail.html( copy );
                     alert(_("An error occurred on deleting this image"));
                 }
             });
@@ -963,7 +977,7 @@
             var no_images_msg = _("No images have been uploaded for this bibliographic record yet.");
             no_images_msg = '<p>' + no_images_msg + '</p>';
             [% IF ( CAN_user_tools_upload_local_cover_images ) %]
-                var please_upload = _("Please select the image file to upload. %sUpload%s").format("<a class='btn btn-default btn-xs' href='/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber + "&amp;filetype=image'><i class='fa fa-upload' aria-hidden='true'></i> ","</a>");
+                var please_upload = _("Upload an image file: %sUpload%s").format("<a class='btn btn-default btn-xs' href='/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber + "&amp;filetype=image'><i class='fa fa-upload' aria-hidden='true'></i> ","</a>");
                 no_images_msg += "<p id='upload_image'>" + please_upload + '</p>';
             [% END %]
             $('#images').html(no_images_msg);
@@ -1046,20 +1060,17 @@
                 $('#bibliodetails').tabs("option", "active", 3);
             [% END %]
             $('#search-form').focus();
-            $('.thumbnails > li > a > span.remove').click(function() {
+            $('.thumbnails > li > .remove').click(function() {
                 var result = confirm(_("Are you sure you want to delete this cover image?"));
 
                 if ( result == true ) {
-                    var imagenumber = $(this).parent().parent().attr('id').split('-')[1];
+                    var imagenumber = $(this).parent().attr('id').split('-')[1];
                     removeLocalImage(imagenumber);
                 }
 
                 return false;
             });
             [%# inject no images message %]
-            [% IF ( LocalCoverImages && ! localimages.0 ) %]
-                showNoImageMessage();
-            [% END %]
             [% IF LocalCoverImages %]
                 KOHA.LocalCover.GetCoverFromBibnumber(true);
             [% END %]