Feature: Quick Search

Device/Job/User Search refactoring. Quick-Search implemented.
This commit is contained in:
Gary Sharp
2014-02-06 16:11:45 +11:00
parent 9ea0273936
commit cd31ba4a6c
53 changed files with 1045 additions and 470 deletions
+64 -1
View File
@@ -41936,13 +41936,76 @@ jQuery.fn.DataTable.defaults.aLengthMenu = [[10, 20, 50, -1], [10, 20, 50, "All"
$(function () {
// Search Functionality
var quickSearchInited = false;
$('#SearchQuery').watermark('Search').keypress(function (e) {
if (e.keyCode == 13) {
$(this).closest('form').submit();
return false;
}
}).focus(function () {
$(this).select();
$this = $(this);
$this.select();
if (!quickSearchInited) {
var quickSearchUrl = $this.attr('data-quicksearchurl');
if (quickSearchUrl) {
$this.autocomplete({
source: quickSearchUrl,
minLength: 2,
select: function (e, ui) {
$this.val(ui.item.tag);
$this.closest('form').submit();
},
response: function (e, ui) {
for (var i = 0; i < ui.content.length; i++) {
var item = ui.content[i];
switch (item.Type) {
case 'Device':
item.tag = '!' + item.Id;
break;
case 'Job':
item.tag = '#' + item.Id;
break;
case 'User':
item.tag = '@' + item.Id;
break;
}
}
}
}).autocomplete("widget").attr('id', 'QuickSearchMenu');
$this.data('ui-autocomplete')._renderItem = function (ul, item) {
var template;
//"<a><strong>" + item.DisplayName + "</strong><br>" + item.Id + " (" + item.Type + ")</a>"
switch (item.Type) {
case 'Device':
template = $('<a>').append('<i class="fa fa-desktop fa-fw">').append($('<strong>').text('Device ' + item.Id)).append($('<div>').text(item.ComputerName + '; ' + item.DeviceModelDescription))
break;
case 'Job':
if (item.DeviceSerialNumber && item.UserId) {
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId + '; ' + item.DeviceSerialNumber))
} else if (item.DeviceSerialNumber) {
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.DeviceSerialNumber))
} else if (item.UserId) {
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId))
}
break;
case 'User':
template = $('<a>').append('<i class="fa fa-user fa-fw">').append($('<strong>').text(item.DisplayName)).append($('<div>').text(item.Id))
break;
}
return $("<li>")
.data("item.autocomplete", item)
.append(template)
.appendTo(ul);
};
}
quickSearchInited = true;
}
});
// Menu Functionality
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -4,13 +4,76 @@
$(function () {
// Search Functionality
var quickSearchInited = false;
$('#SearchQuery').watermark('Search').keypress(function (e) {
if (e.keyCode == 13) {
$(this).closest('form').submit();
return false;
}
}).focus(function () {
$(this).select();
$this = $(this);
$this.select();
if (!quickSearchInited) {
var quickSearchUrl = $this.attr('data-quicksearchurl');
if (quickSearchUrl) {
$this.autocomplete({
source: quickSearchUrl,
minLength: 2,
select: function (e, ui) {
$this.val(ui.item.tag);
$this.closest('form').submit();
},
response: function (e, ui) {
for (var i = 0; i < ui.content.length; i++) {
var item = ui.content[i];
switch (item.Type) {
case 'Device':
item.tag = '!' + item.Id;
break;
case 'Job':
item.tag = '#' + item.Id;
break;
case 'User':
item.tag = '@' + item.Id;
break;
}
}
}
}).autocomplete("widget").attr('id', 'QuickSearchMenu');
$this.data('ui-autocomplete')._renderItem = function (ul, item) {
var template;
//"<a><strong>" + item.DisplayName + "</strong><br>" + item.Id + " (" + item.Type + ")</a>"
switch (item.Type) {
case 'Device':
template = $('<a>').append('<i class="fa fa-desktop fa-fw">').append($('<strong>').text('Device ' + item.Id)).append($('<div>').text(item.ComputerName + '; ' + item.DeviceModelDescription))
break;
case 'Job':
if (item.DeviceSerialNumber && item.UserId) {
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId + '; ' + item.DeviceSerialNumber))
} else if (item.DeviceSerialNumber) {
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.DeviceSerialNumber))
} else if (item.UserId) {
template = $('<a>').append('<i class="fa fa-question-circle fa-fw">').append($('<strong>').text('Job ' + item.Id)).append($('<div>').text(item.UserId))
}
break;
case 'User':
template = $('<a>').append('<i class="fa fa-user fa-fw">').append($('<strong>').text(item.DisplayName)).append($('<div>').text(item.Id))
break;
}
return $("<li>")
.data("item.autocomplete", item)
.append(template)
.appendTo(ul);
};
}
quickSearchInited = true;
}
});
// Menu Functionality
+19 -1
View File
@@ -3492,6 +3492,25 @@ header .watermark,
#header .watermark {
background-color: #888;
}
#QuickSearchMenu {
max-height: 400px;
font-size: .9em;
background: none;
background-color: #fafafa;
}
#QuickSearchMenu li:not(:last-child) {
border-bottom: 1px solid #d8d8d8;
}
#QuickSearchMenu li > a {
padding: 2px;
}
#QuickSearchMenu li > a > i {
margin-right: 2px;
}
#QuickSearchMenu li > a > div {
padding-left: 1.2857142857142858em;
margin-left: 2px;
}
#layout_PageHeading {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x #ffffff;
background: linear-gradient(to bottom, #f2f2f2 0px, #ffffff 50px) #ffffff;
@@ -4509,7 +4528,6 @@ input:-moz-placeholder {
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
File diff suppressed because one or more lines are too long
+19
View File
@@ -291,6 +291,25 @@ header .watermark,
#header .watermark {
background-color: #888;
}
#QuickSearchMenu {
max-height: 400px;
font-size: .9em;
background: none;
background-color: #fafafa;
}
#QuickSearchMenu li:not(:last-child) {
border-bottom: 1px solid #d8d8d8;
}
#QuickSearchMenu li > a {
padding: 2px;
}
#QuickSearchMenu li > a > i {
margin-right: 2px;
}
#QuickSearchMenu li > a > div {
padding-left: 1.2857142857142858em;
margin-left: 2px;
}
#layout_PageHeading {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x #ffffff;
background: linear-gradient(to bottom, #f2f2f2 0px, #ffffff 50px) #ffffff;
+26
View File
@@ -112,6 +112,7 @@ header, #header {
&:first-child {
border-top: 1px solid @BackgroundColour;
}
&:last-child {
border-bottom: 1px solid @BackgroundColour;
}
@@ -215,6 +216,31 @@ header, #header {
}
}
#QuickSearchMenu {
max-height: 400px;
font-size: .9em;
background: none;
background-color: @BackgroundColourLight;
li {
&:not(:last-child) {
border-bottom: 1px solid @TableDataDarkBorderColour;
}
& > a {
padding: 2px;
& > i {
margin-right: 2px;
}
& > div {
padding-left: 1.2857142857142858em;
margin-left: 2px;
}
}
}
}
#layout_PageHeading {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x @white;
background: linear-gradient(to bottom, @BackgroundColourGradient 0px, @white 50px) @white;
File diff suppressed because one or more lines are too long
@@ -106,7 +106,6 @@ input:-moz-placeholder {
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
@@ -32,7 +32,7 @@ input:-moz-placeholder {
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
//padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
File diff suppressed because one or more lines are too long