Skip to content

A
atlas
Commit 59bd56c8 by Keval Bhatt Committed by Suma Shivaprasad
Options

ATLAS-886 : Improve association of terms with entity (Show tree view)

parent 8c1c969f
Showing with 1070 additions and 760 deletions
dashboardv2/public/css/scss/business-catlog.scss
......@@ -31,6 +31,9 @@
.dropdown-menu > li > a {
color: $color_jungle_green_approx;
padding: 6px 20px;
text-overflow: ellipsis;
max-width: 276px;
overflow: hidden;
}
.branchListParent {
......
dashboardv2/public/css/scss/main.scss
......@@ -119,10 +119,6 @@ a {
}
}
hr {
border-top: 1px solid $color_mirage_approx
}
th {
text-transform: capitalize;
}
......@@ -172,7 +168,57 @@ ul {
border: 1px solid $color_jungle_green_approx;
cursor: pointer;
}
.add-seperator {
margin-bottom: 10px;
border-bottom: 1px solid $color_mirage_approx
}
.termTableBreadcrumb {
min-width: 200px;
/* width: 200px; */
/* display: inline-block; */
i {
cursor: pointer;
}
.liContent {
/* width: 150px; */
float: left;
line-height: 21px !important;
padding: 0px 10px 0px 0px !important;
}
}
.table-quickMenu > tbody > tr > td {
&.searchTerm {
overflow: visible;
}
&.searchTag {}
}
.tab-content >.tab-pane {
display: block;
opacity: 0;
height: 0;
padding: 0px;
overflow: hidden;
&.active {
padding: 25px;
opacity: 1;
height: auto;
overflow: auto;
}
}
.ellipsis {
text-overflow: ellipsis;
max-width: 98%;
overflow: hidden;
}
.modal-body {
.table {
table-layout: fixed;
word-wrap: break-word;
}
}
dashboardv2/public/css/scss/override.scss
......@@ -20,7 +20,7 @@
.modal-footer {
padding: 15px;
text-align: right;
border: 1px solid #DEDEDE;
border-top: 1px solid #DEDEDE;
}
.modal-body {
......@@ -119,3 +119,13 @@
padding-left: 12px;
}
}
.fixedPopover {
position: fixed;
}
.popover.fade {
-webkit-transition: ease-in .1s ease-out;
-o-transition: ease-in .1s ease-out;
transition: ease-in .1s ease-out;
}
dashboardv2/public/css/scss/tag.scss
......@@ -109,6 +109,7 @@
float: left;
cursor: pointer;
background-color: $white;
white-space: nowrap;
i.fa {
position: relative;
right: -5px;
......@@ -120,6 +121,16 @@
}
}
.inputTagGreen {
border: 1px $color_jungle_green_approx solid;
background-color: $white;
color: $color_jungle_green_approx;
&:hover {
color: $white;
background-color: $color_jungle_green_approx;
}
}
.addTagBase {
padding: 2px 8px;
border: 1px solid $action_gray;
......
dashboardv2/public/css/scss/theme.scss
......@@ -2,7 +2,7 @@
.user-dropdown {
display: inline-block;
padding: 20px;
padding: 14px;
color: $color_ironside_gray_approx;
.user-circle {
padding: 8px 10px;
......
dashboardv2/public/css/scss/tree.scss
......@@ -22,16 +22,6 @@
// color: $white;
display: block;
}
// .jstree-node[aria-selected="true"]:before {
// content: "";
// position: absolute;
// height: 33px;
// background: $color_jungle_green_approx;
// top: 0px;
// left: -100%;
// right: -100%;
// z-index: -1;
// }
}
.taxonomyTree {
......@@ -139,3 +129,48 @@
.alertTerm {
color: #FF0000 !important;
}
/**Css changes**/
.modal-body {
.add-seperator {
border: none;
}
.taxonomyTree li {
.children {
text-indent: 20px;
}
&.parentChild {
ul {
padding-left: 0px;
}
li {
&.children {
width: 100%;
}
a {
max-width: 100%;
}
}
}
&.active {
color: $concrete;
a {
color: $concrete;
}
}
a {
color: #6C6C6C;
}
&.children:hover {
a {
color: $concrete;
}
background-color: #ABABAB;
color: $white;
}
.tools {
text-indent: 0px;
background: none;
}
}
}
dashboardv2/public/js/router/Router.js
......@@ -112,26 +112,12 @@ define([
this.collection = new VCatalogList();
this.collection.url = url;
App.rNHeader.show(new BusinessCatalogHeader({ 'globalVent': that.globalVent, 'url': url, 'collection': this.collection }));
// App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent, 'url': url }));
if (!App.rSideNav.currentView) {
App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent, 'url': url }));
} else {
var view = App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView;
if (view.dblClick == false && view.singleClick == false && !Globals.saveApplicationState.tabState.stateChanged) {
if (paramObj && paramObj.back == "true") {
App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url, true, true);
} else {
App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url, true);
}
view.dblClick == false;
} else if (view.singleClick) {
view.singleClick = false;
}
App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender("/" + url);
App.rSideNav.currentView.selectTab();
}
if (Globals.saveApplicationState.tabState.stateChanged) {
Globals.saveApplicationState.tabState.stateChanged = false;
}
App.rNContent.show(new BusinessCatalogDetailLayoutView({
'globalVent': that.globalVent,
'url': url,
......
dashboardv2/public/js/templates/business_catalog/AddTermToEntityLayoutView_tmpl.html
......@@ -14,15 +14,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="row">
<div name="tagDefinitionform" class="css-form">
<div class="form-group">
<label class="control-label col-sm-4">Term</label>
<div class="col-sm-8 input-spacing">
<select class="form-control" data-id="addTermOptions" required>
</select>
</div>
</div>
</div>
</div>
</div>
<div id="r_treeLayoutView"></div>
dashboardv2/public/js/templates/business_catalog/BusinessCatalogLayoutView_tmpl.html
......@@ -14,20 +14,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="form-group">
<select type="text" class="form-control" data-id="searchTermInput" placeholder="Search term"></select>
</div>
<div class="clearfix">
<button class="btn btn-atlasAction btn-atlas pull-left" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
<button class="btn btn-atlasAction btn-atlas pull-right" onclick="this.blur();" data-id="refreshTaxanomy"><i class="fa fa-refresh"></i> Refresh</button>
</div>
<div class="">
<ul class="taxonomyTree">
<div class="contentLoading"></div>
<li class="children parent" data-id="Parent"></li>
<li class="childs parentChild">
<ul data-id="childList">
</ul>
</li>
</ul>
</div>
<div id="r_treeLayoutView"></div>
dashboardv2/public/js/templates/business_catalog/TreeLayoutView_tmpl.html 0 → 100644
<!--
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="clearfix add-seperator">
<button class="btn btn-atlasAction btn-atlas pull-left" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
<button class="btn btn-atlasAction btn-atlas pull-right" onclick="this.blur();" title="Refresh" data-id="refreshTaxanomy"><i class="fa fa-refresh"></i></button>
</div>
<div>
<select type="text" class="form-control" data-id="searchTermInput" placeholder="Search term"></select>
</div>
<div class="">
<ul class="taxonomyTree">
<div class="contentLoading"></div>
<li class="children parent" data-id="Parent"></li>
<li class="childs parentChild">
<ul data-id="childList">
</ul>
</li>
</ul>
</div>
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
......@@ -18,6 +18,6 @@
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<span class="searchResult" style=" font-size: 16px;"></span>
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span></div>
<div id="r_searchResultTableLayoutView" class="searchTable"></div>
</div>
dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html
......@@ -21,7 +21,7 @@
<input class="form-control row-margin-bottom" data-id="tagName" placeholder="Name(required)" autofocus>
</input>
{{else}}
<h4><span data-id="title"></span></h4>
<h4 class="ellipsis"><span data-id="title"></span></h4>
</input>
{{/if}}
<input class="form-control row-margin-bottom" data-id="description" value="{{description}}" placeholder="Description">
......
dashboardv2/public/js/utils/CommonViewFunction.js
......@@ -25,9 +25,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
if (tagName) {
var tagOrTerm = Utils.checkTagOrTerm(tagName);
if (tagOrTerm.term) {
msg = "<b>Term: " + tagName + "</b>";
msg = "<div class='ellipsis'><b>Term: " + tagName + "</b></div>";
} else {
msg = "<b>Tag: " + tagName + "</b>";
msg = "<div class='ellipsis'><b>Tag: " + tagName + "</b></div>";
}
}
var modal = new Modal({
......@@ -197,6 +197,142 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
});
return table;
}
CommonViewFunction.breadcrumbUrlMaker = function(url) {
if (url) {
var urlList = [];
var splitURL = url.split("api/atlas/v1/taxonomies/");
if (splitURL.length > 1) {
var splitUrlWithoutTerm = splitURL[1].split("/terms/");
if (splitUrlWithoutTerm.length == 1) {
splitUrlWithoutTerm = splitUrlWithoutTerm[0].split("/");
}
} else {
var splitUrlWithoutTerm = splitURL[0].split("/terms/");
if (splitUrlWithoutTerm.length == 1) {
splitUrlWithoutTerm = splitUrlWithoutTerm[0].split("/");
}
}
var href = "";
for (var i in splitUrlWithoutTerm) {
if (i == 0) {
href = splitUrlWithoutTerm[i];
urlList.push({
value: splitUrlWithoutTerm[i],
href: href
});
} else {
href += "/terms/" + splitUrlWithoutTerm[i];
urlList.push({
value: splitUrlWithoutTerm[i],
href: href
});
};
}
return urlList;
}
}
CommonViewFunction.breadcrumbMaker = function(options) {
var li = "";
if (options.urlList) {
_.each(options.urlList, function(object) {
li += '<li><a href="javascript:void(0)" class="link" data-href="/api/atlas/v1/taxonomies/' + object.href + '">' + object.value + '</a></li>';
});
}
if (options.scope) {
options.scope.html(li);
options.scope.asBreadcrumbs("destroy");
options.scope.asBreadcrumbs({
namespace: 'breadcrumb',
overflow: "left",
dropicon: "fa fa-ellipsis-h",
dropdown: function() {
return '<div class=\"dropdown\">' +
'<a href=\"javascript:void(0);\" class=\"' + this.namespace + '-toggle\" data-toggle=\"dropdown\"><i class=\"' + this.dropicon + '\"</i></a>' +
'<ul class=\"' + this.namespace + '-menu dropdown-menu popover bottom arrowPosition \" ><div class="arrow"></div></ul>' +
'</div>';
},
dropdownContent: function(a) {
return '<li><a class="link" href="javascript:void(0)" data-href="' + a.find('a').data('href') + '" class="dropdown-item">' + a.text() + "</a></li>";
}
});
}
options.scope.find('li a.link').click(function() {
Utils.setUrl({
url: "#!/taxonomy/detailCatalog" + $(this).data('href') + "?load=true",
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: false };
}
});
});
}
CommonViewFunction.termTableBreadcrumbMaker = function(model) {
var traits = model.get('$traits$'),
url = "",
deleteHtml = "";
_.keys(traits).map(function(key) {
var tagName = Utils.checkTagOrTerm(traits[key].$typeName$);
if (tagName.term) {
deleteHtml = '<a class="pull-left" title="Delete Term"><i class="fa fa-trash" data-id="tagClick" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>';
url = traits[key].$typeName$.split(".").join("/");
}
});
if (url.length == 0) {
if (model.get('$id$')) {
return {
html: ' <a href="javascript:void(0)" class="inputAssignTag" data-id="addTerm" data-guid="' + model.get('$id$').id + '"><i class="fa fa-folder-o"><span> Assign Term</span></i></a>'
}
} else {
return {
html: ' <a href="javascript:void(0)" class="inputAssignTag" data-id="addTerm"><i class="fa fa-folder-o"><span> Assign Term</span></i></a>'
}
}
} else {
var value = CommonViewFunction.breadcrumbUrlMaker(url),
id = model.get('$id$').id
if (id && value) {
return {
html: '<div class="termTableBreadcrumb" dataTerm-id="' + id + '"><div class="liContent"></div>' + deleteHtml + '</div>',
object: { scopeId: id, value: value }
}
} else {
return {
html: '<div class="termTableBreadcrumb"></div>'
}
}
}
}
CommonViewFunction.tagForTable = function(model) {
var traits = model.get('$traits$'),
atags = "",
addTag = "",
count = 0;
_.keys(model.get('$traits$')).map(function(key) {
var tagName = Utils.checkTagOrTerm(traits[key].$typeName$),
className = "inputTag";
if (!tagName.term) {
if (count >= 1) {
className += " hide";
}
++count;
atags += '<a class="' + className + '" data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + tagName.name + '" data-guid="' + model.get('$id$').id + '" ></i></a>';
}
});
if (model.get('$id$')) {
addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTag" data-guid="' + model.get('$id$').id + '" ><i style="right:0" class="fa fa-plus"></i></a>';
} else {
addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTag"><i style="right:0" class="fa fa-plus"></i></a>';
}
if (count > 1) {
addTag += '<a href="javascript:void(0)" data-id="showMoreLess" class="inputTag inputTagGreen"><span>Show More </span><i class="fa fa-angle-right"></i></a>'
}
return '<div class="tagList">' + atags + addTag + '</div>';
}
CommonViewFunction.userDataFetch = function(options) {
if (options.url) {
$.ajax({
......
dashboardv2/public/js/utils/Messages.js
......@@ -27,7 +27,8 @@ define(['require'], function(require) {
deleteSuccessMessage: " has been deleted successfully",
deleteErrorMessage: " could not be deleted",
addAttributeSuccessMessage: "Tag attribute is added successfully",
updateTagDescriptionMessage: "Tag description is updated successfully"
updateTagDescriptionMessage: "Tag description is updated successfully",
updateTermDescriptionMessage: "Term description is updated successfully",
};
return Messages;
});
dashboardv2/public/js/utils/Overrides.js
......@@ -18,6 +18,7 @@
define(['require', 'backgrid', 'asBreadcrumbs'], function(require) {
'use strict';
$.asBreadcrumbs.prototype.generateChildrenInfo = function() {
var self = this;
this.$children.each(function() {
......@@ -38,6 +39,29 @@ define(['require', 'backgrid', 'asBreadcrumbs'], function(require) {
return (this.length > n) ? this.substr(0, n - 1) + '...' : this;
};
/*
* Overriding Cell for adding custom className to Cell i.e <td>
*/
var cellInit = Backgrid.Cell.prototype.initialize;
Backgrid.Cell.prototype.initialize = function() {
cellInit.apply(this, arguments);
var className = this.column.get('className');
if (className) this.$el.addClass(className);
}
/*
* Overriding Cell for adding custom width to Cell i.e <td>
*/
Backgrid.HeaderRow = Backgrid.HeaderRow.extend({
render: function() {
var that = this;
Backgrid.HeaderRow.__super__.render.apply(this, arguments);
_.each(this.columns.models, function(modelValue) {
if (modelValue.get('width')) that.$el.find('.' + modelValue.get('name')).css('width', modelValue.get('width') + '%')
if (modelValue.get('toolTip')) that.$el.find('.' + modelValue.get('name')).attr('title', modelValue.get('toolTip'))
});
return this;
}
});
/*
* HtmlCell renders any html code
* @class Backgrid.HtmlCell
* @extends Backgrid.Cell
......
dashboardv2/public/js/views/business_catalog/AddTermToEntityLayoutView.js
......@@ -34,12 +34,11 @@ define(['require',
template: AddTermToEntityLayoutViewTmpl,
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
termName: '[data-id="termName"]',
addTermOptions: '[data-id="addTermOptions"]'
regions: {
RTreeLayoutView: "#r_treeLayoutView"
},
/** ui selector cache */
ui: {},
/** ui events hash */
events: function() {
var events = {};
......@@ -66,58 +65,31 @@ define(['require',
this.on('closeModal', function() {
this.modal.trigger('cancel');
});
this.fetchTaxonomy = true;
this.bindEvents();
},
bindEvents: function() {
this.listenTo(this.vCatalogList, 'reset', function() {
var url = "",
that = this;
_.each(this.vCatalogList.models, function(obj) {
if (that.fetchTaxonomy && obj.get('href').search("terms") == -1) {
url = obj.get('href');
that.fetchTaxonomy = false;
}
});
if (url.length == 0) {
this.generateTerm();
} else {
url = "/api" + url.split("/api")[1] + "/terms";
this.fetchTerms(url);
}
}, this);
},
onRender: function() {
this.fetchTerms();
this.renderTreeLayoutView();
},
fetchTerms: function(url) {
if (url) {
this.vCatalogList.url = url;
}
this.vCatalogList.fetch({ reset: true });
},
generateTerm: function() {
var terms = '<option selected="selected" disabled="disabled">-- Select Term --</option>';
_.each(this.vCatalogList.fullCollection.models, function(obj, key) {
terms += '<option value="' + obj.get('name') + '">' + obj.get('name') + '</option>';
});
this.ui.addTermOptions.html(terms);
this.ui.addTermOptions.select2({
placeholder: "Select Term",
allowClear: true
renderTreeLayoutView: function() {
var that = this;
require(['views/business_catalog/TreeLayoutView'], function(TreeLayoutView) {
that.RTreeLayoutView.show(new TreeLayoutView({
url: that.url,
viewBased: false
}));
});
},
saveTermToAsset: function() {
var that = this;
var VCatalog = new this.vCatalogList.model();
var termName = this.modal.$el.find('.taxonomyTree li.active a').data('name').split("`").join("");
VCatalog.url = function() {
return "api/atlas/v1/entities/" + that.guid + "/tags/" + that.ui.addTermOptions.val();
}
return "api/atlas/v1/entities/" + that.guid + "/tags/" + termName;
};
VCatalog.save(null, {
beforeSend: function() {},
success: function(data) {
Utils.notifySuccess({
content: "Term " + that.ui.addTermOptions.val() + Messages.addTermToEntitySuccessMessage
content: "Term " + termName + Messages.addTermToEntitySuccessMessage
});
if (that.callback) {
that.callback();
......
dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js
......@@ -215,7 +215,7 @@ define(['require',
},
onSaveDescriptionClick: function(view) {
view.description = view.ui.description.val();
this.onSaveButton(this.collection.first().toJSON(), Messages.updateTagDescriptionMessage, view);
this.onSaveButton(this.collection.first().toJSON(), Messages.updateTermDescriptionMessage, view);
this.ui.description.show();
},
onSaveButton: function(saveObject, message, view) {
......
dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js
......@@ -54,29 +54,7 @@ define(['require',
}
var that = this;
if (this.url) {
var t = [];
var splitURL = this.url.split("api/atlas/v1/taxonomies/");
if (splitURL.length > 1) {
var x = splitURL[1].split("/terms/");
}
var href = "";
for (var v in x) {
if (v == 0) {
href = x[v];
t.push({
value: x[v],
href: href
});
} else {
href += "/terms/" + x[v];
t.push({
value: x[v],
href: href
});
};
}
this.value = t;
this.value = CommonViewFunction.breadcrumbUrlMaker(this.url);
}
this.listenTo(this.collection, 'reset', function() {
setTimeout(function() {
......@@ -90,25 +68,7 @@ define(['require',
var li = "",
value = this.value,
that = this;
_.each(value, function(object) {
li += '<li><a href="/#!/taxonomy/detailCatalog/api/atlas/v1/taxonomies/' + object.href + '?back=true">' + object.value + '</a></li>';
});
this.$('.breadcrumb').html(li);
//this.$(".breadcrumb").asBreadcrumbs("destroy");
this.$('.breadcrumb').asBreadcrumbs({
namespace: 'breadcrumb',
overflow: "left",
dropicon: "fa fa-ellipsis-h",
dropdown: function() {
return '<div class=\"dropdown\">' +
'<a href=\"javascript:void(0);\" class=\"' + this.namespace + '-toggle\" data-toggle=\"dropdown\"><i class=\"' + this.dropicon + '\"</i></a>' +
'<ul class=\"' + this.namespace + '-menu dropdown-menu popover bottom arrowPosition \" ><div class="arrow"></div></ul>' +
'</div>';
},
dropdownContent: function(a) {
return '<li><a href="' + a.find('a').attr('href') + '" class="dropdown-item">' + a.text() + "</a></li>";
}
});
CommonViewFunction.breadcrumbMaker({ urlList: this.value, scope: this.$('.breadcrumb') });
}
});
return BusinessCatalogHeader;
......
dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js
......@@ -18,12 +18,8 @@
define(['require',
'backbone',
'hbs!tmpl/business_catalog/BusinessCatalogLayoutView_tmpl',
'utils/Utils',
'collection/VCatalogList',
'utils/CommonViewFunction',
'utils/Messages'
], function(require, Backbone, BusinessCatalogLayoutViewTmpl, Utils, VCatalogList, CommonViewFunction, Messages) {
'hbs!tmpl/business_catalog/BusinessCatalogLayoutView_tmpl'
], function(require, Backbone, BusinessCatalogLayoutViewTmpl) {
'use strict';
var BusinessCatalogLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -34,564 +30,35 @@ define(['require',
template: BusinessCatalogLayoutViewTmpl,
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
Parent: '[data-id="Parent"]',
childList: '[data-id="childList"]',
liClick: 'li a[data-href]',
backTaxanomy: '[data-id="backTaxanomy"]',
expandArrow: '[data-id="expandArrow"]',
searchTermInput: '[data-id="searchTermInput"]',
refreshTaxanomy: '[data-id="refreshTaxanomy"]'
regions: {
RTreeLayoutView: "#r_treeLayoutView"
},
/** ui selector cache */
ui: {},
/** ui events hash */
events: function() {
var events = {};
events['dblclick ' + this.ui.liClick] = function(e) {
$(e.currentTarget).parent('li').find('.tools .taxanomyloader').show();
this.singleClick = false;
this.forwardClick(e, true);
};
events['click ' + this.ui.liClick] = function(e) {
this.dblClick = false;
this.forwardClick(e);
};
events['click ' + this.ui.backTaxanomy] = 'backButtonTaxanomy';
events['click ' + this.ui.refreshTaxanomy] = 'refreshButtonTaxanomy';
events['click ' + this.ui.expandArrow] = 'changeArrowState';
events["change " + this.ui.searchTermInput] = function() {
this.singleClick = false;
var termUrl = this.termCollection.url.split("/", 5).join("/") + "/" + this.ui.searchTermInput.val().split(".").join("/terms/");
this.forwardClick(undefined, true, termUrl);
};
return events;
},
events: function() {},
/**
* intialize a new BusinessCatalogLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'globalVent', 'url'));
this.parentCollection = new VCatalogList();
this.childCollection = new VCatalogList();
this.taxanomy = new VCatalogList();
this.termCollection = new VCatalogList();
this.dblClick = false;
this.singleClick = false;
},
bindEvents: function() {
var that = this;
this.listenTo(this.parentCollection, 'reset', function() {
this.dblClick = false;
if (this.parentCollection.fullCollection.models.length) {
this.generateTree(true);
} else {
if (Utils.getUrlState.isTaxonomyTab() || Utils.getUrlState.isInitial()) {
this.createDefaultTaxonomy();
}
}
}, this);
this.listenTo(this.childCollection, 'reset', function() {
this.dblClick = false;
this.generateTree();
}, this);
this.listenTo(this.taxanomy, 'reset', function() {
this.searchResult();
}, this);
this.listenTo(this.termCollection, 'reset', function() {
this.termSearchData();
}, this);
this.listenTo(this.childCollection, 'error', function(model, response) {
if (response && response.responseJSON && response.responseJSON.message) {
Utils.notifyError({
content: response.responseJSON.message
});
}
this.hideLoader();
}, this);
this.listenTo(this.parentCollection, 'error', function(model, response) {
if (response && response.responseJSON && response.responseJSON.message) {
Utils.notifyError({
content: response.responseJSON.message
});
}
this.hideLoader();
}, this);
_.extend(this, _.pick(options, 'url'));
},
bindEvents: function() {},
onRender: function() {
var that = this;
this.bindEvents();
that.ui.backTaxanomy.hide();
this.fetchCollection(this.url, true);
$('body').on("click", '.termPopoverList li', function(e) {
that[$(this).find("a").data('fn')](e);
});
$('body').click(function(e) {
if ($('.termPopoverList').length) {
if ($(e.target).hasClass('termPopover')) {
return;
}
that.$('.termPopover').popover('hide');
}
});
this.fetchTaxanomyCollections();
},
manualRender: function(url, isParent, back) {
if (back) {
this.backButton = back;
}
if (this.ui.Parent.children().length <= 0 || this.backButton) {
this.fetchCollection(url, isParent);
}
if (url && isParent && !this.backButton) {
this.fetchCollection(url, isParent);
}
if (!url && !back && isParent) {
var url = this.$('.taxonomyTree').find('.active a').data('href');
this.forwardClick(undefined, undefined, url);
}
if (this.backButton) {
this.backButton = false;
}
},
changeArrowState: function(e) {
var scope = this.$('[data-id="expandArrow"]');
if (e) {
scope = $(e.currentTarget);
}
if (scope.hasClass('fa-chevron-down')) {
scope.removeClass('fa-chevron-down');
scope.addClass('fa-chevron-right');
this.addActiveClass(scope[0]);
this.ui.childList.hide();
} else {
if (e && $(e.currentTarget).parents('li.parentChild').length) {
scope.parent('li').find('.tools .taxanomyloader').show();
this.forwardClick(e, true);
} else {
scope.addClass('fa-chevron-down');
scope.removeClass('fa-chevron-right');
this.singleClick = false;
this.ui.childList.show();
}
}
},
fetchCollection: function(url, isParent) {
if (url) {
this.url = url;
} else {
var parentURL = this.ui.Parent.find('a').data('href');
if (parentURL) {
this.url = parentURL;
} else {
this.url = "api/atlas/v1/taxonomies";
}
}
this.showLoader();
if (isParent) {
this.parentCollection.url = this.url;
this.parentCollection.fullCollection.reset(undefined, { silent: true });
this.parentCollection.fetch({ reset: true });
} else {
this.childCollection.url = this.url + "?hierarchy/path:.";
this.childCollection.fullCollection.reset(undefined, { silent: true });
this.childCollection.fetch({ reset: true });
}
},
showLoader() {
this.$('.taxonomyTree').find('li.active .tools .taxanomyloader').show();
this.$('.contentLoading').show();
},
hideLoader() {
this.$('.taxanomyloader').hide();
this.$('.contentLoading').hide();
},
forwardClick: function(e, forward, url) {
var hrefUrl = "";
if (e) {
hrefUrl = $(e.currentTarget).data('href');
}
if (url) {
hrefUrl = url;
}
if (!e && !url) {
var dataHref = this.ui.Parent.find('a').data('href');
if (dataHref) {
hrefUrl = dataHref;
}
}
if (forward) {
this.dblClick = true;
this.ui.childList.show();
this.fetchCollection(hrefUrl, true);
} else {
this.singleClick = true;
}
if (hrefUrl.length > 1) {
Utils.setUrl({
url: '#!/taxonomy/detailCatalog' + hrefUrl,
mergeBrowserUrl: false,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: false };
},
trigger: true
});
}
if (e) {
this.addActiveClass(e);
}
},
addActiveClass: function(e) {
$(e.currentTarget).parents('ul.taxonomyTree').find('li').removeClass('active');
$(e.currentTarget).parent('li').addClass('active');
},
generateTree: function(isParent) {
var parentLi = "",
childLi = "",
that = this;
function createTaxonomy(url) {
var href = false;
_.each(that.parentCollection.fullCollection.models, function(model, key) {
if (model.get('terms')) {
href = model.get('terms').href;
} else if (model.get('href')) {
href = model.get('href') + "/terms";
}
var hrefUrl = "/api" + model.get('href').split("/api")[1];
if (hrefUrl) {
var backUrlCheck = hrefUrl.split("taxonomies/");
if (backUrlCheck.length > 1) {
if (backUrlCheck[1].split("/terms").length <= 1) {
that.ui.backTaxanomy.hide();
} else {
that.ui.backTaxanomy.show();
}
}
}
var name = Utils.checkTagOrTerm(model.get('name'));
parentLi = '<div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover"></i></div><i class="fa fa-chevron-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a>';
});
if (href) {
var hrefUrl = "/api" + href.split("/api")[1];
that.fetchCollection(hrefUrl);
}
that.ui.childList.html('');
that.ui.Parent.addClass('active');
that.ui.Parent.html(parentLi);
}
function createTerm() {
_.each(that.childCollection.fullCollection.models, function(model, key) {
var name = Utils.checkTagOrTerm(model.get('name'));
var hrefUrl = "/api" + model.get('href').split("/api")[1]
childLi += '<li class="children"><div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover" ></i></div><i class="fa fa-chevron-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a></li>';
});
that.ui.childList.html(childLi);
}
if (isParent) {
createTaxonomy();
} else {
this.changeArrowState();
createTerm();
}
if (this.refresh) {
this.$('.taxonomyTree').find('a[data-href="' + this.refresh + '"]').parent().addClass('active');
this.refresh = undefined;
}
this.hideLoader();
this.$('.termPopover').popover({
placement: 'bottom',
html: true,
trigger: 'manual',
container: 'body',
content: function() {
var li = "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Assets</a></li>" +
"<li class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onAddTerm'>Add Subterm</a></li>";
/* "<li class='listTerm' ><i class='fa fa-arrow-right'></i> <a href='javascript:void(0)' data-fn='moveTerm'>Move Term</a></li>" +
"<li class='listTerm' ><i class='fa fa-edit'></i> <a href='javascript:void(0)' data-fn='onEditTerm'>Edit Term</a></li>" +*/
var termDataURL = Utils.getUrlState.getQueryUrl().hash.split("terms");
if (termDataURL.length > 1) {
li += "<li class='listTerm'><i class='fa fa-trash'></i> <a href='javascript:void(0)' data-fn='deleteTerm'>Delete Term</a></li>"
}
return "<ul class='termPopoverList'>" + li + "</ul>";
}
});
this.$('.termPopover').off('click').on('click', function(e) {
// if any other popovers are visible, hide them
e.preventDefault();
that.$('.termPopover').not(this).popover('hide');
$(this).popover('toggle');
});
if (Utils.getUrlState.isInitial()) {
this.forwardClick();
}
this.renderTreeLayoutView();
},
onAddTerm: function(e) {
renderTreeLayoutView: function() {
var that = this;
require([
'views/business_catalog/AddTermLayoutView',
'modules/Modal'
], function(AddTermLayoutView, Modal) {
var view = new AddTermLayoutView({
url: that.$('.taxonomyTree').find('li.active').find("a").data("href"),
model: new that.parentCollection.model()
require(['views/business_catalog/TreeLayoutView'], function(TreeLayoutView) {
that.RTreeLayoutView.show(new TreeLayoutView({
url: that.url,
viewBased: true
}));
});
var modal = new Modal({
title: 'Create a new subterm',
content: view,
okCloses: true,
showFooter: true,
allowCancel: true,
okText: 'Add',
}).open();
modal.$el.find('button.ok').attr('disabled', true);
modal.on('ok', function() {
that.saveAddTerm(view);
});
view.ui.termName.on('keyup', function() {
if (this.value.indexOf(' ') >= 0) {
modal.$el.find('button.ok').prop('disabled', true);
view.ui.termName.addClass("addTermDiable");
view.$('.alertTerm').show();
} else {
modal.$el.find('button.ok').prop('disabled', false);
view.ui.termName.removeClass("addTermDiable");
view.$('.alertTerm').hide();
}
});
view.on('closeModal', function() {
modal.trigger('cancel');
});
});
},
saveAddTerm: function(view) {
var that = this;
var url = view.url;
view.model.url = url + "/terms/" + view.ui.termName.val();
this.showLoader();
view.model.set({ description: view.ui.termDetail.val() }).save(null, {
success: function(model, response) {
that.create = true;
that.fetchTaxanomyCollections();
that.forwardClick(undefined, true, url);
//that.fetchCollection(that.url);
Utils.notifySuccess({
content: "Term " + view.ui.termName.val() + Messages.addSuccessMessage
});
},
error: function(model, response) {
Utils.notifyError({
content: "Term " + view.ui.termName.val() + Messages.addErrorMessage
});
},
complete: function() {
that.hideLoader();
}
});
},
deleteTerm: function(e) {
var termName = this.$('.taxonomyTree').find('li.active a').data("name"),
that = this,
modal = CommonViewFunction.deleteTagModel(termName);
modal.on('ok', function() {
that.deleteTermData(e);
});
modal.on('closeModal', function() {
modal.trigger('cancel');
});
},
deleteTermData: function(e) {
var that = this;
this.showLoader();
require(['models/VCatalog'], function(VCatalog) {
var termModel = new VCatalog(),
url = that.$('.taxonomyTree').find('li.active a').data('href');
var termName = that.$('.taxonomyTree').find('li.active a').text();
termModel.deleteTerm(url, {
beforeSend: function() {},
success: function(data) {
Utils.notifySuccess({
content: "Term " + termName + Messages.deleteSuccessMessage
});
var termURL = url.split("/").slice(0, -2).join("/");
that.forwardClick(undefined, true, termURL);
},
error: function(error, data, status) {
var message = "Term " + termName + Messages.deleteErrorMessage;
if (data.error) {
message = data.error;
}
Utils.notifyError({
content: message
});
},
complete: function() {
that.hideLoader();
}
});
});
},
moveTerm: function() {
var that = this;
require([
'views/business_catalog/MoveTermLayoutView',
'modules/Modal'
], function(MoveTermLayoutView, Modal) {
var view = new MoveTermLayoutView({
taxanomyCollection: that.collection
});
var modal = new Modal({
title: 'Move Term',
content: view,
okCloses: true,
showFooter: true,
allowCancel: true,
okText: 'Move',
}).open();
// modal.on('ok', function() {
// that.saveAddTerm(view);
// });
view.on('closeModal', function() {
modal.trigger('cancel');
});
});
},
onSearchTerm: function() {
this.showLoader();
Utils.setUrl({
url: '#!/search/searchResult',
urlParams: {
query: this.$('.taxonomyTree').find('li.active').find("a").data('name'),
searchType: "dsl",
dslChecked: true
},
updateTabState: function() {
return { searchUrl: this.url, stateChanged: true };
},
mergeBrowserUrl: false,
trigger: true
});
},
backButtonTaxanomy: function(e) {
var that = this;
this.dblClick = false;
this.backButton = true;
var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href').split("/terms");
var backUrl = dataURL.pop();
if (dataURL.join("/terms").length) {
this.ui.backTaxanomy.show();
var currentURL = "!/taxonomy/detailCatalog" + dataURL.join("/terms");
Utils.setUrl({
url: currentURL,
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: currentURL, stateChanged: false };
}
});
}
},
fetchTaxanomyCollections: function() {
this.taxanomy.fetch({ reset: true });
},
searchResult: function() {
var that = this;
_.each(this.taxanomy.models, function(model, key) {
var name = model.get('name');
that.termCollection.url = "/api/atlas/v1/taxonomies/" + name + "/terms";
});
this.termCollection.fetch({ reset: true });
},
termSearchData: function() {
var that = this;
var str = '<option></option>';
for (var j = 0; j < this.termCollection.models.length; j++) {
var terms = this.termCollection.models[j].attributes.name;
str += '<option>' + terms + '</option>';
this.ui.searchTermInput.html(str);
}
// this.ui.searchTermInput.setAttribute('data-href' : that.termCollection.url);
this.ui.searchTermInput.select2({
placeholder: "Search Term",
allowClear: true
});
},
refreshButtonTaxanomy: function() {
this.fetchTaxanomyCollections();
this.refresh = this.$('.taxonomyTree').find('.active a').data('href');
this.fetchCollection(this.url);
this.changeArrowState();
},
createDefaultTaxonomy: function() {
var that = this;
require([
'views/business_catalog/AddTermLayoutView',
'modules/Modal'
], function(AddTermLayoutView, Modal) {
var view = new AddTermLayoutView({
url: "/api/atlas/v1/taxonomies",
model: new that.parentCollection.model()
});
var modal = new Modal({
title: 'Taxonomy',
content: view,
okCloses: true,
showFooter: true,
allowCancel: true,
okText: 'Create',
}).open();
modal.$el.find('button.ok').attr('disabled', true);
modal.on('ok', function() {
that.saveDefaultTaxonomy(view);
});
view.ui.termName.attr("placeholder", "Enter Taxonomy Name");
view.ui.termName.on('keyup', function() {
if (this.value.indexOf(' ') >= 0) {
modal.$el.find('button.ok').prop('disabled', true);
view.ui.termName.addClass("addTermDiable");
view.$('.alertTerm').show();
} else {
modal.$el.find('button.ok').prop('disabled', false);
view.ui.termName.removeClass("addTermDiable");
view.$('.alertTerm').hide();
}
});
view.on('closeModal', function() {
modal.trigger('cancel');
});
});
},
saveDefaultTaxonomy: function(view) {
var that = this;
var url = view.url;
view.model.url = url + "/" + view.ui.termName.val();
this.showLoader();
view.model.set({ description: view.ui.termDetail.val() }).save(null, {
success: function(model, response) {
that.fetchCollection(view.model.url, true);
that.forwardClick(undefined, undefined, view.model.url);
Utils.notifySuccess({
content: "Default taxonomy" + view.ui.termName.val() + Messages.addSuccessMessage
});
},
error: function(error, data, status) {
Utils.notifyError({
content: "Default taxonomy " + view.ui.termName.val() + Messages.addErrorMessage
});
},
complete: function() {
that.hideLoader();
}
});
manualRender: function(url, isParent, back) {
this.RTreeLayoutView.currentView.manualRender(url, isParent, back);
}
});
return BusinessCatalogLayoutView;
......
dashboardv2/public/js/views/business_catalog/TreeLayoutView.js 0 → 100644
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define(['require',
'backbone',
'hbs!tmpl/business_catalog/TreeLayoutView_tmpl',
'utils/Utils',
'collection/VCatalogList',
'utils/CommonViewFunction',
'utils/Messages'
], function(require, Backbone, TreeLayoutView_tmpl, Utils, VCatalogList, CommonViewFunction, Messages) {
'use strict';
var TreeLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends TreeLayoutView */
{
_viewName: 'TreeLayoutView',
template: TreeLayoutView_tmpl,
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
Parent: '[data-id="Parent"]',
childList: '[data-id="childList"]',
liClick: 'li a[data-href]',
backTaxanomy: '[data-id="backTaxanomy"]',
expandArrow: '[data-id="expandArrow"]',
searchTermInput: '[data-id="searchTermInput"]',
refreshTaxanomy: '[data-id="refreshTaxanomy"]'
},
/** ui events hash */
events: function() {
var events = {};
events['dblclick ' + this.ui.liClick] = function(e) {
this.changeArrowState(e);
};
events['click ' + this.ui.liClick] = function(e) {
var that = this;
that.addActiveClass(e);
that.url = $(e.currentTarget).data('href');
if (this.viewBased) {
Utils.setUrl({
url: '#!/taxonomy/detailCatalog' + that.url,
mergeBrowserUrl: false,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
},
trigger: true
});
}
};
events['click ' + this.ui.backTaxanomy] = 'backButtonTaxanomy';
events['click ' + this.ui.refreshTaxanomy] = 'refreshButtonTaxanomy';
events['click ' + this.ui.expandArrow] = 'changeArrowState';
events["change " + this.ui.searchTermInput] = function() {
var termUrl = this.termCollection.url.split("/", 5).join("/") + "/" + this.ui.searchTermInput.val().split(".").join("/terms/");
this.fetchCollection(termUrl, true);
if (this.viewBased) {
Utils.setUrl({
url: "#!/taxonomy/detailCatalog" + termUrl,
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
}
});
}
};
return events;
},
/**
* intialize a new TreeLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'globalVent', 'url', 'viewBased'));
this.parentCollection = new VCatalogList();
this.childCollection = new VCatalogList();
this.taxanomy = new VCatalogList();
this.termCollection = new VCatalogList();
},
bindEvents: function() {
var that = this;
this.listenTo(this.parentCollection, 'reset', function() {
if (this.parentCollection.fullCollection.models.length) {
this.generateTree(true);
} else {
if (Utils.getUrlState.isTaxonomyTab() || Utils.getUrlState.isInitial()) {
this.createDefaultTaxonomy();
}
}
}, this);
this.listenTo(this.childCollection, 'reset', function() {
this.generateTree();
}, this);
this.listenTo(this.taxanomy, 'reset', function() {
this.searchResult();
}, this);
this.listenTo(this.termCollection, 'reset', function() {
this.termSearchData();
}, this);
this.listenTo(this.childCollection, 'error', function(model, response) {
if (response && response.responseJSON && response.responseJSON.message) {
Utils.notifyError({
content: response.responseJSON.message
});
}
this.hideLoader();
}, this);
this.listenTo(this.parentCollection, 'error', function(model, response) {
if (response && response.responseJSON && response.responseJSON.message) {
Utils.notifyError({
content: response.responseJSON.message
});
}
this.hideLoader();
}, this);
},
onRender: function() {
var that = this;
this.bindEvents();
that.ui.backTaxanomy.hide();
this.fetchCollection(this.url, true);
this.$el.on("click", '.termPopoverList li', function(e) {
that[$(this).find("a").data('fn')](e);
});
$('body').click(function(e) {
if (that.$('.termPopoverList').length) {
if ($(e.target).hasClass('termPopover')) {
return;
}
that.$('.termPopover').popover('hide');
}
});
this.fetchTaxanomyCollections();
},
backButtonTaxanomy: function(e) {
var that = this;
this.backButton = true;
var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href').split("/terms");
var backUrl = dataURL.pop();
if (dataURL.join("/terms").length) {
this.ui.backTaxanomy.show();
var currentURL = "#!/taxonomy/detailCatalog" + dataURL.join("/terms");
this.fetchCollection(dataURL.join("/terms"), true);
this.url = dataURL.join("/terms");
if (this.viewBased) {
Utils.setUrl({
url: currentURL,
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
}
});
}
}
},
manualRender: function(url) {
var splitUrl = this.url.split('/terms');
if (url && this.url != url) {
if (splitUrl.length > 1 && splitUrl[splitUrl.length - 1] == "") {
var checkUrl = splitUrl;
checkUrl.pop();
if (url != checkUrl) {
this.fetchCollection(url, true);
}
} else if (Utils.getUrlState.getQueryParams() && Utils.getUrlState.getQueryParams().load == "true") {
if (this.viewBased) {
Utils.setUrl({
url: "#!/taxonomy/detailCatalog" + url,
mergeBrowserUrl: false,
trigger: false,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
}
});
}
this.fetchCollection(url, true);
} else {
this.fetchCollection(url, true);
}
}
if (!url && Utils.getUrlState.isTaxonomyTab()) {
this.selectFirstElement();
}
},
changeArrowState: function(e) {
var scope = this.$('[data-id="expandArrow"]');
if (e) {
scope = $(e.currentTarget);
}
if (scope.is('a')) {
var url = scope.data('href');
scope = scope.parent().find("i.toggleArrow");
} else if (scope.is('i')) {
var url = scope.parent().find("a").data('href');
}
if (scope.hasClass('fa-angle-down')) {
scope.toggleClass('fa-angle-right fa-angle-down');
this.ui.childList.hide();
} else {
if (e && $(e.currentTarget).parents('li.parentChild').length) {
scope.parent('li').find('.tools .taxanomyloader').show();
this.url = url;
this.fetchCollection(url, true);
if (this.viewBased) {
Utils.setUrl({
url: "#!/taxonomy/detailCatalog" + url,
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
}
});
}
} else {
scope.toggleClass('fa-angle-right fa-angle-down');
this.ui.childList.show();
}
}
},
fetchCollection: function(url, isParent) {
if (url) {
this.url = url;
} else {
var parentURL = this.ui.Parent.find('a').data('href');
if (parentURL) {
this.url = parentURL;
} else {
this.url = "api/atlas/v1/taxonomies";
}
}
this.showLoader();
if (isParent) {
this.parentCollection.url = this.url;
this.parentCollection.fullCollection.reset(undefined, { silent: true });
this.parentCollection.fetch({ reset: true });
} else {
this.childCollection.url = this.url + "?hierarchy/path:.";
this.childCollection.fullCollection.reset(undefined, { silent: true });
this.childCollection.fetch({ reset: true });
}
},
showLoader: function() {
this.$('.taxonomyTree').find('li.active .tools .taxanomyloader').show();
this.$('.contentLoading').show();
},
hideLoader: function() {
this.$('.taxanomyloader').hide();
this.$('.contentLoading').hide();
},
addActiveClass: function(e) {
this.$('ul.taxonomyTree').find('li').removeClass('active');
if (e.jquery) {
e.parent('li').addClass('active');
} else {
if (e.currentTarget) {
$(e.currentTarget).parent('li').addClass('active');
} else {
if ($(e).parent.length) {
$(e).parent('li').addClass('active');
} else {
$(e).parents('li').addClass('active');
}
}
}
},
fetchTaxanomyCollections: function() {
this.taxanomy.fetch({ reset: true });
},
refreshButtonTaxanomy: function() {
this.fetchTaxanomyCollections();
var url = "";
if (this.$('.taxonomyTree').find('.active').parents('.parentChild').length) {
url = this.$('.taxonomyTree').find('.active a').data('href').split("/").slice(0, -2).join("/");
this.refresh = this.$('.taxonomyTree').find('.active a').data('href');
} else {
url = this.$('.taxonomyTree').find('.active a').data('href');
this.refresh = this.$('.taxonomyTree').find('.active a').data('href');
}
this.fetchCollection(url, true);
},
searchResult: function() {
var that = this;
_.each(this.taxanomy.models, function(model, key) {
var name = model.get('name');
that.termCollection.url = "/api/atlas/v1/taxonomies/" + name + "/terms";
});
this.termCollection.fetch({ reset: true });
},
termSearchData: function() {
var that = this;
var str = '<option></option>';
for (var j = 0; j < this.termCollection.models.length; j++) {
var terms = this.termCollection.models[j].attributes.name;
str += '<option>' + terms + '</option>';
this.ui.searchTermInput.html(str);
}
// this.ui.searchTermInput.setAttribute('data-href' : that.termCollection.url);
this.ui.searchTermInput.select2({
placeholder: "Search Term",
allowClear: true
});
},
onSearchTerm: function() {
Utils.setUrl({
url: '#!/search/searchResult',
urlParams: {
query: this.$('.taxonomyTree').find('li.active').find("a").data('name'),
searchType: "dsl",
dslChecked: true
},
updateTabState: function() {
return { searchUrl: this.url, stateChanged: true };
},
mergeBrowserUrl: false,
trigger: true
});
},
selectFirstElement: function() {
var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href')
if (dataURL) {
this.url = dataURL;
if (this.viewBased) {
Utils.setUrl({
url: "#!/taxonomy/detailCatalog" + dataURL,
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
}
});
}
}
},
generateTree: function(isParent) {
var parentLi = "",
childLi = "",
that = this;
function createTaxonomy(url) {
var href = false;
_.each(that.parentCollection.fullCollection.models, function(model, key) {
if (model.get('terms')) {
href = model.get('terms').href;
} else if (model.get('href')) {
href = model.get('href') + "/terms";
}
var hrefUrl = "/api" + model.get('href').split("/api")[1];
if (hrefUrl) {
var backUrlCheck = hrefUrl.split("taxonomies/");
if (backUrlCheck.length > 1) {
if (backUrlCheck[1].split("/terms").length <= 1) {
that.ui.backTaxanomy.hide();
} else {
that.ui.backTaxanomy.show();
}
}
}
var name = Utils.checkTagOrTerm(model.get('name'));
if (that.viewBased) {
parentLi = '<div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover"></i></div><i class="fa fa-angle-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a>';
} else {
parentLi = '<div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i></div><i class="fa fa-angle-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a>';
}
});
if (href) {
var hrefUrl = "/api" + href.split("/api")[1];
that.fetchCollection(hrefUrl);
}
that.ui.childList.html('');
that.ui.Parent.addClass('active');
that.ui.Parent.html(parentLi);
}
function createTerm() {
_.each(that.childCollection.fullCollection.models, function(model, key) {
var name = Utils.checkTagOrTerm(model.get('name'));
var hrefUrl = "/api" + model.get('href').split("/api")[1];
if (that.viewBased) {
childLi += '<li class="children"><div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover" ></i></div><i class="fa fa-angle-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a></li>';
} else {
childLi += '<li class="children"><div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i></div><i class="fa fa-angle-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a></li>';
}
});
that.ui.childList.html(childLi);
}
if (isParent) {
createTaxonomy();
} else {
this.changeArrowState();
createTerm();
if (Utils.getUrlState.isInitial() || Utils.getUrlState.getQueryUrl().lastValue == "taxonomy") {
this.selectFirstElement();
}
if (this.refresh) {
this.addActiveClass(this.$('.taxonomyTree').find('a[data-href="' + this.refresh + '"]'));
this.refresh = undefined;
}
}
this.hideLoader();
if (this.viewBased) {
this.$('.termPopover').popover({
placement: 'bottom',
html: true,
trigger: 'manual',
container: this.$el,
template: '<div class="popover fixedPopover fade bottom in"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function() {
var li = "<li class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onAddTerm'>Add Subterm</a></li>";
/* "<li class='listTerm' ><i class='fa fa-arrow-right'></i> <a href='javascript:void(0)' data-fn='moveTerm'>Move Term</a></li>" +
"<li class='listTerm' ><i class='fa fa-edit'></i> <a href='javascript:void(0)' data-fn='onEditTerm'>Edit Term</a></li>" +*/
var termDataURL = Utils.getUrlState.getQueryUrl().hash.split("terms");
if (termDataURL.length > 1) {
li = "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Assets</a></li>" + li;
li += "<li class='listTerm'><i class='fa fa-trash'></i> <a href='javascript:void(0)' data-fn='deleteTerm'>Delete Term</a></li>";
}
return "<ul class='termPopoverList'>" + li + "</ul>";
}
});
this.$('.termPopover').off('click').on('click', function(e) {
// if any other popovers are visible, hide them
e.preventDefault();
that.$('.termPopover').not(this).popover('hide');
$(this).popover('show');
});
}
},
onAddTerm: function(e) {
var that = this;
require([
'views/business_catalog/AddTermLayoutView',
'modules/Modal'
], function(AddTermLayoutView, Modal) {
var view = new AddTermLayoutView({
url: that.$('.taxonomyTree').find('li.active').find("a").data("href"),
model: new that.parentCollection.model()
});
var modal = new Modal({
title: 'Create a new subterm',
content: view,
okCloses: true,
showFooter: true,
allowCancel: true,
okText: 'Add',
}).open();
modal.$el.find('button.ok').attr('disabled', true);
modal.on('ok', function() {
that.saveAddTerm(view);
});
view.ui.termName.on('keyup', function() {
if (this.value.indexOf(' ') >= 0) {
modal.$el.find('button.ok').prop('disabled', true);
view.ui.termName.addClass("addTermDiable");
view.$('.alertTerm').show();
} else {
modal.$el.find('button.ok').prop('disabled', false);
view.ui.termName.removeClass("addTermDiable");
view.$('.alertTerm').hide();
}
});
view.on('closeModal', function() {
modal.trigger('cancel');
});
});
},
saveAddTerm: function(view) {
var that = this;
var url = view.url;
view.model.url = url + "/terms/" + view.ui.termName.val();
this.showLoader();
view.model.set({ description: view.ui.termDetail.val() }).save(null, {
success: function(model, response) {
that.create = true;
that.fetchTaxanomyCollections();
that.fetchCollection(url, true);
//that.fetchCollection(that.url);
Utils.notifySuccess({
content: "Term " + view.ui.termName.val() + Messages.addSuccessMessage
});
},
error: function(model, response) {
Utils.notifyError({
content: "Term " + view.ui.termName.val() + Messages.addErrorMessage
});
},
complete: function() {
that.hideLoader();
}
});
},
deleteTerm: function(e) {
var termName = this.$('.taxonomyTree').find('li.active a').data("name"),
that = this,
modal = CommonViewFunction.deleteTagModel(termName);
modal.on('ok', function() {
that.deleteTermData(e);
});
modal.on('closeModal', function() {
modal.trigger('cancel');
});
},
deleteTermData: function(e) {
var that = this;
this.showLoader();
require(['models/VCatalog'], function(VCatalog) {
var termModel = new VCatalog(),
url = that.$('.taxonomyTree').find('li.active a').data('href');
var termName = that.$('.taxonomyTree').find('li.active a').text();
termModel.deleteTerm(url, {
beforeSend: function() {},
success: function(data) {
Utils.notifySuccess({
content: "Term " + termName + Messages.deleteSuccessMessage
});
var termURL = url.split("/").slice(0, -2).join("/");
if (that.viewBased) {
Utils.setUrl({
url: "#!/taxonomy/detailCatalog" + termURL,
mergeBrowserUrl: false,
trigger: true,
updateTabState: function() {
return { taxonomyUrl: this.url, stateChanged: true };
}
});
}
that.fetchCollection(termURL, true);
},
error: function(error, data, status) {
var message = "Term " + termName + Messages.deleteErrorMessage;
if (data.error) {
message = data.error;
}
Utils.notifyError({
content: message
});
},
complete: function() {
that.hideLoader();
}
});
});
},
moveTerm: function() {
var that = this;
require([
'views/business_catalog/MoveTermLayoutView',
'modules/Modal'
], function(MoveTermLayoutView, Modal) {
var view = new MoveTermLayoutView({
taxanomyCollection: that.collection
});
var modal = new Modal({
title: 'Move Term',
content: view,
okCloses: true,
showFooter: true,
allowCancel: true,
okText: 'Move',
}).open();
// modal.on('ok', function() {
// that.saveAddTerm(view);
// });
view.on('closeModal', function() {
modal.trigger('cancel');
});
});
},
createDefaultTaxonomy: function() {
var that = this;
require([
'views/business_catalog/AddTermLayoutView',
'modules/Modal'
], function(AddTermLayoutView, Modal) {
var view = new AddTermLayoutView({
url: "/api/atlas/v1/taxonomies",
model: new that.parentCollection.model()
});
var modal = new Modal({
title: 'Taxonomy',
content: view,
okCloses: true,
showFooter: true,
allowCancel: true,
okText: 'Create',
}).open();
modal.$el.find('button.ok').attr('disabled', true);
modal.on('ok', function() {
that.saveDefaultTaxonomy(view);
});
view.ui.termName.attr("placeholder", "Enter Taxonomy Name");
view.ui.termName.on('keyup', function() {
if (this.value.indexOf(' ') >= 0) {
modal.$el.find('button.ok').prop('disabled', true);
view.ui.termName.addClass("addTermDiable");
view.$('.alertTerm').show();
} else {
modal.$el.find('button.ok').prop('disabled', false);
view.ui.termName.removeClass("addTermDiable");
view.$('.alertTerm').hide();
}
});
view.on('closeModal', function() {
modal.trigger('cancel');
});
});
},
saveDefaultTaxonomy: function(view) {
var that = this;
var url = view.url;
view.model.url = url + "/" + view.ui.termName.val();
this.showLoader();
view.model.set({ description: view.ui.termDetail.val() }).save(null, {
success: function(model, response) {
that.fetchCollection(view.model.url, true);
Utils.notifySuccess({
content: "Default taxonomy " + view.ui.termName.val() + Messages.addSuccessMessage
});
},
error: function(error, data, status) {
Utils.notifyError({
content: "Default taxonomy " + view.ui.termName.val() + Messages.addErrorMessage
});
},
complete: function() {
that.hideLoader();
}
});
}
});
return TreeLayoutView;
});
dashboardv2/public/js/views/schema/SchemaLayoutView.js
......@@ -40,8 +40,8 @@ define(['require',
ui: {
tagClick: '[data-id="tagClick"]',
addTag: "[data-id='addTag']",
addTerm: '[data-id="addTerm"]'
addTerm: '[data-id="addTerm"]',
showMoreLess: '[data-id="showMoreLess"]'
},
/** ui events hash */
events: function() {
......@@ -61,6 +61,15 @@ define(['require',
});
}
};
events["click " + this.ui.showMoreLess] = function(e) {
$(e.currentTarget).find('i').toggleClass('fa fa-angle-right fa fa-angle-up');
$(e.currentTarget).parents('.searchTag').find('a').toggleClass('hide show');
if ($(e.currentTarget).find('i').hasClass('fa-angle-right')) {
$(e.currentTarget).find('span').text('Show More');
} else {
$(e.currentTarget).find('span').text('Show less');
}
};
return events;
},
/**
......@@ -85,6 +94,7 @@ define(['require',
paginatorOpts: {}
};
this.bindEvents();
this.bradCrumbList = [];
},
bindEvents: function() {
this.listenTo(this.schemaCollection, "reset", function(value) {
......@@ -113,6 +123,14 @@ define(['require',
globalVent: that.globalVent,
columns: cols
})));
that.renderBreadcrumb();
});
},
renderBreadcrumb: function() {
var that = this;
_.each(this.bradCrumbList, function(object) {
var scopeObject = that.$('[dataTerm-id="' + object.scopeId + '"]').find('.liContent');
CommonViewFunction.breadcrumbMaker({ urlList: object.value, scope: scopeObject });
});
},
getSchemaTableColumns: function() {
......@@ -163,17 +181,10 @@ define(['require',
cell: "Html",
editable: false,
sortable: false,
className: 'searchTag',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
var traits = model.get('$traits$');
var atags = "";
_.keys(model.get('$traits$')).map(function(key) {
var tagName = Utils.checkTagOrTerm(traits[key].$typeName$);
if (!tagName.term) {
atags += '<a class="inputTag" data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>';
}
});
return '<div class="tagList">' + atags + '<a href="javascript:void(0);" class="inputTag" data-id="addTag" data-guid="' + model.get('$id$').id + '"><i style="right:0" class="fa fa-plus"></i></a></div>';
return CommonViewFunction.tagForTable(model);
}
})
};
......@@ -183,23 +194,18 @@ define(['require',
editable: false,
sortable: false,
orderable: true,
className: 'searchTerm',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
var traits = model.get('$traits$');
var aterms = "";
_.keys(model.get('$traits$')).map(function(key) {
var tagName = Utils.checkTagOrTerm(traits[key].$typeName$);
if (tagName.term) {
aterms += '<a class="inputTag" data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>';
var returnObject = CommonViewFunction.termTableBreadcrumbMaker(model);
if (returnObject.object) {
that.bradCrumbList.push(returnObject.object);
}
});
return '<div class="tagList">' + aterms + '<a href="javascript:void(0);" class="inputTag" data-id="addTerm" data-guid="' + model.get('$id$').id + '"><i style="right:0" class="fa fa-plus"></i></a></div>';
return returnObject.html;
}
})
};
}
return this.schemaCollection.constructor.getTableCols(col, this.schemaCollection);
},
addTagModalView: function(e) {
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -46,7 +46,8 @@ define(['require',
ui: {
tagClick: '[data-id="tagClick"]',
addTag: '[data-id="addTag"]',
addTerm: '[data-id="addTerm"]'
addTerm: '[data-id="addTerm"]',
showMoreLess: '[data-id="showMoreLess"]'
},
/** ui events hash */
......@@ -77,7 +78,15 @@ define(['require',
};
events["click " + this.ui.addTag] = 'addTagModalView';
events["click " + this.ui.addTerm] = 'addTermModalView';
events["click " + this.ui.tagCrossIcon] = function(e) {};
events["click " + this.ui.showMoreLess] = function(e) {
$(e.currentTarget).find('i').toggleClass('fa fa-angle-right fa fa-angle-up');
$(e.currentTarget).parents('.searchTag').find('a').toggleClass('hide show');
if ($(e.currentTarget).find('i').hasClass('fa-angle-right')) {
$(e.currentTarget).find('span').text('Show More');
} else {
$(e.currentTarget).find('span').text('Show less');
}
};
return events;
},
/**
......@@ -104,7 +113,7 @@ define(['require',
paginatorOpts: {}
};
this.bindEvents();
this.bradCrumbList = [];
},
bindEvents: function() {
this.listenTo(this.vent, "show:searchResult", function(value) {
......@@ -179,9 +188,9 @@ define(['require',
model.set("position", 3, { silent: true });
model.set("label", "Owner");
}
/*else {
model.set("position", ++count, { silent: true });
}*/
// } else {
// model.set("position", ++count, { silent: true });
// }
});
return this;
}
......@@ -193,6 +202,14 @@ define(['require',
columns: columns,
includeOrderAbleColumns: true
})));
that.renderBreadcrumb();
});
},
renderBreadcrumb: function() {
var that = this;
_.each(this.bradCrumbList, function(object) {
var scopeObject = that.$('[dataTerm-id="' + object.scopeId + '"]').find('.liContent');
CommonViewFunction.breadcrumbMaker({ urlList: object.value, scope: scopeObject });
});
},
checkTableFetch: function() {
......@@ -253,24 +270,10 @@ define(['require',
editable: false,
sortable: false,
orderable: true,
className: 'searchTag',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
var traits = model.get('$traits$');
var atags = "",
addTag = "";
_.keys(model.get('$traits$')).map(function(key) {
var tagName = Utils.checkTagOrTerm(traits[key].$typeName$);
if (!tagName.term) {
atags += '<a class="inputTag" data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + tagName.name + '" data-guid="' + model.get('$id$').id + '" ></i></a>';
}
});
if (model.get('$id$')) {
addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTag" data-guid="' + model.get('$id$').id + '" ><i style="right:0" class="fa fa-plus"></i></a>';
} else {
addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTag"><i style="right:0" class="fa fa-plus"></i></a>';
}
return '<div class="tagList">' + atags + addTag + '</div>';
return CommonViewFunction.tagForTable(model);
}
})
};
......@@ -280,23 +283,14 @@ define(['require',
editable: false,
sortable: false,
orderable: true,
className: 'searchTerm',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
var traits = model.get('$traits$');
var aterm = "",
addTerm = "";
_.keys(model.get('$traits$')).map(function(key) {
var tagName = Utils.checkTagOrTerm(traits[key].$typeName$);
if (tagName.term) {
aterm += '<a class="inputTag term" data-id="tagClick" data-href="' + traits[key].$typeName$ + '">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>';
}
});
if (model.get('$id$')) {
addTerm += '<a href="javascript:void(0)" data-id="addTerm" class="inputTag" data-guid="' + model.get('$id$').id + '" ><i style="right:0" class="fa fa-plus"></i></a>';
} else {
addTerm += '<a href="javascript:void(0)" data-id="addTerm" class="inputTag"><i style="right:0" class="fa fa-plus"></i></a>';
var returnObject = CommonViewFunction.termTableBreadcrumbMaker(model);
if (returnObject.object) {
that.bradCrumbList.push(returnObject.object);
}
return '<div class="tagList">' + aterm + addTerm + '</div>';
return returnObject.html;
}
})
};
......
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