Skip to content

A
atlas
Commit 75858947 by sameer79 Committed by Sarath Subramanian
Options

ATLAS-3460: Remove modal of 'User-defined properties' in entity details page.

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent 2c3b41f4
Showing with 556 additions and 455 deletions
dashboardv2/public/css/scss/common.scss
......@@ -229,17 +229,17 @@ pre {
text-align: center;
vertical-align: middle;
line-height: 31px;
width: 2%;
width: 3%;
}
.custom-col-1{
width: 40%;
width: 38%;
}
.custom-col-2{
text-align: center;
width: 12%;
margin-left: 2%;
width: 17%;
margin-left: 1%;
}
}
}
......@@ -253,4 +253,7 @@ pre {
color: $white;
font-size: 12px;
font-weight: normal;
margin-bottom: 5px;
margin-left: 5px;
float: left;
}
dashboardv2/public/css/scss/override.scss
......@@ -215,7 +215,7 @@ td {
.select2-container--default .select2-search--inline .select2-search__field {
color: #555;
width: 300px !important;
// width: 300px !important;
}
.typeLOV {
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
......@@ -23,7 +23,7 @@
<div data-id="entityIcon" class="entity-icon-box position-relative"></div>
<span data-id="title"></span>
</h1> {{#if entityUpdate}}
<div data-id="editButtonContainer" class="pull-right"></div>
<!-- <div data-id="editButtonContainer" class="pull-right"></div> -->
{{/if}}
<div class="form-group">
<span class="control-label-sm-pr pull-left">Classifications:</span>
......
dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
......@@ -25,12 +25,15 @@
</div>
</div>
<div class="panel-actions">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="noValueToggle" />
<div class="pretty p-switch p-fill" style="margin-right: 20px">
<input type="checkbox" data-id="noValueToggle" title="Show Empty Values"/>
<div class="state p-primary">
<label>Show Empty Values</label>
<label></label>
</div>
</div>
{{#ifCond editEntity "===" true}}
<button data-id="editButton" title="Edit Entity" class="btn btn-action btn-sm pull-right">Edit</button>
{{/ifCond}}
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
......
dashboardv2/public/js/templates/entity/EntityLabelDefineView_tmpl.html
......@@ -28,7 +28,7 @@
</div>
</div>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true" style="width: 70%">
<div class="panel-heading" data-toggle="collapse" href="#collapse4" aria-expanded="true" style="width: 70%">
<h4 class="panel-title">
<a>Labels </a>
</h4>
......@@ -73,7 +73,7 @@
</div>
{{#ifCond labels.length ">" 0}}
<div id="collapse3" class="panel-collapse collapse in" >
<div id="collapse4" class="panel-collapse collapse in" >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
......
dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
......@@ -15,31 +15,30 @@
* limitations under the License.
-->
<div data-id="userDefineItems">
<table class="custom-table">
{{#each items}}
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
<p class="errorMsg"></p>
</td >
<td class="custom-col-0"> : </td >
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
<p class="errorMsg"></p>
</td >
<td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
<i class="fa fa-plus"> </i>
</button>
</td >
</tr>
{{/each}}
{{#ifCond items.length "===" 0}}
No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
{{/ifCond}}
</table>
</div>
<table class="custom-table">
{{#each items}}
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
<p class="errorMsg"></p>
</td >
<td class="custom-col-0"> : </td >
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
<p class="errorMsg"></p>
</td >
<td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
<i class="fa fa-plus"> </i>
</button>
</td >
</tr>
{{/each}}
{{#ifCond items.length "===" 0}}
All properties have been removed. To add a new property, click <a href="javascript:void(0)" data-id="addItem">here</a>
{{/ifCond}}
</table>
dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
......@@ -15,59 +15,101 @@
* limitations under the License.
-->
<div class="panel-group" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-heading collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-heading collapsed" data-toggle="collapse" href="#collapse22" aria-expanded="false" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Add User-Defined"> Add</button>
{{/ifCond}}
</div>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" style="width: 60%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse44" aria-expanded="true" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
{{/ifCond}}
{{#ifCond readOnlyEntity "===" false}}
<div class="panel-actions">
{{#ifCond swapItem "!==" true}}
<button class="btn btn-action btn-sm" data-id="addAttr" {{#ifCond customAttibutes.length "===" 0}} data-original-title="Add User-defined properties" {{else}} data-original-title="Edit User-defined properties" {{/ifCond}}>
{{#ifCond customAttibutes.length "===" 0}} Add {{else}} Edit {{/ifCond}}
</button>
{{/ifCond}}
{{#ifCond saveAttrItems "===" true}}
<button class="btn btn-action btn-sm" data-id="saveAttrItems" data-original-title="Save User-defined properties">Save</button>
{{/ifCond}}
</div>
{{/ifCond}}
<div id="collapse22" {{#ifCond swapItem "===" false}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}}>
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-body">
<div class="row">
<div class="col-md-12">
{{#ifCond swapItem "===" true}}
<div id="r_entityUserDefinedItemView"></div>
{{else}}
<div class="entity-detail-table">
<table class="table">
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/ifCond}}
</div>
</div>
</div>
{{/ifCond}}
</div>
{{/ifCond}}
<div id="collapse2" {{#ifCond customAttibutes.length "===" 0}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}} >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="entity-detail-table">
<table class="table">
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
{{#ifCond customAttibutes.length ">" 0}}
<div id="collapse44" class="panel-collapse collapse in" >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
{{#ifCond swapItem "===" true}}
<div id="r_entityUserDefinedItemView"></div>
{{else}}
<div class="entity-detail-table">
<table class="table">
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/ifCond}}
</div>
</div>
</div>
</div>
</div>
</div>
{{/ifCond}}
</div>
</div>
</div>
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
......@@ -19,14 +19,13 @@
define(['require',
'backbone',
'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl',
'hbs!tmpl/common/buttons_tmpl',
'utils/Utils',
'utils/CommonViewFunction',
'utils/Globals',
'utils/Enums',
'utils/Messages',
'utils/UrlLinks'
], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict';
var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -55,8 +54,6 @@ define(['require',
termClick: '[data-id="termClick"]',
propagatedTagDiv: '[data-id="propagatedTagDiv"]',
title: '[data-id="title"]',
editButton: '[data-id="editButton"]',
editButtonContainer: '[data-id="editButtonContainer"]',
description: '[data-id="description"]',
editBox: '[data-id="editBox"]',
deleteTag: '[data-id="deleteTag"]',
......@@ -77,7 +74,6 @@ define(['require',
/** ui events hash */
events: function() {
var events = {};
events["click " + this.ui.editButton] = 'onClickEditEntity';
events["click " + this.ui.tagClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() != "i") {
Utils.setUrl({
......@@ -219,10 +215,10 @@ define(['require',
this.generateTerm(collectionJSON.relationshipAttributes.meanings);
}
if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
this.editEntity = true;
} else {
if (_.contains(Globals.entityTypeConfList, collectionJSON.typeName)) {
this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
this.editEntity = true;
}
}
if (collectionJSON.attributes && collectionJSON.attributes.columns) {
......@@ -245,7 +241,8 @@ define(['require',
glossaryCollection: this.glossaryCollection,
attributeDefs: (function() {
return that.getEntityDef(collectionJSON);
})()
})(),
editEntity: this.editEntity || false
}
this.renderEntityDetailTableLayoutView(obj);
this.renderEntityUserDefineView(obj);
......@@ -544,23 +541,6 @@ define(['require',
require(['views/profile/ProfileLayoutView'], function(ProfileLayoutView) {
that.RProfileLayoutView.show(new ProfileLayoutView(obj));
});
},
onClickEditEntity: function(e) {
var that = this;
$(e.currentTarget).blur();
require([
'views/entity/CreateEntityLayoutView'
], function(CreateEntityLayoutView) {
var view = new CreateEntityLayoutView({
guid: that.id,
entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders,
callback: function() {
that.fetchCollection();
}
});
});
}
});
return DetailPageLayoutView;
......
dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
......@@ -32,13 +32,20 @@ define(['require',
template: EntityDetailTableLayoutView_tmpl,
templateHelpers: function() {
return {
editEntity: this.editEntity
};
},
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
detailValue: "[data-id='detailValue']",
noValueToggle: "[data-id='noValueToggle']"
noValueToggle: "[data-id='noValueToggle']",
editButton: '[data-id="editButton"]',
},
/** ui events hash */
events: function() {
......@@ -49,6 +56,7 @@ define(['require',
"tableEl": this.ui.detailValue
});
};
events["click " + this.ui.editButton] = 'onClickEditEntity';
return events;
},
/**
......@@ -56,7 +64,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes'));
_.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes', 'editEntity', 'guid', 'entityDefCollection', 'searchVent', 'fetchCollection'));
this.entityModel = new VEntity({});
},
bindEvents: function() {},
......@@ -80,7 +88,25 @@ define(['require',
setTimeout(function() {
that.$el.find(".searched-term-highlight").addClass("bold");
}, 5000)
},
onClickEditEntity: function(e) {
var that = this;
$(e.currentTarget).blur();
require([
'views/entity/CreateEntityLayoutView'
], function(CreateEntityLayoutView) {
var view = new CreateEntityLayoutView({
guid: that.guid,
searchVent: that.searchVent,
entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders,
callback: function() {
that.fetchCollection();
}
});
});
}
});
return EntityDetailTableLayoutView;
});
\ No newline at end of file
});
dashboardv2/public/js/views/entity/EntityLabelDefineView.js
......@@ -86,35 +86,37 @@ define(['require',
saveUserDefinedLabels: function() {
var that = this;
var entityJson = that.entityModel.toJSON();
var payload = this.labels;
that.entityModel.saveEntityLabels(entityJson.guid ,{
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
if (payload.length === 0) {
that.entityModel.unset('labels');
} else {
that.entityModel.set('labels', payload);
if (entityJson.labels !== undefined || this.labels.length !== 0) {
var payload = this.labels;
that.entityModel.saveEntityLabels(entityJson.guid ,{
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
if (payload.length === 0) {
that.entityModel.unset('labels');
} else {
that.entityModel.set('labels', payload);
}
Utils.notifySuccess({
content: "Labels " + Messages[msg]
});
that.swapItem = false;
that.saveLabels = false;
that.render();
},
error: function (e) {
that.ui.saveLabels.attr("disabled", false);
Utils.notifySuccess({
content: e.message
});
},
complete: function () {
that.ui.saveLabels.attr("disabled", false);
that.render();
}
Utils.notifySuccess({
content: "User-defined labels " + Messages[msg]
});
that.swapItem = false;
that.saveLabels = false;
that.render();
},
error: function (e) {
that.ui.saveLabels && that.ui.saveLabels.length > 0 && that.ui.saveLabels[0].setAttribute("disabled", false);
Utils.notifySuccess({
content: e.message
});
},
complete: function () {
that.ui.saveLabels && that.ui.saveLabels.length > 0 && that.ui.saveLabels[0].setAttribute("disabled", false);
that.render();
}
});
});
}
}
});
});
dashboardv2/public/js/views/entity/EntityUserDefineView.js
......@@ -19,13 +19,11 @@
define(['require',
'backbone',
'hbs!tmpl/entity/EntityUserDefineView_tmpl',
'views/entity/EntityUserDefineItemView',
'utils/CommonViewFunction',
'modules/Modal',
'models/VEntity',
'utils/Utils',
'utils/Enums'
], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
'utils/Enums',
'utils/Messages'
], function(require, Backbone, EntityUserDefineView_tmpl, VEntity, Utils, Enums, Messages) {
'use strict';
return Backbone.Marionette.LayoutView.extend({
......@@ -34,32 +32,57 @@ define(['require',
templateHelpers: function() {
return {
customAttibutes: this.customAttibutes,
readOnlyEntity : this.readOnlyEntity
readOnlyEntity : this.readOnlyEntity,
swapItem: this.swapItem,
saveAttrItems: this.saveAttrItems
};
},
ui: {
addAttr: "[data-id='addAttr']",
editAttr: "[data-id='editAttr']",
deleteAttr: "[data-id='deleteAttr']"
saveAttrItems: "[data-id='saveAttrItems']"
},
events: function() {
var events = {};
events["click " + this.ui.addAttr] = 'onAddAttrClick';
events["click " + this.ui.editAttr] = 'onEditAttrClick';
events["click " + this.ui.saveAttrItems] = 'onEditAttrClick';
return events;
},
initialize: function(options) {
_.extend(this, _.pick(options, 'entity'));
this.userDefineAttr = this.entity.customAttributes || [];
this.editMode = false;
this.initialCall = false;
this.swapItem = false, this.saveAttrItems = false;
this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
this.entityModel = new VEntity(this.entity);
this.generateTableFields();
},
onRender: function() {
},
bindEvents: {},
customAtributesFunc: function() {
renderEntityUserDefinedItems: function() {
var that = this;
require(['views/entity/EntityUserDefineItemView'], function(EntityUserDefineItemView) {
that.itemView = new EntityUserDefineItemView({items: that.customAttibutes});
that.REntityUserDefinedItemView.show(that.itemView);
});
},
bindEvents: {},
addChildRegion: function() {
this.addRegions({
REntityUserDefinedItemView: "#r_entityUserDefinedItemView"
});
this.renderEntityUserDefinedItems();
},
onAddAttrClick: function() {
this.swapItem = !this.swapItem;
this.saveAttrItems = this.swapItem === true ? true : false;
this.initialCall = true;
this.render();
if (this.swapItem === true) {
this.addChildRegion();
}
},
generateTableFields: function() {
var that = this;
......@@ -71,20 +94,9 @@ define(['require',
});
});
},
onEditAttrClick: function (e) {
this.editMode = true;
var options = {items: this.customAttibutes, mode: true};
var view = new EntityUserDefineItemView(options);
var modalObj = {
title: 'User-defined properties',
content: view,
okText: 'Save',
okCloses: false,
cancelText: "Cancel",
mainClass: 'modal-md',
allowCancel: true,
};
this.setAttributeModal(modalObj);
onEditAttrClick: function () {
this.initialCall = false;
this.setAttributeModal(this.itemView);
},
structureAttributes: function (list) {
var obj={}
......@@ -103,82 +115,71 @@ define(['require',
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = "User-defined properties updated successfully";
var msg = that.initialCall ? 'addSuccessMessage' : 'editSuccessMessage';
that.customAttibutes = list;
Utils.notifySuccess({
content: msg
content: "User-defined properties " + Messages[msg]
});
that.modal && that.modal.trigger('cancel');
that.swapItem = false;
that.saveAttrItems = false;
that.render();
},
error: function (e) {
that.editMode = false;
that.initialCall = false;
Utils.notifySuccess({
content: e.message
});
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
that.ui.saveAttrItems.attr("disabled", false);
},
complete: function () {
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
that.editMode = false;
that.ui.saveAttrItems.attr("disabled", false);
that.initialCall = false;
}
});
},
setAttributeModal: function(modalObj) {
setAttributeModal: function(itemView) {
var self = this;
this.modal = new Modal(modalObj);
this.modal.open();
this. modal.on('ok', function() {
self.modal.$el.find('button.ok').attr("disabled", true);
var list = self.modal.$el.find("[data-type]"),
keyMap = new Map(),
validation = true,
hasDup = [],
dataList = [];
Array.prototype.push.apply(dataList, self.modal.options.content.items);
for(var i = 0; i < list.length ; i++) {
var input = list[i],
type = input.dataset.type,
pEl = self.modal.$el.find(input.parentElement).find('p'),
classes = 'form-control',
val = input.value.trim();
pEl[0].innerText = "";
this.ui.saveAttrItems.attr("disabled", true);
var list = itemView.$el.find("[data-type]"),
keyMap = new Map(),
validation = true,
hasDup = [],
dataList = [];
Array.prototype.push.apply(dataList, itemView.items);
for(var i = 0; i < list.length ; i++) {
var input = list[i],
type = input.dataset.type,
pEl = itemView.$el.find(input.parentElement).find('p'),
classes = 'form-control',
val = input.value.trim();
pEl[0].innerText = "";
if (val === '') {
classes = 'form-control errorClass';
validation = false;
pEl[0].innerText = 'Required!';
} else {
if (input.tagName === 'INPUT') {
var duplicates = dataList.filter(function(c) {
return c.key === val;
});
if (keyMap.has(val) || duplicates.length > 1 ) {
classes = 'form-control errorClass';
hasDup.push('duplicate');
pEl[0].innerText = 'Duplicate key';
} else {
keyMap.set(val, val);
}
if (val === '') {
classes = 'form-control errorClass';
validation = false;
pEl[0].innerText = 'Required!';
} else {
if (input.tagName === 'INPUT') {
var duplicates = dataList.filter(function(c) {
return c.key === val;
});
if (keyMap.has(val) || duplicates.length > 1 ) {
classes = 'form-control errorClass';
hasDup.push('duplicate');
pEl[0].innerText = 'Duplicate key';
} else {
keyMap.set(val, val);
}
}
input.setAttribute('class', classes);
}
input.setAttribute('class', classes);
}
if (validation && hasDup.length === 0) {
self.saveAttributes(self.modal.options.content.items);
} else {
self.modal.$el.find('button.ok').attr("disabled", false);
}
});
this.modal.on('closeModal', function() {
self.editMode = false;
self.modal.trigger('cancel');
});
},
enableModalButton: function () {
var self = this;
self.modal.$el.find('button.ok').attr("disabled", false);
if (validation && hasDup.length === 0) {
self.saveAttributes(itemView.items);
} else {
this.ui.saveAttrItems.attr("disabled", false);
}
}
});
});
dashboardv3/public/css/scss/common.scss
......@@ -228,17 +228,17 @@ pre {
text-align: center;
vertical-align: middle;
line-height: 31px;
width: 2%;
width: 3%;
}
.custom-col-1{
width: 40%;
width: 38%;
}
.custom-col-2{
text-align: center;
width: 12%;
margin-left: 2%;
width: 17%;
margin-left: 1%;
}
}
}
......@@ -252,4 +252,7 @@ pre {
color: $white;
font-size: 12px;
font-weight: normal;
margin-bottom: 5px;
margin-left: 5px;
float: left;
}
dashboardv3/public/css/scss/override.scss
......@@ -167,7 +167,7 @@
.select2-container--default .select2-search--inline .select2-search__field {
color: #555;
width: 300px !important;
// width: 300px !important;
}
.typeLOV {
......@@ -426,4 +426,4 @@ div.columnmanager-dropdown-container {
.query-builder .error-container {
cursor: pointer;
}
\ No newline at end of file
}
dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
......@@ -26,7 +26,7 @@
<div data-id="entityIcon" class="entity-icon-box position-relative"></div>
<span data-id="title"></span>
</h1> {{#if entityUpdate}}
<div data-id="editButtonContainer" class="pull-right"></div>
<!-- <div data-id="editButtonContainer" class="pull-right"></div> -->
{{/if}}
<div class="form-group col-md-12">
<span class="control-label-sm-pr pull-left">Classifications:</span>
......
dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
......@@ -25,12 +25,15 @@
</div>
</div>
<div class="panel-actions">
<div class="pretty p-switch p-fill">
<input type="checkbox" data-id="noValueToggle" />
<div class="pretty p-switch p-fill" style="margin-right: 20px">
<input type="checkbox" data-id="noValueToggle" title="Show Empty Values"/>
<div class="state p-primary">
<label>Show Empty Values</label>
<label></label>
</div>
</div>
{{#ifCond editEntity "===" true}}
<button data-id="editButton" title="Edit Entity" class="btn btn-action btn-sm pull-right">Edit</button>
{{/ifCond}}
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
......
dashboardv3/public/js/templates/entity/EntityLabelDefineView_tmpl.html
......@@ -28,7 +28,7 @@
</div>
</div>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true" style="width: 70%">
<div class="panel-heading" data-toggle="collapse" href="#collapse4" aria-expanded="true" style="width: 70%">
<h4 class="panel-title">
<a>Labels </a>
</h4>
......@@ -73,7 +73,7 @@
</div>
{{#ifCond labels.length ">" 0}}
<div id="collapse3" class="panel-collapse collapse in" >
<div id="collapse4" class="panel-collapse collapse in" >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
......
dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
......@@ -15,31 +15,30 @@
* limitations under the License.
-->
<div data-id="userDefineItems">
<table class="custom-table">
{{#each items}}
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
<p class="errorMsg"></p>
</td >
<td class="custom-col-0"> : </td >
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
<p class="errorMsg"></p>
</td >
<td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
<i class="fa fa-plus"> </i>
</button>
</td >
</tr>
{{/each}}
{{#ifCond items.length "===" 0}}
No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
{{/ifCond}}
</table>
</div>
<table class="custom-table">
{{#each items}}
<tr class="custom-tr">
<td class="custom-col-1">
<input placeholder="key" type="text" data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
<p class="errorMsg"></p>
</td >
<td class="custom-col-0"> : </td >
<td class="custom-col-1">
<textarea placeholder="value" data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
<p class="errorMsg"></p>
</td >
<td class="custom-col-2">
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="deleteItem">
<i class="fa fa-minus"> </i>
</button>
<button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
<i class="fa fa-plus"> </i>
</button>
</td >
</tr>
{{/each}}
{{#ifCond items.length "===" 0}}
All properties have been removed. To add a new property, click <a href="javascript:void(0)" data-id="addItem">here</a>
{{/ifCond}}
</table>
dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
......@@ -15,66 +15,101 @@
* limitations under the License.
-->
<div class="panel-group" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-heading collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-heading collapsed" data-toggle="collapse" href="#collapse22" aria-expanded="false" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Add User-Defined"> Add</button>
{{/ifCond}}
</div>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" style="width: 60%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
{{else}}
<div class="panel-heading" data-toggle="collapse" href="#collapse44" aria-expanded="true" style="width: 70%">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
</div>
<div class="panel-actions">
{{#ifCond readOnlyEntity "===" false}}
<button class="btn btn-action btn-sm" data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
{{/ifCond}}
{{#ifCond readOnlyEntity "===" false}}
<div class="panel-actions">
{{#ifCond swapItem "!==" true}}
<button class="btn btn-action btn-sm" data-id="addAttr" {{#ifCond customAttibutes.length "===" 0}} data-original-title="Add User-defined properties" {{else}} data-original-title="Edit User-defined properties" {{/ifCond}}>
{{#ifCond customAttibutes.length "===" 0}} Add {{else}} Edit {{/ifCond}}
</button>
{{/ifCond}}
{{#ifCond saveAttrItems "===" true}}
<button class="btn btn-action btn-sm" data-id="saveAttrItems" data-original-title="Save User-defined properties">Save</button>
{{/ifCond}}
</div>
{{/ifCond}}
<div id="collapse22" {{#ifCond swapItem "===" false}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}}>
{{#ifCond customAttibutes.length "===" 0}}
<div class="panel-body">
<div class="row">
<div class="col-md-12">
{{#ifCond swapItem "===" true}}
<div id="r_entityUserDefinedItemView"></div>
{{else}}
<div class="entity-detail-table">
<table class="table">
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/ifCond}}
</div>
</div>
</div>
{{/ifCond}}
</div>
{{/ifCond}}
<div id="collapse2" {{#ifCond customAttibutes.length "===" 0}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}} >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="entity-detail-table">
<table class="table">
{{#ifCond customAttibutes.length "===" 0}}
<span>No properties have been created yet.
{{#ifCond readOnlyEntity "==" false}}
<span>To add a property, click <a href="javascript:void(0)" data-id="editAttr">here</a></span>
{{/ifCond}}
</span>
{{#ifCond customAttibutes.length ">" 0}}
<div id="collapse44" class="panel-collapse collapse in" >
<div class="panel-body">
<div class="row">
<div class="col-md-12">
{{#ifCond swapItem "===" true}}
<div id="r_entityUserDefinedItemView"></div>
{{else}}
<div class="entity-detail-table">
<table class="table">
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/ifCond}}
<tbody>
{{#each customAttibutes}}
<tr>
<td>
<div class="scroll-y">{{key}}</div> </div></td>
<td>
<div class="scroll-y">{{value}}</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
{{/ifCond}}
</div>
</div>
</div>
dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
......@@ -19,14 +19,13 @@
define(['require',
'backbone',
'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl',
'hbs!tmpl/common/buttons_tmpl',
'utils/Utils',
'utils/CommonViewFunction',
'utils/Globals',
'utils/Enums',
'utils/Messages',
'utils/UrlLinks'
], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict';
var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -55,8 +54,6 @@ define(['require',
termClick: '[data-id="termClick"]',
propagatedTagDiv: '[data-id="propagatedTagDiv"]',
title: '[data-id="title"]',
editButton: '[data-id="editButton"]',
editButtonContainer: '[data-id="editButtonContainer"]',
description: '[data-id="description"]',
editBox: '[data-id="editBox"]',
deleteTag: '[data-id="deleteTag"]',
......@@ -78,7 +75,6 @@ define(['require',
/** ui events hash */
events: function() {
var events = {};
events["click " + this.ui.editButton] = 'onClickEditEntity';
events["click " + this.ui.tagClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() != "i") {
Utils.setUrl({
......@@ -224,10 +220,10 @@ define(['require',
this.generateTerm(collectionJSON.relationshipAttributes.meanings);
}
if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
this.editEntity = true;
} else {
if (_.contains(Globals.entityTypeConfList, collectionJSON.typeName)) {
this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
this.editEntity = true;
}
}
if (collectionJSON.attributes && collectionJSON.attributes.columns) {
......@@ -251,7 +247,8 @@ define(['require',
searchVent: this.searchVent,
attributeDefs: (function() {
return that.getEntityDef(collectionJSON);
})()
})(),
editEntity: this.editEntity || false
}
this.renderEntityDetailTableLayoutView(obj);
this.renderEntityUserDefineView(obj);
......@@ -556,24 +553,6 @@ define(['require',
require(['views/profile/ProfileLayoutView'], function(ProfileLayoutView) {
that.RProfileLayoutView.show(new ProfileLayoutView(obj));
});
},
onClickEditEntity: function(e) {
var that = this;
$(e.currentTarget).blur();
require([
'views/entity/CreateEntityLayoutView'
], function(CreateEntityLayoutView) {
var view = new CreateEntityLayoutView({
guid: that.id,
searchVent: that.searchVent,
entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders,
callback: function() {
that.fetchCollection();
}
});
});
}
});
return DetailPageLayoutView;
......
dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
......@@ -32,13 +32,20 @@ define(['require',
template: EntityDetailTableLayoutView_tmpl,
templateHelpers: function() {
return {
editEntity: this.editEntity
};
},
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
detailValue: "[data-id='detailValue']",
noValueToggle: "[data-id='noValueToggle']"
noValueToggle: "[data-id='noValueToggle']",
editButton: '[data-id="editButton"]',
},
/** ui events hash */
events: function() {
......@@ -49,6 +56,7 @@ define(['require',
"tableEl": this.ui.detailValue
});
};
events["click " + this.ui.editButton] = 'onClickEditEntity';
return events;
},
/**
......@@ -56,7 +64,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes'));
_.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes', 'editEntity', 'guid', 'entityDefCollection', 'searchVent', 'fetchCollection'));
this.entityModel = new VEntity({});
},
bindEvents: function() {},
......@@ -80,7 +88,25 @@ define(['require',
setTimeout(function() {
that.$el.find(".searched-term-highlight").addClass("bold");
}, 5000)
},
onClickEditEntity: function(e) {
var that = this;
$(e.currentTarget).blur();
require([
'views/entity/CreateEntityLayoutView'
], function(CreateEntityLayoutView) {
var view = new CreateEntityLayoutView({
guid: that.guid,
searchVent: that.searchVent,
entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders,
callback: function() {
that.fetchCollection();
}
});
});
}
});
return EntityDetailTableLayoutView;
});
\ No newline at end of file
});
dashboardv3/public/js/views/entity/EntityLabelDefineView.js
......@@ -86,35 +86,37 @@ define(['require',
saveUserDefinedLabels: function() {
var that = this;
var entityJson = that.entityModel.toJSON();
var payload = this.labels;
that.entityModel.saveEntityLabels(entityJson.guid ,{
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
if (payload.length === 0) {
that.entityModel.unset('labels');
} else {
that.entityModel.set('labels', payload);
if (entityJson.labels !== undefined || this.labels.length !== 0) {
var payload = this.labels;
that.entityModel.saveEntityLabels(entityJson.guid ,{
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
if (payload.length === 0) {
that.entityModel.unset('labels');
} else {
that.entityModel.set('labels', payload);
}
Utils.notifySuccess({
content: "Labels " + Messages[msg]
});
that.swapItem = false;
that.saveLabels = false;
that.render();
},
error: function (e) {
that.ui.saveLabels.attr("disabled", false);
Utils.notifySuccess({
content: e.message
});
},
complete: function () {
that.ui.saveLabels.attr("disabled", false);
that.render();
}
Utils.notifySuccess({
content: "User-defined labels " + Messages[msg]
});
that.swapItem = false;
that.saveLabels = false;
that.render();
},
error: function (e) {
that.ui.saveLabels && that.ui.saveLabels.length > 0 && that.ui.saveLabels[0].setAttribute("disabled", false);
Utils.notifySuccess({
content: e.message
});
},
complete: function () {
that.ui.saveLabels && that.ui.saveLabels.length > 0 && that.ui.saveLabels[0].setAttribute("disabled", false);
that.render();
}
});
});
}
}
});
});
dashboardv3/public/js/views/entity/EntityUserDefineView.js
......@@ -19,13 +19,11 @@
define(['require',
'backbone',
'hbs!tmpl/entity/EntityUserDefineView_tmpl',
'views/entity/EntityUserDefineItemView',
'utils/CommonViewFunction',
'modules/Modal',
'models/VEntity',
'utils/Utils',
'utils/Enums'
], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
'utils/Enums',
'utils/Messages'
], function(require, Backbone, EntityUserDefineView_tmpl, VEntity, Utils, Enums, Messages) {
'use strict';
return Backbone.Marionette.LayoutView.extend({
......@@ -34,32 +32,57 @@ define(['require',
templateHelpers: function() {
return {
customAttibutes: this.customAttibutes,
readOnlyEntity : this.readOnlyEntity
readOnlyEntity : this.readOnlyEntity,
swapItem: this.swapItem,
saveAttrItems: this.saveAttrItems
};
},
ui: {
addAttr: "[data-id='addAttr']",
editAttr: "[data-id='editAttr']",
deleteAttr: "[data-id='deleteAttr']"
saveAttrItems: "[data-id='saveAttrItems']"
},
events: function() {
var events = {};
events["click " + this.ui.addAttr] = 'onAddAttrClick';
events["click " + this.ui.editAttr] = 'onEditAttrClick';
events["click " + this.ui.saveAttrItems] = 'onEditAttrClick';
return events;
},
initialize: function(options) {
_.extend(this, _.pick(options, 'entity'));
this.userDefineAttr = this.entity.customAttributes || [];
this.editMode = false;
this.initialCall = false;
this.swapItem = false, this.saveAttrItems = false;
this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
this.entityModel = new VEntity(this.entity);
this.generateTableFields();
},
onRender: function() {
},
bindEvents: {},
customAtributesFunc: function() {
renderEntityUserDefinedItems: function() {
var that = this;
require(['views/entity/EntityUserDefineItemView'], function(EntityUserDefineItemView) {
that.itemView = new EntityUserDefineItemView({items: that.customAttibutes});
that.REntityUserDefinedItemView.show(that.itemView);
});
},
bindEvents: {},
addChildRegion: function() {
this.addRegions({
REntityUserDefinedItemView: "#r_entityUserDefinedItemView"
});
this.renderEntityUserDefinedItems();
},
onAddAttrClick: function() {
this.swapItem = !this.swapItem;
this.saveAttrItems = this.swapItem === true ? true : false;
this.initialCall = true;
this.render();
if (this.swapItem === true) {
this.addChildRegion();
}
},
generateTableFields: function() {
var that = this;
......@@ -71,20 +94,9 @@ define(['require',
});
});
},
onEditAttrClick: function (e) {
this.editMode = true;
var options = {items: this.customAttibutes, mode: true};
var view = new EntityUserDefineItemView(options);
var modalObj = {
title: 'User-defined properties',
content: view,
okText: 'Save',
okCloses: false,
cancelText: "Cancel",
mainClass: 'modal-md',
allowCancel: true,
};
this.setAttributeModal(modalObj);
onEditAttrClick: function () {
this.initialCall = false;
this.setAttributeModal(this.itemView);
},
structureAttributes: function (list) {
var obj={}
......@@ -103,82 +115,71 @@ define(['require',
data: JSON.stringify(payload),
type: 'POST',
success: function() {
var msg = "User-defined properties updated successfully";
var msg = that.initialCall ? 'addSuccessMessage' : 'editSuccessMessage';
that.customAttibutes = list;
Utils.notifySuccess({
content: msg
content: "User-defined properties " + Messages[msg]
});
that.modal && that.modal.trigger('cancel');
that.swapItem = false;
that.saveAttrItems = false;
that.render();
},
error: function (e) {
that.editMode = false;
that.initialCall = false;
Utils.notifySuccess({
content: e.message
});
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
that.ui.saveAttrItems.attr("disabled", false);
},
complete: function () {
that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
that.editMode = false;
that.ui.saveAttrItems.attr("disabled", false);
that.initialCall = false;
}
});
},
setAttributeModal: function(modalObj) {
setAttributeModal: function(itemView) {
var self = this;
this.modal = new Modal(modalObj);
this.modal.open();
this. modal.on('ok', function() {
self.modal.$el.find('button.ok').attr("disabled", true);
var list = self.modal.$el.find("[data-type]"),
keyMap = new Map(),
validation = true,
hasDup = [],
dataList = [];
Array.prototype.push.apply(dataList, self.modal.options.content.items);
for(var i = 0; i < list.length ; i++) {
var input = list[i],
type = input.dataset.type,
pEl = self.modal.$el.find(input.parentElement).find('p'),
classes = 'form-control',
val = input.value.trim();
pEl[0].innerText = "";
this.ui.saveAttrItems.attr("disabled", true);
var list = itemView.$el.find("[data-type]"),
keyMap = new Map(),
validation = true,
hasDup = [],
dataList = [];
Array.prototype.push.apply(dataList, itemView.items);
for(var i = 0; i < list.length ; i++) {
var input = list[i],
type = input.dataset.type,
pEl = itemView.$el.find(input.parentElement).find('p'),
classes = 'form-control',
val = input.value.trim();
pEl[0].innerText = "";
if (val === '') {
classes = 'form-control errorClass';
validation = false;
pEl[0].innerText = 'Required!';
} else {
if (input.tagName === 'INPUT') {
var duplicates = dataList.filter(function(c) {
return c.key === val;
});
if (keyMap.has(val) || duplicates.length > 1 ) {
classes = 'form-control errorClass';
hasDup.push('duplicate');
pEl[0].innerText = 'Duplicate key';
} else {
keyMap.set(val, val);
}
if (val === '') {
classes = 'form-control errorClass';
validation = false;
pEl[0].innerText = 'Required!';
} else {
if (input.tagName === 'INPUT') {
var duplicates = dataList.filter(function(c) {
return c.key === val;
});
if (keyMap.has(val) || duplicates.length > 1 ) {
classes = 'form-control errorClass';
hasDup.push('duplicate');
pEl[0].innerText = 'Duplicate key';
} else {
keyMap.set(val, val);
}
}
input.setAttribute('class', classes);
}
input.setAttribute('class', classes);
}
if (validation && hasDup.length === 0) {
self.saveAttributes(self.modal.options.content.items);
} else {
self.modal.$el.find('button.ok').attr("disabled", false);
}
});
this.modal.on('closeModal', function() {
self.editMode = false;
self.modal.trigger('cancel');
});
},
enableModalButton: function () {
var self = this;
self.modal.$el.find('button.ok').attr("disabled", false);
if (validation && hasDup.length === 0) {
self.saveAttributes(itemView.items);
} else {
this.ui.saveAttrItems.attr("disabled", false);
}
}
});
});
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