balki/pgweb
1
0
Fork 0
Code Pull Requests 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; top: 18px;
} }
#sidebar span.current-database { #sidebar span.current-database,
#sidebar input.typeahead {
margin-left: 30px; margin-left: 30px;
display: inline-block; display: inline-block;
width: 200px; width: 200px;
@ -111,6 +112,20 @@
text-overflow: ellipsis; 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 { #sidebar div.tables-list {
position: absolute; position: absolute;
right: 0; right: 0;

5
static/index.html
View File

@ -14,6 +14,7 @@
<script type="text/javascript" src="static/js/ace-pgsql.js"></script> <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/bootstrap-contextmenu.js"></script>
<script type="text/javascript" src="static/js/utils.js"></script> <script type="text/javascript" src="static/js/utils.js"></script>
<script type="text/javascript" src="static/js/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script> <script type="text/javascript" src="static/js/app.js"></script>
</head> </head>
<body> <body>
@ -40,6 +41,7 @@
<div class="wrap"> <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> <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> <span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
</div> </div>
<div id="objects"></div> <div id="objects"></div>
@ -248,9 +250,6 @@
<li><a href="#" data-action="copy">Copy Table Name</a></li> <li><a href="#" data-action="copy">Copy Table Name</a></li>
</ul> </ul>
</div> </div>
<div id="databases_context_menu">
<ul class="dropdown-menu" role="menu"></ul>
</div>
<div id="current_database_context_menu"> <div id="current_database_context_menu">
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#" data-action="export">Export SQL dump</a></li> <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({ function toggleDatabaseSearch() {
target: "#databases_context_menu", $("#current_database").toggle();
onItem: function(context, e) { $("#database_search").toggle();
var name = $(e.target).text();
apiCall("post", "/switchdb", { db: name }, function(resp) {
if (resp.error) {
alert(resp.error);
return;
}
window.location.reload();
});
}
});
} }
$(document).ready(function() { $(document).ready(function() {
@ -1059,14 +1050,37 @@ $(document).ready(function() {
$("#current_database").on("click", function(e) { $("#current_database").on("click", function(e) {
apiCall("get", "/databases", {}, function(resp) { apiCall("get", "/databases", {}, function(resp) {
$("#databases_context_menu > ul > li").remove(); toggleDatabaseSearch();
resp.forEach(function(name) { var input = $("#database_search");
$("<li><a href='#'>" + name + "</a></li>").appendTo("#databases_context_menu > ul"); 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() { $("#edit_connection").on("click", function() {
if (connected) { if (connected) {
$("#close_connection_window").show(); $("#close_connection_window").show();

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

File diff suppressed because one or more lines are too long