Skip to content

A
atlas
Commit 60b7d2ac by kevalbhatt
Options

ATLAS-3156 : UI:No loading animation while creating or deleting a…

ATLAS-3156 : UI:No loading animation while creating or deleting a Classification, Create Entity, View loading
parent 5c9cb781
Showing with 377 additions and 92 deletions
dashboardv2/public/css/scss/common.scss
......@@ -272,4 +272,38 @@ pre {
margin-bottom: 5px;
margin-left: 5px;
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);
}
}
\ No newline at end of file
dashboardv2/public/js/templates/glossary/GlossaryLayoutView_tmpl.html
......@@ -42,18 +42,23 @@
</div>
<div class="row">
<div class="col-sm-12">
<div class="no-padding col-sm-12 term-view">
<div>
<input type="text" class="form-control" data-id="searchTerm" placeholder="{{#if isAssignView}}Search Term{{else}}Search Glossary, Term{{/if}}">
</div>
<div data-id="termTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y:hidden;">
</div>
<div class="col-sm-12 text-center" data-id='glossaryTreeLoader'>
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="col-sm-12 no-padding category-view" style="display: none;">
<div>
<input type="text" class="form-control" data-id="searchCategory" placeholder="{{#if isAssignView}}Search Catalog{{else}}Search Glossary, Category{{/if}}">
<div data-id='glossaryTreeView'>
<div class="no-padding col-sm-12 term-view">
<div>
<input type="text" class="form-control" data-id="searchTerm" placeholder="{{#if isAssignView}}Search Term{{else}}Search Glossary, Term{{/if}}">
</div>
<div data-id="termTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y:hidden;">
</div>
</div>
<div data-id="categoryTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y: hidden;">
<div class="col-sm-12 no-padding category-view" style="display: none;">
<div>
<input type="text" class="form-control" data-id="searchCategory" placeholder="{{#if isAssignView}}Search Catalog{{else}}Search Glossary, Category{{/if}}">
</div>
<div data-id="categoryTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y: hidden;">
</div>
</div>
</div>
</div>
......
dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
......@@ -30,20 +30,22 @@
</div>
</div>
</div>
<!-- <div class="clearfix add-seperator">
<button type="button" class="btn btn-action btn-md pull-left" data-id="createTag" type="button"><i class="fa fa-plus"></i> Create Tag</button>
</div> -->
<div class="row">
<div class="list-view col-sm-12">
<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Classification">
<ul class="tag-tree" data-id="tagsList">
</ul>
<div class="col-sm-12 text-center" data-id="tagTreeLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="tree-view col-sm-12" style="display: none;">
<div class="treeLov">
<select class="form-control" data-id="treeLov"></select>
<div data-id="tagTreeView">
<div class="list-view col-sm-12">
<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Classification">
<ul class="tag-tree" data-id="tagsList">
</ul>
</div>
<div class="tree-view col-sm-12" style="display: none;">
<div class="treeLov">
<select class="form-control" data-id="treeLov"></select>
</div>
<ul class="tag-tree" data-id="tagsParent">
</ul>
</div>
<ul class="tag-tree" data-id="tagsParent">
</ul>
</div>
</div>
\ No newline at end of file
dashboardv2/public/js/utils/CommonViewFunction.js
......@@ -696,7 +696,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}
});
modal.on('ok', function() {
modal.$el.find('button.ok').attr("disabled", true);
modal.$el.find('button.ok').showButtonLoader();
CommonViewFunction.createEditGlossaryCategoryTermSubmit(_.extend({ "ref": view, "modal": modal }, options));
});
modal.on('closeModal', function() {
......@@ -742,7 +742,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
modal.trigger('closeModal');
},
cust_error: function() {
modal.$el.find('button.ok').attr("disabled", false);
modal.$el.find('button.ok').hideButtonLoader();
}
}
if (model) {
......
dashboardv2/public/js/utils/Utils.js
......@@ -870,7 +870,12 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
} else {
tableEl.addClass('hide-empty-value');
}
}
$.fn.showButtonLoader = function() {
$(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader');
}
$.fn.hideButtonLoader = function() {
$(this).removeClass('button-loader').removeAttr("disabled");
}
return Utils;
});
\ No newline at end of file
dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
......@@ -103,7 +103,8 @@ define(['require',
}).open();
this.modal.$el.find('button.ok').attr("disabled", true);
this.modal.on('ok', function(e) {
that.modal.$el.find('button.ok, button.cancel').attr("disabled", true);
that.modal.$el.find('button.cancel').attr("disabled", true);
that.modal.$el.find('button.ok').showButtonLoader();
that.okButton();
});
this.modal.on('closeModal', function() {
......@@ -688,6 +689,7 @@ define(['require',
$(this).addClass('errorClass');
}
that.hideLoader();
that.modal.$el.find('button.ok').hideButtonLoader();
throw new Error("Please fill the required fields");
return;
}
......@@ -763,6 +765,7 @@ define(['require',
data: JSON.stringify(entityJson),
type: "POST",
success: function(model, response) {
that.modal.$el.find('button.ok').hideButtonLoader();
that.modal.close();
var msgType = that.guid ? 'editSuccessMessage' : 'addSuccessMessage';
Utils.notifySuccess({
......@@ -784,7 +787,8 @@ define(['require',
that.hideLoader({
editVisiblityOfEntitySelectionBox: true
});
that.modal.$el.find('button.ok, button.cancel').attr("disabled", false);
that.modal.$el.find('button.ok').hideButtonLoader();
that.modal.$el.find('button.cancel').attr("disabled", false);
}
});
......
dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
......@@ -54,7 +54,9 @@ define(['require',
glossaryView: 'input[name="glossaryView"]',
termTree: "[data-id='termTree']",
categoryTree: "[data-id='categoryTree']",
importGlossary: "[data-id='importGlossary']"
importGlossary: "[data-id='importGlossary']",
glossaryTreeLoader: "[data-id='glossaryTreeLoader']",
glossaryTreeView: "[data-id='glossaryTreeView']"
},
/** ui events hash */
events: function() {
......@@ -110,6 +112,7 @@ define(['require',
this.listenTo(this.glossaryCollection.fullCollection, "reset add change", function(skip) {
this.generateTree();
this.setValues();
this.changeLoaderState(false);
}, this);
this.listenTo(this.glossaryCollection, "update:details", function(options) {
var isGlossaryUpdate = options.isGlossaryUpdate;
......@@ -127,6 +130,7 @@ define(['require',
this.setValues({ trigger: false });
}
}
this.changeLoaderState(false);
}, this);
if (!this.isAssignView) {
$('body').on('click', '.termPopoverOptions li, .categoryPopoverOptions li', function(e) {
......@@ -136,6 +140,7 @@ define(['require',
}
},
onRender: function() {
this.changeLoaderState(true);
if (this.isAssignCategoryView) {
this.$('.category-view').show();
this.$('.term-view').hide();
......@@ -146,6 +151,15 @@ define(['require',
this.getGlossary();
}
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.glossaryTreeLoader.show();
this.ui.glossaryTreeView.hide();
} else {
this.ui.glossaryTreeLoader.hide();
this.ui.glossaryTreeView.show();
}
},
setValues: function(options) {
if (this.viewType == "category") {
if (!this.ui.glossaryView.prop("checked")) {
......@@ -213,6 +227,7 @@ define(['require',
}
},
getGlossary: function() {
this.changeLoaderState(true);
this.glossaryCollection.fetch({ reset: true });
},
generateCategoryData: function(options) {
......@@ -685,6 +700,7 @@ define(['require',
notifyObj = {
modal: true,
ok: function(argument) {
that.changeLoaderState(true);
if (type == "Glossary") {
that.glossaryCollection.fullCollection.get(guid).destroy(options, { silent: true, reset: false });
} else if (type == "GlossaryCategory") {
......@@ -692,6 +708,7 @@ define(['require',
} else if (type == "GlossaryTerm") {
new that.glossaryCollection.model().deleteTerm(guid, options);
}
that.changeLoaderState(false);
},
cancel: function(argument) {}
};
......
dashboardv2/public/js/views/tag/TagLayoutView.js
......@@ -47,7 +47,9 @@ define(['require',
treeLov: "[data-id='treeLov']",
refreshTag: '[data-id="refreshTag"]',
tagView: 'input[name="tagView"]',
expandArrow: '[data-id="expandArrow"]'
expandArrow: '[data-id="expandArrow"]',
tagTreeLoader: '[data-id="tagTreeLoader"]',
tagTreeView: '[data-id="tagTreeView"]'
},
/** ui events hash */
events: function() {
......@@ -96,10 +98,21 @@ define(['require',
},
onRender: function() {
var that = this;
this.changeLoaderState(true);
this.bindEvents();
this.tagsGenerator();
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.tagTreeLoader.show();
this.ui.tagTreeView.hide();
} else {
this.ui.tagTreeLoader.hide();
this.ui.tagTreeView.show();
}
},
fetchCollections: function() {
this.changeLoaderState(true);
this.collection.fetch({ reset: true });
this.ui.offLineSearchTag.val("");
},
......@@ -229,7 +242,9 @@ define(['require',
if (this.createTag) {
this.createTag = false;
}
}
this.changeLoaderState(false);
},
getTagTreeList: function(options) {
var that = this,
......@@ -373,7 +388,8 @@ define(['require',
});
});
modal.on('ok', function() {
modal.$el.find('button.ok').attr("disabled", "true");
// modal.$el.find('button.ok').attr("disabled", "true");
modal.$el.find('button.ok').showButtonLoader();
that.onCreateButton(view, modal);
});
modal.on('closeModal', function() {
......@@ -401,9 +417,9 @@ define(['require',
Utils.notifyInfo({
content: "Please fill the attributes or delete the input box"
});
modal.$el.find('button.ok').hideButtonLoader();
return;
}
this.name = ref.ui.tagName.val();
this.description = ref.ui.description.val();
var superTypes = [];
......@@ -459,6 +475,7 @@ define(['require',
}
notifyObj['text'] = text;
Utils.notifyConfirm(notifyObj);
modal.$el.find('button.ok').hideButtonLoader();
return false;
}
}
......@@ -476,6 +493,7 @@ define(['require',
};
new this.collection.model().set(this.json).save(null, {
success: function(model, response) {
that.changeLoaderState(true);
var classificationDefs = model.get('classificationDefs');
that.ui.createTag.removeAttr("disabled");
that.createTag = true;
......@@ -496,7 +514,12 @@ define(['require',
content: "Classification " + that.name + Messages.getAbbreviationMsg(false, 'addSuccessMessage')
});
modal.trigger('cancel');
modal.$el.find('button.ok').hideButtonLoader();
that.changeLoaderState(false);
that.typeHeaders.fetch({ reset: true });
},
complete: function() {
modal.$el.find("button.ok").hideButtonLoader();
}
});
},
......@@ -570,6 +593,7 @@ define(['require',
onNotifyOk: function(data) {
var that = this,
deleteTagData = this.collection.fullCollection.findWhere({ name: this.tag });
that.changeLoaderState(true);
deleteTagData.deleteTag({
typeName: that.tag,
success: function() {
......
dashboardv3/public/css/scss/common.scss
......@@ -285,4 +285,38 @@ pre {
.errorValidate+span .select2-selection {
border-color: red !important;
}
.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);
}
}
\ No newline at end of file
dashboardv3/public/css/scss/loader.scss
......@@ -14,7 +14,6 @@
// See the License for the specific language governing permissions and
// limitations under the License.
/* loader.scss */
.fa-spin-custom {
......@@ -165,4 +164,42 @@
100% {
background-position: 468px 0;
}
}
.loader-row .fontLoader-relative {
margin-top: 43px;
}
.module-loader {
position: fixed;
top: 0;
height: 2px;
z-index: 9999;
background: repeating-linear-gradient(to right, $color_jungle_green_approx 0%, $color_havelock_blue_approx 50%, #38bb4e 100%);
width: 100%;
background-size: 200% auto;
background-position: 0 100%;
animation: moduleLoader 2s infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
transition: all 2s linear;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.33s, opacity 0.33s linear;
&.show-loader {
opacity: 1;
transition-delay: 0s;
visibility: visible;
}
}
@keyframes moduleLoader {
0% {
background-position: 0 0;
}
100% {
background-position: -200% 0;
}
}
\ No newline at end of file
dashboardv3/public/index.html.tpl
......@@ -118,6 +118,7 @@
</div>
</div>
</div>
<div class="module-loader"></div>
<!-- build:js scripts/main.js -->
<script data-main="js/main.js?bust=<%- bust %>" src="js/libs/requirejs/require.js?bust=<%- bust %>"></script>
<!-- endbuild -->
......
dashboardv3/public/js/main.js
......@@ -15,7 +15,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var modulesLoadCount = 0,
showModuleLoader = function() {
if (modulesLoadCount === 1) {
document.querySelector(".module-loader").classList.add("show-loader");
}
},
hideModuleLoader = function() {
setTimeout(function() {
if (modulesLoadCount === 0) {
document.querySelector(".module-loader").className = "module-loader";
}
}, 1000);
};
require.config({
/* starting point for application */
'hbs': {
......@@ -27,6 +39,7 @@ require.config({
'templateExtension': 'html', // Set the extension automatically appended to templates
'compileOptions': {} // options object which is passed to Handlebars compiler
},
'urlArgs': "bust=" + getBustValue(),
/**
* Requested as soon as the loader has processed the configuration. It does
......@@ -37,6 +50,23 @@ require.config({
*/
'deps': ['marionette'],
onNodeCreated: function(node, config, moduleName, url) {
console.log("module " + moduleName + " is about to be loaded");
++modulesLoadCount;
showModuleLoader();
node.addEventListener("load", function() {
console.log("module " + moduleName + " has been loaded");
--modulesLoadCount;
hideModuleLoader();
});
node.addEventListener("error", function() {
console.log("module " + moduleName + " could not be loaded");
--modulesLoadCount;
hideModuleLoader();
});
},
/**
* The number of seconds to wait before giving up on loading a script.
* @default 7 seconds
......
dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
......@@ -76,14 +76,22 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-6 loader-row">
<div id="r_entityUserDefineView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
<div id="r_entityLabelDefineView"></div>
<div id="r_entityBusinessMetadataView"></div>
<div id="r_entityLabelDefineView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
<div id="r_entityBusinessMetadataView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
</div>
</div>
......
dashboardv3/public/js/templates/search/tree/BusinessMetadataTreeLayoutView_tmpl.html
......@@ -31,5 +31,8 @@
</div>
<div id="businessMetadataTree" class="panel-collapse collapse jstree-with-action in">
<div data-id="businessMetadataSearchTree"></div>
<div class="text-center" data-id="businessMetadataTreeLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
\ No newline at end of file
dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
......@@ -51,5 +51,8 @@
</div>
<div id="c_classfication" class="panel-collapse collapse jstree-with-action in">
<div data-id="classificationSearchTree"></div>
<div class="text-center" data-id="classificationTreeLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
\ No newline at end of file
dashboardv3/public/js/templates/search/tree/CustomFilterTreeLayoutView_tmpl.html
......@@ -25,23 +25,12 @@
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="CustomFilter" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
<!-- <button type="button" class="typeRefresh" data-id="showCustomFilter" title="Show Advanced search">
<i class="fa fa-toggle-on switch-button"></i>
</button> -->
<!-- <button type="button" class="typeRefresh dropdown">
<div class=" btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="customFilter"> <i class="fa fa-sitemap"></i><span>Show flat tree</span>
</li>
<li data-id="refreshTree" data-type="customFilter"><i class="fa fa-refresh"></i><span>Refresh</span>
</li>
</ul>
</button> -->
</div>
</div>
<div id="c_customFilter" class="panel-collapse collapse jstree-with-action in">
<div class="custom-filter" data-id="customFilterSearchTree"></div>
<div class="text-center" data-id="customFilterTreeLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
\ No newline at end of file
dashboardv3/public/js/templates/search/tree/EntityTreeLayoutView_tmpl.html
......@@ -19,17 +19,9 @@
<i class="ec-icon fa"></i>
<h4 class="panel-title">Entities</h4>
<div class="btn-group pull-right">
<!-- <button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="entity" title="Show flat tree">
<i class="fa fa-sitemap"></i>
</button> -->
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="entity" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
<!-- <ul class="dropdown-menu right-align tree-menu">
<li class="typeEmptyEntity" data-id="showEmptyServiceType">
<i class="fa fa-check-circle"></i> <a>Show Empty</a>
</li>
</ul> -->
<button type="button" class="typeRefresh" data-id="showEmptyServiceType" data-type="entity" title="Show empty service types">
<i class="fa fa-toggle-off"></i>
</button>
......@@ -40,15 +32,14 @@
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="entity"> <i class="fa fa-list-ul"></i><span>Show flat tree</span>
</li>
<!-- <li data-id="showEmptyServiceType" data-type="entity"> <i class="fa fa-toggle-off"></i><span >Show empty service types</span>
</li>
<li data-id="refreshTree" data-type="entity"><i class="fa fa-refresh"></i><span >Refresh</span>
</li> -->
</ul>
</button>
</div>
</div>
<div id="c_entity" class="panel-collapse collapse jstree-with-action in">
<div class="entityTree" data-id="entitySearchTree"></div>
<div class="text-center" data-id="entityTreeLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
\ No newline at end of file
dashboardv3/public/js/templates/search/tree/GlossaryTreeLayoutView_tmpl.html
......@@ -23,9 +23,6 @@
<button type="button" class="typeRefresh" data-id="showGlossaryType" title="Show Category">
<i class="fa fa-toggle-on switch-button"></i>
</button>
<!-- <button title="Create Glossary" type="button" data-id="createGlossary">
<i class="fa fa-plus"></i>
</button> -->
<button type="button" class="typeRefresh dropdown">
<div class=" btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i>
......@@ -43,5 +40,8 @@
</div>
<div id="c_term" class="panel-collapse collapse jstree-with-action in">
<div data-id="termSearchTree"></div>
<div class="glossary-tree-loader text-center">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
\ No newline at end of file
dashboardv3/public/js/utils/CommonViewFunction.js
......@@ -716,7 +716,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}
});
modal.on('ok', function() {
modal.$el.find('button.ok').attr("disabled", true);
modal.$el.find('button.ok').showButtonLoader();
CommonViewFunction.createEditGlossaryCategoryTermSubmit(_.extend({ "ref": view, "modal": modal }, options));
});
modal.on('closeModal', function() {
......@@ -762,7 +762,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
modal.trigger('closeModal');
},
cust_error: function() {
modal.$el.find('button.ok').attr("disabled", false);
modal.$el.find('button.ok').hideButtonLoader();
}
}
if (model) {
......
dashboardv3/public/js/utils/Utils.js
......@@ -919,5 +919,11 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}
}
$.fn.showButtonLoader = function() {
$(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader');
}
$.fn.hideButtonLoader = function() {
$(this).removeClass('button-loader').removeAttr("disabled");
}
return Utils;
});
\ No newline at end of file
dashboardv3/public/js/views/business_metadata/EnumCreateUpdateItemView.js
......@@ -150,14 +150,14 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
selectedEnumValues = this.ui.valueSelector.val();
if (selectedEnumName == "" || selectedEnumName == null) {
this.ui.enumOkBtn.removeAttr("disabled");
this.ui.enumOkBtn.hideButtonLoader();
Utils.notifyInfo({
content: "Please enter the Enumeration Name"
});
return true;
}
if (selectedEnumValues == "" || selectedEnumValues == null) {
this.ui.enumOkBtn.removeAttr("disabled");
this.ui.enumOkBtn.hideButtonLoader();
Utils.notifyInfo({
content: "Please enter the Enum values"
});
......@@ -175,7 +175,7 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
if (this.validationEnum()) {
return;
}
this.ui.enumOkBtn.attr("disabled", "true");
this.ui.enumOkBtn.showButtonLoader();
this.ui.enumSelector.attr("disabled", "true");
this.ui.valueSelector.attr("disabled", "true");
this.ui.enumCancleBtn.attr("disabled", "true");
......@@ -237,7 +237,7 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
reset: true,
complete: function(model, status) {
that.emumTypeSelectDisplay();
that.ui.enumOkBtn.removeAttr("disabled");
that.ui.enumOkBtn.hideButtonLoader();
that.ui.enumSelector.removeAttr("disabled");
that.ui.valueSelector.removeAttr("disabled");
if (that.options.closeModal) {
......@@ -254,7 +254,7 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
Utils.notifySuccess({
content: "No updated values"
});
that.ui.enumOkBtn.removeAttr("disabled");
that.ui.enumOkBtn.hideButtonLoader();
that.ui.enumSelector.removeAttr("disabled");
that.ui.valueSelector.removeAttr("disabled");
if (that.options.closeModal) {
......
dashboardv3/public/js/views/entity/CreateEntityLayoutView.js
......@@ -103,7 +103,8 @@ define(['require',
}).open();
this.modal.$el.find('button.ok').attr("disabled", true);
this.modal.on('ok', function(e) {
that.modal.$el.find('button.ok, button.cancel').attr("disabled", true);
that.modal.$el.find('button.cancel').attr("disabled", true);
that.modal.$el.find('button.ok').showButtonLoader();
that.okButton();
});
this.modal.on('closeModal', function() {
......@@ -135,6 +136,7 @@ define(['require',
if (!value.length && $(this).hasClass('false')) {
$(this).removeClass('errorClass');
that.modal.$el.find('button.ok').prop("disabled", false);
} else {
try {
if (value && value.length) {
......@@ -690,6 +692,7 @@ define(['require',
$(this).addClass('errorClass');
}
that.hideLoader();
that.modal.$el.find('button.ok').hideButtonLoader();
throw new Error("Please fill the required fields");
return;
}
......@@ -765,6 +768,7 @@ define(['require',
data: JSON.stringify(entityJson),
type: "POST",
success: function(model, response) {
that.modal.$el.find('button.ok').hideButtonLoader();
that.modal.close();
var msgType = that.guid ? "editSuccessMessage" : "addSuccessMessage";
Utils.notifySuccess({
......@@ -789,7 +793,8 @@ define(['require',
that.hideLoader({
editVisiblityOfEntitySelectionBox: true
});
that.modal.$el.find('button.ok, button.cancel').attr("disabled", false);
that.modal.$el.find('button.ok').hideButtonLoader();
that.modal.$el.find('button.cancel').attr("disabled", false);
}
});
......
dashboardv3/public/js/views/search/tree/BusinessMetadataTreeLayoutView.js
......@@ -42,7 +42,8 @@ define([
businessMetadataSearchTree: '[data-id="businessMetadataSearchTree"]',
// Create
createBusinessMetadata: '[data-id="createBusinessMetadata"]'
createBusinessMetadata: '[data-id="createBusinessMetadata"]',
businessMetadataTreeLoader: '[data-id="businessMetadataTreeLoader"]'
},
templateHelpers: function() {
return {
......@@ -54,6 +55,7 @@ define([
that = this;
// refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
that.changeLoaderState(true);
e.stopPropagation();
that.refresh();
};
......@@ -85,7 +87,9 @@ define([
this.bindEvents();
},
onRender: function() {
this.changeLoaderState(true);
this.renderBusinessMetadataTree();
this.changeLoaderState(false);
//this.createBusinessMetadataAction();
},
bindEvents: function() {
......@@ -107,6 +111,15 @@ define([
that[$(this).find("a").data("fn") + "BusinessMetadata"](e);
});
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.businessMetadataSearchTree.hide();
this.ui.businessMetadataTreeLoader.show();
} else {
this.ui.businessMetadataSearchTree.show();
this.ui.businessMetadataTreeLoader.hide();
}
},
createBusinessMetadataAction: function() {
var that = this;
Utils.generatePopover({
......@@ -186,6 +199,7 @@ define([
};
that.businessMetadataDefCollection.fullCollection.sort({ silent: true });
that.ui.businessMetadataSearchTree.jstree(true).refresh();
that.changeLoaderState(false);
}
});
},
......
dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
......@@ -53,7 +53,8 @@ define([
wildCardSearch: '[data-id="wildCardSearch"]',
wildCardValue: '[data-id="wildCardValue"]',
wildCardContainer: '[data-id="wildCardContainer"]',
clearWildCard: '[data-id="clearWildCard"]'
clearWildCard: '[data-id="clearWildCard"]',
classificationTreeLoader: '[data-id="classificationTreeLoader"]'
},
templateHelpers: function() {
return {
......@@ -63,8 +64,8 @@ define([
events: function() {
var events = {},
that = this;
// refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.refresh({ type: type });
......@@ -159,9 +160,21 @@ define([
this.isGroupView = true;
},
onRender: function() {
this.changeLoaderState(true);
this.renderClassificationTree();
this.createClassificationAction();
this.ui.clearWildCard.addClass('hide-icon');
this.changeLoaderState(false);
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.classificationSearchTree.hide();
this.ui.classificationTreeLoader.show();
} else {
this.ui.classificationSearchTree.show();
this.ui.classificationTreeLoader.hide();
}
},
bindEvents: function() {
var that = this;
......@@ -182,6 +195,7 @@ define([
that[$(this).find('a').data('fn') + "Classification"](e)
});
this.searchVent.on("Classification:Count:Update", function(options) {
that.changeLoaderState(true);
var opt = options || {};
if (opt && !opt.metricData) {
that.metricCollection.fetch({
......@@ -189,12 +203,15 @@ define([
that.entityCountObj = _.first(that.metricCollection.toJSON());
that.classificationTreeUpdate = true;
that.ui.classificationSearchTree.jstree(true).refresh();
that.changeLoaderState(false);
}
});
} else {
that.entityCountObj = opt.metricData;
that.ui.classificationSearchTree.jstree(true).refresh();
that.changeLoaderState(false);
}
});
},
findSearchResult: function(tagValue) {
......@@ -266,7 +283,10 @@ define([
this.tagId = Globals[that.options.value.tag].guid;
this.ui.classificationSearchTree.jstree(true).select_node(this.tagId);
} else if ((this.tagId !== "_ALL_CLASSIFICATION_TYPES" && that.options.value.tag !== this.tagId) || (this.tagId !== "_NOT_CLASSIFIED" && that.options.value.tag !== this.tagId) || (this.tagId !== "_CLASSIFIED" && that.options.value.tag !== this.tagId)) {
if ((that.options.value.tag.indexOf('*') != -1)) {
that.ui.classificationSearchTree.jstree(true).deselect_all();
that.ui.wildCardValue.val(that.options.value.tag);
}
var dataFound = this.classificationDefCollection.fullCollection.find(function(obj) {
return obj.get("name") === that.options.value.tag
});
......@@ -359,6 +379,7 @@ define([
that.classificationDefCollection.fullCollection.sort({ silent: true });
that.classificationTreeUpdate = true
that.ui.classificationSearchTree.jstree(true).refresh();
that.changeLoaderState(false);
}
};
this.classificationDefCollection.fetch({
......@@ -423,8 +444,8 @@ define([
that.tagId = isSelectedChild ? child.get("guid") : null;
}
}
var modelJSON = child.toJSON();
if (child) {
var modelJSON = child.toJSON();
var nodeDetails = {
name: _.escape(name),
model: modelJSON,
......@@ -639,7 +660,7 @@ define([
});
});
modal.on("ok", function() {
modal.$el.find("button.ok").attr("disabled", "true");
modal.$el.find("button.ok").showButtonLoader();
that.onCreateTagButton(view, modal);
});
modal.on("closeModal", function() {
......@@ -666,6 +687,7 @@ define([
Utils.notifyInfo({
content: "Please fill the attributes or delete the input box"
});
modal.$el.find("button.ok").hideButtonLoader();
return;
}
......@@ -724,6 +746,7 @@ define([
}
notifyObj["text"] = text;
Utils.notifyConfirm(notifyObj);
modal.$el.find("button.ok").hideButtonLoader();
return false;
}
}
......@@ -758,9 +781,11 @@ define([
content: "Classification " + name + Messages.getAbbreviationMsg(false, 'addSuccessMessage')
});
modal.trigger("cancel");
modal.$el.find("button.ok").showButtonLoader();
that.typeHeaders.fetch({ reset: true });
var url = "#!/tag/tagAttribute/" + name;
this.onClassificationUpdate(url);
},
complete: function() {
modal.$el.find("button.ok").hideButtonLoader();
}
});
},
......@@ -832,4 +857,4 @@ define([
});
return ClassificationTreeLayoutView;
});
});
\ No newline at end of file
dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js
......@@ -44,8 +44,8 @@ define([
refreshTree: '[data-id="refreshTree"]',
groupOrFlatTree: '[data-id="groupOrFlatTreeView"]',
customFilterSearchTree: '[data-id="customFilterSearchTree"]',
showCustomFilter: '[data-id="showCustomFilter"]'
showCustomFilter: '[data-id="showCustomFilter"]',
customFilterTreeLoader: '[data-id="customFilterTreeLoader"]'
},
templateHelpers: function() {
return {
......@@ -55,8 +55,8 @@ define([
events: function() {
var events = {},
that = this;
// refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.refreshCustomFilterTree();
......@@ -66,6 +66,7 @@ define([
this.customFilterSwitchBtnUpdate();
};
events["click " + this.ui.groupOrFlatTree] = function(e) {
that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
this.isGroupView = !this.isGroupView;
......@@ -152,8 +153,18 @@ define([
this.isGroupView = true;
},
onRender: function() {
this.changeLoaderState(true);
this.fetchCustomFilter();
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.customFilterSearchTree.hide();
this.ui.customFilterTreeLoader.show();
} else {
this.ui.customFilterSearchTree.show();
this.ui.customFilterTreeLoader.hide();
}
},
manualRender: function(options) {
_.extend(this.options, options);
......@@ -178,6 +189,7 @@ define([
success: function(collection, data) {
that.saveSearchBaiscCollection.fullCollection.reset(_.where(data, { searchType: "BASIC" }));
that.saveSearchAdvanceCollection.fullCollection.reset(_.where(data, { searchType: "ADVANCED" }));
that.changeLoaderState(false);
},
silent: true
});
......
dashboardv3/public/js/views/search/tree/EntityTreeLayoutView.js
......@@ -42,7 +42,8 @@ define([
entitySearchTree: '[data-id="entitySearchTree"]',
// Show/hide empty values in tree
showEmptyServiceType: '[data-id="showEmptyServiceType"]'
showEmptyServiceType: '[data-id="showEmptyServiceType"]',
entityTreeLoader: '[data-id="entityTreeLoader"]'
},
templateHelpers: function() {
return {
......@@ -52,8 +53,8 @@ define([
events: function() {
var events = {},
that = this;
// refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.ui[type + "SearchTree"].jstree(true).destroy();
......@@ -74,7 +75,6 @@ define([
this.ui.groupOrFlatTree.tooltip('hide');
this.ui.groupOrFlatTree.find("i").toggleClass("fa-sitemap fa-list-ul");
this.ui.groupOrFlatTree.find("span").html(this.isGroupView ? "Show flat tree" : "Show group tree");
that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderEntityTree();
};
......@@ -88,17 +88,20 @@ define([
that[$(this).find('a').data('fn') + "Entity"](e)
});
this.searchVent.on("Entity:Count:Update", function(options) {
that.changeLoaderState(true);
var opt = options || {};
if (opt && !opt.metricData) {
that.metricCollection.fetch({
complete: function() {
that.entityCountObj = _.first(that.metricCollection.toJSON());
that.ui.entitySearchTree.jstree(true).refresh();
that.changeLoaderState(false);
}
});
} else {
that.entityCountObj = opt.metricData;
that.ui.entitySearchTree.jstree(true).refresh();
that.changeLoaderState(false);
}
});
},
......@@ -126,8 +129,19 @@ define([
this.isGroupView = true;
},
onRender: function() {
this.changeLoaderState(true);
this.renderEntityTree();
this.createEntityAction();
this.changeLoaderState(false);
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.entitySearchTree.hide();
this.ui.entityTreeLoader.show();
} else {
this.ui.entitySearchTree.show();
this.ui.entityTreeLoader.hide();
}
},
createEntityAction: function() {
var that = this;
......@@ -510,6 +524,7 @@ define([
renderTree = function() {
if (apiCount === 0) {
that.renderEntityTree();
that.changeLoaderState(false);
}
};
this.entityDefCollection.fetch({
......
dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
......@@ -39,8 +39,8 @@ define([
createGlossary: '[data-id="createGlossary"]',
showGlossaryType: '[data-id="showGlossaryType"]',
importGlossary: "[data-id='importGlossary']",
downloadTemplate: "[data-id='downloadTemplate']"
downloadTemplate: "[data-id='downloadTemplate']",
glossaryTreeLoader: ".glossary-tree-loader"
},
templateHelpers: function() {
return {
......@@ -52,6 +52,7 @@ define([
var events = {},
that = this;
events["click " + this.ui.refreshTree] = function(e) {
that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.refresh({ type: type });
......@@ -96,6 +97,7 @@ define([
} else {
this.renderGlossaryTree();
}
that.changeLoaderState();
},
this
);
......@@ -144,9 +146,18 @@ define([
this.bindEvents();
},
onRender: function() {
this.changeLoaderState(true);
this.fetchGlossary();
},
changeLoaderState: function(showLoader) {
if (showLoader) {
this.ui.termSearchTree.hide();
this.ui.glossaryTreeLoader.show();
} else {
this.ui.termSearchTree.show();
this.ui.glossaryTreeLoader.hide();
}
},
onBeforeDestroy: function() {
this.options.categoryEvent.off("Success:TermRename")
},
......
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