Bug 15471: Add column settings and filters to Holds queue table

Add column visibility menu using DataTables Buttons Add a text filter on top of each column Also extend page width so that the large table is better centered Depends on bug 15285 Test plan 1. Go to Holds queue page (circ/view_holdsqueue.pl) 2. Check that table sorting and filtering work well and that you can hide each column 3. Go to Admin > Configure columns and change the settings for this table (Circulation > view_holdsqueue > holds-table). Verify that the settings work by going again to the Holds queue page 4. Check that filters continue to work after hiding some columns Tested on top of 15285, works as expected. Signed-off-by: Marc Véron <veron@veron.ch> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Brendan Gallagher brendan@bywatersolutions.com
Koha-Community · Feb 24, 2016 · fdc06de · fdc06de
1 parent 3b8f35d
commit fdc06de
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 11 deletions.
diff --git a/admin/columns_settings.yml b/admin/columns_settings.yml
@@ -316,3 +316,28 @@ modules:
           columnname: export
           cannot_be_toggled: 1
           cannot_be_modified: 1
+
+    view_holdsqueue:
+      holds-table:
+        -
+          columnname: title
+        -
+          columnname: collection:
+        -
+          columnname: document_type
+        -
+          columnname: callnumber
+        -
+          columnname: copynumber
+        -
+          columnname: enumeration
+        -
+          columnname: barcode
+        -
+          columnname: patron
+        -
+          columnname: send_to
+        -
+          columnname: date
+        -
+          columnname: notes
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css
@@ -239,10 +239,10 @@ tr.even.selected td {
 }
 
 /* ColumnFilter */
-span.filter_column > input.text_filter {
+span.filter_column > input[type="text"] {
     font-size: 80%;
     width: 100%;
-    padding: 0;
+    box-sizing: border-box;
 }
 
 /* Row grouping */

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/view_holdsqueue.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/view_holdsqueue.tt
@@ -2,37 +2,57 @@
 [% USE ItemTypes %]
 [% USE Branches %]
 [% USE AuthorisedValues %]
+[% USE ColumnsSettings %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Circulation &rsaquo; Holds queue</title>
 [% INCLUDE 'doc-head-close.inc' %]
 <style type="text/css"> p { margin-top: 0; }</style>
-</head>
-<body id="circ_view_holdsqueue" class="circ">
-[% INCLUDE 'header.inc' %]
-[% INCLUDE 'cat-search.inc' %]
 <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
 [% INCLUDE 'datatables.inc' %]
+[% INCLUDE 'columns_settings.inc' %]
 <script type="text/javascript">//<![CDATA[
 $(document).ready(function() {
-    $("#holdst").dataTable({
+    var holdst;
+
+    // Setup filters before DataTables initialisation, in case some columns are
+    // hidden by default
+    var filterColumnTimeoutId;
+    var filterColumn = function(e) {
+        clearTimeout(filterColumnTimeoutId);
+        filterColumnTimeoutId = setTimeout(function() {
+            var input = $(e.target);
+            var idx = input.parents('td').index();
+            holdst.api().column(idx + ':visible').search(input.val()).draw();
+        }, 200);
+    };
+    $('#holdst thead input').on('change keyup keydown', filterColumn);
+
+    var columns_settings = [% ColumnsSettings.GetColumns('circ', 'view_holdsqueue', 'holds-table', 'json') %];
+    var holdst = KohaTable("#holdst", {
         "aaSorting": [[ 3, "asc" ]],
         "aoColumns": [
             { "sType": "anti-the" },null,null,null,null,null,null,null,null,{ "sType": "title-string" },null
         ],
-        "sDom": 't',
+        "sDom": 'B<"clearfix">t',
+        "bSortCellsTop": true,
         "bPaginate": false
-    });
+    }, columns_settings);
+
 });
 //]]>
 </script>
+</head>
+<body id="circ_view_holdsqueue" class="circ">
+[% INCLUDE 'header.inc' %]
+[% INCLUDE 'cat-search.inc' %]
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a>
 &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
 &rsaquo; <a href="/cgi-bin/koha/circ/view_holdsqueue.pl">Holds queue</a>
 [% IF ( run_report ) %] &rsaquo; Results[% END %]
 </div>
 
-<div id="doc" class="yui-t7">
+<div id="doc2" class="yui-t7">
 
    <div id="bd">
 	<div id="yui-main">
@@ -51,7 +71,7 @@ $(document).ready(function() {
     [% IF ( itemsloop ) %]
 <table id="holdst">
 	<thead>
-	<tr>
+    <tr>
         <th class="hq-title">Title</th>
         <th class="hq-collection">Collection</th>
         <th class="hq-itemtype">Item type</th>
@@ -63,6 +83,63 @@ $(document).ready(function() {
         <th class="hq-sendto">Send to</th>
         <th class="hq-date">Date</th>
         <th class="hq-notes">Notes</th>
+    </tr>
+    <tr>
+        <td class="hq-title">
+            <span class="filter_column filter_text">
+                <input class="text_filter" type="text" placeholder="Title">
+            </span>
+        </td>
+        <td class="hq-collection">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Collection">
+            </span>
+        </td>
+        <td class="hq-itemtype">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Item type">
+            </span>
+        </td>
+        <td class="hq-callnumber">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Call number">
+            </span>
+        </td>
+        <td class="hq-copynumber">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Copy number">
+            </span>
+        </td>
+        <td class="hq-enumchron">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Enumeration">
+            </span>
+        </td>
+        <td class="hq-barcode">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Barcode">
+            </span>
+        </td>
+        <td class="hq-patron">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Patron">
+            </span>
+        </td>
+        <td class="hq-sendto">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Send to">
+            </span>
+        </td>
+        <td class="hq-date">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Date">
+            </span>
+        </td>
+        <td class="hq-notes">
+            <span class="filter_column filter_text">
+                <input type="text" placeholder="Notes">
+            </span>
+        </td>
     </tr>
 	</thead>
      <tbody>[% FOREACH itemsloo IN itemsloop %]