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 67 additions and 23 deletions
dashboardv2/public/css/scss/form.scss
...@@ -54,9 +54,13 @@ ...@@ -54,9 +54,13 @@
.form-control { .form-control {
//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_white_lilac_approx;
border: 1px $color_mystic_approx solid; border: 1px $color_mystic_approx solid;
&[disabled] {
background-color: $color_gallery_approx;
}
&: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)
......
dashboardv2/public/css/scss/override.scss
...@@ -210,7 +210,19 @@ td { ...@@ -210,7 +210,19 @@ td {
} }
.select2-container--default { .select2-container--default {
&.select2-container--disabled {
.select2-selection--multiple { .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; background-color: $color_white_lilac_approx !important;
border: 1px $color_mystic_approx solid !important; border: 1px $color_mystic_approx solid !important;
......
dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
--> -->
<form name="entityDefinitionform"> <form name="entityDefinitionform">
<div class="clearfix"> <div class="clearfix">
<div class="col-sm-12 form-group"> <div class="col-sm-12 form-group" data-id="entitySelectionBox">
<div class="row"> <div class="row">
{{#if guid}} {{#if guid}}
<div class="col-sm-8"> <div class="col-sm-8">
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </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> </div>
</form> </form>
<div class="fontLoader-relative entityLoader" style="display:none"> <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', ...@@ -602,8 +602,9 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
var mainData = options.data, var mainData = options.data,
collection = options.collection, collection = options.collection,
attrMerge = options.attrMerge, attrMerge = options.attrMerge,
mergeRelationAttributes = options.mergeRelationAttributes || false, seperateRelatioshipAttr = options.seperateRelatioshipAttr || false,
seperateRelatioshipAttr = options.seperateRelatioshipAttr || false; mergeRelationAttributes = options.mergeRelationAttributes || (seperateRelatioshipAttr ? false : true);
if (mergeRelationAttributes && seperateRelatioshipAttr) { if (mergeRelationAttributes && seperateRelatioshipAttr) {
throw "Both mergeRelationAttributes & seperateRelatioshipAttr cannot be true!" throw "Both mergeRelationAttributes & seperateRelatioshipAttr cannot be true!"
} }
...@@ -681,9 +682,9 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -681,9 +682,9 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
} else { } else {
attributeDefs = _.uniq(_.sortBy(attributeDefs, 'name'), true, function(obj) { attributeDefs = _.uniq(_.sortBy(attributeDefs, 'name'), true, function(obj) {
if (obj.relationshipTypeName) { if (obj.relationshipTypeName) {
(obj.name + obj.relationshipTypeName) return (obj.name + obj.relationshipTypeName)
} else { } else {
(obj.name) return (obj.name)
} }
}); });
} }
......
dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
...@@ -56,7 +56,9 @@ define(['require', ...@@ -56,7 +56,9 @@ define(['require',
entityInputData: "[data-id='entityInputData']", entityInputData: "[data-id='entityInputData']",
toggleRequired: 'input[name="toggleRequired"]', toggleRequired: 'input[name="toggleRequired"]',
assetName: "[data-id='assetName']", assetName: "[data-id='assetName']",
entityInput: "[data-id='entityInput']" entityInput: "[data-id='entityInput']",
entitySelectionBox: "[data-id='entitySelectionBox']",
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -149,22 +151,18 @@ define(['require', ...@@ -149,22 +151,18 @@ define(['require',
if (this.value !== "") { if (this.value !== "") {
if ($(this).data('select2')) { if ($(this).data('select2')) {
$(this).data('select2').$container.find('.select2-selection').removeClass("errorClass"); $(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 { } else {
$(this).removeClass('errorClass'); $(this).removeClass('errorClass');
}
if (that.ui.entityInputData.find('.errorClass').length === 0) { if (that.ui.entityInputData.find('.errorClass').length === 0) {
that.modal.$el.find('button.ok').prop("disabled", false); that.modal.$el.find('button.ok').prop("disabled", false);
} }
}
} else { } else {
that.modal.$el.find('button.ok').prop("disabled", true);
if ($(this).data('select2')) { if ($(this).data('select2')) {
$(this).data('select2').$container.find('.select2-selection').addClass("errorClass"); $(this).data('select2').$container.find('.select2-selection').addClass("errorClass");
that.modal.$el.find('button.ok').prop("disabled", true);
} else { } else {
$(this).addClass('errorClass'); $(this).addClass('errorClass');
that.modal.$el.find('button.ok').prop("disabled", true);
} }
} }
}); });
...@@ -370,6 +368,7 @@ define(['require', ...@@ -370,6 +368,7 @@ define(['require',
return; return;
} }
var elFound = that.ui.entityInputData.find('[data-key="' + key + '"]'); var elFound = that.ui.entityInputData.find('[data-key="' + key + '"]');
elFound.prop('disabled', true);
elFound.parent().prepend(visitedAttr[key]); elFound.parent().prepend(visitedAttr[key]);
}); });
} else { } else {
...@@ -378,7 +377,21 @@ define(['require', ...@@ -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; return false;
}, },
subAttributeData: function(data) { subAttributeData: function(data) {
...@@ -628,7 +641,9 @@ define(['require', ...@@ -628,7 +641,9 @@ define(['require',
}, },
okButton: function() { okButton: function() {
var that = this; var that = this;
this.showLoader(); this.showLoader({
editVisiblityOfEntitySelectionBox: true
});
this.parentEntity = this.ui.entityList.val(); this.parentEntity = this.ui.entityList.val();
var entityAttribute = {}, var entityAttribute = {},
referredEntities = {}, referredEntities = {},
...@@ -751,7 +766,7 @@ define(['require', ...@@ -751,7 +766,7 @@ define(['require',
success: function(model, response) { success: function(model, response) {
that.modal.close(); that.modal.close();
Utils.notifySuccess({ Utils.notifySuccess({
content: "entity " + Messages[that.guid ? 'editSuccessMessage' : 'addSuccessMessage'] content: "Entity " + Messages[that.guid ? 'editSuccessMessage' : 'addSuccessMessage']
}); });
if (that.guid && that.callback) { if (that.guid && that.callback) {
that.callback(); that.callback();
...@@ -766,7 +781,9 @@ define(['require', ...@@ -766,7 +781,9 @@ define(['require',
} }
}, },
complete: function() { complete: function() {
that.hideLoader(); that.hideLoader({
editVisiblityOfEntitySelectionBox: true
});
} }
}); });
...@@ -774,16 +791,26 @@ define(['require', ...@@ -774,16 +791,26 @@ define(['require',
Utils.notifyError({ Utils.notifyError({
content: e.message content: e.message
}); });
that.hideLoader(); that.hideLoader({
editVisiblityOfEntitySelectionBox: true
});
} }
}, },
showLoader: function() { showLoader: function(options) {
this.$('.entityLoader').show(); var editVisiblityOfEntitySelectionBox = options && options.editVisiblityOfEntitySelectionBox;
this.$('.entityLoader').addClass('show');
this.$('.entityInputData').hide(); this.$('.entityInputData').hide();
if (this.guid || editVisiblityOfEntitySelectionBox) {
this.ui.entitySelectionBox.hide();
}
}, },
hideLoader: function() { hideLoader: function(options) {
this.$('.entityLoader').hide(); var editVisiblityOfEntitySelectionBox = options && options.editVisiblityOfEntitySelectionBox
this.$('.entityLoader').removeClass('show');
this.$('.entityInputData').show(); this.$('.entityInputData').show();
if (this.guid || editVisiblityOfEntitySelectionBox) {
this.ui.entitySelectionBox.show();
}
// To enable scroll after selecting value from select2. // To enable scroll after selecting value from select2.
this.ui.entityList.select2('open'); this.ui.entityList.select2('open');
this.ui.entityList.select2('close'); 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