Bug 10730: Use DataTables on the tag review page
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tags / review.tt
index 843f7ca..d365a7e 100644 (file)
@@ -1,6 +1,9 @@
+[% USE KohaDates %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Home &rsaquo; Tools &rsaquo; Tags &rsaquo; [% IF ( do_it ) %]Review &rsaquo; [% ELSE %]Review Tags[% END %]</title>
+<title>Home &rsaquo; Tools &rsaquo; Tags &rsaquo; [% IF ( do_it ) %]Review &rsaquo; [% ELSE %]Review tags[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
+<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/en/css/datatables.css" />
+[% INCLUDE 'datatables.inc' %]
 [% INCLUDE 'calendar.inc' %]
 <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
 <style type="text/css">
@@ -48,13 +51,13 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
                }
        }
        var success_approve = function(tag){
-               // window.alert(_('AJAX approved tag: ') + tag);
+               // window.alert(_("AJAX approved tag: ") + tag);
        };
        var failure_approve = function(tag){
                window.alert(_("AJAX failed to approve tag: ") + tag);
        };
        var success_reject  = function(tag){
-               // window.alert(_('AJAX rejected tag: ') + tag);
+               // window.alert(_("AJAX rejected tag: ") + tag);
        };
        var failure_reject  = function(tag){
                window.alert(_("AJAX failed to reject tag: ") + tag);
@@ -73,16 +76,6 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
                $('#test_button').removeAttr("disabled");
                $('#test_button').attr("value","test");
        };
-       function readCookie(name) { // from http://www.quirksmode.org/js/cookies.html
-               var nameEQ = name + "=";
-               var ca = document.cookie.split(';');
-                       for(var i=0;i < ca.length;i++) {
-                               var c = ca[i];
-                               while (c.charAt(0)==' '){ c = c.substring(1,c.length); }
-                               if (c.indexOf(nameEQ) == 0){ return c.substring(nameEQ.length,c.length); }
-                       }
-               return null;
-       }
        $(document).ready(function() {
                $('.ajax_buttons' ).css({visibility:"visible"});
                $("p.check").html("<strong>"+_("Select:")+" <\/strong><a id=\"CheckAll\" href=\"/cgi-bin/koha/tags/review.pl\">"+_("All")+"<\/a> <a id=\"CheckPending\" href=\"/cgi-bin/koha/tags/review.pl\">"+_("Pending")+"<\/a> <a id=\"CheckNone\" href=\"/cgi-bin/koha/tags/review.pl\">"+_("None")+"<\/a>");
@@ -103,19 +96,19 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
                        // window.alert(_("Click detected on ") + event.target + ": " + $(event.target).html);
                        if ($(event.target).is('.ok')) {
                                $.ajax({
-                                       "data": {ok: $(event.target).attr("title"), CGISESSID: readCookie('CGISESSID')},
+                    "data": {ok: $(event.target).attr("title")},
                                        "success": count_approve // success_approve
                                });
-                               $(event.target).next(".rej").removeAttr("disabled").attr("value","Reject").css("color","#000");
+                $(event.target).next(".rej").removeAttr("disabled").attr("value",_("Reject")).css("color","#000");
                                $(event.target).attr(   "value",_("Approved")).attr("disabled","disabled").css("color","#666");
                                return false;   // cancel submit
                        }
                        if ($(event.target).is('.rej')) {
                                $.ajax({
-                                       "data": {rej: $(event.target).attr("title"), CGISESSID: readCookie('CGISESSID')},
+                    "data": {rej: $(event.target).attr("title")},
                                        "success": count_reject // success_reject
                                });
-                               $(event.target).prev(".ok").removeAttr("disabled").attr("value","Approve").css("color","#000");
+                $(event.target).prev(".ok").removeAttr("disabled").attr("value",_("Approve")).css("color","#000");
                                $(event.target).attr(   "value",_("Rejected")).attr("disabled","disabled").css("color","#666");
                                return false;   // cancel submit
                        }
@@ -131,11 +124,27 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
                $("*").ajaxError(function(evt, request, settings){
                        if ((alerted +=1) <= 1){ window.alert(_("AJAX error")+" (" + alerted + " alert)"); }
                });
+        $("#tagst").dataTable($.extend(true, {}, dataTablesDefaults, {
+            "aoColumnDefs": [
+                [% IF ( filter_approved_pending ) %]
+                    { "aTargets": [ 0,1,-2 ], "bSortable": false, "bSearchable": false }
+                [% ELSE %]
+                    { "aTargets": [ 0,1,-3 ], "bSortable": false, "bSearchable": false }
+                [% END %]
+            ],
+            "aoColumns": [
+                null,null,null,null,null,null,[% UNLESS ( filter_approved_pending ) %]null,[% END %]{ "sType": "title-string" }
+            ],
+            "aaSorting": [[ 4, "desc" ]],
+            "aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
+            "iDisplayLength": 20,
+            "sPaginationType": "four_button"
+        }));
        });
 //]]>
 </script>
 </head>
-<body>
+<body id="tags_review" class="tools">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
@@ -194,69 +203,74 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
   [% END %]
   [% IF ( tagloop ) %]
   <p class="check"></p>
-  <table>
-    <tr>
-       <th>&nbsp;</th>
-       <th>&nbsp;</th>
+  <table id="tagst">
+    <thead>
+        <tr>
+               <th>&nbsp;</th>
+               <th>&nbsp;</th>
                <th>Status</th>
                <th>Term</th>
                <th>Weight</th>
                <th>Actions</th>
-        [% UNLESS ( filter_approved_pending ) %]<th>Reviewer</th>[% END %]
+            [% UNLESS ( filter_approved_pending ) %]<th>Reviewer</th>[% END %]
                <th>Date</th>
        </tr>
-       [% FOREACH tagloo IN tagloop %]
-       <tr>
-           <td class="count">[% offset + loop.count %]
-           </td>
-        [% IF ( approved == 0 ) %]<td><span><input type="checkbox" value="[% tagloo.term %]" name="tags" class="pending" /></span>
-        [% ELSE %]<td><span><input type="checkbox" value="[% tagloo.term %]" name="tags" /></span>[% END %]
-           </td>
-           [% IF ( tagloo.approved == -1 ) %]<td class="red">rejected
-               [% ELSIF ( tagloo.approved == 1 ) %]<td class="green"><img alt="OK" src="/intranet-tmpl/prog/img/approve.gif" />
-               [% ELSE %]<td class="pending">
-               [% END %]
-           </td>
-           <td><a href="/cgi-bin/koha/tags/list.pl?tag=[% tagloo.term %]">[% tagloo.term %]</a>
-           </td>
-               <td>[% tagloo.weight_total %]
-           </td>
-               [% IF ( tagloo.approved ) %]
-           <td><span class="ajax_buttons" style="visibility:hidden">
-                       [% IF ( approved == -1 ) %]
-                       <input class="ok"  type="submit" title="[% tagloo.term %]" value="Approve" name="approve" />
-                       <input class="rej" disabled="disabled" type="submit" title="[% tagloo.term %]" value="Rejected" name="reject" />
-                       [% ELSE %]
-                       <input class="ok"  disabled="disabled" type="submit" title="[% tagloo.term %]" value="Approved" name="approve" />
-                       <input class="rej" type="submit" title="[% tagloo.term %]" value="Reject" name="reject" />
-                       [% END %]
-                       </span>
-           </td>
-           <td>[% IF ( tagloo.approved_by_name ) %]<a href="/cgi-bin/koha/tags/review.pl?approved_by=[% tagloo.approved_by %]&amp;approved=all">[% tagloo.approved_by_name %]</a>[% ELSE %]&nbsp;[% END %]
-           </td>
-               [% ELSE %]
-               <td><span class="ajax_buttons" style="visibility:hidden">
-               <input class="ok"  type="submit" title="[% tagloo.term %]" value="Approve" name="approve" />
-                       <input class="rej" type="submit" title="[% tagloo.term %]" value="Reject" name="reject" />
-                       </span>
-           </td>
-           [% UNLESS ( filter_approved_pending ) %]<td>&nbsp;</td>[% END %]
-               [% END %]
-           <td>[% tagloo.date_approved %]
-           </td>
-       </tr>
-       [% END %]
+    </thead>
+    <tbody>
+    [% FOREACH tagloo IN tagloop %]
+        <tr>
+            <td class="count">[% offset + loop.count %]
+            </td>
+                [% IF ( tagloo.approved == 0 ) %]<td><span><input type="checkbox" value="[% tagloo.term %]" name="tags" class="pending" /></span>
+                [% ELSE %]<td><span><input type="checkbox" value="[% tagloo.term %]" name="tags" /></span>[% END %]
+            </td>
+            [% IF ( tagloo.approved == -1 ) %]<td class="red">rejected
+                [% ELSIF ( tagloo.approved == 1 ) %]<td class="green"><img alt="OK" src="[% interface %]/[% theme %]/img/approve.gif" />
+            [% ELSE %]<td class="pending">
+            [% END %]
+            </td>
+            <td><a href="/cgi-bin/koha/tags/list.pl?tag=[% tagloo.term|uri %]">[% tagloo.term %]</a>
+            </td>
+            <td>[% tagloo.weight_total %]
+            </td>
+            [% IF ( tagloo.approved ) %]
+            <td><span class="ajax_buttons" style="visibility:hidden">
+                    [% IF ( tagloo.approved == -1 ) %]
+                <input class="ok"  type="submit" title="[% tagloo.term %]" value="Approve" name="approve" />
+                <input class="rej" disabled="disabled" type="submit" title="[% tagloo.term %]" value="Rejected" name="reject" />
+                [% ELSE %]
+                <input class="ok"  disabled="disabled" type="submit" title="[% tagloo.term %]" value="Approved" name="approve" />
+                <input class="rej" type="submit" title="[% tagloo.term %]" value="Reject" name="reject" />
+                [% END %]
+                </span>
+            </td>
+            <td>[% IF ( tagloo.approved_by_name ) %]<a href="/cgi-bin/koha/tags/review.pl?approved_by=[% tagloo.approved_by %]&amp;approved=all">[% tagloo.approved_by_name %]</a>[% ELSE %]&nbsp;[% END %]
+            </td>
+            [% ELSE %]
+            <td><span class="ajax_buttons" style="visibility:hidden">
+            <input class="ok"  type="submit" title="[% tagloo.term %]" value="Approve" name="approve" />
+                <input class="rej" type="submit" title="[% tagloo.term %]" value="Reject" name="reject" />
+                </span>
+            </td>
+            [% UNLESS ( filter_approved_pending ) %]<td>&nbsp;</td>[% END %]
+            [% END %]
+            <td>
+                <span title="[% tagloo.date_approved %]">[% tagloo.date_approved | $KohaDates %]</span>
+            </td>
+        </tr>
+    [% END %]
+    </tbody>
   </table>
   [% END %]
     [% IF ( tagloop ) %]<fieldset class="action">
-   <input type="submit" value="Approve" id="approve_button" name="op" />
-   <input type="submit" value="Reject"  id="reject_button"  name="op" />
+   <input type="submit" value="Approve" id="approve_button" name="op-approve" />
+   <input type="submit" value="Reject"  id="reject_button"  name="op-reject" />
   </fieldset>[% END %]
   </form>
 </div>
 <div class="yui-u">
  <fieldset class="brief">
-  <h4>Terms Summary</h4>
+  <h4>Terms summary</h4>
   <ul>
        <li><a href="/cgi-bin/koha/tags/review.pl?approved=1">Approved</a>:
                <span id="terms_summary_approved_count">[% approved_count %]</span>
@@ -278,7 +292,7 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
    <div class="description">Enter a word or phrase to check against approved/rejected lists: </div>
    <form method="post" action="/cgi-bin/koha/tags/review.pl">
    <input type="text" size="14" name="test" id="test" />
-   <fieldset class="action"><input type="submit" value="Test" id="test_button" name="op" /></fieldset>
+   <fieldset class="action"><input type="submit" value="Test" id="test_button" name="op-test" /></fieldset>
    <div id="verdict">
        [% IF ( test_term ) %]
        [% IF ( verdict_ok ) %]
@@ -321,59 +335,18 @@ td input,td input[type="submit"] { font-size: 85%; padding: 1px; }
            </li>
            <li>
                        <label for="from">Date: from </label>
-                       <input type="text" size="10" id="from" name="from" value="[% filter_date_approved_from %]" />
-                       <img src="[% themelang %]/lib/calendar/cal.gif" border="0" alt="Show Calendar" style="cursor: pointer;" id="openCalendarFrom" />
+            <input type="text" size="10" id="from" name="from" value="[% filter_date_approved_from %]" class="datepickerfrom" />
                        <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
 
                        <label for="to">...to </label>
-                       <input type="text" size="10" id="to"   name="to"   value="[% filter_date_approved_to %]" />
-                       <img src="[% themelang %]/lib/calendar/cal.gif" border="0" alt="Show Calendar" style="cursor: pointer;" id="openCalendarTo" />
+            <input type="text" size="10" id="to" name="to" value="[% filter_date_approved_to %]" class="datepickerto" />
                        <div class="hint">[% INCLUDE 'date-format.inc' %]</div>
            </li>
   </ol>
- <fieldset class="action"><input type="submit" value="Apply Filter(s)" /></fieldset>
+ <fieldset class="action"><input type="submit" value="Apply filter(s)" /></fieldset>
 </fieldset>
 </form>
-<script type="text/javascript">
-//<![CDATA[
-// function submit_check (from_id,to_id) {
-//     var dateFrom = Date_from_syspref(document.getElementById(from_id).value);
-//     var dateTo   = Date_from_syspref(document.getElementById(  to_id).value);
-//     var today = new Date();
-//     if (dateFrom < dateTo) {
-//             alert("The starting date cannot be after the ending date.");
-//             document.getElementById(to_id).select();
-//             return false;
-//     }
-//     if (dateFrom > today) {
-//             alert("The starting date cannot be in the future.");
-//             document.getElementById(from_id).select();
-//             return false;
-//     }
-// }
-
-// return true if the date is blocked.
-function disable_from(date) {var limit = get_Calendar_limit(date,'to'  ); return (limit && limit < date);}
-function disable_to  (date) {var limit = get_Calendar_limit(date,'from'); return (limit && limit > date);}
-
-Calendar.setup({
-       inputField : "from",
-         ifFormat : "[% DHTMLcalendar_dateformat %]",
-               button : "openCalendarFrom",
-          disableFunc : disable_from,
-       dateStatusFunc : disable_from
-});
-Calendar.setup({
-       inputField : "to",
-         ifFormat : "[% DHTMLcalendar_dateformat %]",
-               button : "openCalendarTo",
-          disableFunc : disable_to,
-       dateStatusFunc : disable_to
-});
-//]]>
-</script>
-
- </div>
+</div>
 </div>
 [% INCLUDE 'intranet-bottom.inc' %]