Bug 20651: Improve full supplier metadata display

This patch improves the display of the extra metadata that may be
returned by an ILL supplier.

The display of the metadata has been moved from the "Toggle full
supplier metadata" link at the bottom of the page to a button on the
right of the request toolbar, labelled "Display supplier metadata".
Clicking this button opens a modal displaying the metadata.

To test:
1) Ensure ILL is enabled and you have at least one request
2) From the "View ILL requests" page, click "Manage request" on a
request
3) Click the "Display supplier metadata" button on the right of the
toolbar
4) Observe that a modal opens containing the metadata

Signed-off-by: Magnus Enger <magnus@enger.priv.no>
The modal looks good!

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

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

diff --git a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index 2601021..000e2e6 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -3093,6 +3093,10 @@ fieldset.rows + fieldset.action {
     margin-top: 20px;
 }
 
+#interlibraryloans h3#dataPreviewLabel {
+    margin: 0.3em 0;
+}
+
 #interlibraryloans .bg-info {
     overflow: auto;
     position: relative;
@@ -3161,8 +3165,9 @@ fieldset.rows + fieldset.action {
     margin-bottom: 1em;
 }
 
-#ill-view-panel #requestattributes .label {
-    width: auto;
+#requestattributes {
+    font-family: monospace;
+    line-height: 1.3em;
 }
 
 table#ill-requests {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
index 70f31ca..db5b77c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/ill/ill-requests.tt
@@ -193,12 +193,6 @@
             }
         };
 
-        // Toggle request attributes in Illview
-        $('#toggle_requestattributes').on('click', function(e) {
-            e.preventDefault();
-            $('#requestattributes').toggleClass('content_hidden');
-        });
-
         // Filter partner list
         $('#partner_filter').keyup(function() {
             var needle = $('#partner_filter').val();
@@ -216,6 +210,12 @@
             });
         });
 
+        // Display the modal containing request supplier metadata
+        $('#ill-request-display-metadata').on('click', function(e) {
+            e.preventDefault();
+            $('#dataPreview').modal({show:true});
+        });
+
         // Get our data from the API and process it prior to passing
         // it to datatables
         var ajax = $.ajax(
@@ -496,6 +496,10 @@
                                 </a>
                             [% END %]
                         [% END %]
+                        <a title="Display supplier metadata" id="ill-request-display-metadata" class="btn btn-sm btn-default pull-right" href="#">
+                            <span class="fa fa-eye"></span>
+                            Display supplier metadata
+                        </a>
                     </div>
                     <div id="ill-view-panel" class="panel panel-default">
                         <div class="panel-heading">
@@ -562,17 +566,29 @@
                                     </div>
                                 [% END %]
                             </div>
-                            <div class="rows">
-                                <h3><a id="toggle_requestattributes" href="#">Toggle full supplier metadata</a></h3>
-                                <div id="requestattributes" class="content_hidden">
-                                    [% FOREACH attr IN request.illrequestattributes %]
+                        </div>
+                    </div>
+
+                    <div id="dataPreview" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dataPreviewLabel" aria-hidden="true">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                                    <h3 id="dataPreviewLabel"> Supplier metadata</h3>
+                                </div>
+                                <div class="modal-body">
+                                    <div id="requestattributes">
+                                        [% FOREACH attr IN request.illrequestattributes %]
                                         <div class="requestattr-[% attr.type %]">
                                             <span class="label">[% attr.type %]:</span>
                                             [% attr.value %]
                                         </div>
-                                    [% END %]
+                                            [% END %]
+                                    </div>
+                                </div>
+                                <div class="modal-footer">
+                                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                                 </div>
-
                             </div>
                         </div>
                     </div>