From 9d612da96b5790179d954f2a0b8f191a38f75a26 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 7 Mar 2013 16:07:16 -0500
Subject: [PATCH] Bug 9766 - Remove YUI menu on budget planning page in favor
 of different column-hiding system

The budget planning table previously used a YUI menu as part of a
system for hiding and showing table columns. Instead of trying
to convert that sytem to Bootstrap I have used code from the
batch modification/deletion pages which uses a list of checkboxes
to show and hide table columns. This has the advantage of giving
the user visual feedback of what columns are hidden and of offering the
user an interface which is familiar from other pages.

This patch also moves CSS from a batch-operations-specific
CSS file into the main CSS file. Batch modification templates have been
modified accordingly.

To test, view the budget planning page and choose different
"plan by" options (by month, by library, by item type). Test
the show/hide action on each individual column and using the
"show all" and "hide all" checkboxes.

Signed-off-by: David Cook <dcook@prosentient.com.au>

Works as described.

This interface is also much more visually appealing, user-friendly, and informative than it was when it used the YUI menu.

Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
(cherry picked from commit 28518a033bf9a1b3f86270cfab438b5b9cdee8be)

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
---
 .../prog/en/css/pages/batchMod.css            |   7 --
 .../prog/en/css/staff-global.css              |   8 ++
 koha-tmpl/intranet-tmpl/prog/en/js/acq.js     |  80 +++++---------
 .../prog/en/modules/admin/aqplan.tt           | 102 ++++++++----------
 .../prog/en/modules/tools/batchMod-del.tt     |   1 -
 .../prog/en/modules/tools/batchMod-edit.tt    |   1 -
 6 files changed, 80 insertions(+), 119 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css b/koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css
deleted file mode 100644
index c8d6bfbb9a..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css
+++ /dev/null
@@ -1,7 +0,0 @@
-#jobpanel,#jobstatus,#jobfailed { display : none; }
-#jobstatus { margin:.4em; }
-#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }
-#selections { width : 100%; white-space : normal; }
-#selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
-#selections span.selected { background-color : #CCE0FC; }
-#selections input { vertical-align:middle;margin:0 2px; }
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 57c5fdbe91..8f99a113c2 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -2570,3 +2570,11 @@ button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit
 fieldset.rows table.mceListBox {
     margin: 0;
 }
+
+#jobpanel,#jobstatus,#jobfailed { display : none; }
+#jobstatus { margin:.4em; }
+#jobprogress{ width:200px;height:10px;border:1px solid #666;background:url('/intranet-tmpl/prog/img/progress.png') -300px 0px no-repeat; }
+#selections { width : 100%; white-space : normal; }
+#selections span { margin:3px;padding:3px;background-color:#EBF3FF;-moz-border-radius:5px;border-radius:5px;white-space:nowrap;line-height:240%;font-size:75%; }
+#selections span.selected { background-color : #CCE0FC; }
+#selections input { vertical-align:middle;margin:0 2px; }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/acq.js b/koha-tmpl/intranet-tmpl/prog/en/js/acq.js
index 35287edcda..067cd08642 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/js/acq.js
+++ b/koha-tmpl/intranet-tmpl/prog/en/js/acq.js
@@ -862,61 +862,33 @@ function checkBudgetParent(budgetId, newBudgetParent) {
     }
 }
 
-
-function addColumn(p_sType, p_aArgs, p_oValue)
-{
-    var allRows = document.getElementById('plan').rows;
-    var colnum  = p_oValue[0];
-    var code   = p_oValue[1];
-    var colnum  = new Number(colnum);
-
-    for (var i=0; i<allRows.length; i++) {
-            var allCells  = allRows[i].cells;
-            allCells[colnum+1].style.display="table-cell";
-    }
-
-// make a menuitem object
-    var hids = document.getElementsByName("hide_cols")
-    for (var i=0; i<hids.length; i++) {
-        if (hids[i].value == code) {
-            var x =  hids[i];
-            x.parentNode.removeChild(x)    // sigh...
-            break;
-        }
-    }
+function hideColumn(num) {
+    $("#hideall,#showall").removeAttr("checked").parent().removeClass("selected");
+    $("#"+num).parent().removeClass("selected");
+    var hide = Number(num.replace("col","")) + 2;
+    // hide header and cells matching the index
+    $("#plan td:nth-child("+hide+"),#plan th:nth-child("+hide+")").toggle();
 }
 
-
-function delColumn(n, code)
-{
-    var allRows = document.getElementById('plan').rows;
-
-// find index
-    var index;
-    var nn  = new Number(n);
-    var code   = code ;
-    for (var i=0; i<allRows.length; i++) {
-        var allCells  = allRows[i].cells;
-        allCells[nn+1].style.display="none";
-    }
-
-    var r = 0;
-    var hids = document.getElementsByName("hide_cols")
-    for (var i=0; i<hids.length; i++) {
-        if (hids[i].value == code) {
-            r = 1;
-            break;
-        }
-    }
-
-    if (r == 0 ) {
-        // add hide_col to form
-        var el = document.createElement("input");
-        el.setAttribute("type", 'hidden' );
-        el.setAttribute("value", code);
-        el.setAttribute("name", 'hide_cols');
-        document.getElementById("hide_div").appendChild(el);
-    }
+function showColumn(num){
+    $("#hideall").removeAttr("checked").parent().removeClass("selected");
+    $("#"+num).parent().addClass("selected");
+    // set the index of the table column to hide
+    show = Number(num.replace("col","")) + 2;
+    // hide header and cells matching the index
+    $("#plan td:nth-child("+show+"),#plan th:nth-child("+show+")").toggle();
 }
 
-
+function showAllColumns(){
+    $("#selections").checkCheckboxes();
+    $("#selections span").addClass("selected");
+    $("#plan td:nth-child(2),#plan tr th:nth-child(2)").nextAll().show();
+    $("#hideall").removeAttr("checked").parent().removeClass("selected");
+}
+function hideAllColumns(){
+    var allCols = $("#plan th").length;
+    $("#selections").unCheckCheckboxes();
+    $("#selections span").removeClass("selected");
+    $("#plan td:nth-child(2),#plan th:nth-child(2)").nextUntil("th:nth-child("+(allCols-1)+"),td:nth-child("+(allCols-1)+")").hide(); // hide all but the last two columns
+    $("#hideall").attr("checked","checked").parent().addClass("selected");
+}
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
index 59e9121891..94261bd0c5 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
@@ -1,12 +1,10 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; Budgets &rsaquo; Funds &rsaquo; Planning for [% budget_period_description %] by [% authcat %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
+<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
 <script type="text/javascript" src="[% themelang %]/js/acq.js"></script>
 <script type="text/javascript">
 //<![CDATA[
-// ---------------------------------------------------------------------
-// Javascript
-// ---------------------------------------------------------------------
     function Check(f) {
             var ok=1;
             var _alertString="";
@@ -38,29 +36,32 @@
                     alert(alertString2);
             }
     }
-
-
-YAHOO.util.Event.onAvailable("popmenu", function () {
-
-    var itemData  = new Array();
-    table = document.getElementById('plan') 
-    tableTmp =  table.cloneNode(true); 
-    tableTmp.id = 'planTmp';
-
-    [% FOREACH authvals_ro IN authvals_row %]
-        itemData.push( {   text: "[% authvals_ro.val %]",  onclick: { fn: addColumn, obj:  ["[% authvals_ro.colnum %]",  "[% authvals_ro.code %]"]    }    }     );
-
-    [% END %]
-    oMenu = new YAHOO.widget.Menu("basicmenu",
-            {  position: "dynamic", itemdata: itemData , clicktohide  : "true" , context:["popmenu","tl","tr"] }
-    );
-
-   oMenu.render("popmenu");
-   YAHOO.util.Event.addListener("add_popmenu_item", "click", oMenu.show, null, oMenu);
-
-// oMenu.removeItem(2);   // TODO.....
-
-});
+    $(document).ready(function() {
+        $("#selectallbutton").on("click",function(e){
+            $("#itemst").checkCheckboxes();
+            e.preventDefault();
+        });
+        $("#clearallbutton").on("click",function(e){
+            $("#itemst").unCheckCheckboxes();
+            e.preventDefault();
+        });
+        $("#selections input").on("change",function(e){
+            var num = $(this).attr("id");
+            if(num == 'showall'){
+                showAllColumns();
+                e.stopPropagation();
+            } else if(num == 'hideall'){
+                hideAllColumns();
+                e.stopPropagation();
+            } else {
+                if($(this).attr("checked")){
+                    showColumn(num);
+                } else {
+                    hideColumn(num);
+                }
+            }
+        });
+    });
 //]]>
 </script>
 <style type="text/css">td.locked { background-image: url('/intranet-tmpl/prog/img/locked.png'); padding-left : 20px; background-repeat: no-repeat; background-position: 4% 50%; } a.control { font-size:85%;text-decoration:none; }</style>
@@ -82,7 +83,6 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
 <div id="yui-main">
 <div class="yui-b">
 
-
 [% INCLUDE 'budgets-admin-toolbar.inc' %]
 
 <form method="post" id="Aform" name="Aform"  action="/cgi-bin/koha/admin/aqplan.pl">
@@ -105,8 +105,13 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
         <p><b>Cells contain estimated values only.</b></p>
     [% END %]
     [% END %]
-
-    <table id="plan" width="100%">
+    <p id="selections">
+        <strong>Show/hide columns:</strong> <span class="selected"><input type="checkbox" checked="checked" id="showall"/><label for="showall">Show all columns</label></span> <span><input type="checkbox" id="hideall"/><label for="hideall">Hide all columns</label></span>
+        [% FOREACH authvals_ro IN authvals_row %]
+            <span class="selected"><label><input type="checkbox" checked="checked" id="col[% authvals_ro.colnum %]">[% authvals_ro.code %]</label></span>
+        [% END %]
+    </p>
+    <table id="plan">
     <thead>
     <tr>
     <th>Fund name</th>
@@ -122,32 +127,17 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
     [% authvals_ro.code %]</th>
     [% END %]
 
-    <th>Fund remaining</th><th>&nbsp;</th>
+    <th class="remaining">Fund remaining</th><th>&nbsp;</th>
     </tr>
-    <tr>
-    <th>&nbsp;</th><th>&nbsp;</th>
-    [% FOREACH authvals_ro IN authvals_row %]
-         [% IF ( authvals_ro.display ) %]
-            <th class="[% authvals_ro.colnum %]">
-        [% ELSE %]
-            <th style="display:none;" class="[% authvals_ro.colnum %]">
-        [% END %]
-
-    <a class="control" onclick="delColumn('[% authvals_ro.colnum %]', 'col[% authvals_ro.code %]')" href="#" title="Hide this column">[ hide ]</a></th>
-
-    [% END %]
-    <th id="popmenu"><a style="font-size:85%;text-decoration:none;" id="add_popmenu_item" href="#" title="Show a hidden column">[ show a column ]</a></th><th>&nbsp;</th>
-     </tr>
-
     </thead>
 
     <tbody>
     [% FOREACH budget_line IN budget_lines %]
     [% UNLESS ( loop.odd ) %]<tr class="highlight">[% ELSE %]<tr>[% END %]
         [% IF ( budget_line.budget_lock ) %]
-            <td align="left" class="locked" title="Fund locked">
+            <td class="locked" title="Fund locked">
         [% ELSE %]
-            <td align="left">
+            <td>
         [% END %]
         <a href="/cgi-bin/koha/admin/aqbudgets.pl?op=add_form&amp;budget_id=[% budget_line.budget_id %]&amp;budget_period_id=[% budget_line.budget_period_id %]">[% budget_line.budget_name_indent %]</a></td>
         <td><span id="budget_tot_formatted_[% budget_line.budget_id %]">[% budget_line.budget_amount_formatted %]&nbsp;</span>
@@ -162,10 +152,10 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
             [% ELSE %]
                 <td style="display:none;" class="[% line.colnum %]">
             [% END %]
-            <table class="invis" width="100%">
+            <table class="invis">
                 <tr>
                     [% IF ( line.show_actual ) %]
-                        <td   width="50%"  >[% line.actual_amount %]</td>
+                        <td    >[% line.actual_amount %]</td>
                     [% END %]
                 <td>
 
@@ -182,26 +172,26 @@ YAHOO.util.Event.onAvailable("popmenu", function () {
         [% END %]
 
         <td>
-        <table class="invis" width="100%">
+        <table class="invis">
             <tr>
        [% IF ( budget_line.show_actual ) %]
             [% IF ( budget_line.act_negative ) %]
-                <td width="50%" style="color: red;">
+                <td style="color: red;">
             [% ELSIF ( budget_line.act_positive ) %]
-                <td width="50%" style="color: green;">
+                <td style="color: green;">
             [% ELSE %]
-                <td width="50%">
+                <td>
             [% END %]
                     [% budget_line.budget_act_remain %]
             </td>
         [% END %]
 
         [% IF ( budget_line.est_negative ) %]
-            <td width="50%" style="color: red;" id="budget_est_[% budget_line.budget_id %]">
+            <td style="color: red;" id="budget_est_[% budget_line.budget_id %]">
         [% ELSIF ( budget_line.est_positive ) %]
-            <td width="50%" style="color: green;" id="budget_est_[% budget_line.budget_id %]">
+            <td style="color: green;" id="budget_est_[% budget_line.budget_id %]">
         [% ELSE %]
-            <td width="50%" id="budget_est_[% budget_line.budget_id %]">
+            <td id="budget_est_[% budget_line.budget_id %]">
         [% END %] 
                 [% budget_line.budget_est_remain %]&nbsp;
             </td>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
index 32aeb955c6..5404f02aca 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
@@ -2,7 +2,6 @@
 <title>Koha &rsaquo; Tools &rsaquo; Batch item deletion</title>
 [% INCLUDE 'doc-head-close.inc' %]
 <script type="text/javascript" src="[% themelang %]/js/background-job-progressbar.js"></script>
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/pages/batchMod.css" />
 <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
 <script type="text/javascript" src="[% themelang %]/js/pages/batchMod.js"></script>
 <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.dataTables.min.js"></script>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
index d4b5e103e5..85a8db9646 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
@@ -3,7 +3,6 @@
 [% INCLUDE 'doc-head-close.inc' %]
 <script type="text/javascript" src="[% themelang %]/js/background-job-progressbar.js"></script>
 <script type="text/javascript" src="[% themelang %]/js/cataloging.js"></script>
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/pages/batchMod.css" />
 <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
 <script type="text/javascript" src="[% themelang %]/js/pages/batchMod.js"></script>
 <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.dataTables.min.js"></script>
-- 
2.39.5