sosedoff/pgweb
1
1
Fork 0
mirror of https://github.com/sosedoff/pgweb.git synced 2024-12-14 19:21:46 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Search for database with autocomplete

Browse Source
This commit is contained in:
Jason Ye 2017-10-06 10:15:44 -04:00 committed by Dan Sosedoff
parent ed7557c5da
commit fc01b1db81
4 changed files with 52 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/css/app.css
View File

@ -101,7 +101,8 @@
top: 18px;
}
#sidebar span.current-database {
#sidebar span.current-database,
#sidebar input.typeahead {
margin-left: 30px;
display: inline-block;
width: 200px;
@ -111,6 +112,20 @@
text-overflow: ellipsis;
}
#sidebar input.typeahead {
display: none;
width: 160px;
height: 22px;
color: black;
font-weight: normal;
}
#sidebar ul.typeahead {
margin-left: 30px;
overflow-y: auto;
max-height: 300px;
}
#sidebar div.tables-list {
position: absolute;
right: 0;

9
static/index.html
View File

@ -14,7 +14,8 @@
<script type="text/javascript" src="static/js/ace-pgsql.js"></script>
<script type="text/javascript" src="static/js/bootstrap-contextmenu.js"></script>
<script type="text/javascript" src="static/js/utils.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
<script type="text/javascript" src="static/js/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</head>
<body>
<div id="main">
@ -38,8 +39,9 @@
<div id="sidebar">
<div class="tables-list">
<div class="wrap">
<div class="title main">
<div class="title main">
<i class="fa fa-database"></i> <span class="current-database" id="current_database"></span>
<input class="typeahead current_database" id="database_search" type="text" placeholder="Search...">
<span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
</div>
<div id="objects"></div>
@ -248,9 +250,6 @@
<li><a href="#" data-action="copy">Copy Table Name</a></li>
</ul>
</div>
<div id="databases_context_menu">
<ul class="dropdown-menu" role="menu"></ul>
</div>
<div id="current_database_context_menu">
<ul class="dropdown-menu" role="menu">
<li><a href="#" data-action="export">Export SQL dump</a></li>

48
static/js/app.js
View File

@ -850,20 +850,11 @@ function bindContextMenus() {
}
});
});
}
$(".tables-list .title").contextmenu({
target: "#databases_context_menu",
onItem: function(context, e) {
var name = $(e.target).text();
apiCall("post", "/switchdb", { db: name }, function(resp) {
if (resp.error) {
alert(resp.error);
return;
}
window.location.reload();
});
}
});
function toggleDatabaseSearch() {
$("#current_database").toggle();
$("#database_search").toggle();
}
$(document).ready(function() {
@ -1059,13 +1050,36 @@ $(document).ready(function() {
$("#current_database").on("click", function(e) {
apiCall("get", "/databases", {}, function(resp) {
$("#databases_context_menu > ul > li").remove();
resp.forEach(function(name) {
$("<li><a href='#'>" + name + "</a></li>").appendTo("#databases_context_menu > ul");
toggleDatabaseSearch();
var input = $("#database_search");
input.typeahead("destroy");
input.typeahead({
source: resp,
minLength: 0,
items: "all",
autoSelect: false,
fitToElement: true
});
input.typeahead("lookup").focus();
input.on("focusout", function(e){
toggleDatabaseSearch();
input.off("focusout");
});
$(".tables-list .title").triggerHandler("contextmenu");
});
});
$("#database_search").change(function(e) {
var current = $("#database_search").typeahead("getActive");
if (current && current == $("#database_search").val()) {
apiCall("post", "/switchdb", { db: current }, function(resp) {
if (resp.error) {
alert(resp.error);
return;
};
window.location.reload();
});
};
});
$("#edit_connection").on("click", function() {
if (connected) {

1
static/js/bootstrap3-typeahead.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long