View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 901 | RackTables | JavaScript | public | 2013-06-19 10:09 | 2013-11-26 15:37 |
| Reporter | blaza-pl | Assigned To | adoom42 | ||
| Priority | low | Severity | feature | Reproducibility | always |
| Status | closed | Resolution | fixed | ||
| Product Version | 0.20.4 | ||||
| Target Version | 0.20.6 | Fixed in Version | 0.20.6 | ||
| Summary | 901: Add collapse/expand feature to Loaction filter | ||||
| Description | This patch is based on my previous work (bug: 0000841). It extends the functionality of Location filter by adding +/- elements which allow the user to expand/collapse sub level locations. This also runs javascript on load to auto-collapse all sub locations which are not selected/checked. I found it very useful in case where location tree is quite huge (>100 locations with 3 sub levels tree) | ||||
| Tags | No tags attached. | ||||
| Attached Files | location-filter-collapser_interface.php.patch (3,487 bytes)
--- inc/interface.php 2013-06-17 07:40:16.341132554 +0200
+++ inc/interface.php 2013-06-19 08:59:39.573195984 +0200
@@ -277,16 +277,26 @@
foreach ($subtree as $location_id => $location)
{
- echo "<tr><td class=tagbox style='padding-left: " . ($level * 16) . "px;'><label>";
+
+ echo "<div class=tagbox style='text-align:left; padding-left: " . ($level * 8) . "px;'><label>";
+
$checked = (in_array ($location['id'], $_SESSION['locationFilter'])) ? 'checked' : '';
- echo "<label><input type=checkbox name='location_id[]' class=${level} value='${location['id']}'${checked} onClick=checkAll(this)>";
+ echo "<input type=checkbox name='location_id[]' class=${level} value='${location['id']}' ${checked} onClick=checkAll(this)>";
echo "<a class=nolink title='" .getLocationTooltip($location['id']) . "'>${location['name']}</a>";
echo "</label>";
+
if ($location['kidc'])
+ {
+ echo "<a id='lfa" .$location['id'] . "' onclick=\"expand('${location['id']}')\" href\"#\" > - </a>";
+ echo "<div id='lfd" . $location['id'] . "'>";
$self ($location['kids'], $level + 1);
+ echo "</div>";
}
+ echo "</div>\n";
}
+ }
+
addJS(<<<END
function checkAll(bx){
@@ -311,13 +321,63 @@
else if(parseInt(bxs[j].className) <= parseInt(bx.className))
in_tree = false;
-
if (bxs[j].type=="checkbox" && in_tree == true)
bxs[j].checked = bx.checked;
+ }
+ }
+ }
+ function collapseAll(bx){
+ for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; )
+ if (tbls[i].id=="locationFilter")
+ {
+ var bxs=tbls[i].getElementsByTagName("div");
+ //loop through divs to hide unchecked
+ for (var j=0; j<bxs.length; j++ )
+ {
+ var is_checked = -1;
+ var in_div=bxs[j].getElementsByTagName("input");
+ //loop through input to find if any is checked
+ for (var k=0; k<in_div.length; k++)
+ {
+ if(in_div[k].type="checkbox")
+ {
+ if (in_div[k].checked == true)
+ {
+ is_checked = true;
+ break;
}
+ else
+ is_checked = false;
+ }
+ }
+ //nothing selected and element id is lfd...
+ if (is_checked == false && !bxs[j].id.indexOf("lfd"))
+ {
+ //collapse
+ expand(bxs[j].id.substr(3));
+ }
+ }
+ }
+ }
+
+
+ function expand(id)
+ {
+ var divid = document.getElementById("lfd" + id);
+ var iconid = document.getElementById("lfa" + id);
+ if (divid.style.display == 'none')
+ {
+ divid.style.display = 'block';
+ iconid.innerHTML = ' - ';
}
+ else
+ {
+ divid.style.display = 'none';
+ iconid.innerHTML = ' + ';
}
+ }
+
END
,TRUE);
@@ -338,13 +398,18 @@
{
echo "<tr><td class=tagbox><hr></td></tr>\n";
- echo "<tr><td class=tagbox style='padding-left: 0px' ><label>";
+ echo "<tr><td class=tagbox style='padding-left: 0px' >";
echo "<label><input type=checkbox name='location' onClick=checkAll(this)>";
+ echo "<img src=pix/1x1t.gif onLoad=collapseAll(this)>"; //dirty hack to collapse all when page is displayed
echo "</label></td></tr>\n";
+ echo "<tr><td>";
renderLocationCheckbox (treeFromList ($locationlist));
+ echo "</td></tr>";
+
echo "<tr><td class=tagbox><hr></td></tr>\n";
echo "<tr><td>";
+
printImageHREF ('setfilter', 'set filter', TRUE);
echo "</td></tr>\n";
}
location-filter-collapser_interface.php_0.20.5.patch (3,068 bytes)
--- interface.php.orig 2013-07-03 10:01:34.845134313 +0200
+++ interface.php 2013-07-03 10:20:45.013258283 +0200
@@ -282,13 +282,19 @@
foreach ($subtree as $location_id => $location)
{
- echo "<tr><td class=tagbox style='padding-left: " . ($level * 16) . "px;'><label>";
+ echo "<div class=tagbox style='text-align:left; padding-left: " . ($level * 16) . "px;'>";
$checked = (in_array ($location['id'], $_SESSION['locationFilter'])) ? 'checked' : '';
echo "<label><input type=checkbox name='location_id[]' class=${level} value='${location['id']}'${checked} onClick=checkAll(this)>";
echo "<a class=nolink title='" .getLocationTooltip($location['id']) . "'>${location['name']}</a>";
- echo "</label></td></tr>\n";
+ echo "</label> ";
if ($location['kidc'])
+ {
+ echo "<a id='lfa" .$location['id'] . "' onclick=\"expand('${location['id']}')\" href\"#\" > - </a>";
+ echo "<div id='lfd" . $location['id'] . "'>";
$self ($location['kids'], $level + 1);
+ echo "</div>";
+ }
+ echo "</div>\n";
}
}
@@ -308,6 +314,59 @@
}
}
}
+
+function collapseAll(bx){
+ for (var tbls=document.getElementsByTagName("table"), i=tbls.length; i--; )
+ if (tbls[i].id=="locationFilter")
+ {
+ var bxs=tbls[i].getElementsByTagName("div");
+ //loop through divs to hide unchecked
+ for (var j=0; j<bxs.length; j++ )
+ {
+ var is_checked = -1;
+ var in_div=bxs[j].getElementsByTagName("input");
+ //loop through input to find if any is checked
+ for (var k=0; k<in_div.length; k++)
+ {
+ if(in_div[k].type="checkbox")
+ {
+ if (in_div[k].checked == true)
+ {
+ is_checked = true;
+ break;
+ }
+ else
+ is_checked = false;
+ }
+ }
+ //nothing selected and element id is lfd...
+ if (is_checked == false && !bxs[j].id.indexOf("lfd"))
+ {
+ //collapse
+ expand(bxs[j].id.substr(3));
+ }
+ }
+ }
+ }
+
+
+function expand(id)
+{
+ var divid = document.getElementById("lfd" + id);
+ var iconid = document.getElementById("lfa" + id);
+ if (divid.style.display == 'none')
+ {
+ divid.style.display = 'block';
+ iconid.innerHTML = ' - ';
+ }
+ else
+ {
+ divid.style.display = 'none';
+ iconid.innerHTML = ' + ';
+ }
+}
+
+
END
,TRUE);
startPortlet ('Location filter');
@@ -324,10 +383,11 @@
{
echo "<tr><td class=tagbox style='padding-left: 0px'><label>";
echo "<input type=checkbox name='location' onClick=checkAll(this)> Toggle all";
+ echo "<img src=pix/1x1t.gif onLoad=collapseAll(this)>"; //dirty hack to collapse all when page is displayed
echo "</label></td></tr>\n";
- echo "<tr><td class=tagbox><hr></td></tr>\n";
+ echo "<tr><td class=tagbox><hr>\n";
renderLocationCheckbox (treeFromList ($locationlist));
- echo "<tr><td class=tagbox><hr></td></tr>\n";
+ echo "<hr></td></tr>\n";
echo "<tr><td>";
printImageHREF ('setfilter', 'set filter', TRUE);
echo "</td></tr>\n";
| ||||
| Date Modified | Username | Field | Change |
|---|---|---|---|
| 2013-06-19 10:09 | blaza-pl | New Issue | |
| 2013-06-19 10:09 | blaza-pl | Status | new => assigned |
| 2013-06-19 10:09 | blaza-pl | Assigned To | => andriyanov |
| 2013-06-19 10:09 | blaza-pl | File Added: location-filter-collapser_interface.php.patch | |
| 2013-06-19 10:30 | andriyanov | Note Added: 0001531 | |
| 2013-06-19 10:30 | andriyanov | Assigned To | andriyanov => adoom42 |
| 2013-07-03 12:44 | blaza-pl | File Added: location-filter-collapser_interface.php_0.20.5.patch | |
| 2013-07-03 12:45 | blaza-pl | Note Added: 0001575 | |
| 2013-07-20 01:27 | adoom42 | Note Added: 0001601 | |
| 2013-07-20 01:27 | adoom42 | Status | assigned => closed |
| 2013-07-20 01:27 | adoom42 | Resolution | open => fixed |
| 2013-07-20 01:27 | adoom42 | Fixed in Version | => 0.20.6 |
| 2013-07-20 01:27 | adoom42 | Target Version | => 0.20.6 |
