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