Skip to content

A
atlas
Commit 1617b671 by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-2646: Glossary UI update for term-to-term association

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent f29a2b7b
Showing with 398 additions and 36 deletions
dashboardv2/public/js/models/VGlossary.js
......@@ -94,6 +94,12 @@ define(['require',
assignCategoryToTerm: function(options) {
return this.createEditTerm(options);
},
assignTermToAttributes: function(options) {
return this.createEditTerm(options);
},
removeTermFromAttributes: function(options) {
return this.createEditTerm(options);
},
removeTermFromEntity: function(guid, options) {
var url = UrlLinks.termToEntityApiUrl(guid);
options = _.extend({
......
dashboardv2/public/js/modules/Helpers.js
......@@ -67,12 +67,16 @@ define(['require',
case '==':
return (v1 == v2) ? options.fn(this) : options.inverse(this);
break;
case '!==':
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
break;
case '===':
return (v1 === v2) ? options.fn(this) : options.inverse(this);
break;
case '!=':
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
break;
case '!==':
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
break;
case '<':
return (v1 < v2) ? options.fn(this) : options.inverse(this);
break;
......@@ -92,5 +96,9 @@ define(['require',
//return options.inverse(this);
});
Handlebars.registerHelper('lookup', function(obj, field, defaulValue) {
return (obj[field] ? obj[field] : (defaulValue ? defaulValue : ""));
});
return HHelpers;
});
\ No newline at end of file
dashboardv2/public/js/templates/glossary/AssignTermLayoutView_tmpl.html
......@@ -14,4 +14,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div id="r_glossaryTree"></div>
\ No newline at end of file
<div id="r_glossaryTree"></div>
<br/>
{{#if isAttributeRelationView}}
<form name="termAttributeForm" class="form-horizontal" data-id="termAttributeForm">
{{#each selectedTermAttributeList}}
<div class="form-group">
<label class="control-label col-sm-2" for="name">{{@key}}</label>
<div class="col-sm-10">
<input class="form-control" name="{{@key}}" value="" data-id="displayName" placeholder="{{@key}}"/>
</div>
</div>
{{/each}}
</form>
{{/if}}
\ No newline at end of file
dashboardv2/public/js/templates/glossary/GlossaryDetailLayoutView_tmpl.html
......@@ -65,6 +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>
</ul>
</div>
</div>
......@@ -88,6 +89,13 @@
</div>
</div>
</div>
<div id="tab-properties" role="properties" class="tab-pane animated fadeIn">
<div id="r_relationLayoutView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
</div>
{{/if}}
</div>
\ No newline at end of file
dashboardv2/public/js/templates/glossary/TermRelationAttributeLayoutView_tmpl.html 0 → 100644
<!--
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div>
<div class="row form-group">
<div class="col-md-6">
<select data-id="termAttributeSelect">
{{#each attributeList}}
<option value="{{@key}}">{{@key}}</option>{{/each}}
</select>
</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 data-id="termAttributeTable"></div>
</div>
\ No newline at end of file
dashboardv2/public/js/templates/glossary/TermRelationAttributeTable_tmpl.html 0 → 100644
<!--
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<table class="table table-hover table-quickMenu">
<thead>
<tr>
<th>Term</th>
<th>Attribute</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{{#if attributeValue}} {{#each attributeValue}}
<tr>
<td>{{this.displayText}}</td>
<td>
<div class="mainAttrTable">
<table class="attriTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{{#each ../attributes}}
<tr>
<td>{{@key}}</td>
<td>{{lookup ../this @key "-"}}</td>
</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}}
</tbody>
</table>
\ No newline at end of file
dashboardv2/public/js/utils/Enums.js
......@@ -108,5 +108,28 @@ define(['require'], function(require) {
// hive_column: { icon: "fa-columns", textContent: '\uf0db' },
// hive_table: { icon: "fa-table", textContent: '\uf0ce' }
}
var getTermRelationAttributes = function() {
return {
description: null,
expression: null,
steward: null,
source: null
}
}
Enums.termRelationAttributeList = {
seeAlso: getTermRelationAttributes(),
synonyms: getTermRelationAttributes(),
antonyms: getTermRelationAttributes(),
preferredTerms: getTermRelationAttributes(),
preferredToTerms: getTermRelationAttributes(),
replacementTerms: getTermRelationAttributes(),
replacedBy: getTermRelationAttributes(),
translationTerms: getTermRelationAttributes(),
translatedTerms: getTermRelationAttributes(),
isA: getTermRelationAttributes(),
classifies: getTermRelationAttributes(),
validValues: getTermRelationAttributes(),
validValuesFor: getTermRelationAttributes()
}
return Enums;
});
\ No newline at end of file
dashboardv2/public/js/views/glossary/AssignTermLayoutView.js
......@@ -20,9 +20,10 @@ define(['require',
'backbone',
'hbs!tmpl/glossary/AssignTermLayoutView_tmpl',
'utils/Utils',
'utils/Enums',
'utils/UrlLinks',
'modules/Modal'
], function(require, Backbone, AssignTermLayoutViewTmpl, Utils, UrlLinks, Modal) {
], function(require, Backbone, AssignTermLayoutViewTmpl, Utils, Enums, UrlLinks, Modal) {
var AssignTermLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends AssignTermLayoutView */
......@@ -32,7 +33,10 @@ define(['require',
template: AssignTermLayoutViewTmpl,
templateHelpers: function() {
return {};
return {
isAttributeRelationView: this.isAttributeRelationView,
selectedTermAttributeList: Enums.termRelationAttributeList[this.selectedTermAttribute]
};
},
/** Layout sub regions */
......@@ -41,7 +45,9 @@ define(['require',
},
/** ui selector cache */
ui: {},
ui: {
termAttributeForm: '[data-id="termAttributeForm"]'
},
/** ui events hash */
events: function() {
var events = {};
......@@ -52,10 +58,10 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'glossaryCollection', 'guid', 'callback', 'hideLoader', 'isCategoryView', 'categoryData', 'isTermView', 'termData'));
_.extend(this, _.pick(options, 'glossaryCollection', 'guid', 'callback', 'hideLoader', 'isCategoryView', 'categoryData', 'isTermView', 'termData', 'isAttributeRelationView', 'selectedTermAttribute'));
var that = this;
this.options = options;
if (!this.isCategoryView && !this.isTermView) {
if (!this.isCategoryView && !this.isTermView && !this.isAttributeRelationView) {
this.isEntityView = true;
}
this.glossary = {
......@@ -64,6 +70,8 @@ define(['require',
var title = "";
if (this.isCategoryView || this.isEntityView) {
title = ("Assign term to " + (this.isCategoryView ? "Category" : "entity"))
} else if (this.isAttributeRelationView) {
title = "Assign term to " + this.selectedTermAttribute;
} else {
title = "Assign Category to term";
}
......@@ -97,12 +105,13 @@ define(['require',
this.assignTermError = false;
var that = this,
data = [],
termAttributeFormData = [],
selectedItem = this.glossary.selectedItem,
selectedGuid = selectedItem.guid,
ajaxOptions = {
success: function(rModel, response) {
Utils.notifySuccess({
content: (that.isCategoryView || that.isEntityView ? "Term" : "Category") + " is associated successfully "
content: (that.isCategoryView || that.isEntityView || that.isAttributeRelationView ? "Term" : "Category") + " is associated successfully "
});
that.modal.trigger('closeModal');
if (that.callback) {
......@@ -115,7 +124,7 @@ define(['require',
},
model = new this.glossaryCollection.model();
if (this.isCategoryView) {
data = _.extend({}, this.categoryData);
data = $.extend(true, {}, this.categoryData);
if (data.terms) {
data.terms.push({ "termGuid": selectedGuid });
} else {
......@@ -123,13 +132,25 @@ define(['require',
}
model.assignTermToCategory(_.extend(ajaxOptions, { data: JSON.stringify(data), guid: data.guid }));
} else if (this.isTermView) {
data = _.extend({}, this.termData);
data = $.extend(true, {}, this.termData);
if (data.categories) {
data.categories.push({ "categoryGuid": selectedGuid });
} else {
data.categories = [{ "categoryGuid": selectedGuid }];
}
model.assignCategoryToTerm(_.extend(ajaxOptions, { data: JSON.stringify(data), guid: data.guid }));
} else if (this.isAttributeRelationView) {
termAttributeFormData = this.ui.termAttributeForm.serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {}),
data = $.extend(true, {}, this.termData);
if (data[this.selectedTermAttribute]) {
data[this.selectedTermAttribute].push(_.extend({ "termGuid": selectedGuid }, termAttributeFormData));
} else {
data[this.selectedTermAttribute] = [_.extend({ "termGuid": selectedGuid }, termAttributeFormData)];
}
model.assignTermToAttributes(_.extend(ajaxOptions, { data: JSON.stringify(data), guid: data.guid }));
} else {
data.push({ "guid": that.guid });
model.assignTermToEntity(selectedGuid, _.extend(ajaxOptions, { data: JSON.stringify(data) }));
......@@ -142,6 +163,7 @@ define(['require',
"isAssignTermView": that.isCategoryView,
"isAssignCategoryView": that.isTermView,
"isAssignEntityView": that.isEntityView,
"isAssignAttributeRelationView": that.isAttributeRelationView,
"glossary": that.glossary
}, that.options)));
});
......
dashboardv2/public/js/views/glossary/GlossaryDetailLayoutView.js
......@@ -36,7 +36,8 @@ define(['require',
/** Layout sub regions */
regions: {
RSearchResultLayoutView: "#r_searchResultLayoutView",
RTagTableLayoutView: "#r_tagTableLayoutView"
RTagTableLayoutView: "#r_tagTableLayoutView",
RRelationLayoutView: "#r_relationLayoutView"
},
templateHelpers: function() {
return {
......@@ -180,6 +181,7 @@ define(['require',
this.isGlossaryView = true;
}
}
this.selectedTermAttribute = null;
},
onRender: function() {
this.$('.fontLoader-relative').show();
......@@ -196,11 +198,22 @@ define(['require',
this.renderDetails(this.data);
} else {
this.listenTo(this.glossaryCollection.fullCollection, "reset ", function(skip) {
this.data = this.glossaryCollection.fullCollection.get(this.guid).toJSON();
var foundGlossary = this.glossaryCollection.fullCollection.get(this.guid);
this.data = foundGlossary ? foundGlossary.toJSON() : null;
if (this.data == null) {
this.glossary.selectedItem = {};
Utils.setUrl({
url: '#!/glossary',
mergeBrowserUrl: false,
urlParams: null,
trigger: true,
updateTabState: true
});
}
this.renderDetails(this.data);
}, this);
}
} else {
} else {;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.ui.details);
var getApiFunctionKey = "getCategory",
that = this;
......@@ -221,10 +234,18 @@ define(['require',
"typeHeaders": that.typeHeaders,
"tagCollection": that.collection,
"enumDefCollection": that.enumDefCollection,
"classificationDefCollection": that.classificationDefCollection
"classificationDefCollection": that.classificationDefCollection,
"glossaryCollection": that.glossaryCollection,
"getSelectedTermAttribute": function() {
return that.selectedTermAttribute;
},
"setSelectedTermAttribute": function(val) {
that.selectedTermAttribute = val;
}
}
that.renderSearchResultLayoutView(obj);
that.renderTagTableLayoutView(obj);
that.renderRelationLayoutView(obj);
}
that.data = data;
that.glossary.selectedItem.model = data;
......@@ -238,12 +259,16 @@ define(['require',
},
renderDetails: function(data) {
Utils.hideTitleLoader(this.$('.fontLoader'), this.ui.details);
this.ui.title.text(data.displayName || data.displayText || data.qualifiedName);
this.ui.shortDescription.text(data.shortDescription);
this.ui.longDescription.text(data.longDescription);
this.generateCategories(data.categories);
this.generateTerm(data.terms);
this.generateTag(data.classifications);
if (data) {
this.ui.title.text(data.displayName || data.displayText || data.qualifiedName);
this.ui.shortDescription.text(data.shortDescription);
this.ui.longDescription.text(data.longDescription);
this.generateCategories(data.categories);
this.generateTerm(data.terms);
this.generateTag(data.classifications);
} else {
this.ui.title.text("No Data found");
}
},
generateCategories: function(data) {
var that = this,
......@@ -398,6 +423,16 @@ define(['require',
}
});
},
renderRelationLayoutView: function(options) {
var that = this;
require(['views/glossary/TermRelationAttributeLayoutView'], function(TermRelationAttributeLayoutView) {
that.RRelationLayoutView.show(new TermRelationAttributeLayoutView(_.extend({}, options, {
"entityName": that.ui.title.text(),
"fetchCollection": that.getData.bind(that),
"data": that.data
})));
});
},
});
return GlossaryDetailLayoutView;
});
\ No newline at end of file
dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
......@@ -38,7 +38,8 @@ define(['require',
regions: {},
templateHelpers: function() {
return {
isAssignView: this.isAssignView
isAssignView: this.isAssignView,
isAssignAttributeRelationView: this.isAssignAttributeRelationView
};
},
......@@ -87,9 +88,9 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'value', 'glossaryCollection', 'glossary', 'isAssignTermView', 'isAssignCategoryView', 'isAssignEntityView'));
_.extend(this, _.pick(options, 'guid', 'value', 'glossaryCollection', 'glossary', 'isAssignTermView', 'isAssignCategoryView', 'isAssignEntityView', 'isAssignAttributeRelationView'));
this.viewType = "term";
this.isAssignView = this.isAssignTermView || this.isAssignCategoryView || this.isAssignEntityView;
this.isAssignView = this.isAssignTermView || this.isAssignCategoryView || this.isAssignEntityView || this.isAssignAttributeRelationView;
this.bindEvents();
this.query = {
term: {},
......@@ -494,7 +495,7 @@ define(['require',
}
}
if (this.isAssignView) {
if (this.isAssignTermView || this.isAssignEntityView) {
if (this.isAssignTermView || this.isAssignEntityView || this.isAssignAttributeRelationView) {
initializeTermTree();
} else if (this.isAssignCategoryView) {
initializeCategoryTree();
......@@ -611,9 +612,14 @@ define(['require',
Utils.notifySuccess({
content: messageType + Messages.deleteSuccessMessage
});
var url = gId ? '#!/glossary/' + gId : '#!/glossary/';
var url = gId ? '#!/glossary/' + gId : '#!/glossary';
if (gId == null) {
that.glossary.selectedItem = {};
that.ui.categoryTree.jstree(true).refresh();
that.ui.termTree.jstree(true).refresh();
}
Utils.setUrl({
url: '#!/glossary/' + gId,
url: url,
mergeBrowserUrl: false,
trigger: true,
urlParams: gId ? _.extend({}, that.value, {
......@@ -654,13 +660,18 @@ define(['require',
}
var selectedItem = this.glossary.selectedItem;
if (this.glossaryCollection.length && (_.isEmpty(selectedItem) || this.query[this.viewType].isNodeNotFoundAtLoad)) {
selectedItem = { "model": this.glossaryCollection.first().toJSON() };
selectedItem.guid = selectedItem.model.guid;
selectedItem.type = "Glossary";
this.glossary.selectedItem = selectedItem;
this.query[this.viewType].model = selectedItem.model;
this.query[this.viewType].gType = "glossary"
delete this.query[this.viewType].gId;
var model = selectedItem.model
if (model && !(model.parentCategory || model.parentCategoryGuid)) {
selectedItem = { "model": this.glossaryCollection.first().toJSON() };
selectedItem.guid = selectedItem.model.guid;
selectedItem.type = "Glossary";
this.glossary.selectedItem = selectedItem;
this.query[this.viewType].model = selectedItem.model;
this.query[this.viewType].gType = "glossary"
delete this.query[this.viewType].gId;
} else {
this.query[this.viewType].isNodeNotFoundAtLoad = false;
}
}
if (_.isEmpty(selectedItem)) {
return;
......
dashboardv2/public/js/views/glossary/TermRelationAttributeLayoutView.js 0 → 100644
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define(['require',
'backbone',
'hbs!tmpl/glossary/TermRelationAttributeLayoutView_tmpl',
'hbs!tmpl/glossary/TermRelationAttributeTable_tmpl',
'utils/Enums',
'utils/Utils',
'utils/UrlLinks'
], function(require, Backbone, TermRelationAttributeLayoutViewTmpl, TermRelationAttributeTableTmpl, Enums, Utils, UrlLinks) {
var TermRelationAttributeLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends TermRelationAttributeLayoutView */
{
_viewName: 'TermRelationAttributeLayoutView',
template: TermRelationAttributeLayoutViewTmpl,
templateHelpers: function() {
return {
attributeList: Enums.termRelationAttributeList
};
},
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
"termAttributeSelect": '[data-id="termAttributeSelect"]',
"addTermRelation": '[data-id="addTermRelation"]',
"termAttributeTable": '[data-id="termAttributeTable"]',
"deleteAttribute": '[data-id="deleteAttribute"]',
},
/** ui events hash */
events: function() {
var events = {};
events["click " + this.ui.addTermRelation] = 'onAddTermRelation';
events["click " + this.ui.deleteAttribute] = 'onDeleteAttribute';
events["change " + this.ui.termAttributeSelect] = 'changeTermAttributeSelect';
return events;
},
/**
* intialize a new TermRelationAttributeLayoutView Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'glossaryCollection', 'data', 'fetchCollection', 'getSelectedTermAttribute', 'setSelectedTermAttribute'));
this.selectedTermAttribute = this.getSelectedTermAttribute();
},
bindEvents: function() {},
onAddTermRelation: function(e) {
var that = this;
this.selectedTermAttribute = this.ui.termAttributeSelect.val();
this.setSelectedTermAttribute(this.selectedTermAttribute);
require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) {
var view = new AssignTermLayoutView({
"isAttributeRelationView": true,
"termData": that.data,
"selectedTermAttribute": that.selectedTermAttribute,
"callback": function() {
if (that.fetchCollection) {
that.fetchCollection();
}
},
"glossaryCollection": that.glossaryCollection
});
view.modal.on('ok', function() {
//that.hideLoader();
});
});
},
onDeleteAttribute: function(e) {
var that = this,
notifyObj = {
modal: true,
text: "Are you sure you want to remove term association",
ok: function(argument) {
var model = new that.glossaryCollection.model(),
selectedGuid = $(e.currentTarget).data('termguid'),
ajaxOptions = {
success: function(rModel, response) {
Utils.notifySuccess({
content: "Association removed successfully "
});
if (that.fetchCollection) {
that.fetchCollection();
}
}
},
data = _.clone(that.data);
data[that.selectedTermAttribute] = _.reject(data[that.selectedTermAttribute], function(obj) {
return obj.termGuid == selectedGuid;
});
model.removeTermFromAttributes(_.extend(ajaxOptions, { data: JSON.stringify(data) }, { guid: that.data.guid }));
},
cancel: function(argument) {}
};
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);
this.ui.termAttributeTable.html(TermRelationAttributeTableTmpl({
attributeValue: this.data[this.selectedTermAttribute],
attributes: Enums.termRelationAttributeList[this.selectedTermAttribute]
}))
}
},
onRender: function() {
if (this.selectedTermAttribute) {
this.ui.termAttributeSelect.val(this.selectedTermAttribute);
}
this.ui.termAttributeSelect.select2().trigger('change');
}
});
return TermRelationAttributeLayoutView;
});
\ No newline at end of file
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