Skip to content

A
atlas
Commit a8fab3e7 by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-2663: Glossary UI updates for related term association

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 570f2423
Showing with 251 additions and 67 deletions
dashboardv2/public/js/collection/VSearchList.js
......@@ -57,7 +57,7 @@ define(['require',
this.dynamicTable = false;
return resp.entities ? resp.entities : [];
} else {
return resp ? resp : [];
return [];
}
},
getBasicRearchResult: function(options) {
......
dashboardv2/public/js/modules/Helpers.js
......@@ -100,5 +100,15 @@ define(['require',
return (obj[field] ? obj[field] : (defaulValue ? defaulValue : ""));
});
Handlebars.registerHelper('eachlookup', function(obj, field, options) {
return Handlebars.helpers.each((obj[field] ? obj[field] : null), options);
});
Handlebars.registerHelper('callmyfunction', function(functionObj, param, options) {
var argumentObj = _.extend([], arguments);
argumentObj.shift();
return functionObj.apply(this, argumentObj);
});
return HHelpers;
});
\ No newline at end of file
dashboardv2/public/js/router/Router.js
......@@ -225,7 +225,7 @@ define([
if (Utils.getUrlState.isTagTab()) {
App.rSideNav.currentView.RTagLayoutView.currentView.manualRender();
} else if (Utils.getUrlState.isGlossaryTab()) {
App.rSideNav.currentView.RGlossaryLayoutView.currentView.manualRender(_.extend({ isTrigger: true }, paramObj));
App.rSideNav.currentView.RGlossaryLayoutView.currentView.manualRender(_.extend({ "isTrigger": true }, { "value": paramObj }));
}
}
......
dashboardv2/public/js/templates/common/Modal.html
......@@ -28,7 +28,8 @@
</h4>
</div>
{{/if}} {{#if contentWithFooter}} {{else}}
<div class="modal-body">{{content}}</div>
<div class="modal-body">{{#if contentHtml}} {{{contentHtm}}} {{else}} {{content}} {{/if}}
</div>
{{#if showFooter}}
<div class="modal-footer">
{{#if buttons}} {{#each buttons}}
......
dashboardv2/public/js/templates/glossary/GlossaryDetailLayoutView_tmpl.html
......@@ -52,7 +52,7 @@
</div>
{{/if}} {{#if isCategoryView}}
<div class="form-group clearfix">
<span class="control-label-sm-pr pull-left">Term:</span>
<span class="control-label-sm-pr pull-left">Terms:</span>
<div class="pull-left" data-id="termList">
<button class="btn btn-action btn-sm" title="Add Term" data-id="addTerm">
<i class="fa fa-plus"> </i>
......@@ -65,7 +65,7 @@
<ul class="nav nav-tabs" data-id="tab-list">
<li role="entities" class="tab active"><a href="#tab-entities" aria-controls="tab-entities" role="tab" data-toggle="tab">Entities</a></li>
<li role="classification"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li>
<li role="properties"><a href="#tab-properties" aria-controls="tab-properties" role="tab" data-toggle="tab">Properties</a></li>
<li role="relatedTerm"><a href="#tab-relatedTerm" aria-controls="tab-relatedTerm" role="tab" data-toggle="tab">Related Terms</a></li>
</ul>
</div>
</div>
......@@ -89,7 +89,7 @@
</div>
</div>
</div>
<div id="tab-properties" role="properties" class="tab-pane animated fadeIn">
<div id="tab-relatedTerm" role="relatedTerm" class="tab-pane animated fadeIn">
<div id="r_relationLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html
......@@ -16,17 +16,17 @@
-->
<div>
<div class="row form-group">
<div class="col-md-6">
<!-- <div class="col-md-6">
<select data-id="termAttributeSelect">
{{#each attributeList}}
<option value="{{@key}}">{{@key}}</option>{{/each}}
</select>
</div>
<div class="col-md-6">
</div> -->
<!-- <div class="col-md-6">
<button type="button" class="btn btn-action btn-md" data-id="addTermRelation">
<i class="fa fa-plus"></i> <span>Assign Term</span>
</button>
</div>
</div> -->
</div>
<div data-id="termAttributeTable"></div>
</div>
\ No newline at end of file
dashboardv2/public/js/templates/glossary/TermRelationAttributeTable_tmpl.html
......@@ -17,13 +17,19 @@
<table class="table table-hover table-quickMenu">
<thead>
<tr>
<th>Term</th>
<th>Attribute</th>
<th>Action</th>
<th>{{#if relationTypeTable}}Relation Types{{else}}Term{{/if}}</th>
<th>{{#if relationTypeTable}}Related Terms{{else}}Attribute{{/if}}</th>
{{#if relationTypeTable}}
<th>Attributes</th>{{/if}}
</tr>
</thead>
<tbody>
{{#if attributeValue}} {{#each attributeValue}}
{{#if relationTypeTable}} {{#each attributes}}
<tr>
<td>{{@key}}</td>
{{{callmyfunction ../getTerms @key}}}
</tr>
{{/each}} {{else}} {{#if attributeValue}} {{#each attributeValue}}
<tr>
<td>{{this.displayText}}</td>
<td>
......@@ -39,22 +45,22 @@
{{#each ../attributes}}
<tr>
<td>{{@key}}</td>
<td>{{lookup ../this @key "-"}}</td>
{{#if ../../editMode}}
<td>
<input data-id="attributeUpdate" class="form-control" type="text" data-name="{{@key}}" data-termguid="{{../../this.termGuid}}" " value="{{lookup ../../this @key ''}} ">
</td>{{else}}
<td>{{lookup ../../this @key "- "}}</td>
{{/if}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</td>
<td>
<div class="btn-inline">
<button title="Delete" data-termguid="{{this.termGuid}}" class="btn btn-action btn-sm" data-id="deleteAttribute" data-name="Dimension"><i class="fa fa-trash"></i></button>
</div>
</td>
</tr>
{{/each}}{{else}}
<tr class="empty text-center">
<td colspan="3"><span>No records found!</span></td>
</tr>{{/if}}
<tr class="empty text-center ">
<td colspan="3 "><span>No records found!</span></td>
</tr>{{/if}} {{/if}}
</tbody>
</table>
\ No newline at end of file
dashboardv2/public/js/utils/CommonViewFunction.js
......@@ -280,8 +280,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
if (terms) {
terms.map(function(term) {
var className = "btn btn-action btn-sm btn-blue btn-icon",
deleteIcon = '<i class="fa fa-times" data-id="delete" data-assetname="' + entityName + '"data-name="' + term.typeName + '" data-type="tag" data-guid="' + obj.guid + '" data-termGuid="' + term.termGuid + '" ></i>',
termString = '<a class="' + className + '" data-id="termClick"><span title="' + term.typeName + '">' + term.displayText + '</span>' + deleteIcon + '</a>';
deleteIcon = '<i class="fa fa-times" data-id="delete" data-assetname="' + entityName + '"data-name="' + term.displayText + '" data-type="term" data-guid="' + obj.guid + '" data-termGuid="' + term.termGuid + '" ></i>',
termString = '<a class="' + className + '" data-id="termClick"><span title="' + term.displayText + '">' + term.displayText + '</span>' + deleteIcon + '</a>';
if (count >= 1) {
popTerm += termString;
} else {
......
dashboardv2/public/js/utils/Overrides.js
......@@ -105,6 +105,12 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
return false;
}
});
$("body").on('click', '.dropdown-menu.dropdown-changetitle li a', function() {
$(this).parents('li').find(".btn:first-child").html($(this).text() + ' <span class="caret"></span>');
});
$("body").on('click', '.btn', function() {
$(this).blur();
});
// For placeholder support
if (!('placeholder' in HTMLInputElement.prototype)) {
......@@ -144,8 +150,24 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
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('min-width', modelValue.get('width') + 'px')
if (modelValue.get('toolTip')) that.$el.find('.' + modelValue.get('name')).attr('title', modelValue.get('toolTip'))
var elAttr = modelValue.get('elAttr'),
elAttrObj = null;
if (elAttr) {
if (_.isFunction(elAttr)) {
elAttrObj = elAttr(modelValue);
} else if (_.isObject(elAttr)) {
if (!_.isArray(elAttr)) {
elAttrObj = [elAttr];
} else {
elAttrObj = elAttr;
}
}
_.each(elAttrObj, function(val) {
that.$el.find('.' + modelValue.get('name')).data(val);
});
}
if (modelValue.get('width')) that.$el.find('.' + modelValue.get('name')).css('min-width', modelValue.get('width') + 'px');
if (modelValue.get('toolTip')) that.$el.find('.' + modelValue.get('name')).attr('title', modelValue.get('toolTip'));
});
return this;
}
......
dashboardv2/public/js/utils/Utils.js
......@@ -305,21 +305,38 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
lastValue: hashValue.split('/')[hashValue.split('/').length - 1]
}
},
checkTabUrl: function(options) {
var url = options && options.url,
matchString = options && options.matchString,
quey = this.getQueryUrl(url);
return quey.firstValue == matchString || quey.queyParams[0] == "#!/" + matchString;
},
isInitial: function() {
return this.getQueryUrl().firstValue == undefined;
},
isTagTab: function(url) {
var quey = this.getQueryUrl(url);
return quey.firstValue == "tag" || quey.queyParams[0] == "#!/tag";
return this.checkTabUrl({
url: url,
matchString: "tag"
});
},
isSearchTab: function(url) {
return this.getQueryUrl(url).firstValue == "search";
return this.checkTabUrl({
url: url,
matchString: "search"
});
},
isGlossaryTab: function(url) {
return this.getQueryUrl(url).firstValue == "glossary";
return this.checkTabUrl({
url: url,
matchString: "glossary"
});
},
isDetailPage: function(url) {
return this.getQueryUrl(url).firstValue == "detailPage";
return this.checkTabUrl({
url: url,
matchString: "detailPage"
});
},
getLastValue: function() {
return this.getQueryUrl().lastValue;
......@@ -640,6 +657,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}
}
}
Utils.isUrl = function(url) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
return regexp.test(url);
......
dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js
......@@ -195,11 +195,13 @@ define(['require',
if (this.isGlossaryView) {
if (this.glossaryCollection.fullCollection.length) {
this.data = this.glossaryCollection.fullCollection.get(this.guid).toJSON();
this.glossaryCollection.trigger("data:updated", $.extend(true, {}, this.data));
this.renderDetails(this.data);
} else {
this.listenTo(this.glossaryCollection.fullCollection, "reset ", function(skip) {
var foundGlossary = this.glossaryCollection.fullCollection.get(this.guid);
this.data = foundGlossary ? foundGlossary.toJSON() : null;
this.glossaryCollection.trigger("data:updated", $.extend(true, {}, this.data));
if (this.data == null) {
this.glossary.selectedItem = {};
Utils.setUrl({
......@@ -248,6 +250,7 @@ define(['require',
that.renderRelationLayoutView(obj);
}
that.data = data;
that.glossaryCollection.trigger("data:updated", $.extend(true, {}, data));
that.glossary.selectedItem.model = data;
that.glossary.selectedItem.guid = data.guid;
that.renderDetails(data)
......
dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
......@@ -98,8 +98,8 @@ define(['require',
};
if (Utils.getUrlState.isGlossaryTab() && this.value && this.value.viewType) {
this.viewType = this.value.viewType;
}
this.query[this.viewType] = _.extend({}, this.value, { "guid": this.guid });
}
},
bindEvents: function() {
var that = this;
......@@ -164,6 +164,9 @@ define(['require',
this.viewType = "term";
}
var setDefaultSelector = function() {
if (!that.value) {
return;
}
var model = null;
if (that.value.gId) {
model = that.glossaryCollection.fullCollection.get(that.value.gId);
......@@ -195,12 +198,13 @@ define(['require',
$tree.jstree('activate_node', that.glossary.selectedItem.guid);
}
this.query[this.viewType] = _.extend(obj, _.pick(this.glossary.selectedItem, 'model', 'guid', 'gType'), { "viewType": this.viewType, "isNodeNotFoundAtLoad": this.query[this.viewType].isNodeNotFoundAtLoad });
var url = _.isEmpty(this.glossary.selectedItem) ? '#!/glossary' : '#!/glossary/' + this.glossary.selectedItem.guid;
Utils.setUrl({
url: '#!/glossary/' + this.glossary.selectedItem.guid,
urlParams: _.extend({}, _.omit(obj, 'guid', 'model', 'type', 'isNodeNotFoundAtLoad')),
mergeBrowserUrl: false,
trigger: false,
updateTabState: true
"url": url,
"urlParams": _.extend({}, _.omit(obj, 'guid', 'model', 'type', 'isNodeNotFoundAtLoad')),
"mergeBrowserUrl": false,
"trigger": false,
"updateTabState": true
});
}
},
......@@ -615,6 +619,11 @@ define(['require',
var url = gId ? '#!/glossary/' + gId : '#!/glossary';
if (gId == null) {
that.glossary.selectedItem = {};
that.value = null;
that.query = {
term: {},
category: {}
};
that.ui.categoryTree.jstree(true).refresh();
that.ui.termTree.jstree(true).refresh();
}
......
dashboardv2/public/js/views/glossary/TermRelationAttributeLayoutView.js
......@@ -22,8 +22,99 @@ define(['require',
'hbs!tmpl/glossary/TermRelationAttributeTable_tmpl',
'utils/Enums',
'utils/Utils',
'utils/UrlLinks'
], function(require, Backbone, TermRelationAttributeLayoutViewTmpl, TermRelationAttributeTableTmpl, Enums, Utils, UrlLinks) {
'utils/UrlLinks',
'modules/Modal'
], function(require, Backbone, TermRelationAttributeLayoutViewTmpl, TermRelationAttributeTableTmpl, Enums, Utils, UrlLinks, Modal) {
var TermRelationAttributeTable = Backbone.Marionette.LayoutView.extend({
_viewName: 'TermRelationAttributeTable',
template: TermRelationAttributeTableTmpl,
templateHelpers: function() {
return {
attributeValue: this.data[this.selectedTermAttribute],
selectedTermAttribute: this.selectedTermAttribute,
editMode: this.editMode,
attributes: Enums.termRelationAttributeList[this.selectedTermAttribute]
}
},
/** ui selector cache */
ui: {
"deleteAttribute": '[data-id="deleteAttribute"]',
"attributeUpdate": '[data-id="attributeUpdate"]'
},
/** ui events hash */
events: function() {
var events = {};
events["click " + this.ui.deleteAttribute] = 'onModalDeleteAttribute';
events["change " + this.ui.attributeUpdate] = 'onAttributeUpdate';
return events;
},
/**
* intialize a new TermRelationAttributeLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'glossaryCollection', 'data', 'callback', 'selectedTermAttribute', 'onDeleteAttribute', 'editMode'));
var that = this;
this.updateObj = $.extend(true, {}, this.data);
this.modal = new Modal({
"title": ((this.editMode ? "Edit attributes" : "Attributes") + " of " + this.selectedTermAttribute),
"content": this,
"okText": (this.editMode ? "Update" : "ok"),
"allowCancel": (this.editMode ? true : false),
"okCloses": true,
"width": "80%",
});
this.modal.open();
this.modal.on('closeModal', function() {
that.modal.trigger('cancel');
});
this.modal.on('ok', function() {
if (that.editMode) {
that.updateAttributes();
}
});
this.bindEvents();
},
bindEvents: function() {
this.listenTo(this.glossaryCollection, "data:updated", function(data) {
this.data = data;
this.render()
}, this);
},
onRender: function() {},
onModalDeleteAttribute: function(e) {
var that = this;
this.onDeleteAttribute(e);
},
onAttributeUpdate: function(e) {
var $el = $(e.currentTarget),
termGuid = $el.data('termguid'),
name = $el.data('name');
_.find(this.updateObj[this.selectedTermAttribute], function(obj) {
if (obj.termGuid == termGuid) {
obj[name] = $el.val();
}
});
},
updateAttributes: function() {
var that = this,
model = new this.glossaryCollection.model(),
ajaxOptions = {
success: function(rModel, response) {
Utils.notifySuccess({
content: "Attributes updated successfully"
});
if (that.callback) {
that.callback();
}
}
};
model.createEditTerm(_.extend(ajaxOptions, { data: JSON.stringify(this.updateObj) }, { guid: this.updateObj.guid }));
}
});
var TermRelationAttributeLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends TermRelationAttributeLayoutView */
......@@ -43,7 +134,7 @@ define(['require',
/** ui selector cache */
ui: {
"termAttributeSelect": '[data-id="termAttributeSelect"]',
"showAttribute": '[data-id="showAttribute"]',
"addTermRelation": '[data-id="addTermRelation"]',
"termAttributeTable": '[data-id="termAttributeTable"]',
"deleteAttribute": '[data-id="deleteAttribute"]',
......@@ -53,7 +144,7 @@ define(['require',
var events = {};
events["click " + this.ui.addTermRelation] = 'onAddTermRelation';
events["click " + this.ui.deleteAttribute] = 'onDeleteAttribute';
events["change " + this.ui.termAttributeSelect] = 'changeTermAttributeSelect';
events["click " + this.ui.showAttribute] = 'onShowAttribute';
return events;
},
/**
......@@ -61,19 +152,36 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'glossaryCollection', 'data', 'fetchCollection', 'getSelectedTermAttribute', 'setSelectedTermAttribute'));
this.selectedTermAttribute = this.getSelectedTermAttribute();
_.extend(this, _.pick(options, 'glossaryCollection', 'data', 'fetchCollection'));
},
bindEvents: function() {},
onRender: function() {
this.renderTermAttributeTable();
},
onShowAttribute: function(e) {
var that = this,
attributename = $(e.currentTarget).data('attributename'),
view = new TermRelationAttributeTable({
"data": that.data,
"editMode": ($(e.currentTarget).data('mode') == "edit"),
"selectedTermAttribute": attributename,
"callback": function() {
if (that.fetchCollection) {
that.fetchCollection();
}
},
"onDeleteAttribute": that.onDeleteAttribute.bind(that),
"glossaryCollection": that.glossaryCollection
});
},
onAddTermRelation: function(e) {
var that = this;
this.selectedTermAttribute = this.ui.termAttributeSelect.val();
this.setSelectedTermAttribute(this.selectedTermAttribute);
var that = this,
attributename = $(e.currentTarget).data('attributename');
require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) {
var view = new AssignTermLayoutView({
"isAttributeRelationView": true,
"termData": that.data,
"selectedTermAttribute": that.selectedTermAttribute,
"selectedTermAttribute": attributename,
"callback": function() {
if (that.fetchCollection) {
that.fetchCollection();
......@@ -81,12 +189,10 @@ define(['require',
},
"glossaryCollection": that.glossaryCollection
});
view.modal.on('ok', function() {
//that.hideLoader();
});
});
},
onDeleteAttribute: function(e) {
e.stopPropagation();
var that = this,
notifyObj = {
modal: true,
......@@ -94,6 +200,7 @@ define(['require',
ok: function(argument) {
var model = new that.glossaryCollection.model(),
selectedGuid = $(e.currentTarget).data('termguid'),
attributename = $(e.currentTarget).data('attributename'),
ajaxOptions = {
success: function(rModel, response) {
Utils.notifySuccess({
......@@ -105,7 +212,7 @@ define(['require',
}
},
data = _.clone(that.data);
data[that.selectedTermAttribute] = _.reject(data[that.selectedTermAttribute], function(obj) {
data[attributename] = _.reject(data[attributename], function(obj) {
return obj.termGuid == selectedGuid;
});
model.removeTermFromAttributes(_.extend(ajaxOptions, { data: JSON.stringify(data) }, { guid: that.data.guid }));
......@@ -115,22 +222,27 @@ define(['require',
};
Utils.notifyConfirm(notifyObj);
},
changeTermAttributeSelect: function(e, options) {
var $el = $(e.currentTarget);
if (e.type == "change" && $el.select2('data')) {
this.selectedTermAttribute = $el.val();
this.setSelectedTermAttribute(this.selectedTermAttribute);
renderTermAttributeTable: function(e, options) {
var that = this;
this.ui.termAttributeTable.html(TermRelationAttributeTableTmpl({
attributeValue: this.data[this.selectedTermAttribute],
attributes: Enums.termRelationAttributeList[this.selectedTermAttribute]
}))
data: this.data,
attributes: Enums.termRelationAttributeList,
relationTypeTable: true,
getTerms: function(key) {
var terms = _.map(that.data[key], function(obj) {
var name = _.escape(obj.displayText);
return '<span class="btn btn-action btn-sm btn-icon btn-blue" title=' + _.escape(name) + ' data-id="termClick"><span>' + name + '</span><i class="fa fa-close" data-id="deleteAttribute" data-attributename="' + key + '" data-termguid="' + obj.termGuid + '" data-type="term" title="Remove Term"></i></span>';
}).join(""),
attributeButtons = "";
if (terms.length) {
attributeButtons = '<div class="btn-inline">' +
'<button type="button" title="View Attribute" class="btn btn-action btn-sm" data-attributename="' + key + '" data-id="showAttribute"><i class="fa fa-eye fa-fw" aria-hidden="true"></i></button>' +
'<button type="button" title="Edit Attribute" class="btn btn-action btn-sm" data-attributename="' + key + '" data-mode="edit" data-id="showAttribute"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i></button>' +
'</div>'
}
},
onRender: function() {
if (this.selectedTermAttribute) {
this.ui.termAttributeSelect.val(this.selectedTermAttribute);
return '<td>' + terms + '<button type="button" data-attributename="' + key + '" class="btn btn-action btn-sm" data-id="addTermRelation"><i class="fa fa-plus"></i></button></td><td>' + attributeButtons + '</td>';
}
this.ui.termAttributeSelect.select2().trigger('change');
}));
}
});
return TermRelationAttributeLayoutView;
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -713,7 +713,7 @@ define(['require',
})
};
this.getTagCol({ 'col': col, 'columnToShow': columnToShow });
if (this.fromView != "glossary") {
if ((!_.contains(["classification", "glossary"], this.fromView))) {
this.getTermCol({ 'col': col, 'columnToShow': columnToShow });
}
......@@ -851,7 +851,7 @@ define(['require',
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawValue, model) {
var obj = model.toJSON();
if (!(obj.typeName.startsWith("AtlasGlossary"))) {
if (obj.typeName && !(obj.typeName.startsWith("AtlasGlossary"))) {
if (obj.status && Enums.entityStateReadOnly[obj.status]) {
return '<div class="readOnly">' + CommonViewFunction.termForTable(obj); + '</div>';
} else {
......
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