You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by kb...@apache.org on 2020/04/01 09:35:06 UTC
[atlas] 02/02: ATLAS-3711 : UI: Classification/Term modal should
close after create/update/delete response
This is an automated email from the ASF dual-hosted git repository.
kbhatt pushed a commit to branch branch-2.0
in repository https://gitbox.apache.org/repos/asf/atlas.git
commit e71d6c29e2d265f707341cf060d1f2e3633a2f4d
Author: kevalbhatt <kb...@apache.org>
AuthorDate: Wed Apr 1 14:41:24 2020 +0530
ATLAS-3711 : UI: Classification/Term modal should close after create/update/delete response
(cherry picked from commit 2ac034253386ca8d173f67317505076783cedbf7)
---
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();
}