Bug 20809: Link patron image to patron image add/edit form

This patch modifies an include file so that it is possible with edit a
patron's image on any patron-related page which uses that include.

To test you must have the patronimages system preference enabled.

Apply the patch and open any patron record for viewing.

 - Hover the mouse over the patron image.

   - If the patron has a previously-defined patron image, should you see
     an "Edit" button appear. Clicking the button should display a modal
     dialog titled "Edit patron image." Test that the "Upload,"
     "Delete," and "Cancel" buttons work correctly.

   - If a patron has no patron image defined, you should see an "Add"
     button appear. Clicking the button should display a modal
     dialog titled "Edit patron image." Test that the "Upload,"
     "Delete," and "Cancel" buttons work correctly.

This process should work from any page which shows the patron sidebar:
Check out, Details, Fines, Routing lists, Circulation history, etc.

Patch works as described.

Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

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

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>

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

koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

@@ -1712,26 +1712,59 @@ dd {
     + #menu {
         margin-right: 0;
     }
-}
 
-#patronbasics {
-    div {
-        background: transparent url("../img/patron-blank.min.svg") 10px 5px no-repeat;
-        border: 1px solid #CCCCCC;
-        height: 125px;
-        margin: .3em 0 .3em .3em;
-        padding: 0;
-        width: 105px;
+    > div {
+        border-right: 1px solid #B9D8D9;
+        width: 100%;
     }
 }
 
-#patronimage {
-    border: 1px solid #CCCCCC;
-    margin: .3em 0 .3em .3em;
-    max-width: 140px;
+/* Patron image */
+
+.patronimage-container {
     padding: .2em;
+    position: relative;
+
+    &:hover {
+        .patronimage {
+            opacity: .8;
+        }
+
+        .patronimage-controls {
+            opacity: 1;
+        }
+    }
 }
 
+.patronimage {
+    display: block;
+    max-width: 160px;
+    opacity: 1;
+    transition: .2s ease;
+
+    .empty {
+        background: transparent url( "../img/patron-blank.min.svg" ) center 5px no-repeat;
+        height: 125px;
+        margin: .3em 0 .3em .3em;
+        padding: 0;
+        width: 80%;
+    }
+}
+
+.patronimage-controls {
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    text-align: center;
+    top: 80%;
+    transform: translate( -50%, -50% );
+    transition: .5s ease;
+}
+
+.patronimage-control {
+    padding: 1em 2em;
+ }
+
 .patronviews {
     border-right: 1px solid #000;
     border-top: 1px solid #000;

koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc

@@ -2,25 +2,30 @@
 [% USE KohaDates %]
 [% IF ( patron.borrowernumber ) %]
 <div class="patroninfo"><h5>[% INCLUDE 'patron-title.inc' %]</h5>
+
 <input type="hidden" id="hiddenborrowernumber" value="[% patron.borrowernumber | html %]">
 <input type="hidden" id="hiddenborrowername" value="[% patron.surname | html %] [% patron.firstname | html %]">
 <input type="hidden" id="hiddenborrowercard" value="[% patron.cardnumber | html %]">
-<!--[if IE 6]>
-<style type="tex/css">img { width: expression(this.width > 140 ? 140: true);
-}</style>
-<![endif]-->
+
+[% IF ( patronimages ) %]
+    <div>
+        <div class="patronimage-container">
+            [% IF ( patron.image ) %]
+                <img src="/cgi-bin/koha/members/patronimage.pl?borrowernumber=[% patron.borrowernumber | uri %]" class="patronimage" alt="[% patron.firstname | html %] [% patron.surname | html %] ([% patron.cardnumber | html %])" />
+                <div class="patronimage-controls">
+                    <div class="patronimage-control"><a data-borrowernumber="[% patron.borrowernumber | uri %]" class="btn btn-default btn-sm edit-patronimage" title="Edit patron image" href="#"><i class="fa fa-pencil"></i> Edit</a></div>
+                </div>
+            [% ELSE %]
+                <div class="patronimage empty"></div>
+                <div class="patronimage-controls">
+                    <div class="patronimage-control"><a data-borrowernumber="[% patron.borrowernumber | uri %]" class="btn btn-default btn-sm edit-patronimage" title="Add patron image" href="#"><i class="fa fa-plus"></i> Add</a></div>
+                </div>
+            [% END %]
+        </div>
+    </div>
+[% END %]
+
 <ul class="patronbriefinfo">
-    [% IF ( patronimages ) %]
-        [% IF ( patron.image ) %]
-            <li>
-                <img src="/cgi-bin/koha/members/patronimage.pl?borrowernumber=[% patron.borrowernumber | uri %]" id="patronimage" alt="[% patron.firstname | html %] [% patron.surname | html %] ([% patron.cardnumber | html %])" />
-            </li>
-        [% ELSE %]
-            <li id="patronbasics">
-                <div></div>
-            </li>
-        [% END %]
-    [% END %]
     [% IF !(Koha.Preference('HidePersonalPatronDetailOnCirculation')) %]
         [% SWITCH Koha.Preference( 'AddressFormat' ) %]
             [% CASE 'de' %]
@@ -130,4 +135,23 @@
         <li><a href="/cgi-bin/koha/ill/ill-requests.pl?borrowernumber=[% patron.borrowernumber | uri %]">Interlibrary loans</a></li>
     [% END %]
 </ul></div>
+
+<!-- Modal -->
+<div class="modal" id="patronImageEdit" tabindex="-1" role="dialog" aria-labelledby="patronImageEditLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="patronImageEditLabel">Modal title</h4>
+            </div>
+            <div class="modal-body">
+                <img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" />
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 [% END %]

koha-tmpl/intranet-tmpl/prog/js/members-menu.js

@@ -89,6 +89,19 @@ $(document).ready(function(){
     $("#select_patron_messages").on("change",function(){
         $("#borrower_message").val( $(this).val() );
     });
+
+    $(".edit-patronimage").on("click", function(e){
+        e.preventDefault();
+        var borrowernumber = $(this).data("borrowernumber");
+        $.get("/cgi-bin/koha/members/moremember.pl", { borrowernumber : borrowernumber }, function( data ){
+            var image_form = $(data).find("#picture-upload");
+            image_form.show().find(".cancel").remove();
+            $("#patronImageEdit .modal-body").html( image_form );
+        });
+        var modalTitle = $(this).attr("title");
+        $("#patronImageEdit .modal-title").text(modalTitle);
+        $("#patronImageEdit").modal("show");
+    });
 });
 
 function confirm_updatechild() {