gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Owen Leonard 2013-03-07 16:07:16 -05:00 committed by Jared Camins-Esakov
parent 1d1cd09456
commit 28518a033b
6 changed files with 80 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
koha-tmpl/intranet-tmpl/prog/en/css/pages/batchMod.css
View File

@ -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; }

8
koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
View File

@ -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; }

80
koha-tmpl/intranet-tmpl/prog/en/js/acq.js
View File

@ -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");
}

102
koha-tmpl/intranet-tmpl/prog/en/modules/admin/aqplan.tt
View File

@ -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>

1
koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-del.tt
View File

@ -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>

1
koha-tmpl/intranet-tmpl/prog/en/modules/tools/batchMod-edit.tt
View File

@ -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>