This is an automated email from the ASF dual-hosted git repository. madhan pushed a commit to branch branch-1.0 in repository https://gitbox.apache.org/repos/asf/atlas.git
commit 84af0cbb0cd927709415de0572a24d2be239dbc3 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> (cherry picked from commit 011e854660a08a6eed014d4fc5b56f55d8ca6cdd) --- 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 afbad1f..32015e6 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/dashboardv2/public/js/utils/Utils.js @@ -595,8 +595,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!" } @@ -674,9 +675,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');