Skip to content

A
atlas
Commit 2ac03425 by kevalbhatt
Options

ATLAS-3711 : UI: Classification/Term modal should close after create/update/delete response

parent 36956bc0
Showing with 138 additions and 80 deletions
dashboardv2/public/css/scss/common.scss
...@@ -274,36 +274,23 @@ pre { ...@@ -274,36 +274,23 @@ pre {
float: left; float: left;
} }
.button-loader:after { .button-loader {
content: "\f021"; position: relative;
position: absolute; padding-left: 22px !important;
left: -6px;
bottom: 4px; &:after {
font-family: FontAwesome; content: "\f021";
background: transparent; position: absolute;
height: 34px; display: flex;
width: 38px; justify-content: center;
line-height: 34px; align-items: center;
text-align: center; left: 0px;
animation: spin 1000ms infinite linear; top: 0px;
} font-family: FontAwesome;
background: transparent;
@-webkit-keyframes spin { height: 100%;
0% { width: 26px;
transform: rotate(0deg); font-size: 11px;
} animation: spin 1000ms infinite linear;
100% {
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
} }
} }
\ No newline at end of file
dashboardv2/public/js/utils/CommonViewFunction.js
...@@ -24,18 +24,25 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -24,18 +24,25 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
require(['models/VTag'], function(VTag) { require(['models/VTag'], function(VTag) {
if (options && options.guid && options.tagName) { if (options && options.guid && options.tagName) {
var tagModel = new VTag(), var tagModel = new VTag(),
noticeRef = null,
notifyObj = { notifyObj = {
modal: true, modal: true,
okCloses: false,
okShowLoader: true,
text: options.msg, text: options.msg,
title: options.titleMessage, title: options.titleMessage,
okText: options.okText, okText: options.okText,
ok: function(argument) { ok: function(notice) {
noticeRef = notice;
if (options.showLoader) { if (options.showLoader) {
options.showLoader(); options.showLoader();
} }
tagModel.deleteAssociation(options.guid, options.tagName, options.associatedGuid, { tagModel.deleteAssociation(options.guid, options.tagName, options.associatedGuid, {
defaultErrorMessage: options.tagName + Messages.deleteErrorMessage, defaultErrorMessage: options.tagName + Messages.deleteErrorMessage,
success: function(data) { success: function(data) {
if (noticeRef) {
noticeRef.remove();
}
Utils.notifySuccess({ Utils.notifySuccess({
content: "Classification " + options.tagName + Messages.getAbbreviationMsg(false, 'removeSuccessMessage') content: "Classification " + options.tagName + Messages.getAbbreviationMsg(false, 'removeSuccessMessage')
}); });
...@@ -48,6 +55,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -48,6 +55,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}, },
cust_error: function(model, response) { cust_error: function(model, response) {
if (noticeRef) {
noticeRef.hideButtonLoader();
}
if (options.hideLoader) { if (options.hideLoader) {
options.hideLoader(); options.hideLoader();
} }
...@@ -789,8 +799,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -789,8 +799,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
collection = options.collection, collection = options.collection,
model = options.model, model = options.model,
newModel = new options.collection.model(), newModel = new options.collection.model(),
noticeRef = null,
ajaxOptions = { ajaxOptions = {
success: function(rModel, response) { success: function(rModel, response) {
if (noticeRef) {
noticeRef.remove();
}
Utils.notifySuccess({ Utils.notifySuccess({
content: ((isCategoryView || isEntityView ? "Term" : "Category") + " association is removed successfully") content: ((isCategoryView || isEntityView ? "Term" : "Category") + " association is removed successfully")
}); });
...@@ -799,6 +813,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -799,6 +813,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
} }
}, },
cust_error: function() { cust_error: function() {
if (noticeRef) {
noticeRef.hideButtonLoader();
}
if (options.hideLoader) { if (options.hideLoader) {
options.hideLoader(); options.hideLoader();
} }
...@@ -806,10 +823,13 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -806,10 +823,13 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}, },
notifyObj = { notifyObj = {
modal: true, modal: true,
okCloses: false,
okShowLoader: true,
text: options.msg, text: options.msg,
title: options.titleMessage, title: options.titleMessage,
okText: options.buttonText, okText: options.buttonText,
ok: function(argument) { ok: function(notice) {
noticeRef = notice;
if (options.showLoader) { if (options.showLoader) {
options.showLoader(); options.showLoader();
} }
...@@ -832,7 +852,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -832,7 +852,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
})); }));
} }
}, },
cancel: function(argument) {} cancel: function() {}
}; };
Utils.notifyConfirm(notifyObj); Utils.notifyConfirm(notifyObj);
} }
......
dashboardv2/public/js/utils/Utils.js
...@@ -184,7 +184,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -184,7 +184,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
confirm: true, confirm: true,
buttons: [{ buttons: [{
text: options.cancelText || 'Cancel', text: options.cancelText || 'Cancel',
addClass: 'btn-action btn-md', addClass: 'btn-action btn-md cancel',
click: function(notice) { click: function(notice) {
options.cancel(notice); options.cancel(notice);
notice.remove(); notice.remove();
...@@ -192,10 +192,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -192,10 +192,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}, },
{ {
text: options.okText || 'Ok', text: options.okText || 'Ok',
addClass: 'btn-atlas btn-md', addClass: 'btn-atlas btn-md ok',
click: function(notice) { click: function(notice) {
options.ok(notice); if (options.ok) {
notice.remove(); 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', ...@@ -872,7 +886,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
} }
} }
$.fn.showButtonLoader = function() { $.fn.showButtonLoader = function() {
$(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader'); $(this).attr("disabled", "true").addClass('button-loader');
} }
$.fn.hideButtonLoader = function() { $.fn.hideButtonLoader = function() {
$(this).removeClass('button-loader').removeAttr("disabled"); $(this).removeClass('button-loader').removeAttr("disabled");
......
dashboardv2/public/js/views/glossary/AssignTermLayoutView.js
...@@ -84,7 +84,8 @@ define(['require', ...@@ -84,7 +84,8 @@ define(['require',
"okText": "Assign", "okText": "Assign",
"allowCancel": true, "allowCancel": true,
"showFooter": this.isAttributeRelationView ? false : true, "showFooter": this.isAttributeRelationView ? false : true,
"mainClass": "wizard-modal" "mainClass": "wizard-modal",
"okCloses": false
}); });
this.modal.open(); this.modal.open();
this.modal.$el.find('button.ok').attr("disabled", true); this.modal.$el.find('button.ok').attr("disabled", true);
...@@ -145,6 +146,7 @@ define(['require', ...@@ -145,6 +146,7 @@ define(['require',
} }
}, },
assignTerm: function() { assignTerm: function() {
this.modal.$el.find('button.ok').showButtonLoader();
this.assignTermError = false; this.assignTermError = false;
var that = this, var that = this,
data = [], data = [],
...@@ -163,6 +165,7 @@ define(['require', ...@@ -163,6 +165,7 @@ define(['require',
} }
}, },
cust_error: function() { cust_error: function() {
that.modal.$el.find('button.ok').hideButtonLoader();
that.assignTermError = true; that.assignTermError = true;
} }
}, },
......
dashboardv2/public/js/views/tag/AddTagModalView.js
...@@ -125,6 +125,7 @@ define(['require', ...@@ -125,6 +125,7 @@ define(['require',
cancelText: "Cancel", cancelText: "Cancel",
mainClass: 'modal-lg', mainClass: 'modal-lg',
allowCancel: true, allowCancel: true,
okCloses: false
}; };
if (this.tagModel) { if (this.tagModel) {
modalObj.title = 'Edit Classification'; modalObj.title = 'Edit Classification';
...@@ -134,6 +135,7 @@ define(['require', ...@@ -134,6 +135,7 @@ define(['require',
this.modal.open(); this.modal.open();
this.modal.$el.find('button.ok').attr("disabled", true); this.modal.$el.find('button.ok').attr("disabled", true);
this.on('ok', function() { this.on('ok', function() {
that.modal.$el.find('button.ok').showButtonLoader();
var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(), var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(),
tagAttributes = {}, tagAttributes = {},
tagAttributeNames = this.$(".attrName"), tagAttributeNames = this.$(".attrName"),
...@@ -453,8 +455,10 @@ define(['require', ...@@ -453,8 +455,10 @@ define(['require',
if (that.callback) { if (that.callback) {
that.callback(); that.callback();
} }
that.modal.close();
}, },
cust_error: function(model, response) { cust_error: function(model, response) {
that.modal.$el.find('button.ok').hideButtonLoader();
if (that.hideLoader) { if (that.hideLoader) {
that.hideLoader(); that.hideLoader();
} }
......
dashboardv3/public/css/scss/common.scss
...@@ -287,36 +287,23 @@ pre { ...@@ -287,36 +287,23 @@ pre {
} }
.button-loader:after { .button-loader {
content: "\f021"; position: relative;
position: absolute; padding-left: 22px !important;
left: -6px;
bottom: 4px; &:after {
font-family: FontAwesome; content: "\f021";
background: transparent; position: absolute;
height: 34px; display: flex;
width: 38px; justify-content: center;
line-height: 34px; align-items: center;
text-align: center; left: 0px;
animation: spin 1000ms infinite linear; top: 0px;
} font-family: FontAwesome;
background: transparent;
@-webkit-keyframes spin { height: 100%;
0% { width: 26px;
transform: rotate(0deg); font-size: 11px;
} animation: spin 1000ms infinite linear;
100% {
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
} }
} }
\ No newline at end of file
dashboardv3/public/js/utils/CommonViewFunction.js
...@@ -24,18 +24,25 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -24,18 +24,25 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
require(['models/VTag'], function(VTag) { require(['models/VTag'], function(VTag) {
if (options && options.guid && options.tagName) { if (options && options.guid && options.tagName) {
var tagModel = new VTag(), var tagModel = new VTag(),
noticeRef = null,
notifyObj = { notifyObj = {
modal: true, modal: true,
okCloses: false,
okShowLoader: true,
text: options.msg, text: options.msg,
title: options.titleMessage, title: options.titleMessage,
okText: options.okText, okText: options.okText,
ok: function(argument) { ok: function(notice) {
noticeRef = notice;
if (options.showLoader) { if (options.showLoader) {
options.showLoader(); options.showLoader();
} }
tagModel.deleteAssociation(options.guid, options.tagName, options.associatedGuid, { tagModel.deleteAssociation(options.guid, options.tagName, options.associatedGuid, {
defaultErrorMessage: options.tagName + Messages.deleteErrorMessage, defaultErrorMessage: options.tagName + Messages.deleteErrorMessage,
success: function(data) { success: function(data) {
if (noticeRef) {
noticeRef.remove();
}
Utils.notifySuccess({ Utils.notifySuccess({
content: "Classification " + options.tagName + Messages.getAbbreviationMsg(false, 'removeSuccessMessage') content: "Classification " + options.tagName + Messages.getAbbreviationMsg(false, 'removeSuccessMessage')
}); });
...@@ -48,6 +55,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -48,6 +55,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}, },
cust_error: function(model, response) { cust_error: function(model, response) {
if (noticeRef) {
noticeRef.hideButtonLoader();
}
if (options.hideLoader) { if (options.hideLoader) {
options.hideLoader(); options.hideLoader();
} }
...@@ -809,8 +819,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -809,8 +819,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
collection = options.collection, collection = options.collection,
model = options.model, model = options.model,
newModel = new options.collection.model(), newModel = new options.collection.model(),
noticeRef = null,
ajaxOptions = { ajaxOptions = {
success: function(rModel, response) { success: function(rModel, response) {
if (noticeRef) {
noticeRef.remove();
}
Utils.notifySuccess({ Utils.notifySuccess({
content: ((isCategoryView || isEntityView ? "Term" : "Category") + " association is removed successfully") content: ((isCategoryView || isEntityView ? "Term" : "Category") + " association is removed successfully")
}); });
...@@ -819,6 +833,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -819,6 +833,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
} }
}, },
cust_error: function() { cust_error: function() {
if (noticeRef) {
noticeRef.hideButtonLoader();
}
if (options.hideLoader) { if (options.hideLoader) {
options.hideLoader(); options.hideLoader();
} }
...@@ -826,10 +843,13 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -826,10 +843,13 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}, },
notifyObj = { notifyObj = {
modal: true, modal: true,
okCloses: false,
okShowLoader: true,
text: options.msg, text: options.msg,
title: options.titleMessage, title: options.titleMessage,
okText: options.buttonText, okText: options.buttonText,
ok: function(argument) { ok: function(notice) {
noticeRef = notice;
if (options.showLoader) { if (options.showLoader) {
options.showLoader(); options.showLoader();
} }
...@@ -852,7 +872,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -852,7 +872,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
})); }));
} }
}, },
cancel: function(argument) {} cancel: function() {}
}; };
Utils.notifyConfirm(notifyObj); Utils.notifyConfirm(notifyObj);
} }
......
dashboardv3/public/js/utils/Utils.js
...@@ -190,7 +190,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -190,7 +190,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
confirm: true, confirm: true,
buttons: [{ buttons: [{
text: options.cancelText || 'Cancel', text: options.cancelText || 'Cancel',
addClass: 'btn-action btn-md', addClass: 'btn-action btn-md cancel',
click: function(notice) { click: function(notice) {
options.cancel(notice); options.cancel(notice);
notice.remove(); notice.remove();
...@@ -198,10 +198,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -198,10 +198,24 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}, },
{ {
text: options.okText || 'Ok', text: options.okText || 'Ok',
addClass: 'btn-atlas btn-md', addClass: 'btn-atlas btn-md ok',
click: function(notice) { click: function(notice) {
options.ok(notice); if (options.ok) {
notice.remove(); 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', ...@@ -920,7 +934,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
} }
$.fn.showButtonLoader = function() { $.fn.showButtonLoader = function() {
$(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader'); $(this).attr("disabled", "true").addClass('button-loader');
} }
$.fn.hideButtonLoader = function() { $.fn.hideButtonLoader = function() {
$(this).removeClass('button-loader').removeAttr("disabled"); $(this).removeClass('button-loader').removeAttr("disabled");
......
dashboardv3/public/js/views/glossary/AssignTermLayoutView.js
...@@ -84,7 +84,8 @@ define(['require', ...@@ -84,7 +84,8 @@ define(['require',
"okText": "Assign", "okText": "Assign",
"allowCancel": true, "allowCancel": true,
"showFooter": this.isAttributeRelationView ? false : true, "showFooter": this.isAttributeRelationView ? false : true,
"mainClass": "wizard-modal" "mainClass": "wizard-modal",
"okCloses": false
}); });
this.modal.open(); this.modal.open();
this.modal.$el.find('button.ok').attr("disabled", true); this.modal.$el.find('button.ok').attr("disabled", true);
...@@ -145,6 +146,7 @@ define(['require', ...@@ -145,6 +146,7 @@ define(['require',
} }
}, },
assignTerm: function() { assignTerm: function() {
this.modal.$el.find('button.ok').showButtonLoader();
this.assignTermError = false; this.assignTermError = false;
var that = this, var that = this,
data = [], data = [],
...@@ -163,6 +165,7 @@ define(['require', ...@@ -163,6 +165,7 @@ define(['require',
} }
}, },
cust_error: function() { cust_error: function() {
that.modal.$el.find('button.ok').hideButtonLoader();
that.assignTermError = true; that.assignTermError = true;
} }
}, },
......
dashboardv3/public/js/views/tag/AddTagModalView.js
...@@ -125,6 +125,7 @@ define(['require', ...@@ -125,6 +125,7 @@ define(['require',
cancelText: "Cancel", cancelText: "Cancel",
mainClass: 'modal-lg', mainClass: 'modal-lg',
allowCancel: true, allowCancel: true,
okCloses: false
}; };
if (this.tagModel) { if (this.tagModel) {
modalObj.title = 'Edit Classification'; modalObj.title = 'Edit Classification';
...@@ -134,6 +135,7 @@ define(['require', ...@@ -134,6 +135,7 @@ define(['require',
this.modal.open(); this.modal.open();
this.modal.$el.find('button.ok').attr("disabled", true); this.modal.$el.find('button.ok').attr("disabled", true);
this.on('ok', function() { this.on('ok', function() {
that.modal.$el.find('button.ok').showButtonLoader();
var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(), var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(),
tagAttributes = {}, tagAttributes = {},
tagAttributeNames = this.$(".attrName"), tagAttributeNames = this.$(".attrName"),
...@@ -453,8 +455,10 @@ define(['require', ...@@ -453,8 +455,10 @@ define(['require',
if (that.callback) { if (that.callback) {
that.callback(); that.callback();
} }
that.modal.close();
}, },
cust_error: function(model, response) { cust_error: function(model, response) {
that.modal.$el.find('button.ok').hideButtonLoader();
if (that.hideLoader) { if (that.hideLoader) {
that.hideLoader(); that.hideLoader();
} }
......
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