This is an automated email from the ASF dual-hosted git repository. kbhatt pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/atlas.git
commit 2ac034253386ca8d173f67317505076783cedbf7 Author: kevalbhatt <[email protected]> AuthorDate: Wed Apr 1 14:41:24 2020 +0530 ATLAS-3711 : UI: Classification/Term modal should close after create/update/delete response --- dashboardv2/public/css/scss/common.scss | 49 ++++++++-------------- dashboardv2/public/js/utils/CommonViewFunction.js | 26 ++++++++++-- dashboardv2/public/js/utils/Utils.js | 24 ++++++++--- .../js/views/glossary/AssignTermLayoutView.js | 5 ++- dashboardv2/public/js/views/tag/AddTagModalView.js | 4 ++ dashboardv3/public/css/scss/common.scss | 49 ++++++++-------------- dashboardv3/public/js/utils/CommonViewFunction.js | 26 ++++++++++-- dashboardv3/public/js/utils/Utils.js | 24 ++++++++--- .../js/views/glossary/AssignTermLayoutView.js | 5 ++- dashboardv3/public/js/views/tag/AddTagModalView.js | 4 ++ 10 files changed, 136 insertions(+), 80 deletions(-) diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss index c79a96c..718ac95 100644 --- a/dashboardv2/public/css/scss/common.scss +++ b/dashboardv2/public/css/scss/common.scss @@ -274,36 +274,23 @@ pre { float: left; } -.button-loader:after { - content: "\f021"; - position: absolute; - left: -6px; - bottom: 4px; - font-family: FontAwesome; - background: transparent; - height: 34px; - width: 38px; - line-height: 34px; - text-align: center; - animation: spin 1000ms infinite linear; -} - -@-webkit-keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); - } -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); +.button-loader { + position: relative; + padding-left: 22px !important; + + &:after { + content: "\f021"; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + font-family: FontAwesome; + background: transparent; + height: 100%; + width: 26px; + font-size: 11px; + animation: spin 1000ms infinite linear; } } \ No newline at end of file diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js index 60d6527..ba10e11 100644 --- a/dashboardv2/public/js/utils/CommonViewFunction.js +++ b/dashboardv2/public/js/utils/CommonViewFunction.js @@ -24,18 +24,25 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum require(['models/VTag'], function(VTag) { if (options && options.guid && options.tagName) { var tagModel = new VTag(), + noticeRef = null, notifyObj = { modal: true, + okCloses: false, + okShowLoader: true, text: options.msg, title: options.titleMessage, okText: options.okText, - ok: function(argument) { + ok: function(notice) { + noticeRef = notice; if (options.showLoader) { options.showLoader(); } tagModel.deleteAssociation(options.guid, options.tagName, options.associatedGuid, { defaultErrorMessage: options.tagName + Messages.deleteErrorMessage, success: function(data) { + if (noticeRef) { + noticeRef.remove(); + } Utils.notifySuccess({ content: "Classification " + options.tagName + Messages.getAbbreviationMsg(false, 'removeSuccessMessage') }); @@ -48,6 +55,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum }, cust_error: function(model, response) { + if (noticeRef) { + noticeRef.hideButtonLoader(); + } if (options.hideLoader) { options.hideLoader(); } @@ -789,8 +799,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum collection = options.collection, model = options.model, newModel = new options.collection.model(), + noticeRef = null, ajaxOptions = { success: function(rModel, response) { + if (noticeRef) { + noticeRef.remove(); + } Utils.notifySuccess({ content: ((isCategoryView || isEntityView ? "Term" : "Category") + " association is removed successfully") }); @@ -799,6 +813,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum } }, cust_error: function() { + if (noticeRef) { + noticeRef.hideButtonLoader(); + } if (options.hideLoader) { options.hideLoader(); } @@ -806,10 +823,13 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum }, notifyObj = { modal: true, + okCloses: false, + okShowLoader: true, text: options.msg, title: options.titleMessage, okText: options.buttonText, - ok: function(argument) { + ok: function(notice) { + noticeRef = notice; if (options.showLoader) { options.showLoader(); } @@ -832,7 +852,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum })); } }, - cancel: function(argument) {} + cancel: function() {} }; Utils.notifyConfirm(notifyObj); } diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js index f4c55da..0c03ba6 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/dashboardv2/public/js/utils/Utils.js @@ -184,7 +184,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', confirm: true, buttons: [{ text: options.cancelText || 'Cancel', - addClass: 'btn-action btn-md', + addClass: 'btn-action btn-md cancel', click: function(notice) { options.cancel(notice); notice.remove(); @@ -192,10 +192,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', }, { text: options.okText || 'Ok', - addClass: 'btn-atlas btn-md', + addClass: 'btn-atlas btn-md ok', click: function(notice) { - options.ok(notice); - notice.remove(); + if (options.ok) { + options.ok($.extend({}, notice, { + hideButtonLoader: function() { + notice.container.find("button.ok").hideButtonLoader(); + }, + showButtonLoader: function() { + notice.container.find("button.ok").showButtonLoader(); + } + })); + } + if (options.okShowLoader) { + notice.container.find("button.ok").showButtonLoader(); + } + if (options.okCloses !== false) { + notice.remove(); + } } } ] @@ -872,7 +886,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', } } $.fn.showButtonLoader = function() { - $(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader'); + $(this).attr("disabled", "true").addClass('button-loader'); } $.fn.hideButtonLoader = function() { $(this).removeClass('button-loader').removeAttr("disabled"); diff --git a/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js b/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js index e0ebeed..e9da313 100644 --- a/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js +++ b/dashboardv2/public/js/views/glossary/AssignTermLayoutView.js @@ -84,7 +84,8 @@ define(['require', "okText": "Assign", "allowCancel": true, "showFooter": this.isAttributeRelationView ? false : true, - "mainClass": "wizard-modal" + "mainClass": "wizard-modal", + "okCloses": false }); this.modal.open(); this.modal.$el.find('button.ok').attr("disabled", true); @@ -145,6 +146,7 @@ define(['require', } }, assignTerm: function() { + this.modal.$el.find('button.ok').showButtonLoader(); this.assignTermError = false; var that = this, data = [], @@ -163,6 +165,7 @@ define(['require', } }, cust_error: function() { + that.modal.$el.find('button.ok').hideButtonLoader(); that.assignTermError = true; } }, diff --git a/dashboardv2/public/js/views/tag/AddTagModalView.js b/dashboardv2/public/js/views/tag/AddTagModalView.js index 214de07..5626edc 100644 --- a/dashboardv2/public/js/views/tag/AddTagModalView.js +++ b/dashboardv2/public/js/views/tag/AddTagModalView.js @@ -125,6 +125,7 @@ define(['require', cancelText: "Cancel", mainClass: 'modal-lg', allowCancel: true, + okCloses: false }; if (this.tagModel) { modalObj.title = 'Edit Classification'; @@ -134,6 +135,7 @@ define(['require', this.modal.open(); this.modal.$el.find('button.ok').attr("disabled", true); this.on('ok', function() { + that.modal.$el.find('button.ok').showButtonLoader(); var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(), tagAttributes = {}, tagAttributeNames = this.$(".attrName"), @@ -453,8 +455,10 @@ define(['require', if (that.callback) { that.callback(); } + that.modal.close(); }, cust_error: function(model, response) { + that.modal.$el.find('button.ok').hideButtonLoader(); if (that.hideLoader) { that.hideLoader(); } diff --git a/dashboardv3/public/css/scss/common.scss b/dashboardv3/public/css/scss/common.scss index 053c1cf..69fcfc1 100644 --- a/dashboardv3/public/css/scss/common.scss +++ b/dashboardv3/public/css/scss/common.scss @@ -287,36 +287,23 @@ pre { } -.button-loader:after { - content: "\f021"; - position: absolute; - left: -6px; - bottom: 4px; - font-family: FontAwesome; - background: transparent; - height: 34px; - width: 38px; - line-height: 34px; - text-align: center; - animation: spin 1000ms infinite linear; -} - -@-webkit-keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); - } -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); +.button-loader { + position: relative; + padding-left: 22px !important; + + &:after { + content: "\f021"; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + font-family: FontAwesome; + background: transparent; + height: 100%; + width: 26px; + font-size: 11px; + animation: spin 1000ms infinite linear; } } \ No newline at end of file diff --git a/dashboardv3/public/js/utils/CommonViewFunction.js b/dashboardv3/public/js/utils/CommonViewFunction.js index ea50aa6..4a57c83 100644 --- a/dashboardv3/public/js/utils/CommonViewFunction.js +++ b/dashboardv3/public/js/utils/CommonViewFunction.js @@ -24,18 +24,25 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum require(['models/VTag'], function(VTag) { if (options && options.guid && options.tagName) { var tagModel = new VTag(), + noticeRef = null, notifyObj = { modal: true, + okCloses: false, + okShowLoader: true, text: options.msg, title: options.titleMessage, okText: options.okText, - ok: function(argument) { + ok: function(notice) { + noticeRef = notice; if (options.showLoader) { options.showLoader(); } tagModel.deleteAssociation(options.guid, options.tagName, options.associatedGuid, { defaultErrorMessage: options.tagName + Messages.deleteErrorMessage, success: function(data) { + if (noticeRef) { + noticeRef.remove(); + } Utils.notifySuccess({ content: "Classification " + options.tagName + Messages.getAbbreviationMsg(false, 'removeSuccessMessage') }); @@ -48,6 +55,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum }, cust_error: function(model, response) { + if (noticeRef) { + noticeRef.hideButtonLoader(); + } if (options.hideLoader) { options.hideLoader(); } @@ -809,8 +819,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum collection = options.collection, model = options.model, newModel = new options.collection.model(), + noticeRef = null, ajaxOptions = { success: function(rModel, response) { + if (noticeRef) { + noticeRef.remove(); + } Utils.notifySuccess({ content: ((isCategoryView || isEntityView ? "Term" : "Category") + " association is removed successfully") }); @@ -819,6 +833,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum } }, cust_error: function() { + if (noticeRef) { + noticeRef.hideButtonLoader(); + } if (options.hideLoader) { options.hideLoader(); } @@ -826,10 +843,13 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum }, notifyObj = { modal: true, + okCloses: false, + okShowLoader: true, text: options.msg, title: options.titleMessage, okText: options.buttonText, - ok: function(argument) { + ok: function(notice) { + noticeRef = notice; if (options.showLoader) { options.showLoader(); } @@ -852,7 +872,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum })); } }, - cancel: function(argument) {} + cancel: function() {} }; Utils.notifyConfirm(notifyObj); } diff --git a/dashboardv3/public/js/utils/Utils.js b/dashboardv3/public/js/utils/Utils.js index 3b99446..97fa40b 100644 --- a/dashboardv3/public/js/utils/Utils.js +++ b/dashboardv3/public/js/utils/Utils.js @@ -190,7 +190,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', confirm: true, buttons: [{ text: options.cancelText || 'Cancel', - addClass: 'btn-action btn-md', + addClass: 'btn-action btn-md cancel', click: function(notice) { options.cancel(notice); notice.remove(); @@ -198,10 +198,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', }, { text: options.okText || 'Ok', - addClass: 'btn-atlas btn-md', + addClass: 'btn-atlas btn-md ok', click: function(notice) { - options.ok(notice); - notice.remove(); + if (options.ok) { + options.ok($.extend({}, notice, { + hideButtonLoader: function() { + notice.container.find("button.ok").hideButtonLoader(); + }, + showButtonLoader: function() { + notice.container.find("button.ok").showButtonLoader(); + } + })); + } + if (options.okShowLoader) { + notice.container.find("button.ok").showButtonLoader(); + } + if (options.okCloses !== false) { + notice.remove(); + } } } ] @@ -920,7 +934,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', } $.fn.showButtonLoader = function() { - $(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader'); + $(this).attr("disabled", "true").addClass('button-loader'); } $.fn.hideButtonLoader = function() { $(this).removeClass('button-loader').removeAttr("disabled"); diff --git a/dashboardv3/public/js/views/glossary/AssignTermLayoutView.js b/dashboardv3/public/js/views/glossary/AssignTermLayoutView.js index e0ebeed..e9da313 100644 --- a/dashboardv3/public/js/views/glossary/AssignTermLayoutView.js +++ b/dashboardv3/public/js/views/glossary/AssignTermLayoutView.js @@ -84,7 +84,8 @@ define(['require', "okText": "Assign", "allowCancel": true, "showFooter": this.isAttributeRelationView ? false : true, - "mainClass": "wizard-modal" + "mainClass": "wizard-modal", + "okCloses": false }); this.modal.open(); this.modal.$el.find('button.ok').attr("disabled", true); @@ -145,6 +146,7 @@ define(['require', } }, assignTerm: function() { + this.modal.$el.find('button.ok').showButtonLoader(); this.assignTermError = false; var that = this, data = [], @@ -163,6 +165,7 @@ define(['require', } }, cust_error: function() { + that.modal.$el.find('button.ok').hideButtonLoader(); that.assignTermError = true; } }, diff --git a/dashboardv3/public/js/views/tag/AddTagModalView.js b/dashboardv3/public/js/views/tag/AddTagModalView.js index 214de07..5626edc 100644 --- a/dashboardv3/public/js/views/tag/AddTagModalView.js +++ b/dashboardv3/public/js/views/tag/AddTagModalView.js @@ -125,6 +125,7 @@ define(['require', cancelText: "Cancel", mainClass: 'modal-lg', allowCancel: true, + okCloses: false }; if (this.tagModel) { modalObj.title = 'Edit Classification'; @@ -134,6 +135,7 @@ define(['require', this.modal.open(); this.modal.$el.find('button.ok').attr("disabled", true); this.on('ok', function() { + that.modal.$el.find('button.ok').showButtonLoader(); var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(), tagAttributes = {}, tagAttributeNames = this.$(".attrName"), @@ -453,8 +455,10 @@ define(['require', if (that.callback) { that.callback(); } + that.modal.close(); }, cust_error: function(model, response) { + that.modal.$el.find('button.ok').hideButtonLoader(); if (that.hideLoader) { that.hideLoader(); }
