Skip to content

A
atlas
Commit 4b8db750 by sameer79 Committed by Sarath Subramanian
Options

ATLAS-3437: UI: Allows users to perform wildcard searches on classification.

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent b0ab2ffe
Showing with 144 additions and 40 deletions
dashboardv2/public/js/views/search/SearchLayoutView.js
......@@ -96,24 +96,24 @@ define(['require',
var param = Utils.getUrlState.getQueryParams();
this.query = {
dsl: {
query: null,
type: null,
pageOffset: null,
pageLimit: null
query: this.value ? this.value.query : null,
type: this.value ? this.value.type : null,
pageOffset: this.value ? this.value.pageOffset : null,
pageLimit: this.value ? this.value.pageLimit : null
},
basic: {
query: null,
type: null,
tag: null,
term: null,
attributes: null,
tagFilters: null,
pageOffset: null,
pageLimit: null,
entityFilters: null,
includeDE: null,
excludeST: null,
excludeSC: null
query: this.value ? this.value.query: null,
type: this.value ? this.value.type: null,
tag: this.value ? this.value.tag: null,
term: this.value ? this.value.term: null,
attributes: this.value ? this.value.attributes: null,
tagFilters: this.value ? this.value.tagFilters: null,
pageOffset: this.value ? this.value.pageOffset: null,
pageLimit: this.value ? this.value.pageLimit: null,
entityFilters: this.value ? this.value.entityFilters: null,
includeDE: this.value ? this.value.includeDE: null,
excludeST: this.value ? this.value.excludeST: null,
excludeSC: this.value ? this.value.excludeSC: null
}
};
if (!this.value) {
......@@ -263,7 +263,7 @@ define(['require',
isTypeEl = $el.data('id') == "typeLOV",
select2Data = $el.select2('data');
if (e.type == "change" && select2Data) {
var value = (_.isEmpty(select2Data) ? select2Data : _.first(select2Data).id),
var value = (_.isEmpty(select2Data) ? select2Data : _.first(select2Data).id) || this.value.tag,
key = "tag",
filterType = isBasicSearch ? 'tagFilters' : null,
value = value && value.length ? value : null;
......@@ -506,7 +506,8 @@ define(['require',
that.ui.tagLov.html(tagStr);
this.ui.tagLov.select2({
placeholder: "Select Classification",
allowClear: true
allowClear: true,
tags: true
});
}
that.ui.typeLov.html(typeStr);
......@@ -594,6 +595,7 @@ define(['require',
this.ui.searchType.prop("checked", false).trigger("change");
}
}
if (this.value.type) {
this.ui.typeLov.val(this.value.type);
if (this.ui.typeLov.data('select2')) {
if (this.ui.typeLov.val() !== this.value.type) {
......@@ -603,18 +605,23 @@ define(['require',
this.ui.typeLov.trigger("change", { 'manual': true });
}
}
}
if (!this.dsl) {
if (this.value.tag) {
this.ui.tagLov.val(this.value.tag);
if (this.ui.tagLov.data('select2')) {
// To handle delete scenario.
if (this.ui.tagLov.val() !== this.value.tag) {
this.value.tag = null;
// this.value.tag = null;
this.ui.tagLov.val("").trigger("change", { 'manual': true });
} else {
this.ui.tagLov.trigger("change", { 'manual': true });
}
}
}
if (this.value.term) {
this.ui.termLov.append('<option value="' + this.value.term + '" selected="selected">' + this.value.term + '</option>');
}
......@@ -642,8 +649,8 @@ define(['require',
tagFilters: null,
entityFilters: null
},
typeLovValue = this.ui.typeLov.find(':selected').data('name'),
tagLovValue = this.ui.tagLov.find(':selected').data('name'),
typeLovValue = this.ui.typeLov.find(':selected').data('name'), // to get count of selected element used data
tagLovValue = this.ui.tagLov.find(':selected').data('name') || this.ui.tagLov.val(),
termLovValue = this.ui.termLov.select2('val')
params['type'] = typeLovValue || null;
if (!this.dsl) {
......
dashboardv3/public/css/scss/leftsidebar.scss
......@@ -53,10 +53,32 @@
}
}
// .remove-drop-down {
// .drop-down-menu-view {
// display: inline-block;
// }
// .show-in-drop-down {
// display: none;
// }
// }
// .add-drop-down {
// .drop-down-menu-view {
// display: none;
// }
// .show-in-drop-down {
// display: block;
// }
// }
.filter-tree-content {
overflow: auto;
height: calc(100vh - 188px);
.panel-collapse {
padding-top: 7px;
}
......@@ -188,6 +210,20 @@
}
}
input {
color: $color_ironside_gray_approx !important;
width: 150px;
display: inline-block;
}
input:hover {
background-color: #fff;
}
&:hover .clear-icon {
color: $color_ironside_gray_approx !important;
}
a {
display: inline-block;
padding: 0px 3px;
......@@ -198,6 +234,21 @@
margin-left: 10px;
}
}
.clear-icon {
color: $color_ironside_gray_approx !important;
position: absolute;
top: 30%;
right: 12px;
}
.has-feedback .form-control {
padding: 6px 12px;
}
}
.hide-icon {
display: none;
}
.custom-filter {
......@@ -227,6 +278,8 @@
color: $action_gray;
}
}
}
.sidebar-content {
......
dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
......@@ -19,25 +19,12 @@
<i class="ec-icon fa"></i>
<h4 class="panel-title">Classifications</h4>
<div class="btn-group pull-right">
<!-- <button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="classification" title="Show flat tree">
<i class="fa fa-sitemap"></i>
</button> -->
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="classification" title="Refresh">
<button type="button" class="typeRefresh drop-down-menu-view" data-id="refreshTree" data-type="classification" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="typeRefresh" data-id="showEmptyClassifications" title="Show unused classification">
<button type="button" class="typeRefresh drop-down-menu-view" data-id="showEmptyClassifications" title="Show unused classification">
<i class="fa fa-toggle-off"></i>
</button>
<!-- <button type="button" data-id="createTag" data-type="classification" title="Create Classification">
<i class="fa fa-plus"></i>
</button> -->
<!-- <ul class="dropdown-menu right-align tree-menu">
<li data-id="createTag"><i class="fa fa-plus"></i><a>Create Classification</a></li>
<li data-id="showEmptyClassifications"><i class="fa fa-check-circle"></i> <a>Show Empty</a></li>
</ul> -->
<!-- <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-id="tagMenu">
<i class="fa fa-ellipsis-v"></i>
</button> -->
<button type="button" class="typeRefresh dropdown">
<div class=" btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i>
......@@ -45,10 +32,15 @@
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="classification"> <i class="fa fa-list-ul"></i><span>Show flat tree</span>
</li>
<!-- <li data-id="showEmptyClassifications" data-type="classification"> <i class="fa fa-toggle-off"></i><span>Show unused classification</span>
</li> -->
<li data-id="createTag" data-type="classification"> <i class="fa fa-plus"></i><span>Create Classification</span>
</li>
<li data-id="wildCardClick" data-type="classification">
<div class="has-feedback align-left-right-icon search-box">
<input type="text" class="form-control" name="wildcard search" placeholder="Wildcard search" data-id="wildCardValue" />
<span class="fa fa-times clear-icon" data-id="clearWildCard"> </span>
</div>
</li>
</button>
</ul>
</button>
</div>
......
dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
......@@ -47,8 +47,11 @@ define([
showEmptyClassifications: '[data-id="showEmptyClassifications"]',
// Create
createTag: '[data-id="createTag"]'
createTag: '[data-id="createTag"]',
wildCardClick: '[data-id="wildCardClick"]',
wildCardSearch: '[data-id="wildCardSearch"]',
wildCardValue: '[data-id="wildCardValue"]',
clearWildCard: '[data-id="clearWildCard"]'
},
templateHelpers: function() {
return {
......@@ -88,6 +91,34 @@ define([
that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderClassificationTree();
};
events["click " + this.ui.wildCardClick] = function(e) {
e.stopPropagation();
};
events["click " + this.ui.wildCardSearch] = function(e) {
e.stopPropagation();
var tagValue = this.ui.wildCardValue.val();
that.findSearchResult(tagValue);
};
events["click " + this.ui.wildCardValue] = function(e) {
e.stopPropagation();
}
events["click " + this.ui.clearWildCard] = function(e) {
e.stopPropagation();
that.ui.wildCardValue.val("");
}
events["keyup " + this.ui.wildCardValue] = function(e) {
e.stopPropagation();
var code = e.which;
if (this.ui.wildCardValue.val().length > 0) {
this.ui.clearWildCard.removeClass('hide-icon');
} else {
this.ui.clearWildCard.addClass('hide-icon');
}
if (code == 13) {
var tagValue = this.ui.wildCardValue.val();
that.findSearchResult(tagValue);
}
};
return events;
},
......@@ -117,6 +148,7 @@ define([
onRender: function() {
this.renderClassificationTree();
this.createClassificationAction();
this.ui.clearWildCard.addClass('hide-icon');
},
bindEvents: function() {
var that = this;
......@@ -153,6 +185,25 @@ define([
}
});
},
findSearchResult: function(tagValue) {
if (tagValue) {
var params = {
searchType: "basic",
dslChecked: false
};
if (this.options.value) {
params["tag"] = tagValue;
}
var searchParam = _.extend({}, this.options.value, params);
this.triggerSearch(searchParam);
} else {
Utils.notifyInfo({
content: "Search should not be empty!"
});
return;
}
},
onSearchClassificationNode: function(showEmptyTag) {
// on tree search by text, searches for all classification node, called by searchfilterBrowserLayoutView.js
this.isEmptyClassification = showEmptyTag;
......@@ -217,6 +268,7 @@ define([
return;
}
var name, type, selectedNodeId, that = this;
that.ui.wildCardValue.val("");
if (options) {
name = options.node.original.name;
selectedNodeId = options.node.id;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment