Skip to content

A
atlas
Commit 011e8546 by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-3137 : UI : Create entity add element validation and design improvement

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 2af5eede
Showing with 69 additions and 25 deletions
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)
......
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;
......
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">
......
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)
}
});
}
......
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');
......
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