This is an automated email from the ASF dual-hosted git repository.
madhan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
commit 011e854660a08a6eed014d4fc5b56f55d8ca6cdd
Author: kevalbhatt <kbh...@apache.org>
AuthorDate: Mon Apr 15 23:10:15 2019 +0530
ATLAS-3137 : UI : Create entity add element validation and design
improvement
Signed-off-by: Madhan Neethiraj <mad...@apache.org>
---
dashboardv2/public/css/scss/form.scss | 6 ++-
dashboardv2/public/css/scss/override.scss | 12 +++++
.../entity/CreateEntityLayoutView_tmpl.html | 4 +-
dashboardv2/public/js/utils/Utils.js | 9 ++--
.../js/views/entity/CreateEntityLayoutView.js | 63 +++++++++++++++-------
5 files changed, 69 insertions(+), 25 deletions(-)
diff --git a/dashboardv2/public/css/scss/form.scss
b/dashboardv2/public/css/scss/form.scss
index 3e63e8b..388713e 100644
--- a/dashboardv2/public/css/scss/form.scss
+++ b/dashboardv2/public/css/scss/form.scss
@@ -54,9 +54,13 @@
.form-control {
//Instead of the line below you could use @include
border-radius($radius, $vertical-radius)
- background-color: $color_mystic_approx;
+ background-color: $color_white_lilac_approx;
border: 1px $color_mystic_approx solid;
+ &[disabled] {
+ background-color: $color_gallery_approx;
+ }
+
&:focus {
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)
diff --git a/dashboardv2/public/css/scss/override.scss
b/dashboardv2/public/css/scss/override.scss
index f388c0b..ea5b6a7 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -210,7 +210,19 @@ td {
}
.select2-container--default {
+ &.select2-container--disabled {
+ .select2-selection--multiple {
+ background-color: $color_gallery_approx !important;
+ cursor: not-allowed;
+
+ input.select2-search__field {
+ cursor: not-allowed;
+ }
+ }
+ }
+
.select2-selection--multiple {
+
background-color: $color_white_lilac_approx !important;
border: 1px $color_mystic_approx solid !important;
diff --git
a/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
b/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
index 65ca406..5645d51 100644
--- a/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
@@ -16,7 +16,7 @@
-->
<form name="entityDefinitionform">
<div class="clearfix">
- <div class="col-sm-12 form-group">
+ <div class="col-sm-12 form-group" data-id="entitySelectionBox">
<div class="row">
{{#if guid}}
<div class="col-sm-8">
@@ -37,7 +37,7 @@
</div>
</div>
</div>
- <div class="col-sm-12 entityInputData create-entity-form"
data-id="entityInputData"></div>
+ <div class="col-sm-12 entityInputData create-entity-form form-group"
data-id="entityInputData"></div>
</div>
</form>
<div class="fontLoader-relative entityLoader" style="display:none">
diff --git a/dashboardv2/public/js/utils/Utils.js
b/dashboardv2/public/js/utils/Utils.js
index ae71602..8f33c2e 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -602,8 +602,9 @@ define(['require', 'utils/Globals', 'pnotify',
'utils/Messages', 'utils/Enums',
var mainData = options.data,
collection = options.collection,
attrMerge = options.attrMerge,
- mergeRelationAttributes = options.mergeRelationAttributes || false,
- seperateRelatioshipAttr = options.seperateRelatioshipAttr || false;
+ seperateRelatioshipAttr = options.seperateRelatioshipAttr || false,
+ mergeRelationAttributes = options.mergeRelationAttributes ||
(seperateRelatioshipAttr ? false : true);
+
if (mergeRelationAttributes && seperateRelatioshipAttr) {
throw "Both mergeRelationAttributes & seperateRelatioshipAttr
cannot be true!"
}
@@ -681,9 +682,9 @@ define(['require', 'utils/Globals', 'pnotify',
'utils/Messages', 'utils/Enums',
} else {
attributeDefs = _.uniq(_.sortBy(attributeDefs, 'name'), true,
function(obj) {
if (obj.relationshipTypeName) {
- (obj.name + obj.relationshipTypeName)
+ return (obj.name + obj.relationshipTypeName)
} else {
- (obj.name)
+ return (obj.name)
}
});
}
diff --git a/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
b/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
index a7bef78..22ce48c 100644
--- a/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
+++ b/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
@@ -56,7 +56,9 @@ define(['require',
entityInputData: "[data-id='entityInputData']",
toggleRequired: 'input[name="toggleRequired"]',
assetName: "[data-id='assetName']",
- entityInput: "[data-id='entityInput']"
+ entityInput: "[data-id='entityInput']",
+ entitySelectionBox: "[data-id='entitySelectionBox']",
+
},
/** ui events hash */
events: function() {
@@ -149,22 +151,18 @@ define(['require',
if (this.value !== "") {
if ($(this).data('select2')) {
$(this).data('select2').$container.find('.select2-selection').removeClass("errorClass");
- if
(that.ui.entityInputData.find('.errorClass').length === 0) {
-
that.modal.$el.find('button.ok').prop("disabled", false);
- }
} else {
$(this).removeClass('errorClass');
- if
(that.ui.entityInputData.find('.errorClass').length === 0) {
-
that.modal.$el.find('button.ok').prop("disabled", false);
- }
+ }
+ if (that.ui.entityInputData.find('.errorClass').length
=== 0) {
+ that.modal.$el.find('button.ok').prop("disabled",
false);
}
} else {
+ that.modal.$el.find('button.ok').prop("disabled",
true);
if ($(this).data('select2')) {
$(this).data('select2').$container.find('.select2-selection').addClass("errorClass");
- that.modal.$el.find('button.ok').prop("disabled",
true);
} else {
$(this).addClass('errorClass');
- that.modal.$el.find('button.ok').prop("disabled",
true);
}
}
});
@@ -370,6 +368,7 @@ define(['require',
return;
}
var elFound =
that.ui.entityInputData.find('[data-key="' + key + '"]');
+ elFound.prop('disabled', true);
elFound.parent().prepend(visitedAttr[key]);
});
} else {
@@ -378,7 +377,21 @@ define(['require',
}
}
-
that.ui.entityInputData.find("select[data-for-key]").select2({})
+
that.ui.entityInputData.find("select[data-for-key]").select2({}).on('change',
function() {
+ var forKey = $(this).data('forKey'),
+ forKeyEl = null;
+ if (forKey && forKey.length) {
+ forKeyEl = that.ui.entityInputData.find('[data-key="'
+ forKey + '"]');
+ if (forKeyEl) {
+ if (this.value == "") {
+ forKeyEl.val(null).trigger('change');
+ forKeyEl.prop("disabled", true);
+ } else {
+ forKeyEl.prop("disabled", false);
+ }
+ }
+ }
+ });
return false;
},
subAttributeData: function(data) {
@@ -628,7 +641,9 @@ define(['require',
},
okButton: function() {
var that = this;
- this.showLoader();
+ this.showLoader({
+ editVisiblityOfEntitySelectionBox: true
+ });
this.parentEntity = this.ui.entityList.val();
var entityAttribute = {},
referredEntities = {},
@@ -751,7 +766,7 @@ define(['require',
success: function(model, response) {
that.modal.close();
Utils.notifySuccess({
- content: "entity " + Messages[that.guid ?
'editSuccessMessage' : 'addSuccessMessage']
+ content: "Entity " + Messages[that.guid ?
'editSuccessMessage' : 'addSuccessMessage']
});
if (that.guid && that.callback) {
that.callback();
@@ -766,7 +781,9 @@ define(['require',
}
},
complete: function() {
- that.hideLoader();
+ that.hideLoader({
+ editVisiblityOfEntitySelectionBox: true
+ });
}
});
@@ -774,16 +791,26 @@ define(['require',
Utils.notifyError({
content: e.message
});
- that.hideLoader();
+ that.hideLoader({
+ editVisiblityOfEntitySelectionBox: true
+ });
}
},
- showLoader: function() {
- this.$('.entityLoader').show();
+ showLoader: function(options) {
+ var editVisiblityOfEntitySelectionBox = options &&
options.editVisiblityOfEntitySelectionBox;
+ this.$('.entityLoader').addClass('show');
this.$('.entityInputData').hide();
+ if (this.guid || editVisiblityOfEntitySelectionBox) {
+ this.ui.entitySelectionBox.hide();
+ }
},
- hideLoader: function() {
- this.$('.entityLoader').hide();
+ hideLoader: function(options) {
+ var editVisiblityOfEntitySelectionBox = options &&
options.editVisiblityOfEntitySelectionBox
+ this.$('.entityLoader').removeClass('show');
this.$('.entityInputData').show();
+ if (this.guid || editVisiblityOfEntitySelectionBox) {
+ this.ui.entitySelectionBox.show();
+ }
// To enable scroll after selecting value from select2.
this.ui.entityList.select2('open');
this.ui.entityList.select2('close');
