balki/pgweb
1
0
Fork 0
Code Pull Requests Activity

Add result row context menu to copy value or filter rows

Browse Source
This commit is contained in:
Dan Sosedoff 2018-09-14 18:14:18 -05:00
parent 14037ddad2
commit 6ed3d5b501
3 changed files with 58 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pkg/data/bindata.go
View File

File diff suppressed because one or more lines are too long

11
static/index.html
View File

@ -78,7 +78,10 @@
</div>
<div id="output">
<div class="wrapper">
<table id="results" class="table"></table>
<table id="results" class="table">
<thead id="results_header"></thead>
<tbody id="results_body"></tbody>
</table>
</div>
</div>
<div id="pagination">
@ -276,5 +279,11 @@
<li><a href="#" data-action="copy_name">Copy Column Name</a></li>
</ul>
</div>
<div id="results_row_menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#" data-action="copy_value">Copy Value</a></li>
<li><a href="#" data-action="filter_by_value">Filter Rows By Value</a></li>
</ul>
</div>
</body>
</html>

53
static/js/app.js
View File

@ -186,9 +186,11 @@ function getCurrentObject() {
function resetTable() {
$("#results").
data("mode", "").
text("").
removeClass("empty").
removeClass("no-crop");
$("#results_header").html("");
$("#results_body").html("");
}
function performTableAction(table, action, el) {
@ -288,13 +290,14 @@ function buildTable(results, sortColumn, sortOrder, options) {
resetTable();
if (results.error) {
$("<tr><td>ERROR: " + results.error + "</tr></tr>").appendTo("#results");
$("#results").addClass("empty");
$("#results_header").html("");
$("#results_body").html("<tr><td>ERROR: " + results.error + "</tr></tr>");
return;
}
if (results.rows.length == 0) {
$("<tr><td>No records found</tr></tr>").appendTo("#results");
$("#results_header").html("");
$("#results_body").html("<tr><td>No records found</tr></tr>");
$("#result-rows-count").html("");
$("#results").addClass("empty");
return;
@ -305,10 +308,10 @@ function buildTable(results, sortColumn, sortOrder, options) {
results.columns.forEach(function(col) {
if (col === sortColumn) {
cols += "<th class='active' data-name='" + col + "'" + "data-order=" + sortOrder + ">" + col + "&nbsp;" + sortArrow(sortOrder) + "</th>";
cols += "<th class='table-header-col active' data-name='" + col + "'" + "data-order=" + sortOrder + ">" + col + "&nbsp;" + sortArrow(sortOrder) + "</th>";
}
else {
cols += "<th data-name='" + col + "'>" + col + "</th>";
cols += "<th class='table-header-col' data-name='" + col + "'>" + col + "</th>";
}
});
@ -325,7 +328,7 @@ function buildTable(results, sortColumn, sortOrder, options) {
// Add all actual row data here
for (i in row) {
r += "<td><div>" + escapeHtml(row[i]) + "</div></td>";
r += "<td data-col='" + i + "'><div>" + escapeHtml(row[i]) + "</div></td>";
}
// Add row action button
@ -336,7 +339,8 @@ function buildTable(results, sortColumn, sortOrder, options) {
rows += "<tr>" + r + "</tr>";
});
$("<thead>" + cols + "</thead><tbody>" + rows + "</tobdy>").appendTo("#results");
$("#results_header").html(cols);
$("#results_body").html(rows);
// Show number of rows rendered on the page
$("#result-rows-count").html(results.rows.length + " rows");
@ -829,7 +833,7 @@ function getConnectionString() {
// Add a context menu to the results table header columns
function bindTableHeaderMenu() {
$("#results").contextmenu({
$("#results_header").contextmenu({
scopes: "th",
target: "#results_header_menu",
before: function(e, element, target) {
@ -865,6 +869,37 @@ function bindTableHeaderMenu() {
}
}
});
$("#results_body").contextmenu({
scopes: "td",
target: "#results_row_menu",
before: function(e, element, target) {
// Enable menu for browsing table rows view only.
if ($("#results").data("mode") != "browse") {
e.preventDefault();
this.closemenu();
return false;
}
},
onItem: function(context, e) {
var menuItem = $(e.target);
switch(menuItem.data("action")) {
case "copy_value":
copyToClipboard($(context).text());
break;
case "filter_by_value":
var colIdx = $(context).data("col");
var colValue = $(context).text();
var colName = $("#results_header th").eq(colIdx).data("name");
$("select.column").val(colName);
$("select.filter").val("equal");
$("#table_filter_value").val(colValue);
$("#rows_filter").submit();
}
}
});
}
function bindCurrentDatabaseMenu() {