Commit 59bd56c8 by Keval Bhatt Committed by Suma Shivaprasad

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

parent 8c1c969f
...@@ -31,6 +31,9 @@ ...@@ -31,6 +31,9 @@
.dropdown-menu > li > a { .dropdown-menu > li > a {
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
padding: 6px 20px; padding: 6px 20px;
text-overflow: ellipsis;
max-width: 276px;
overflow: hidden;
} }
.branchListParent { .branchListParent {
......
...@@ -119,10 +119,6 @@ a { ...@@ -119,10 +119,6 @@ a {
} }
} }
hr {
border-top: 1px solid $color_mirage_approx
}
th { th {
text-transform: capitalize; text-transform: capitalize;
} }
...@@ -172,7 +168,57 @@ ul { ...@@ -172,7 +168,57 @@ ul {
border: 1px solid $color_jungle_green_approx; border: 1px solid $color_jungle_green_approx;
cursor: pointer; cursor: pointer;
} }
.add-seperator { .add-seperator {
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $color_mirage_approx 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;
}
}
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.modal-footer { .modal-footer {
padding: 15px; padding: 15px;
text-align: right; text-align: right;
border: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE;
} }
.modal-body { .modal-body {
...@@ -119,3 +119,13 @@ ...@@ -119,3 +119,13 @@
padding-left: 12px; 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;
}
...@@ -109,6 +109,7 @@ ...@@ -109,6 +109,7 @@
float: left; float: left;
cursor: pointer; cursor: pointer;
background-color: $white; background-color: $white;
white-space: nowrap;
i.fa { i.fa {
position: relative; position: relative;
right: -5px; right: -5px;
...@@ -120,6 +121,16 @@ ...@@ -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 { .addTagBase {
padding: 2px 8px; padding: 2px 8px;
border: 1px solid $action_gray; border: 1px solid $action_gray;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.user-dropdown { .user-dropdown {
display: inline-block; display: inline-block;
padding: 20px; padding: 14px;
color: $color_ironside_gray_approx; color: $color_ironside_gray_approx;
.user-circle { .user-circle {
padding: 8px 10px; padding: 8px 10px;
......
...@@ -22,16 +22,6 @@ ...@@ -22,16 +22,6 @@
// color: $white; // color: $white;
display: block; 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 { .taxonomyTree {
...@@ -139,3 +129,48 @@ ...@@ -139,3 +129,48 @@
.alertTerm { .alertTerm {
color: #FF0000 !important; 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;
}
}
}
...@@ -112,26 +112,12 @@ define([ ...@@ -112,26 +112,12 @@ define([
this.collection = new VCatalogList(); this.collection = new VCatalogList();
this.collection.url = url; this.collection.url = url;
App.rNHeader.show(new BusinessCatalogHeader({ 'globalVent': that.globalVent, 'url': url, 'collection': this.collection })); 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) { if (!App.rSideNav.currentView) {
App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent, 'url': url })); App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent, 'url': url }));
} else { } else {
var view = App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView; App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender("/" + url);
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.selectTab(); App.rSideNav.currentView.selectTab();
} }
if (Globals.saveApplicationState.tabState.stateChanged) {
Globals.saveApplicationState.tabState.stateChanged = false;
}
App.rNContent.show(new BusinessCatalogDetailLayoutView({ App.rNContent.show(new BusinessCatalogDetailLayoutView({
'globalVent': that.globalVent, 'globalVent': that.globalVent,
'url': url, 'url': url,
......
...@@ -14,15 +14,4 @@ ...@@ -14,15 +14,4 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div class="row"> <div id="r_treeLayoutView"></div>
<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>
...@@ -14,20 +14,4 @@ ...@@ -14,20 +14,4 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div class="form-group"> <div id="r_treeLayoutView"></div>
<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>
<!--
* 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>
...@@ -18,6 +18,6 @@ ...@@ -18,6 +18,6 @@
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </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 id="r_searchResultTableLayoutView" class="searchTable"></div>
</div> </div>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<input class="form-control row-margin-bottom" data-id="tagName" placeholder="Name(required)" autofocus> <input class="form-control row-margin-bottom" data-id="tagName" placeholder="Name(required)" autofocus>
</input> </input>
{{else}} {{else}}
<h4><span data-id="title"></span></h4> <h4 class="ellipsis"><span data-id="title"></span></h4>
</input> </input>
{{/if}} {{/if}}
<input class="form-control row-margin-bottom" data-id="description" value="{{description}}" placeholder="Description"> <input class="form-control row-margin-bottom" data-id="description" value="{{description}}" placeholder="Description">
......
...@@ -25,9 +25,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r ...@@ -25,9 +25,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
if (tagName) { if (tagName) {
var tagOrTerm = Utils.checkTagOrTerm(tagName); var tagOrTerm = Utils.checkTagOrTerm(tagName);
if (tagOrTerm.term) { if (tagOrTerm.term) {
msg = "<b>Term: " + tagName + "</b>"; msg = "<div class='ellipsis'><b>Term: " + tagName + "</b></div>";
} else { } else {
msg = "<b>Tag: " + tagName + "</b>"; msg = "<div class='ellipsis'><b>Tag: " + tagName + "</b></div>";
} }
} }
var modal = new Modal({ var modal = new Modal({
...@@ -197,6 +197,142 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r ...@@ -197,6 +197,142 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
}); });
return table; 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) { CommonViewFunction.userDataFetch = function(options) {
if (options.url) { if (options.url) {
$.ajax({ $.ajax({
......
...@@ -27,7 +27,8 @@ define(['require'], function(require) { ...@@ -27,7 +27,8 @@ define(['require'], function(require) {
deleteSuccessMessage: " has been deleted successfully", deleteSuccessMessage: " has been deleted successfully",
deleteErrorMessage: " could not be deleted", deleteErrorMessage: " could not be deleted",
addAttributeSuccessMessage: "Tag attribute is added successfully", 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; return Messages;
}); });
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
define(['require', 'backgrid', 'asBreadcrumbs'], function(require) { define(['require', 'backgrid', 'asBreadcrumbs'], function(require) {
'use strict'; 'use strict';
$.asBreadcrumbs.prototype.generateChildrenInfo = function() { $.asBreadcrumbs.prototype.generateChildrenInfo = function() {
var self = this; var self = this;
this.$children.each(function() { this.$children.each(function() {
...@@ -38,6 +39,29 @@ define(['require', 'backgrid', 'asBreadcrumbs'], function(require) { ...@@ -38,6 +39,29 @@ define(['require', 'backgrid', 'asBreadcrumbs'], function(require) {
return (this.length > n) ? this.substr(0, n - 1) + '...' : this; 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 * HtmlCell renders any html code
* @class Backgrid.HtmlCell * @class Backgrid.HtmlCell
* @extends Backgrid.Cell * @extends Backgrid.Cell
......
...@@ -34,12 +34,11 @@ define(['require', ...@@ -34,12 +34,11 @@ define(['require',
template: AddTermToEntityLayoutViewTmpl, template: AddTermToEntityLayoutViewTmpl,
/** Layout sub regions */ /** Layout sub regions */
regions: {}, regions: {
/** ui selector cache */ RTreeLayoutView: "#r_treeLayoutView"
ui: {
termName: '[data-id="termName"]',
addTermOptions: '[data-id="addTermOptions"]'
}, },
/** ui selector cache */
ui: {},
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
var events = {}; var events = {};
...@@ -66,58 +65,31 @@ define(['require', ...@@ -66,58 +65,31 @@ define(['require',
this.on('closeModal', function() { this.on('closeModal', function() {
this.modal.trigger('cancel'); 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() { onRender: function() {
this.fetchTerms(); this.renderTreeLayoutView();
}, },
fetchTerms: function(url) { renderTreeLayoutView: function() {
if (url) { var that = this;
this.vCatalogList.url = url; require(['views/business_catalog/TreeLayoutView'], function(TreeLayoutView) {
} that.RTreeLayoutView.show(new TreeLayoutView({
this.vCatalogList.fetch({ reset: true }); url: that.url,
}, viewBased: false
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
}); });
}, },
saveTermToAsset: function() { saveTermToAsset: function() {
var that = this; var that = this;
var VCatalog = new this.vCatalogList.model(); var VCatalog = new this.vCatalogList.model();
var termName = this.modal.$el.find('.taxonomyTree li.active a').data('name').split("`").join("");
VCatalog.url = function() { 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, { VCatalog.save(null, {
beforeSend: function() {}, beforeSend: function() {},
success: function(data) { success: function(data) {
Utils.notifySuccess({ Utils.notifySuccess({
content: "Term " + that.ui.addTermOptions.val() + Messages.addTermToEntitySuccessMessage content: "Term " + termName + Messages.addTermToEntitySuccessMessage
}); });
if (that.callback) { if (that.callback) {
that.callback(); that.callback();
......
...@@ -215,7 +215,7 @@ define(['require', ...@@ -215,7 +215,7 @@ define(['require',
}, },
onSaveDescriptionClick: function(view) { onSaveDescriptionClick: function(view) {
view.description = view.ui.description.val(); 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(); this.ui.description.show();
}, },
onSaveButton: function(saveObject, message, view) { onSaveButton: function(saveObject, message, view) {
......
...@@ -54,29 +54,7 @@ define(['require', ...@@ -54,29 +54,7 @@ define(['require',
} }
var that = this; var that = this;
if (this.url) { if (this.url) {
var t = []; this.value = CommonViewFunction.breadcrumbUrlMaker(this.url);
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.listenTo(this.collection, 'reset', function() { this.listenTo(this.collection, 'reset', function() {
setTimeout(function() { setTimeout(function() {
...@@ -90,25 +68,7 @@ define(['require', ...@@ -90,25 +68,7 @@ define(['require',
var li = "", var li = "",
value = this.value, value = this.value,
that = this; that = this;
_.each(value, function(object) { CommonViewFunction.breadcrumbMaker({ urlList: this.value, scope: this.$('.breadcrumb') });
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>";
}
});
} }
}); });
return BusinessCatalogHeader; return BusinessCatalogHeader;
......
...@@ -40,8 +40,8 @@ define(['require', ...@@ -40,8 +40,8 @@ define(['require',
ui: { ui: {
tagClick: '[data-id="tagClick"]', tagClick: '[data-id="tagClick"]',
addTag: "[data-id='addTag']", addTag: "[data-id='addTag']",
addTerm: '[data-id="addTerm"]' addTerm: '[data-id="addTerm"]',
showMoreLess: '[data-id="showMoreLess"]'
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -61,6 +61,15 @@ define(['require', ...@@ -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; return events;
}, },
/** /**
...@@ -85,6 +94,7 @@ define(['require', ...@@ -85,6 +94,7 @@ define(['require',
paginatorOpts: {} paginatorOpts: {}
}; };
this.bindEvents(); this.bindEvents();
this.bradCrumbList = [];
}, },
bindEvents: function() { bindEvents: function() {
this.listenTo(this.schemaCollection, "reset", function(value) { this.listenTo(this.schemaCollection, "reset", function(value) {
...@@ -113,6 +123,14 @@ define(['require', ...@@ -113,6 +123,14 @@ define(['require',
globalVent: that.globalVent, globalVent: that.globalVent,
columns: cols 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() { getSchemaTableColumns: function() {
...@@ -163,17 +181,10 @@ define(['require', ...@@ -163,17 +181,10 @@ define(['require',
cell: "Html", cell: "Html",
editable: false, editable: false,
sortable: false, sortable: false,
className: 'searchTag',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
var traits = model.get('$traits$'); return CommonViewFunction.tagForTable(model);
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>';
} }
}) })
}; };
...@@ -183,23 +194,18 @@ define(['require', ...@@ -183,23 +194,18 @@ define(['require',
editable: false, editable: false,
sortable: false, sortable: false,
orderable: true, orderable: true,
className: 'searchTerm',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
var traits = model.get('$traits$'); var returnObject = CommonViewFunction.termTableBreadcrumbMaker(model);
var aterms = ""; if (returnObject.object) {
_.keys(model.get('$traits$')).map(function(key) { that.bradCrumbList.push(returnObject.object);
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>';
} }
}); return returnObject.html;
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 this.schemaCollection.constructor.getTableCols(col, this.schemaCollection); return this.schemaCollection.constructor.getTableCols(col, this.schemaCollection);
}, },
addTagModalView: function(e) { addTagModalView: function(e) {
......
...@@ -46,7 +46,8 @@ define(['require', ...@@ -46,7 +46,8 @@ define(['require',
ui: { ui: {
tagClick: '[data-id="tagClick"]', tagClick: '[data-id="tagClick"]',
addTag: '[data-id="addTag"]', addTag: '[data-id="addTag"]',
addTerm: '[data-id="addTerm"]' addTerm: '[data-id="addTerm"]',
showMoreLess: '[data-id="showMoreLess"]'
}, },
/** ui events hash */ /** ui events hash */
...@@ -77,7 +78,15 @@ define(['require', ...@@ -77,7 +78,15 @@ define(['require',
}; };
events["click " + this.ui.addTag] = 'addTagModalView'; events["click " + this.ui.addTag] = 'addTagModalView';
events["click " + this.ui.addTerm] = 'addTermModalView'; 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; return events;
}, },
/** /**
...@@ -104,7 +113,7 @@ define(['require', ...@@ -104,7 +113,7 @@ define(['require',
paginatorOpts: {} paginatorOpts: {}
}; };
this.bindEvents(); this.bindEvents();
this.bradCrumbList = [];
}, },
bindEvents: function() { bindEvents: function() {
this.listenTo(this.vent, "show:searchResult", function(value) { this.listenTo(this.vent, "show:searchResult", function(value) {
...@@ -179,9 +188,9 @@ define(['require', ...@@ -179,9 +188,9 @@ define(['require',
model.set("position", 3, { silent: true }); model.set("position", 3, { silent: true });
model.set("label", "Owner"); model.set("label", "Owner");
} }
/*else { // } else {
model.set("position", ++count, { silent: true }); // model.set("position", ++count, { silent: true });
}*/ // }
}); });
return this; return this;
} }
...@@ -193,6 +202,14 @@ define(['require', ...@@ -193,6 +202,14 @@ define(['require',
columns: columns, columns: columns,
includeOrderAbleColumns: true 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() { checkTableFetch: function() {
...@@ -253,24 +270,10 @@ define(['require', ...@@ -253,24 +270,10 @@ define(['require',
editable: false, editable: false,
sortable: false, sortable: false,
orderable: true, orderable: true,
className: 'searchTag',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
var traits = model.get('$traits$'); return CommonViewFunction.tagForTable(model);
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>';
} }
}) })
}; };
...@@ -280,23 +283,14 @@ define(['require', ...@@ -280,23 +283,14 @@ define(['require',
editable: false, editable: false,
sortable: false, sortable: false,
orderable: true, orderable: true,
className: 'searchTerm',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
var traits = model.get('$traits$'); var returnObject = CommonViewFunction.termTableBreadcrumbMaker(model);
var aterm = "", if (returnObject.object) {
addTerm = ""; that.bradCrumbList.push(returnObject.object);
_.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>';
} }
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