Skip to content

A
atlas
Commit 39b059e0 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3128: UI: Create entity is not working after new relationship attribute introduce

Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent 1a5009ea
Showing with 386 additions and 71 deletions
dashboardv2/public/css/scss/form.scss
...@@ -23,10 +23,12 @@ ...@@ -23,10 +23,12 @@
.control-label-sm { .control-label-sm {
padding-top: 3px; padding-top: 3px;
} }
.control-label-sm-pl { .control-label-sm-pl {
@extend .control-label-sm; @extend .control-label-sm;
padding-left: 10px; padding-left: 10px;
} }
.control-label-sm-pr { .control-label-sm-pr {
@extend .control-label-sm; @extend .control-label-sm;
padding-right: 10px; padding-right: 10px;
...@@ -44,6 +46,7 @@ ...@@ -44,6 +46,7 @@
&.text-left { &.text-left {
text-align: left; text-align: left;
} }
&.text-right { &.text-right {
text-align: right; text-align: right;
} }
...@@ -53,6 +56,7 @@ ...@@ -53,6 +56,7 @@
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
background-color: $color_mystic_approx; background-color: $color_mystic_approx;
border: 1px $color_mystic_approx solid; border: 1px $color_mystic_approx solid;
&:focus { &:focus {
border-color: $color_bali_hai_approx; border-color: $color_bali_hai_approx;
outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) outline: 0; //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
...@@ -62,6 +66,7 @@ ...@@ -62,6 +66,7 @@
} }
.form-color { .form-color {
.form-group span[class^="select2-selection select2-selection--"], .form-group span[class^="select2-selection select2-selection--"],
.form-control { .form-control {
background-color: #e8e8e8 !important; background-color: #e8e8e8 !important;
...@@ -70,6 +75,7 @@ ...@@ -70,6 +75,7 @@
.sidebar-wrapper { .sidebar-wrapper {
z-index: 9 !important; z-index: 9 !important;
.form-control { .form-control {
background-color: $white; background-color: $white;
border: 1px $white solid; border: 1px $white solid;
...@@ -83,6 +89,7 @@ ...@@ -83,6 +89,7 @@
textarea { textarea {
resize: none; resize: none;
&:focus { &:focus {
outline: none !important; outline: none !important;
} }
...@@ -99,6 +106,7 @@ button:focus { ...@@ -99,6 +106,7 @@ button:focus {
.btn { .btn {
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
...@@ -106,6 +114,7 @@ button:focus { ...@@ -106,6 +114,7 @@ button:focus {
[class^="col-md-"], [class^="col-md-"],
[class^="col-sm-"] { [class^="col-sm-"] {
.btn.checkbox-inline, .btn.checkbox-inline,
.btn.radio-inline { .btn.radio-inline {
padding-left: 19px; padding-left: 19px;
...@@ -116,6 +125,7 @@ button:focus { ...@@ -116,6 +125,7 @@ button:focus {
color: $white; color: $white;
background-color: $color_blue_bayoux_approx; background-color: $color_blue_bayoux_approx;
border-color: $color_blue_bayoux_approx; border-color: $color_blue_bayoux_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_pickled_bluewood_approx; background-color: $color_pickled_bluewood_approx;
...@@ -127,11 +137,13 @@ button:focus { ...@@ -127,11 +137,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_jungle_green_approx; background-color: $color_jungle_green_approx;
border-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_jungle_green_approx; background-color: $color_jungle_green_approx;
border-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_jungle_green_approx; background-color: $color_jungle_green_approx;
...@@ -143,11 +155,13 @@ button:focus { ...@@ -143,11 +155,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_picton_blue_approx; background-color: $color_picton_blue_approx;
border-color: $color_picton_blue_approx; border-color: $color_picton_blue_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
...@@ -159,11 +173,13 @@ button:focus { ...@@ -159,11 +173,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_yellow_sea_approx; background-color: $color_yellow_sea_approx;
border-color: $color_yellow_sea_approx; border-color: $color_yellow_sea_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_gamboge_approx; background-color: $color_gamboge_approx;
border-color: $color_gamboge_approx; border-color: $color_gamboge_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_gamboge_approx; background-color: $color_gamboge_approx;
...@@ -175,11 +191,13 @@ button:focus { ...@@ -175,11 +191,13 @@ button:focus {
color: $white; color: $white;
background-color: $color_trinidad_approx; background-color: $color_trinidad_approx;
border-color: $color_trinidad_approx; border-color: $color_trinidad_approx;
&:hover { &:hover {
color: $white; color: $white;
background-color: $color_grenadier_approx; background-color: $color_grenadier_approx;
border-color: $color_grenadier_approx; border-color: $color_grenadier_approx;
} }
&:focus { &:focus {
color: $white; color: $white;
background-color: $color_grenadier_approx; background-color: $color_grenadier_approx;
...@@ -196,17 +214,21 @@ button:focus { ...@@ -196,17 +214,21 @@ button:focus {
border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10) border-radius: 4px; //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
transition: all .3s ease; transition: all .3s ease;
margin: 2px; margin: 2px;
&:hover { &:hover {
@include btn-action-effect('default'); @include btn-action-effect('default');
background-color: $transparent; background-color: $transparent;
} }
&:focus { &:focus {
@include btn-action-effect('default'); @include btn-action-effect('default');
background-color: $transparent; background-color: $transparent;
} }
&.btn-sm { &.btn-sm {
padding: 2px 6px; padding: 2px 6px;
} }
&.btn-md { &.btn-md {
padding: 6px 10px; padding: 6px 10px;
} }
...@@ -222,17 +244,20 @@ button:focus { ...@@ -222,17 +244,20 @@ button:focus {
.btn-fixed-width { .btn-fixed-width {
.btn-icon { .btn-icon {
min-width: 100px; min-width: 100px;
&.propagte-classification { &.propagte-classification {
>span { >span {
width: 98px; width: 98px;
} }
} }
>span { >span {
@include ellipsis(); @include ellipsis();
float: left; float: left;
width: 76px; width: 76px;
padding: 2px 5px !important; padding: 2px 5px !important;
} }
>i { >i {
float: right; float: right;
line-height: 15px; line-height: 15px;
...@@ -246,6 +271,7 @@ button:focus { ...@@ -246,6 +271,7 @@ button:focus {
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
background-color: $transparent; background-color: $transparent;
&.active { &.active {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
...@@ -262,33 +288,41 @@ button:focus { ...@@ -262,33 +288,41 @@ button:focus {
&.btn-sm { &.btn-sm {
padding: 2px 6px; padding: 2px 6px;
} }
&.btn-md { &.btn-md {
padding: 5px 10px; padding: 5px 10px;
} }
&.btn-blue { &.btn-blue {
@include btn-action-effect('blue'); @include btn-action-effect('blue');
&.active { &.active {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
} }
&:hover { &:hover {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
} }
&:focus { &:focus {
@include btn-action-effect('blue'); @include btn-action-effect('blue');
} }
&.btn-icon { &.btn-icon {
@include btn-action-effect('blue'); @include btn-action-effect('blue');
color: $tag_color !important; color: $tag_color !important;
&:hover { &:hover {
color: $color_havelock_blue_approx; color: $color_havelock_blue_approx;
background-color: $transparent; background-color: $transparent;
} }
>span { >span {
&:hover { &:hover {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
} }
} }
i.fa { i.fa {
&:hover { &:hover {
@include btn-action-hover-effect('blue'); @include btn-action-hover-effect('blue');
...@@ -301,10 +335,12 @@ button:focus { ...@@ -301,10 +335,12 @@ button:focus {
border: 1px $action_gray solid; border: 1px $action_gray solid;
color: $action_gray; color: $action_gray;
cursor: default; cursor: default;
i.fa { i.fa {
position: relative; position: relative;
right: -5px; right: -5px;
} }
&:hover { &:hover {
color: $white; color: $white;
background-color: $action_gray; background-color: $action_gray;
...@@ -315,25 +351,31 @@ button:focus { ...@@ -315,25 +351,31 @@ button:focus {
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
background-color: $transparent; background-color: $transparent;
&:hover { &:hover {
color: $color_keppel_approx; color: $color_keppel_approx;
background-color: $transparent; background-color: $transparent;
} }
>span { >span {
padding: 5px; padding: 5px;
&:hover { &:hover {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
} }
i.fa { i.fa {
position: relative; position: relative;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@include btn-action-hover-effect('default'); @include btn-action-hover-effect('default');
} }
} }
} }
&.btn-icon-pd { &.btn-icon-pd {
i.fa { i.fa {
padding: 5px; padding: 5px;
...@@ -343,6 +385,7 @@ button:focus { ...@@ -343,6 +385,7 @@ button:focus {
} }
.btn-group { .btn-group {
.btn-atlas, .btn-atlas,
.btn-action { .btn-action {
margin: 0px; margin: 0px;
...@@ -353,10 +396,12 @@ button:focus { ...@@ -353,10 +396,12 @@ button:focus {
>a { >a {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
&:focus { &:focus {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
} }
&:hover { &:hover {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
...@@ -366,10 +411,12 @@ button:focus { ...@@ -366,10 +411,12 @@ button:focus {
>span { >span {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
&:focus { &:focus {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
} }
&:hover { &:hover {
background-color: $color_curious_blue_approx; background-color: $color_curious_blue_approx;
border-color: $color_curious_blue_approx; border-color: $color_curious_blue_approx;
...@@ -382,6 +429,7 @@ button:focus { ...@@ -382,6 +429,7 @@ button:focus {
color: $color_mountain_mist_approx; color: $color_mountain_mist_approx;
cursor: default; cursor: default;
margin: 5px 10px; margin: 5px 10px;
&:hover { &:hover {
border-color: $color_mountain_mist_approx; border-color: $color_mountain_mist_approx;
color: $color_mountain_mist_approx !important; color: $color_mountain_mist_approx !important;
...@@ -401,4 +449,43 @@ button:focus { ...@@ -401,4 +449,43 @@ button:focus {
.list-style-disc { .list-style-disc {
list-style: disc; list-style: disc;
}
.create-entity-form {
&.all {
.attribute-dash-box {
&.alloptional {
display: block;
}
}
}
.attribute-dash-box {
border-style: dashed;
border-width: 2px;
border-spacing: 8px;
border-radius: 12px;
border-color: #cbcbcb;
position: relative;
padding: 0px 10px;
margin-top: 25px;
span.required:after {
content: "*";
padding-left: 1%;
color: $red
}
&.alloptional {
display: none;
}
.attribute-type-label {
background: $white;
padding: 5px 10px;
position: absolute;
top: -16px;
}
}
} }
\ No newline at end of file
dashboardv2/public/css/scss/override.scss
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
.modal-body { .modal-body {
position: relative; position: relative;
padding: 15px; padding: 15px;
max-height: 72vh; max-height: calc(100vh - 200px);
min-height: 70px; min-height: 70px;
overflow: auto; overflow: auto;
......
dashboardv2/public/css/scss/theme.scss
...@@ -112,7 +112,9 @@ header { ...@@ -112,7 +112,9 @@ header {
h1 { h1 {
&.title { &.title {
word-break: break-all; word-break: break-all;
} // margin-top: 50px; }
// margin-top: 50px;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: 600; font-weight: 600;
@include ellipsis(); @include ellipsis();
...@@ -286,15 +288,18 @@ hr[size="10"] { ...@@ -286,15 +288,18 @@ hr[size="10"] {
.panel-title { .panel-title {
display: inline-block; display: inline-block;
} }
i.ec-icon:before { i.ec-icon:before {
content: "\f078" content: "\f078"
} }
&.collapsed, &.collapsed,
&[aria-expanded="false"] { &[aria-expanded="false"] {
i.ec-icon:before { i.ec-icon:before {
content: "\f078" content: "\f078"
} }
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
i.ec-icon:before { i.ec-icon:before {
content: "\f077" content: "\f077"
...@@ -388,10 +393,6 @@ hr[size="10"] { ...@@ -388,10 +393,6 @@ hr[size="10"] {
box-shadow: none !important; box-shadow: none !important;
} }
fieldset.fieldset-child-pd>div {
padding-left: 12px;
}
.inline-content { .inline-content {
>.inline { >.inline {
display: inline-block; display: inline-block;
......
dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12 entityInputData" data-id="entityInputData"></div> <div class="col-sm-12 entityInputData create-entity-form" data-id="entityInputData"></div>
</div> </div>
</form> </form>
<div class="fontLoader-relative entityLoader" style="display:none"> <div class="fontLoader-relative entityLoader" style="display:none">
......
dashboardv2/public/js/utils/Helper.js
...@@ -32,6 +32,9 @@ define(['require', ...@@ -32,6 +32,9 @@ define(['require',
return false; return false;
} }
}, },
toArrayifObject: function(val) {
return _.isObject(val) ? [val] : val;
},
startsWith: function(str, matchStr) { startsWith: function(str, matchStr) {
if (str && matchStr && _.isString(str) && _.isString(matchStr)) { if (str && matchStr && _.isString(str) && _.isString(matchStr)) {
return str.lastIndexOf(matchStr, 0) === 0 return str.lastIndexOf(matchStr, 0) === 0
......
dashboardv2/public/js/utils/Utils.js
...@@ -599,27 +599,56 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -599,27 +599,56 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
return _.uniq(superTypes); return _.uniq(superTypes);
} }
Utils.getNestedSuperTypeObj = function(options) { Utils.getNestedSuperTypeObj = function(options) {
var flag = 0, var mainData = options.data,
data = options.data, collection = options.collection,
collection = options.collection; attrMerge = options.attrMerge,
if (options.attrMerge) { mergeRelationAttributes = options.mergeRelationAttributes || false,
var attributeDefs = []; seperateRelatioshipAttr = options.seperateRelatioshipAttr || false;
} else { if (mergeRelationAttributes && seperateRelatioshipAttr) {
var attributeDefs = {}; throw "Both mergeRelationAttributes & seperateRelatioshipAttr cannot be true!"
}
var attributeDefs = {};
if (attrMerge && !seperateRelatioshipAttr) {
attributeDefs = [];
} else if (options.attrMerge && seperateRelatioshipAttr) {
attributeDefs = {
attributeDefs: [],
relationshipAttributeDefs: []
}
}
var getRelationshipAttributeDef = function(data) {
return _.filter(
data.relationshipAttributeDefs,
function(obj, key) {
return obj;
})
} }
var getData = function(data, collection) { var getData = function(data, collection) {
if (options.attrMerge) { if (options.attrMerge) {
attributeDefs = attributeDefs.concat(data.attributeDefs); if (seperateRelatioshipAttr) {
attributeDefs.attributeDefs = attributeDefs.attributeDefs.concat(data.attributeDefs);
attributeDefs.relationshipAttributeDefs = attributeDefs.relationshipAttributeDefs.concat(getRelationshipAttributeDef(data));
} else {
attributeDefs = attributeDefs.concat(data.attributeDefs);
if (mergeRelationAttributes) {
attributeDefs = attributeDefs.concat(getRelationshipAttributeDef(data));
}
}
} else { } else {
if (attributeDefs[data.name]) { if (attributeDefs[data.name]) {
if (_.isArray(attributeDefs[data.name])) { attributeDefs[data.name] = _.toArrayifObject(attributeDefs[data.name]).concat(data.attributeDefs);
attributeDefs[data.name] = attributeDefs[data.name].concat(data.attributeDefs); } else {
if (seperateRelatioshipAttr) {
attributeDefs[data.name] = {
attributeDefs: data.attributeDefs,
relationshipAttributeDefs: data.relationshipAttributeDefs
};
} else { } else {
_.extend(attributeDefs[data.name], data.attributeDefs); attributeDefs[data.name] = data.attributeDefs;
if (mergeRelationAttributes) {
attributeDefs[data.name] = _.toArrayifObject(attributeDefs[data.name]).concat(getRelationshipAttributeDef(data));
}
} }
} else {
attributeDefs[data.name] = data.attributeDefs;
} }
} }
if (data.superTypes && data.superTypes.length) { if (data.superTypes && data.superTypes.length) {
...@@ -638,7 +667,27 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -638,7 +667,27 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}); });
} }
} }
getData(data, collection); getData(mainData, collection);
if (attrMerge) {
if (seperateRelatioshipAttr) {
attributeDefs = {
attributeDefs: _.uniq(_.sortBy(attributeDefs.attributeDefs, 'name'), true, function(obj) {
return obj.name
}),
relationshipAttributeDefs: _.uniq(_.sortBy(attributeDefs.relationshipAttributeDefs, 'name'), true, function(obj) {
return (obj.name + obj.relationshipTypeName)
})
}
} else {
attributeDefs = _.uniq(_.sortBy(attributeDefs, 'name'), true, function(obj) {
if (obj.relationshipTypeName) {
(obj.name + obj.relationshipTypeName)
} else {
(obj.name)
}
});
}
}
return attributeDefs; return attributeDefs;
} }
......
dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
...@@ -236,7 +236,7 @@ define(['require', ...@@ -236,7 +236,7 @@ define(['require',
var str = '<option disabled="disabled" selected>--Select entity-type--</option>'; var str = '<option disabled="disabled" selected>--Select entity-type--</option>';
this.entityDefCollection.fullCollection.each(function(val) { this.entityDefCollection.fullCollection.each(function(val) {
var name = Utils.getName(val.toJSON()); var name = Utils.getName(val.toJSON());
if (Globals.entityTypeConfList) { if (Globals.entityTypeConfList && name.indexOf("__") !== 0) {
if (_.isEmptyArray(Globals.entityTypeConfList)) { if (_.isEmptyArray(Globals.entityTypeConfList)) {
str += '<option>' + name + '</option>'; str += '<option>' + name + '</option>';
} else { } else {
...@@ -256,11 +256,13 @@ define(['require', ...@@ -256,11 +256,13 @@ define(['require',
}, },
requiredAllToggle: function(checked) { requiredAllToggle: function(checked) {
if (checked) { if (checked) {
this.ui.entityInputData.addClass('all').removeClass('required');
this.ui.entityInputData.find('div.true').show(); this.ui.entityInputData.find('div.true').show();
this.ui.entityInputData.find('fieldset div.true').show(); this.ui.entityInputData.find('fieldset div.true').show();
this.ui.entityInputData.find('fieldset').show(); this.ui.entityInputData.find('fieldset').show();
this.required = false; this.required = false;
} else { } else {
this.ui.entityInputData.addClass('required').removeClass('all');
this.ui.entityInputData.find('fieldset').each(function() { this.ui.entityInputData.find('fieldset').each(function() {
if (!$(this).find('div').hasClass('false')) { if (!$(this).find('div').hasClass('false')) {
$(this).hide(); $(this).hide();
...@@ -296,26 +298,111 @@ define(['require', ...@@ -296,26 +298,111 @@ define(['require',
silent: true silent: true
}); });
}, },
renderAttribute: function(object) {
var that = this,
visitedAttr = {},
attributeObj = object.attributeDefs,
isAllAttributeOptinal = true,
isAllRelationshipAttributeOptinal = true,
attributeDefList = attributeObj.attributeDefs,
relationshipAttributeDefsList = attributeObj.relationshipAttributeDefs,
attributeHtml = "",
relationShipAttributeHtml = "",
fieldElemetHtml = '',
commonInput = function(object) {
var value = object.value,
containerHtml = '';
containerHtml += that.getContainer(object);
return containerHtml;
};
if (attributeDefList.length || relationshipAttributeDefsList.length) {
_.each(attributeDefList, function(value) {
if (value.isOptional === false) {
isAllAttributeOptinal = false;
}
attributeHtml += commonInput({
"value": value,
"duplicateValue": false,
"isAttribute": true
});
});
_.each(relationshipAttributeDefsList, function(value) {
if (value.isOptional === false) {
isAllRelationshipAttributeOptinal = false;
}
if (visitedAttr[value.name] === null) {
// on second visited set it to true;and now onwords ignore if same value come.
var duplicateRelationship = _.where(relationshipAttributeDefsList, { name: value.name });
var str = '<option value="">--Select a Relationship Type--</option>';
_.each(duplicateRelationship, function(val, index, list) {
str += '<option>' + _.escape(val.relationshipTypeName) + '</option>';
});
var isOptional = value.isOptional;
visitedAttr[value.name] = '<div class="form-group"><select class="form-control row-margin-bottom entityInputBox ' + (value.isOptional === true ? "false" : "true") + '" data-for-key= "' + value.name + '"> ' + str + '</select></div>';
} else {
relationShipAttributeHtml += commonInput({
"value": value,
"duplicateValue": true,
"isRelation": true
});
// once visited set it to null;
visitedAttr[value.name] = null;
}
});
if (attributeHtml.length) {
fieldElemetHtml += that.getFieldElementContainer({
"htmlField": attributeHtml,
"attributeType": true,
"alloptional": isAllAttributeOptinal
});
}
if (relationShipAttributeHtml.length) {
fieldElemetHtml += that.getFieldElementContainer({
"htmlField": relationShipAttributeHtml,
"relationshipType": true,
"alloptional": isAllRelationshipAttributeOptinal
});
}
if (fieldElemetHtml.length) {
that.ui.entityInputData.append(fieldElemetHtml);
_.each(_.keys(visitedAttr), function(key) {
if (visitedAttr[key] === null) {
return;
}
var elFound = that.ui.entityInputData.find('[data-key="' + key + '"]');
elFound.parent().prepend(visitedAttr[key]);
});
} else {
fieldElemetHtml = "<h4 class='text-center'>Defination not found</h4>";
that.ui.entityInputData.append(fieldElemetHtml);
}
}
that.ui.entityInputData.find("select[data-for-key]").select2({})
return false;
},
subAttributeData: function(data) { subAttributeData: function(data) {
var that = this, var that = this,
attributeInput = "", attributeInput = "",
alloptional = false, alloptional = false,
attributeDefs = Utils.getNestedSuperTypeObj({ data: data, collection: this.entityDefCollection }); attributeDefs = Utils.getNestedSuperTypeObj({
_.each(_.sortBy(_.keys(attributeDefs)), function(key) { seperateRelatioshipAttr: true,
if (attributeDefs[key].length) { attrMerge: true,
attributeInput = ""; data: data,
_.each(_.sortBy(attributeDefs[key], 'name'), function(value) { collection: this.entityDefCollection
if (value.isOptional == true) { });
alloptional = true; if (attributeDefs && attributeDefs.relationshipAttributeDefs.length) {
} attributeDefs.attributeDefs = _.filter(attributeDefs.attributeDefs, function(obj) {
attributeInput += that.getContainer(value); if (_.find(attributeDefs.relationshipAttributeDefs, { name: obj.name }) === undefined) {
}); return true;
if (attributeInput !== "") {
entityTitle = that.getFieldSet(key, alloptional, attributeInput);
that.ui.entityInputData.append(entityTitle);
} }
} })
}
//make a function call.
this.renderAttribute({
attributeDefs: attributeDefs
}); });
if (this.required) { if (this.required) {
this.ui.entityInputData.find('fieldset div.true').hide() this.ui.entityInputData.find('fieldset div.true').hide()
this.ui.entityInputData.find('div.true').hide(); this.ui.entityInputData.find('div.true').hide();
...@@ -395,19 +482,35 @@ define(['require', ...@@ -395,19 +482,35 @@ define(['require',
} }
}); });
}, },
getContainer: function(value) { getContainer: function(object) {
var entityLabel = this.capitalize(value.name); var value = object.value,
return '<div class="row form-group ' + value.isOptional + '"><span class="col-sm-3">' + entityLabel = this.capitalize(value.name);
return '<div class=" row ' + value.isOptional + '"><span class="col-sm-3">' +
'<label><span class="' + (value.isOptional ? 'true' : 'false required') + '">' + entityLabel + '</span><span class="center-block ellipsis text-gray" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span></label></span>' + '<label><span class="' + (value.isOptional ? 'true' : 'false required') + '">' + entityLabel + '</span><span class="center-block ellipsis text-gray" title="Data Type : ' + value.typeName + '">' + '(' + Utils.escapeHtml(value.typeName) + ')' + '</span></label></span>' +
'<span class="col-sm-9">' + (this.getElement(value)) + '<span class="col-sm-9">' + (this.getElement(object)) +
'</input></span></div>'; '</input></span></div>';
}, },
getFieldSet: function(name, alloptional, attributeInput) { getFieldElementContainer: function(object) {
return '<fieldset class="form-group fieldset-child-pd ' + (alloptional ? "alloptional" : "") + '"><legend class="legend-sm">' + name + '</legend>' + attributeInput + '</fieldset>'; var htmlField = object.htmlField,
attributeType = object.attributeType ? object.attributeType : false,
relationshipType = object.relationshipType ? object.relationshipType : false,
alloptional = object.alloptional,
typeOfDefination = (relationshipType ? "Relationships" : "Attributes");
return '<div class="attribute-dash-box ' + (alloptional ? "alloptional" : "") + ' "><span class="attribute-type-label">' + (typeOfDefination) + '</span>' + htmlField + '</div>';
}, },
getSelect: function(value, entityValue) { getSelect: function(object) {
var value = object.value,
entityValue = object.entityValue,
isAttribute = object.isAttribute,
isRelation = object.isRelation;
if (value.typeName === "boolean") { if (value.typeName === "boolean") {
return '<select class="form-control row-margin-bottom ' + (value.isOptional === true ? "false" : "true") + '" data-type="' + value.typeName + '" data-key="' + value.name + '" data-id="entityInput">' + return '<select class="form-control row-margin-bottom ' + (value.isOptional === true ? "false" : "true") +
'" data-type="' + value.typeName +
'" data-attribute="' + isAttribute +
'" data-relation="' + isRelation +
'" data-key="' + value.name +
'" data-id="entityInput">' +
'<option value="">--Select true or false--</option><option value="true">true</option>' + '<option value="">--Select true or false--</option><option value="true">true</option>' +
'<option value="false">false</option></select>'; '<option value="false">false</option></select>';
} else { } else {
...@@ -417,13 +520,21 @@ define(['require', ...@@ -417,13 +520,21 @@ define(['require',
} else { } else {
splitTypeName = value.typeName; splitTypeName = value.typeName;
} }
return '<select class="form-control row-margin-bottom entityInputBox ' + (value.isOptional === true ? "false" : "true") + '" data-type="' + value.typeName + return '<select class="form-control row-margin-bottom entityInputBox ' + (value.isOptional === true ? "false" : "true") +
'" data-key="' + value.name + '" data-id="entitySelectData" data-queryData="' + splitTypeName + '">' + (this.guid ? entityValue : "") + '</select>'; '" data-type="' + value.typeName +
'" data-attribute="' + isAttribute +
'" data-relation="' + isRelation +
'" data-key="' + value.name +
'" data-id="entitySelectData" data-queryData="' + splitTypeName + '">' + (this.guid ? entityValue : "") + '</select>';
} }
}, },
getTextArea: function(value, entityValue, structType) { getTextArea: function(object) {
var setValue = entityValue var value = object.value,
setValue = object.entityValue,
isAttribute = object.isAttribute,
isRelation = object.isRelation,
structType = object.structType;
try { try {
if (structType && entityValue && entityValue.length) { if (structType && entityValue && entityValue.length) {
var parseValue = JSON.parse(entityValue); var parseValue = JSON.parse(entityValue);
...@@ -436,20 +547,31 @@ define(['require', ...@@ -436,20 +547,31 @@ define(['require',
return '<textarea class="form-control entityInputBox ' + (value.isOptional === true ? "false" : "true") + '"' + return '<textarea class="form-control entityInputBox ' + (value.isOptional === true ? "false" : "true") + '"' +
' data-type="' + value.typeName + '"' + ' data-type="' + value.typeName + '"' +
' data-key="' + value.name + '"' + ' data-key="' + value.name + '"' +
' data-attribute="' + isAttribute + '"' +
' data-relation="' + isRelation + '"' +
' placeholder="' + value.name + '"' + ' placeholder="' + value.name + '"' +
' data-id="entityInput">' + setValue + '</textarea>'; ' data-id="entityInput">' + setValue + '</textarea>';
}, },
getInput: function(value, entityValue) { getInput: function(object) {
var value = object.value,
entityValue = object.entityValue,
isAttribute = object.isAttribute,
isRelation = object.isRelation;
return '<input class="form-control entityInputBox ' + (value.isOptional === true ? "false" : "true") + '"' + return '<input class="form-control entityInputBox ' + (value.isOptional === true ? "false" : "true") + '"' +
' data-type="' + value.typeName + '"' + ' data-type="' + value.typeName + '"' +
' value="' + entityValue + '"' + ' value="' + entityValue + '"' +
' data-key="' + value.name + '"' + ' data-key="' + value.name + '"' +
' data-attribute="' + isAttribute + '"' +
' data-relation="' + isRelation + '"' +
' placeholder="' + value.name + '"' + ' placeholder="' + value.name + '"' +
' data-id="entityInput">'; ' data-id="entityInput">';
}, },
getElement: function(value) { getElement: function(object) {
var typeName = value.typeName, var value = object.value,
isAttribute = object.isAttribute,
isRelation = object.isRelation,
typeName = value.typeName,
entityValue = ""; entityValue = "";
if (this.guid) { if (this.guid) {
var dataValue = this.entityData.get("entity").attributes[value.name]; var dataValue = this.entityData.get("entity").attributes[value.name];
...@@ -469,15 +591,38 @@ define(['require', ...@@ -469,15 +591,38 @@ define(['require',
} }
} }
if ((typeName && this.entityDefCollection.fullCollection.find({ name: typeName })) || typeName === "boolean" || typeName.indexOf("array") > -1) { if ((typeName && this.entityDefCollection.fullCollection.find({ name: typeName })) || typeName === "boolean" || typeName.indexOf("array") > -1) {
return this.getSelect(value, entityValue); return this.getSelect({
"value": value,
"entityValue": entityValue,
"isAttribute": isAttribute,
"isRelation": isRelation
});
} else if (typeName.indexOf("map") > -1) { } else if (typeName.indexOf("map") > -1) {
return this.getTextArea(value, entityValue); return this.getTextArea({
"value": value,
"entityValue": entityValue,
"isAttribute": isAttribute,
"isRelation": isRelation,
"structType": false
});
} else { } else {
var typeNameCategory = this.typeHeaders.fullCollection.findWhere({ name: typeName }); var typeNameCategory = this.typeHeaders.fullCollection.findWhere({ name: typeName });
if (typeNameCategory && typeNameCategory.get('category') === 'STRUCT') { if (typeNameCategory && typeNameCategory.get('category') === 'STRUCT') {
return this.getTextArea(value, entityValue, true); return this.getTextArea({
"value": value,
"entityValue": entityValue,
"isAttribute": isAttribute,
"isRelation": isRelation,
"structType": true
});
} else { } else {
return this.getInput(value, entityValue); return this.getInput({
"value": value,
"entityValue": entityValue,
"isAttribute": isAttribute,
"isRelation": isRelation,
});
} }
} }
}, },
...@@ -485,8 +630,9 @@ define(['require', ...@@ -485,8 +630,9 @@ define(['require',
var that = this; var that = this;
this.showLoader(); this.showLoader();
this.parentEntity = this.ui.entityList.val(); this.parentEntity = this.ui.entityList.val();
var entity = {}; var entityAttribute = {},
var referredEntities = {}; referredEntities = {},
relationshipAttribute = {};
var extractValue = function(value, typeName) { var extractValue = function(value, typeName) {
if (!value) { if (!value) {
return value; return value;
...@@ -503,7 +649,8 @@ define(['require', ...@@ -503,7 +649,8 @@ define(['require',
} }
try { try {
this.ui.entityInputData.find("input,select,textarea").each(function() { this.ui.entityInputData.find("input,select,textarea").each(function() {
var value = $(this).val(); var value = $(this).val(),
el = this;
if ($(this).val() && $(this).val().trim) { if ($(this).val() && $(this).val().trim) {
value = $(this).val().trim(); value = $(this).val().trim();
} }
...@@ -534,19 +681,21 @@ define(['require', ...@@ -534,19 +681,21 @@ define(['require',
var dataTypeEnitity = $(this).data('type'), var dataTypeEnitity = $(this).data('type'),
datakeyEntity = $(this).data('key'), datakeyEntity = $(this).data('key'),
typeName = $(this).data('querydata'), typeName = $(this).data('querydata'),
typeNameCategory = that.typeHeaders.fullCollection.findWhere({ name: dataTypeEnitity }); attribute = $(this).data('attribute') == 'undefined' ? false : true,
relation = $(this).data('relation') == 'undefined' ? false : true,
typeNameCategory = that.typeHeaders.fullCollection.findWhere({ name: dataTypeEnitity }),
val = null;
// Extract Data // Extract Data
if (dataTypeEnitity && datakeyEntity) { if (dataTypeEnitity && datakeyEntity) {
if (that.entityDefCollection.fullCollection.find({ name: dataTypeEnitity })) { if (that.entityDefCollection.fullCollection.find({ name: dataTypeEnitity })) {
entity[datakeyEntity] = extractValue(value, typeName); val = extractValue(value, typeName);
} else if (dataTypeEnitity === 'date' || dataTypeEnitity === 'time') { } else if (dataTypeEnitity === 'date' || dataTypeEnitity === 'time') {
entity[datakeyEntity] = Date.parse(value); val = Date.parse(value);
} else if (dataTypeEnitity.indexOf("map") > -1 || (typeNameCategory && typeNameCategory.get('category') === 'STRUCT')) { } else if (dataTypeEnitity.indexOf("map") > -1 || (typeNameCategory && typeNameCategory.get('category') === 'STRUCT')) {
try { try {
if (value && value.length) { if (value && value.length) {
parseData = JSON.parse(value); parseData = JSON.parse(value);
entity[datakeyEntity] = parseData; val = parseData;
} }
} catch (err) { } catch (err) {
$(this).addClass('errorClass'); $(this).addClass('errorClass');
...@@ -554,24 +703,44 @@ define(['require', ...@@ -554,24 +703,44 @@ define(['require',
return; return;
} }
} else if (dataTypeEnitity.indexOf("array") > -1 && dataTypeEnitity.indexOf("string") === -1) { } else if (dataTypeEnitity.indexOf("array") > -1 && dataTypeEnitity.indexOf("string") === -1) {
entity[datakeyEntity] = extractValue(value, typeName); val = extractValue(value, typeName);
} else { } else {
if (_.isString(value)) { if (_.isString(value)) {
if (value.length) { if (value.length) {
entity[datakeyEntity] = value; val = value;
} else { } else {
entity[datakeyEntity] = null; val = null;
} }
} else { } else {
entity[datakeyEntity] = value; val = value;
} }
} }
if (attribute) {
entityAttribute[datakeyEntity] = val;
} else if (relation) {
relationshipAttribute[datakeyEntity] = val;
}
} else {
var dataRelEntity = $(this).data('forKey');
if (dataRelEntity && relationshipAttribute[dataRelEntity]) {
if (_.isArray(relationshipAttribute[dataRelEntity])) {
_.each(relationshipAttribute[dataRelEntity], function(obj) {
if (obj) {
obj["relationshipType"] = $(el).val();
}
});
} else {
relationshipAttribute[dataRelEntity]["relationshipType"] = $(this).val();
}
}
} }
}); });
var entityJson = { var entityJson = {
"entity": { "entity": {
"typeName": (this.guid ? this.entityData.get("entity").typeName : this.parentEntity), "typeName": (this.guid ? this.entityData.get("entity").typeName : this.parentEntity),
"attributes": entity, "attributes": entityAttribute,
"relationshipAttributes": relationshipAttribute,
"guid": (this.guid ? this.guid : -1) "guid": (this.guid ? this.guid : -1)
}, },
"referredEntities": referredEntities "referredEntities": referredEntities
...@@ -628,17 +797,16 @@ define(['require', ...@@ -628,17 +797,16 @@ define(['require',
queryData = $(this).data("querydata"), queryData = $(this).data("querydata"),
skip = $(this).data('skip'), skip = $(this).data('skip'),
placeholderName = "Select a " + typeData + " from the dropdown list"; placeholderName = "Select a " + typeData + " from the dropdown list";
$this.attr("multiple", ($this.data('type').indexOf("array") === -1 ? false : true)); $this.attr("multiple", ($this.data('type').indexOf("array") === -1 ? false : true));
// Select Value. // Select Value.
if (that.guid) { if (that.guid) {
var dataValue = that.entityData.get("entity").attributes[keyData], var dataValue = that.entityData.get("entity").attributes[keyData],
entities = that.entityData.get("entity").attributes, entities = that.entityData.get("entity").attributes,
relationshipType = that.entityData.get("entity").relationshipAttributes[keyData],
referredEntities = that.entityData.get("referredEntities"), referredEntities = that.entityData.get("referredEntities"),
selectedValue = [], selectedValue = [],
select2Options = []; select2Options = [];
if (dataValue) { if (dataValue) {
if (_.isObject(dataValue) && !_.isArray(dataValue)) { if (_.isObject(dataValue) && !_.isArray(dataValue)) {
dataValue = [dataValue]; dataValue = [dataValue];
...@@ -653,6 +821,12 @@ define(['require', ...@@ -653,6 +821,12 @@ define(['require',
} }
} }
}); });
if (!_.isUndefined(relationshipType)) {
if (relationshipType && relationshipType.relationshipAttributes && relationshipType.relationshipAttributes.typeName) {
that.$("select[data-for-key=" + keyData + "]").val(relationshipType.relationshipAttributes.typeName).trigger("change");
}
}
} }
// Array of string. // Array of string.
......
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