Skip to content

A
atlas
Commit ec314fde by kevalbhatt
Options

ATLAS-3897: UI: Normalize list of propagated classifications

parent 7e06f55f
Showing with 350 additions and 78 deletions
dashboardv2/public/css/scss/form.scss
...@@ -369,6 +369,11 @@ button { ...@@ -369,6 +369,11 @@ button {
>span { >span {
padding: 5px; padding: 5px;
&.active {
color: $white;
background-color: $tag_color;
}
&:hover { &:hover {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
......
dashboardv2/public/js/router/Router.js
...@@ -106,11 +106,18 @@ define([ ...@@ -106,11 +106,18 @@ define([
renderViewIfNotExists: function(options) { renderViewIfNotExists: function(options) {
var view = options.view, var view = options.view,
render = options.render, render = options.render,
viewName = options.viewName,
manualRender = options.manualRender; manualRender = options.manualRender;
if (!view.currentView) { if (!view.currentView) {
if (render) view.show(options.render()); if (render) view.show(options.render(options));
} else if (manualRender && viewName) {
if (viewName === view.currentView._viewName) {
options.manualRender(options);
} else {
if (render) view.show(options.render(options));
}
} else { } else {
if (manualRender) options.manualRender(); if (manualRender) options.manualRender(options);
} }
}, },
...@@ -149,13 +156,7 @@ define([ ...@@ -149,13 +156,7 @@ define([
detailPage: function(id) { detailPage: function(id) {
var that = this; var that = this;
if (id) { if (id) {
require([ require(["views/site/Header", "views/detail_page/DetailPageLayoutView", "views/site/SideNavLayoutView"], function(Header, DetailPageLayoutView, SideNavLayoutView) {
'views/site/Header',
'views/detail_page/DetailPageLayoutView',
'views/site/SideNavLayoutView',
'collection/VEntityList'
], function(Header, DetailPageLayoutView, SideNavLayoutView, VEntityList) {
this.entityCollection = new VEntityList([], {});
var paramObj = Utils.getUrlState.getQueryParams(), var paramObj = Utils.getUrlState.getQueryParams(),
options = _.extend({}, that.preFetchedCollectionLists, that.sharedObj, that.ventObj); options = _.extend({}, that.preFetchedCollectionLists, that.sharedObj, that.ventObj);
that.renderViewIfNotExists(that.getHeaderOptions(Header)); that.renderViewIfNotExists(that.getHeaderOptions(Header));
...@@ -168,9 +169,18 @@ define([ ...@@ -168,9 +169,18 @@ define([
return new SideNavLayoutView(options); return new SideNavLayoutView(options);
} }
}); });
App.rNContent.show(new DetailPageLayoutView(_.extend({ 'collection': this.entityCollection, 'id': id, 'value': paramObj }, options)));
this.entityCollection.url = UrlLinks.entitiesApiUrl({ guid: id, minExtInfo: true }); var dOptions = _.extend({ id: id, value: paramObj }, options);
this.entityCollection.fetch({ reset: true }); that.renderViewIfNotExists({
view: App.rNContent,
viewName: "DetailPageLayoutView",
manualRender: function() {
this.view.currentView.manualRender(dOptions);
},
render: function() {
return new DetailPageLayoutView(dOptions);
}
});
}); });
} }
}, },
......
dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
...@@ -16,11 +16,12 @@ ...@@ -16,11 +16,12 @@
--> -->
<div class="position-relative"> <div class="position-relative">
<div class="tableOverlay"></div> <div class="tableOverlay"></div>
<div class="inline-content-fr"> <div class="inline-content-fr clearfix" style="margin-bottom: 10px;">
<div class="inline"> <div class="inline">
<label class="checkbox-inline btn"> <label class="checkbox-inline btn">
<input type="checkbox" data-id="checkPropagtedTag" class="input" checked="true" name="queryType" value="text" name="check" value="1" /> Show Propagated Classifications</label> <input type="checkbox" data-id="checkPropagtedTag" class="input" checked="true" name="queryType" value="text" name="check" value="1" /> Show Propagated Classifications</label>
</div> </div>
<div class="pull-left" style="width: 300px;"><select data-id="tagList"></select></div>
</div> </div>
<div id="r_tagTableLayoutView"></div> <div id="r_tagTableLayoutView"></div>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/utils/Helper.js
...@@ -346,7 +346,7 @@ define(['require', ...@@ -346,7 +346,7 @@ define(['require',
}); });
if ($('body').tooltip) { if ($('body').tooltip) {
$('body').tooltip({ $('body').tooltip({
selector: '[title]:not(".select2-selection__choice")', selector: '[title]:not(".select2-selection__choice,.select2-selection__rendered")',
placement: function() { placement: function() {
return this.$element.attr("data-placement") || "bottom"; return this.$element.attr("data-placement") || "bottom";
}, },
......
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -24,8 +24,9 @@ define(['require', ...@@ -24,8 +24,9 @@ define(['require',
'utils/Globals', 'utils/Globals',
'utils/Enums', 'utils/Enums',
'utils/Messages', 'utils/Messages',
'utils/UrlLinks' 'utils/UrlLinks',
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) { 'collection/VEntityList'
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks, VEntityList) {
'use strict'; 'use strict';
var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend( var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
...@@ -52,6 +53,7 @@ define(['require', ...@@ -52,6 +53,7 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
tagClick: '[data-id="tagClick"]', tagClick: '[data-id="tagClick"]',
pTagCountClick: '[data-id="pTagCountClick"]',
termClick: '[data-id="termClick"]', termClick: '[data-id="termClick"]',
propagatedTagDiv: '[data-id="propagatedTagDiv"]', propagatedTagDiv: '[data-id="propagatedTagDiv"]',
title: '[data-id="title"]', title: '[data-id="title"]',
...@@ -84,6 +86,14 @@ define(['require', ...@@ -84,6 +86,14 @@ define(['require',
}); });
} }
}; };
events["click " + this.ui.pTagCountClick] = function(e) {
var tag = $(e.currentTarget).parent().children().first().text();
Utils.setUrl({
url: '#!/detailPage/' + this.id + '?tabActive=classification&filter=' + tag,
mergeBrowserUrl: false,
trigger: true
});
};
events["click " + this.ui.termClick] = function(e) { events["click " + this.ui.termClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() != "i") { if (e.target.nodeName.toLocaleLowerCase() != "i") {
Utils.setUrl({ Utils.setUrl({
...@@ -119,6 +129,9 @@ define(['require', ...@@ -119,6 +129,9 @@ define(['require',
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection', 'glossaryCollection', 'businessMetadataDefCollection', 'searchVent')); _.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection', 'glossaryCollection', 'businessMetadataDefCollection', 'searchVent'));
$('body').addClass("detail-page"); $('body').addClass("detail-page");
this.collection = new VEntityList([], {});
this.collection.url = UrlLinks.entitiesApiUrl({ guid: this.id, minExtInfo: true });
this.fetchCollection();
}, },
bindEvents: function() { bindEvents: function() {
var that = this; var that = this;
...@@ -215,8 +228,34 @@ define(['require', ...@@ -215,8 +228,34 @@ define(['require',
this.ui.description.hide(); this.ui.description.hide();
} }
} }
var tags = {
'self': [],
'propagated': [],
'propagatedMap': {},
'combineMap': {}
};
if (collectionJSON.classifications) { if (collectionJSON.classifications) {
this.generateTag(collectionJSON.classifications); var tagObject = collectionJSON.classifications;
_.each(tagObject, function(val) {
var typeName = val.typeName;
if (val.entityGuid === that.id) {
tags['self'].push(val)
} else {
tags['propagated'].push(val);
if (tags.propagatedMap[typeName]) {
tags.propagatedMap[typeName]["count"] += tags.propagatedMap[typeName]["count"];
} else {
tags.propagatedMap[typeName] = val;
tags.propagatedMap[typeName]["count"] = 1;
}
}
if (tags.combineMap[typeName] === undefined) {
tags.combineMap[typeName] = val;
}
});
tags.self = _.sortBy(tags.self, "typeName");
tags.propagated = _.sortBy(tags.propagated, "typeName");
this.generateTag(tags);
} else { } else {
this.generateTag([]); this.generateTag([]);
} }
...@@ -243,6 +282,7 @@ define(['require', ...@@ -243,6 +282,7 @@ define(['require',
guid: this.id, guid: this.id,
entityName: this.name, entityName: this.name,
typeHeaders: this.typeHeaders, typeHeaders: this.typeHeaders,
tags: tags,
entityDefCollection: this.entityDefCollection, entityDefCollection: this.entityDefCollection,
fetchCollection: this.fetchCollection.bind(that), fetchCollection: this.fetchCollection.bind(that),
enumDefCollection: this.enumDefCollection, enumDefCollection: this.enumDefCollection,
...@@ -340,6 +380,13 @@ define(['require', ...@@ -340,6 +380,13 @@ define(['require',
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail')); Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader-relative').addClass('show'); // to show tab loader this.$('.fontLoader-relative').addClass('show'); // to show tab loader
}, },
manualRender: function(options) {
if (this.id !== options.id) {
_.extend(this, _.pick(options, 'value', 'id'));
this.collection.url = UrlLinks.entitiesApiUrl({ guid: this.id, minExtInfo: true });
this.fetchCollection();
}
},
onShow: function() { onShow: function() {
if (this.value && this.value.tabActive) { if (this.value && this.value.tabActive) {
this.$('.nav.nav-tabs').find('[role="' + this.value.tabActive + '"]').addClass('active').siblings().removeClass('active'); this.$('.nav.nav-tabs').find('[role="' + this.value.tabActive + '"]').addClass('active').siblings().removeClass('active');
...@@ -416,27 +463,18 @@ define(['require', ...@@ -416,27 +463,18 @@ define(['require',
generateTag: function(tagObject) { generateTag: function(tagObject) {
var that = this, var that = this,
tagData = "", tagData = "",
propagatedTagListData = "", propagatedTagListData = "";
tag = { _.each(tagObject.self, function(val) {
'self': [],
'propagated': []
};
_.each(tagObject, function(val) {
val.entityGuid === that.id ? tag['self'].push(val) : tag['propagated'].push(val);
});
_.each(tag.self, function(val) {
tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag" title="Remove Classification"></i></span>'; tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag" title="Remove Classification"></i></span>';
}); });
_.each(tag.propagated, function(val) { _.each(tagObject.propagatedMap, function(val, key) {
var crossButton = '<i class="fa fa-close" data-id="deleteTag" data-entityguid="' + val.entityGuid + '" data-type="tag" title="Remove Classification"></i>'; propagatedTagListData += '<span class="btn btn-action btn-sm btn-icon btn-blue"><span data-id="tagClick">' + val.typeName + '</span>' + (val.count > 1 ? '<span class="active" data-id="pTagCountClick">(' + val.count + ')</span>' : "") + '</span>';
propagatedTagListData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span>' + ((that.id !== val.entityGuid && val.entityStatus === "DELETED") ? crossButton : "") + '</span>';
}); });
propagatedTagListData !== "" ? this.ui.propagatedTagDiv.show() : this.ui.propagatedTagDiv.hide(); propagatedTagListData !== "" ? this.ui.propagatedTagDiv.show() : this.ui.propagatedTagDiv.hide();
this.ui.tagList.find("span.btn").remove(); this.ui.tagList.find("span.btn").remove();
this.ui.propagatedTagList.find("span.btn").remove(); this.ui.propagatedTagList.find("span.btn").remove();
this.ui.tagList.prepend(tagData); this.ui.tagList.prepend(tagData);
this.ui.propagatedTagList.html(propagatedTagListData); this.ui.propagatedTagList.html(propagatedTagListData);
}, },
generateTerm: function(data) { generateTerm: function(data) {
var that = this, var that = this,
......
dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js
...@@ -42,6 +42,7 @@ define(['require', ...@@ -42,6 +42,7 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
detailValue: "[data-id='detailValue']", detailValue: "[data-id='detailValue']",
tagList: "[data-id='tagList']",
addTag: "[data-id='addTag']", addTag: "[data-id='addTag']",
deleteTag: "[data-id='delete']", deleteTag: "[data-id='delete']",
editTag: "[data-id='edit']", editTag: "[data-id='edit']",
...@@ -75,12 +76,20 @@ define(['require', ...@@ -75,12 +76,20 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'guid', 'entityName', 'fetchCollection', 'enumDefCollection', 'classificationDefCollection')); _.extend(this, _.pick(options, 'entity', 'guid', 'tags', 'entityName', 'fetchCollection', 'enumDefCollection', 'classificationDefCollection'));
this.collectionObject = this.entity; this.collectionObject = this.entity;
this.tagCollection = new VTagList(); this.tagCollection = new VTagList();
var that = this, this.allTags = _.sortBy(_.toArray(this.collectionObject.classifications), "typeName");
tags = _.toArray(this.collectionObject.classifications); var paramObj = Utils.getUrlState.getQueryParams();
this.tagCollection.fullCollection.reset(tags); this.value = { tabActive: "classification", showPC: "true", filter: "all" };
if (paramObj) {
if (paramObj.showPC) {
this.value.showPC = paramObj.showPC;
}
if (paramObj.filter) {
this.value.filter = paramObj.filter;
}
}
this.commonTableOptions = { this.commonTableOptions = {
collection: this.tagCollection, collection: this.tagCollection,
includeFilter: false, includeFilter: false,
...@@ -99,8 +108,81 @@ define(['require', ...@@ -99,8 +108,81 @@ define(['require',
}, },
bindEvents: function() {}, bindEvents: function() {},
onRender: function() { onRender: function() {
this.ui.checkPropagtedTag.prop("checked", this.value.showPC === "true");
this.renderFilter();
if (this.tagNotFound === undefined && this.value.filter === "all") {
this.updateCollection(this.value.filter);
}
this.renderTableLayoutView(); this.renderTableLayoutView();
}, },
updateCollection: function(value) {
var newList = null
if (this.value.showPC === "true") {
if (value === "all") {
newList = this.allTags;
} else {
newList = _.filter(this.allTags, function(obj) {
if (obj.typeName === value) {
return true;
}
});
}
} else {
if (value === "all") {
newList = this.tags.self;
} else {
newList = _.filter(this.tags.self, function(obj) {
if (obj.typeName === value) {
return true;
}
});
}
}
this.tagCollection.fullCollection.reset(newList);
if (value) {
this.value["filter"] = value;
this.triggetUrl();
}
},
triggetUrl: function() {
var paramObj = Utils.getUrlState.getQueryParams();
if (paramObj && paramObj.tabActive === "classification") {
Utils.setUrl({
url: '#!/detailPage/' + this.guid,
mergeBrowserUrl: false,
urlParams: this.value,
trigger: false
});
}
},
renderFilter: function() {
var tagName = "<option value='all' selected>All</option>",
that = this;
if (this.value.showPC === "false") {
_.each(this.tags.self, function(val) {
var typeName = val.typeName;
tagName += '<option value="' + typeName + '">' + typeName + '</option>';
});
} else {
_.each(this.tags.combineMap, function(val, key) {
tagName += '<option value="' + key + '">' + key + '</option>';
});
}
this.ui.tagList.html(tagName);
if (this.value.filter && this.ui.tagList.val() !== this.value.filter) {
if (this.ui.tagList.find("option[value='" + this.value.filter + "']").length > 0) {
this.ui.tagList.val(this.value.filter);
this.updateCollection(this.value.filter);
} else {
this.tagNotFound = true;
this.updateCollection("all");
}
}
this.ui.tagList.select2({ placeholder: "Search for tag" }).on("change", function() {
var value = that.ui.tagList.val();
that.updateCollection(value);
});
},
renderTableLayoutView: function() { renderTableLayoutView: function() {
var that = this; var that = this;
require(['utils/TableLayout'], function(TableLayout) { require(['utils/TableLayout'], function(TableLayout) {
...@@ -124,7 +206,7 @@ define(['require', ...@@ -124,7 +206,7 @@ define(['require',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
if (that.guid !== model.get('entityGuid')) { if (that.guid !== model.get('entityGuid')) {
var purgeEntityBtn = (Enums.isEntityPurged[model.get('entityStatus')]) ? ' title="Entity not available" disabled' : ' title="Propagated From" data-id="propagatedFromClick"', var purgeEntityBtn = (Enums.isEntityPurged[model.get('entityStatus')]) ? ' title="Entity not available" disabled' : ' data-id="propagatedFromClick"',
propagtedFrom = ' <span class="btn btn-action btn-sm btn-icon btn-blue" data-guid=' + model.get('entityGuid') + purgeEntityBtn + '><span> Propagated From </span></span>'; propagtedFrom = ' <span class="btn btn-action btn-sm btn-icon btn-blue" data-guid=' + model.get('entityGuid') + purgeEntityBtn + '><span> Propagated From </span></span>';
return '<a title="" href="#!/tag/tagAttribute/' + model.get('typeName') + '">' + model.get('typeName') + '</a>' + propagtedFrom; return '<a title="" href="#!/tag/tagAttribute/' + model.get('typeName') + '">' + model.get('typeName') + '</a>' + propagtedFrom;
} else { } else {
...@@ -248,17 +330,17 @@ define(['require', ...@@ -248,17 +330,17 @@ define(['require',
}, },
onCheckPropagtedTag: function(e) { onCheckPropagtedTag: function(e) {
var that = this, var that = this,
tags = _.toArray(that.collectionObject.classifications),
unPropagatedTags = []; unPropagatedTags = [];
e.stopPropagation(); e.stopPropagation();
if (e.target.checked) { if (e.target.checked) {
that.tagCollection.fullCollection.reset(tags); that.tagCollection.fullCollection.reset(this.allTags);
} else { } else {
unPropagatedTags = _.filter(tags, function(val) { that.tagCollection.fullCollection.reset(this.tags.self);
return that.guid === val.entityGuid;
});
that.tagCollection.fullCollection.reset(unPropagatedTags);
} }
this.value.showPC = "" + e.target.checked;
this.value.filter = "all";
this.triggetUrl();
this.renderFilter(e.target.checked);
} }
}); });
return TagDetailTableLayoutView; return TagDetailTableLayoutView;
......
dashboardv3/public/css/scss/form.scss
...@@ -393,6 +393,11 @@ button { ...@@ -393,6 +393,11 @@ button {
>span { >span {
padding: 5px; padding: 5px;
&.active {
color: $white;
background-color: $tag_color;
}
&:hover { &:hover {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
......
dashboardv3/public/js/main.js
...@@ -51,17 +51,17 @@ require.config({ ...@@ -51,17 +51,17 @@ require.config({
'deps': ['marionette'], 'deps': ['marionette'],
onNodeCreated: function(node, config, moduleName, url) { onNodeCreated: function(node, config, moduleName, url) {
console.log("module " + moduleName + " is about to be loaded"); //console.log("module " + moduleName + " is about to be loaded");
++modulesLoadCount; ++modulesLoadCount;
showModuleLoader(); showModuleLoader();
node.addEventListener("load", function() { node.addEventListener("load", function() {
console.log("module " + moduleName + " has been loaded"); //console.log("module " + moduleName + " has been loaded");
--modulesLoadCount; --modulesLoadCount;
hideModuleLoader(); hideModuleLoader();
}); });
node.addEventListener("error", function() { node.addEventListener("error", function() {
console.log("module " + moduleName + " could not be loaded"); //console.log("module " + moduleName + " could not be loaded");
--modulesLoadCount; --modulesLoadCount;
hideModuleLoader(); hideModuleLoader();
}); });
......
dashboardv3/public/js/router/Router.js
...@@ -177,8 +177,7 @@ define([ ...@@ -177,8 +177,7 @@ define([
detailPage: function(id) { detailPage: function(id) {
var that = this; var that = this;
if (id) { if (id) {
require(["views/site/Header", "views/detail_page/DetailPageLayoutView", "collection/VEntityList", "views/site/SideNavLayoutView"], function(Header, DetailPageLayoutView, VEntityList, SideNavLayoutView) { require(["views/site/Header", "views/detail_page/DetailPageLayoutView", "views/site/SideNavLayoutView"], function(Header, DetailPageLayoutView, SideNavLayoutView) {
this.entityCollection = new VEntityList([], {});
var paramObj = Utils.getUrlState.getQueryParams(), var paramObj = Utils.getUrlState.getQueryParams(),
options = _.extend({}, that.preFetchedCollectionLists, that.sharedObj, that.ventObj); options = _.extend({}, that.preFetchedCollectionLists, that.sharedObj, that.ventObj);
that.renderViewIfNotExists(that.getHeaderOptions(Header)); that.renderViewIfNotExists(that.getHeaderOptions(Header));
...@@ -191,9 +190,18 @@ define([ ...@@ -191,9 +190,18 @@ define([
return new SideNavLayoutView(options); return new SideNavLayoutView(options);
} }
}); });
App.rContent.show(new DetailPageLayoutView(_.extend({ collection: this.entityCollection, id: id, value: paramObj }, options)));
this.entityCollection.url = UrlLinks.entitiesApiUrl({ guid: id, minExtInfo: true }); var dOptions = _.extend({ id: id, value: paramObj }, options);
this.entityCollection.fetch({ reset: true }); that.renderViewIfNotExists({
view: App.rContent,
viewName: "DetailPageLayoutView",
manualRender: function() {
this.view.currentView.manualRender(dOptions);
},
render: function() {
return new DetailPageLayoutView(dOptions);
}
});
}); });
} }
}, },
......
dashboardv3/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
...@@ -16,11 +16,12 @@ ...@@ -16,11 +16,12 @@
--> -->
<div class="position-relative"> <div class="position-relative">
<div class="tableOverlay"></div> <div class="tableOverlay"></div>
<div class="inline-content-fr"> <div class="inline-content-fr clearfix" style="margin-bottom: 10px;">
<div class="inline"> <div class="inline">
<label class="checkbox-inline btn"> <label class="checkbox-inline btn">
<input type="checkbox" data-id="checkPropagtedTag" class="input" checked="true" name="queryType" value="text" name="check" value="1" /> Show Propagated Classifications</label> <input type="checkbox" data-id="checkPropagtedTag" class="input" checked="true" name="queryType" value="text" name="check" value="1" /> Show Propagated Classifications</label>
</div> </div>
<div class="pull-left" style="width: 300px;"><select data-id="tagList"></select></div>
</div> </div>
<div id="r_tagTableLayoutView"></div> <div id="r_tagTableLayoutView"></div>
</div> </div>
\ No newline at end of file
dashboardv3/public/js/utils/Helper.js
...@@ -366,7 +366,7 @@ define(['require', ...@@ -366,7 +366,7 @@ define(['require',
}); });
if ($('body').tooltip) { if ($('body').tooltip) {
$('body').tooltip({ $('body').tooltip({
selector: '[title]:not(".select2-selection__choice")', selector: '[title]:not(".select2-selection__choice,.select2-selection__rendered")',
placement: function() { placement: function() {
return this.$element.attr("data-placement") || "bottom"; return this.$element.attr("data-placement") || "bottom";
}, },
......
dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -24,8 +24,9 @@ define(['require', ...@@ -24,8 +24,9 @@ define(['require',
'utils/Globals', 'utils/Globals',
'utils/Enums', 'utils/Enums',
'utils/Messages', 'utils/Messages',
'utils/UrlLinks' 'utils/UrlLinks',
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) { 'collection/VEntityList'
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks, VEntityList) {
'use strict'; 'use strict';
var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend( var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
...@@ -52,6 +53,7 @@ define(['require', ...@@ -52,6 +53,7 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
tagClick: '[data-id="tagClick"]', tagClick: '[data-id="tagClick"]',
pTagCountClick: '[data-id="pTagCountClick"]',
termClick: '[data-id="termClick"]', termClick: '[data-id="termClick"]',
propagatedTagDiv: '[data-id="propagatedTagDiv"]', propagatedTagDiv: '[data-id="propagatedTagDiv"]',
title: '[data-id="title"]', title: '[data-id="title"]',
...@@ -85,6 +87,14 @@ define(['require', ...@@ -85,6 +87,14 @@ define(['require',
}); });
} }
}; };
events["click " + this.ui.pTagCountClick] = function(e) {
var tag = $(e.currentTarget).parent().children().first().text();
Utils.setUrl({
url: '#!/detailPage/' + this.id + '?tabActive=classification&filter=' + tag,
mergeBrowserUrl: false,
trigger: true
});
};
events["click " + this.ui.termClick] = function(e) { events["click " + this.ui.termClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() != "i") { if (e.target.nodeName.toLocaleLowerCase() != "i") {
Utils.setUrl({ Utils.setUrl({
...@@ -123,6 +133,9 @@ define(['require', ...@@ -123,6 +133,9 @@ define(['require',
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection', 'glossaryCollection', 'businessMetadataDefCollection', 'searchVent')); _.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection', 'glossaryCollection', 'businessMetadataDefCollection', 'searchVent'));
$('body').addClass("detail-page"); $('body').addClass("detail-page");
this.collection = new VEntityList([], {});
this.collection.url = UrlLinks.entitiesApiUrl({ guid: this.id, minExtInfo: true });
this.fetchCollection();
}, },
bindEvents: function() { bindEvents: function() {
var that = this; var that = this;
...@@ -219,8 +232,34 @@ define(['require', ...@@ -219,8 +232,34 @@ define(['require',
this.ui.description.hide(); this.ui.description.hide();
} }
} }
var tags = {
'self': [],
'propagated': [],
'propagatedMap': {},
'combineMap': {}
};
if (collectionJSON.classifications) { if (collectionJSON.classifications) {
this.generateTag(collectionJSON.classifications); var tagObject = collectionJSON.classifications;
_.each(tagObject, function(val) {
var typeName = val.typeName;
if (val.entityGuid === that.id) {
tags['self'].push(val)
} else {
tags['propagated'].push(val);
if (tags.propagatedMap[typeName]) {
tags.propagatedMap[typeName]["count"] += tags.propagatedMap[typeName]["count"];
} else {
tags.propagatedMap[typeName] = val;
tags.propagatedMap[typeName]["count"] = 1;
}
}
if (tags.combineMap[typeName] === undefined) {
tags.combineMap[typeName] = val;
}
});
tags.self = _.sortBy(tags.self, "typeName");
tags.propagated = _.sortBy(tags.propagated, "typeName");
this.generateTag(tags);
} else { } else {
this.generateTag([]); this.generateTag([]);
} }
...@@ -247,6 +286,7 @@ define(['require', ...@@ -247,6 +286,7 @@ define(['require',
guid: this.id, guid: this.id,
entityName: this.name, entityName: this.name,
typeHeaders: this.typeHeaders, typeHeaders: this.typeHeaders,
tags: tags,
entityDefCollection: this.entityDefCollection, entityDefCollection: this.entityDefCollection,
fetchCollection: this.fetchCollection.bind(that), fetchCollection: this.fetchCollection.bind(that),
enumDefCollection: this.enumDefCollection, enumDefCollection: this.enumDefCollection,
...@@ -344,6 +384,13 @@ define(['require', ...@@ -344,6 +384,13 @@ define(['require',
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail')); Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader-relative').addClass('show'); // to show tab loader this.$('.fontLoader-relative').addClass('show'); // to show tab loader
}, },
manualRender: function(options) {
if (this.id !== options.id) {
_.extend(this, _.pick(options, 'value', 'id'));
this.collection.url = UrlLinks.entitiesApiUrl({ guid: this.id, minExtInfo: true });
this.fetchCollection();
}
},
onShow: function() { onShow: function() {
if (this.value && this.value.tabActive) { if (this.value && this.value.tabActive) {
this.$('.nav.nav-tabs').find('[role="' + this.value.tabActive + '"]').addClass('active').siblings().removeClass('active'); this.$('.nav.nav-tabs').find('[role="' + this.value.tabActive + '"]').addClass('active').siblings().removeClass('active');
...@@ -420,27 +467,18 @@ define(['require', ...@@ -420,27 +467,18 @@ define(['require',
generateTag: function(tagObject) { generateTag: function(tagObject) {
var that = this, var that = this,
tagData = "", tagData = "",
propagatedTagListData = "", propagatedTagListData = "";
tag = { _.each(tagObject.self, function(val) {
'self': [],
'propagated': []
};
_.each(tagObject, function(val) {
val.entityGuid === that.id ? tag['self'].push(val) : tag['propagated'].push(val);
});
_.each(tag.self, function(val) {
tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag" title="Remove Classification"></i></span>'; tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="deleteTag" data-type="tag" title="Remove Classification"></i></span>';
}); });
_.each(tag.propagated, function(val) { _.each(tagObject.propagatedMap, function(val, key) {
var crossButton = '<i class="fa fa-close" data-id="deleteTag" data-entityguid="' + val.entityGuid + '" data-type="tag" title="Remove Classification"></i>'; propagatedTagListData += '<span class="btn btn-action btn-sm btn-icon btn-blue"><span data-id="tagClick">' + val.typeName + '</span>' + (val.count > 1 ? '<span class="active" data-id="pTagCountClick">(' + val.count + ')</span>' : "") + '</span>';
propagatedTagListData += '<span class="btn btn-action btn-sm btn-icon btn-blue" data-id="tagClick"><span>' + val.typeName + '</span>' + ((that.id !== val.entityGuid && val.entityStatus === "DELETED") ? crossButton : "") + '</span>';
}); });
propagatedTagListData !== "" ? this.ui.propagatedTagDiv.show() : this.ui.propagatedTagDiv.hide(); propagatedTagListData !== "" ? this.ui.propagatedTagDiv.show() : this.ui.propagatedTagDiv.hide();
this.ui.tagList.find("span.btn").remove(); this.ui.tagList.find("span.btn").remove();
this.ui.propagatedTagList.find("span.btn").remove(); this.ui.propagatedTagList.find("span.btn").remove();
this.ui.tagList.prepend(tagData); this.ui.tagList.prepend(tagData);
this.ui.propagatedTagList.html(propagatedTagListData); this.ui.propagatedTagList.html(propagatedTagListData);
}, },
generateTerm: function(data) { generateTerm: function(data) {
var that = this, var that = this,
......
dashboardv3/public/js/views/tag/TagDetailTableLayoutView.js
...@@ -42,6 +42,7 @@ define(['require', ...@@ -42,6 +42,7 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
detailValue: "[data-id='detailValue']", detailValue: "[data-id='detailValue']",
tagList: "[data-id='tagList']",
addTag: "[data-id='addTag']", addTag: "[data-id='addTag']",
deleteTag: "[data-id='delete']", deleteTag: "[data-id='delete']",
editTag: "[data-id='edit']", editTag: "[data-id='edit']",
...@@ -75,12 +76,20 @@ define(['require', ...@@ -75,12 +76,20 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'guid', 'entityName', 'fetchCollection', 'enumDefCollection', 'classificationDefCollection', 'searchVent')); _.extend(this, _.pick(options, 'entity', 'guid', 'tags', 'entityName', 'fetchCollection', 'enumDefCollection', 'classificationDefCollection', 'searchVent'));
this.collectionObject = this.entity; this.collectionObject = this.entity;
this.tagCollection = new VTagList(); this.tagCollection = new VTagList();
var that = this, this.allTags = _.sortBy(_.toArray(this.collectionObject.classifications), "typeName");
tags = _.toArray(this.collectionObject.classifications); var paramObj = Utils.getUrlState.getQueryParams();
this.tagCollection.fullCollection.reset(tags); this.value = { tabActive: "classification", showPC: "true", filter: "all" };
if (paramObj) {
if (paramObj.showPC) {
this.value.showPC = paramObj.showPC;
}
if (paramObj.filter) {
this.value.filter = paramObj.filter;
}
}
this.commonTableOptions = { this.commonTableOptions = {
collection: this.tagCollection, collection: this.tagCollection,
includeFilter: false, includeFilter: false,
...@@ -99,8 +108,81 @@ define(['require', ...@@ -99,8 +108,81 @@ define(['require',
}, },
bindEvents: function() {}, bindEvents: function() {},
onRender: function() { onRender: function() {
this.ui.checkPropagtedTag.prop("checked", this.value.showPC === "true");
this.renderFilter();
if (this.tagNotFound === undefined && this.value.filter === "all") {
this.updateCollection(this.value.filter);
}
this.renderTableLayoutView(); this.renderTableLayoutView();
}, },
updateCollection: function(value) {
var newList = null
if (this.value.showPC === "true") {
if (value === "all") {
newList = this.allTags;
} else {
newList = _.filter(this.allTags, function(obj) {
if (obj.typeName === value) {
return true;
}
});
}
} else {
if (value === "all") {
newList = this.tags.self;
} else {
newList = _.filter(this.tags.self, function(obj) {
if (obj.typeName === value) {
return true;
}
});
}
}
this.tagCollection.fullCollection.reset(newList);
if (value) {
this.value["filter"] = value;
this.triggetUrl();
}
},
triggetUrl: function() {
var paramObj = Utils.getUrlState.getQueryParams();
if (paramObj && paramObj.tabActive === "classification") {
Utils.setUrl({
url: '#!/detailPage/' + this.guid,
mergeBrowserUrl: false,
urlParams: this.value,
trigger: false
});
}
},
renderFilter: function() {
var tagName = "<option value='all' selected>All</option>",
that = this;
if (this.value.showPC === "false") {
_.each(this.tags.self, function(val) {
var typeName = val.typeName;
tagName += '<option value="' + typeName + '">' + typeName + '</option>';
});
} else {
_.each(this.tags.combineMap, function(val, key) {
tagName += '<option value="' + key + '">' + key + '</option>';
});
}
this.ui.tagList.html(tagName);
if (this.value.filter && this.ui.tagList.val() !== this.value.filter) {
if (this.ui.tagList.find("option[value='" + this.value.filter + "']").length > 0) {
this.ui.tagList.val(this.value.filter);
this.updateCollection(this.value.filter);
} else {
this.tagNotFound = true;
this.updateCollection("all");
}
}
this.ui.tagList.select2({ placeholder: "Search for tag" }).on("change", function() {
var value = that.ui.tagList.val();
that.updateCollection(value);
});
},
renderTableLayoutView: function() { renderTableLayoutView: function() {
var that = this; var that = this;
require(['utils/TableLayout'], function(TableLayout) { require(['utils/TableLayout'], function(TableLayout) {
...@@ -124,7 +206,7 @@ define(['require', ...@@ -124,7 +206,7 @@ define(['require',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, { formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) { fromRaw: function(rawValue, model) {
if (that.guid !== model.get('entityGuid')) { if (that.guid !== model.get('entityGuid')) {
var purgeEntityBtn = (Enums.isEntityPurged[model.get('entityStatus')]) ? ' title="Entity not available" disabled' : ' title="Propagated From" data-id="propagatedFromClick"', var purgeEntityBtn = (Enums.isEntityPurged[model.get('entityStatus')]) ? ' title="Entity not available" disabled' : ' data-id="propagatedFromClick"',
propagtedFrom = ' <span class="btn btn-action btn-sm btn-icon btn-blue" data-guid=' + model.get('entityGuid') + purgeEntityBtn + '><span> Propagated From </span></span>'; propagtedFrom = ' <span class="btn btn-action btn-sm btn-icon btn-blue" data-guid=' + model.get('entityGuid') + purgeEntityBtn + '><span> Propagated From </span></span>';
return '<a title="" href="#!/tag/tagAttribute/' + model.get('typeName') + '">' + model.get('typeName') + '</a>' + propagtedFrom; return '<a title="" href="#!/tag/tagAttribute/' + model.get('typeName') + '">' + model.get('typeName') + '</a>' + propagtedFrom;
} else { } else {
...@@ -251,17 +333,17 @@ define(['require', ...@@ -251,17 +333,17 @@ define(['require',
}, },
onCheckPropagtedTag: function(e) { onCheckPropagtedTag: function(e) {
var that = this, var that = this,
tags = _.toArray(that.collectionObject.classifications),
unPropagatedTags = []; unPropagatedTags = [];
e.stopPropagation(); e.stopPropagation();
if (e.target.checked) { if (e.target.checked) {
that.tagCollection.fullCollection.reset(tags); that.tagCollection.fullCollection.reset(this.allTags);
} else { } else {
unPropagatedTags = _.filter(tags, function(val) { that.tagCollection.fullCollection.reset(this.tags.self);
return that.guid === val.entityGuid;
});
that.tagCollection.fullCollection.reset(unPropagatedTags);
} }
this.value.showPC = "" + e.target.checked;
this.value.filter = "all";
this.triggetUrl();
this.renderFilter(e.target.checked);
} }
}); });
return TagDetailTableLayoutView; return TagDetailTableLayoutView;
......
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