Skip to content

A
atlas
Commit 6b100410 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3415 : UI : Beta UI : Improvements for left side tree view

parent 15e5bedb
Showing with 178 additions and 29 deletions
dashboardv3/public/css/scss/leftsidebar.scss
......@@ -47,6 +47,10 @@
}
}
}
.dropdown-toggle {
width: 15px;
}
}
.filter-tree-content {
......@@ -164,6 +168,7 @@
.dropdown-menu {
min-width: 182px;
left: -155px;
&>li {
padding: 3px 15px;
......@@ -177,18 +182,40 @@
background-color: $color_havelock_blue_approx;
color: #fff !important;
}
span {
color: #fff !important;
}
}
a {
display: inline-block;
padding: 0px 3px;
}
span {
color: #686868;
margin-left: 10px;
}
}
}
.custom-filter {
.fa {
font-size: 12px;
.fa-circle-thin:after {
font-family: Source Sans Pro, sans-serif;
position: absolute;
left: 0px;
margin-left: 9px;
font-size: 11px;
font-weight: bold;
}
.advance-tree:after {
content: "A";
}
.basic-tree:after {
content: "B";
}
}
......
dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
......@@ -18,16 +18,19 @@
<div class="panel-heading dash-button-icon" data-toggle="collapse" aria-expanded="true" href="#c_classfication">
<i class="ec-icon fa"></i>
<h4 class="panel-title">Classifications</h4>
<div class="btn-group pull-right menu-items">
<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">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="typeRefresh" 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">
<!-- <button type="button" data-id="createTag" data-type="classification" title="Create Classification">
<i class="fa fa-plus"></i>
</button>
</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>
......@@ -35,6 +38,19 @@
<!-- <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>
</div>
<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>
</ul>
</button>
</div>
</div>
<div id="c_classfication" class="panel-collapse collapse jstree-with-action in">
......
dashboardv3/public/js/templates/search/tree/CustomFilterTreeLayoutView_tmpl.html
......@@ -18,16 +18,30 @@
<div class="panel-heading dash-button-icon" data-toggle="collapse" aria-expanded="true" href="#c_customFilter">
<i class="ec-icon fa"></i>
<h4 class="panel-title">Custom Filters</h4>
<div class="btn-group pull-right menu-items">
<div class="btn-group pull-right ">
<button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="customFilter" title="Show all">
<i class="fa fa-sitemap"></i>
</button>
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="CustomFilter" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="typeRefresh" data-id="showCustomFilter" title="Show Advanced search">
<!-- <button type="button" class="typeRefresh" data-id="showCustomFilter" title="Show Advanced search">
<i class="fa fa-toggle-on switch-button"></i>
</button>
</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>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="customFilter"> <i class="fa fa-sitemap"></i><span>Show flat tree</span>
</li>
<li data-id="refreshTree" data-type="customFilter"><i class="fa fa-refresh"></i><span>Refresh</span>
</li>
</ul>
</button> -->
</div>
</div>
<div id="c_customFilter" class="panel-collapse collapse jstree-with-action in">
<div class="custom-filter" data-id="customFilterSearchTree"></div>
<div class="custom-filter" data-id="customFilterSearchTree"></div>
</div>
</div>
\ No newline at end of file
dashboardv3/public/js/templates/search/tree/EntityTreeLayoutView_tmpl.html
......@@ -18,10 +18,10 @@
<div class="panel-heading dash-button-icon" data-toggle="collapse" aria-expanded="true" href="#c_entity">
<i class="ec-icon fa"></i>
<h4 class="panel-title">Entities</h4>
<div class="btn-group pull-right menu-items">
<button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="entity" title="Show group tree">
<i class="fa fa-sitemap group-tree-deactivate"></i>
</button>
<div class="btn-group pull-right">
<!-- <button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="entity" title="Show flat tree">
<i class="fa fa-sitemap"></i>
</button> -->
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="entity" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
......@@ -33,9 +33,19 @@
<button type="button" class="typeRefresh" data-id="showEmptyServiceType" data-type="entity" title="Show empty service types">
<i class="fa fa-toggle-off"></i>
</button>
<!-- <button class="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
<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>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="entity"> <i class="fa fa-list-ul"></i><span>Show flat tree</span>
</li>
<!-- <li data-id="showEmptyServiceType" data-type="entity"> <i class="fa fa-toggle-off"></i><span >Show empty service types</span>
</li>
<li data-id="refreshTree" data-type="entity"><i class="fa fa-refresh"></i><span >Refresh</span>
</li> -->
</ul>
</button>
</div>
</div>
<div id="c_entity" class="panel-collapse collapse jstree-with-action in">
......
dashboardv3/public/js/templates/search/tree/GlossaryTreeLayoutView_tmpl.html
......@@ -18,7 +18,7 @@
<div class="panel-heading dash-button-icon" data-toggle="collapse" aria-expanded="true" href="#c_term">
<i class="ec-icon fa"></i>
<h4 class="panel-title">Glossaries</h4>
<div class="btn-group pull-right menu-items">
<div class="btn-group pull-right">
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="term" title="Refresh"><i class="fa fa-refresh"></i></button>
<!-- <ul class="dropdown-menu right-align tree-menu">
<li data-id="createGlossary"><i class="fa fa-plus"></i> <a>Create Glossary</a></li>
......@@ -26,8 +26,23 @@
<button type="button" class="typeRefresh" data-id="showGlossaryType" title="Show Category">
<i class="fa fa-toggle-on switch-button"></i>
</button>
<button title="Create Glossary" type="button" data-id="createGlossary"><i class="fa fa-plus"></i></button>
<!-- <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-id="termMenu"><i class="fa fa-ellipsis-v"></i></button> -->
<!-- <button title="Create Glossary" type="button" data-id="createGlossary">
<i class="fa fa-plus"></i>
</button> -->
<!-- <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-id="termMenu"><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>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- <li data-id="showGlossaryType" data-type="term"> <i class="fa fa-toggle-on switch-button"></i><span>Show Category</span>
</li> -->
<!-- <li data-id="refreshTree" data-type="term"><i class="fa fa-refresh"></i><span>Refresh</span>
</li> -->
<li data-id="createGlossary" data-type="term"> <i class="fa fa-plus"></i><span>Create Glossary</span>
</li>
</ul>
</button>
</div>
</div>
<div id="c_term" class="panel-collapse collapse jstree-with-action in">
......
dashboardv3/public/js/templates/site/Header.html
......@@ -19,7 +19,7 @@
<tr>
<td>
<ul class="nav navbar-nav">
<a href="#/"><img src="img/atlas-logo-beta-side.png" class="logo"></a>
<a href="#/"><img src="img/atlas-logo-beta-ui.png" class="logo"></a>
</ul>
</td>
<td class="global-search-container">
......
dashboardv3/public/js/views/glossary/GlossaryDetailLayoutView.js
......@@ -157,7 +157,9 @@ define(['require',
}
});
}
that.glossaryCollection.trigger("update:details", { data: that.data });
that.options.categoryEvent.trigger("Success:TermRename", true);
// that.glossaryCollection.trigger("test");
// that.glossaryCollection.trigger("update:details", { data: that.data });
}
that.data = data;
that.renderDetails(that.data);
......
dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js
......@@ -42,6 +42,7 @@ define([
ui: {
//refresh
refreshTree: '[data-id="refreshTree"]',
groupOrFlatTree: '[data-id="groupOrFlatTreeView"]',
customFilterSearchTree: '[data-id="customFilterSearchTree"]',
showCustomFilter: '[data-id="showCustomFilter"]'
......@@ -64,6 +65,17 @@ define([
that.isBasic = !that.isBasic;
this.customFilterSwitchBtnUpdate();
};
events["click " + this.ui.groupOrFlatTree] = function(e) {
var type = $(e.currentTarget).data("type");
e.stopPropagation();
this.isGroupView = !this.isGroupView;
this.ui.groupOrFlatTree.attr("data-original-title", (this.isGroupView ? "Show all" : "Show type"));
this.ui.groupOrFlatTree.tooltip('hide');
this.ui.groupOrFlatTree.find("i").toggleClass("group-tree-deactivate");
this.ui.groupOrFlatTree.find("span").html(this.isGroupView ? "Show flat tree" : "Show group tree");
that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderCustomFilter();
};
return events;
},
......@@ -125,6 +137,7 @@ define([
this.customFilterData = null;
this.isBasic = true;
this.customFilterId = null;
this.isGroupView = true;
},
onRender: function() {
this.renderCustomFilter();
......@@ -176,7 +189,18 @@ define([
getEntityTreeConfig = function(opt) {
return {
plugins: ["search", "core", "sort", "conditionalselect", "changed", "wholerow", "node_customize"],
conditionalselect: function(node) {
var type = node.original.type;
if (type == "customFilterFolder") {
if (node.children.length) {
return false;
} else {
return true;
}
} else {
return true;
}
},
state: { opened: true },
search: {
show_only_matches: true,
......@@ -193,7 +217,6 @@ define([
multiple: false,
data: function(node, cb) {
if (node.id === "#") {
var testData = that.getCustomFilterTree();
cb(that.getCustomFilterTree());
}
}
......@@ -249,6 +272,7 @@ define([
var that = this,
customFilterBasicList = [],
customFilterAdvanceList = [],
allCustomFilter = [],
customFilterBasicTreeData = that.saveSearchBaiscCollection.fullCollection.models,
customFilterAdvanceTreeData = that.saveSearchAdvanceCollection.fullCollection.models,
openClassificationNodesState = function(treeDate) {
......@@ -259,12 +283,13 @@ define([
}
},
generateNode = function(nodeOptions) {
var searchType = nodeOptions.get('searchType');
var nodeStructure = {
text: nodeOptions.get('name'),
name: nodeOptions.get('name'),
type: "customFilter",
id: nodeOptions.get('guid'),
icon: "fa fa-search",
icon: (searchType === 'BASIC' ? "fa fa-circle-thin basic-tree" : "fa fa-circle-thin advance-tree"),
gType: "CustomFilter",
model: nodeOptions
}
......@@ -274,11 +299,32 @@ define([
that.customFilterId = null;
_.each(customFilterBasicTreeData, function(filterNode) {
customFilterBasicList.push(generateNode(filterNode));
allCustomFilter.push(generateNode(filterNode));
});
_.each(customFilterAdvanceTreeData, function(filterNode) {
customFilterAdvanceList.push(generateNode(filterNode));
allCustomFilter.push(generateNode(filterNode));
});
var customFilterList = that.isBasic ? customFilterBasicList : customFilterAdvanceList;
// var customFilterList = that.isBasic ? customFilterBasicList : customFilterAdvanceList;
var treeView = [{
icon: "fa fa-folder-o",
gType: "customFilter",
type: "customFilterFolder",
children: customFilterBasicList,
text: "Basic Search",
name: "Basic Search",
state: { opened: true }
}, {
icon: "fa fa-folder-o",
gType: "customFilter",
type: "customFilterFolder",
children: customFilterAdvanceList,
text: "Advance Search",
name: "Advance Search",
state: { opened: true }
}];
var customFilterList = that.isGroupView ? treeView : allCustomFilter;
return customFilterList;
},
onNodeSelect: function(nodeData) {
......@@ -289,11 +335,13 @@ define([
that.customFilterId = selectedNodeId;
if (options && options.model) {
var searchParameters = options.model.get('searchParameters'),
searchType = options.model.get('searchType'),
params = CommonViewFunction.generateUrlFromSaveSearchObject({
value: { "searchParameters": searchParameters },
classificationDefCollection: that.classificationDefCollection,
entityDefCollection: that.entityDefCollection
});
searchType === 'ADVANCED' ? that.isBasic = false : that.isBasic = true;
_.extend({}, this.options.value, params),
Utils.setUrl({
......
dashboardv3/public/js/views/search/tree/EntityTreeLayoutView.js
......@@ -61,6 +61,7 @@ define([
// show and hide entities and classifications with 0 numbers
events["click " + this.ui.showEmptyServiceType] = function(e) {
e.stopPropagation();
this.isEmptyServicetype = !this.isEmptyServicetype;
this.entitySwitchBtnUpdate();
};
......@@ -69,9 +70,12 @@ define([
var type = $(e.currentTarget).data("type");
e.stopPropagation();
this.isGroupView = !this.isGroupView;
this.ui.groupOrFlatTree.attr("data-original-title", (this.isGroupView ? "Show flat tree" : "Show group tree"));
// this.ui.groupOrFlatTree.attr("data-original-title", (this.isGroupView ? "Show flat tree" : "Show group tree"));
this.ui.groupOrFlatTree.tooltip('hide');
this.ui.groupOrFlatTree.find("i").toggleClass("group-tree-deactivate");
// this.ui.groupOrFlatTree.find("i").toggleClass("group-tree-deactivate");
this.ui.groupOrFlatTree.find("i").toggleClass("fa-sitemap fa-list-ul");
this.ui.groupOrFlatTree.find("span").html(this.isGroupView ? "Show flat tree" : "Show group tree");
that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderEntityTree();
};
......@@ -121,7 +125,7 @@ define([
this.isEmptyServicetype = true;
this.entityTreeData = {};
this.typeId = null;
this.isGroupView = false;
this.isGroupView = true;
},
onRender: function() {
this.renderEntityTree();
......@@ -158,6 +162,7 @@ define([
this.ui.showEmptyServiceType.attr("data-original-title", (this.isEmptyServicetype ? "Show" : "Hide") + " empty service types");
this.ui.showEmptyServiceType.tooltip('hide');
this.ui.showEmptyServiceType.find("i").toggleClass("fa-toggle-on fa-toggle-off");
// this.ui.showEmptyServiceType.find("span").html((this.isEmptyServicetype ? "Show" : "Hide") + " empty service types");
this.ui.entitySearchTree.jstree(true).refresh();
},
manualRender: function(options) {
......@@ -173,7 +178,6 @@ define([
var dataFound = this.typeHeaders.fullCollection.find(function(obj) {
return obj.get("name") === that.options.value.type
});
if (dataFound) {
if ((this.typeId && this.typeId !== dataFound.get("guid")) || this.typeId === null) {
if (this.typeId) {
......
dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
......@@ -74,6 +74,7 @@ define([
events["click " + this.ui.showGlossaryType] = function(e) {
var getTreeData, displayText;
e.stopPropagation();
this.isTermView = !this.isTermView;
this.glossarySwitchBtnUpdate();
};
......@@ -93,6 +94,12 @@ define([
},
this
);
if (this.options.categoryEvent) {
this.options.categoryEvent.on("Success:TermRename", function(options) {
that.refresh();
})
}
$('body').on('click', '.termPopoverOptions li, .categoryPopoverOptions li', function(e) {
that.$('.termPopover,.categoryPopover').popover('hide');
that[$(this).find('a').data('fn')](e)
......@@ -103,6 +110,7 @@ define([
this.ui.showGlossaryType.attr("data-original-title", (this.isTermView ? "Show Category" : "Show Term"));
this.ui.showGlossaryType.tooltip('hide');
this.ui.showGlossaryType.find("i").toggleClass("switch-button");
// this.ui.showGlossaryType.find("span").html(this.isTermView ? "Show Category" : "Show Term");
this.ui.termSearchTree.jstree(true).refresh();
//this.showDefaultPage();
// if(this.isTermView){
......@@ -146,6 +154,10 @@ define([
this.fetchGlossary();
},
onBeforeDestroy: function() {
this.options.categoryEvent.off("Success:TermRename")
},
getViewType: function() {
if (this.options.value) {
this.isTermView = this.options.value.viewType ? this.options.value.viewType == "term" ? true : false : true;
......
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