Commit 1aa38090 by kevalbhatt Committed by Madhan Neethiraj

ATLAS-1682: UI update to add new overlay loader to tables; fix incorrect state…

ATLAS-1682: UI update to add new overlay loader to tables; fix incorrect state while switching between basic and Advance search Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 220213db
......@@ -73,6 +73,7 @@
padding: 12px;
background: $black_80;
color: $white;
z-index: 999;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px;
&:after {
......
......@@ -59,3 +59,13 @@
right: 50%;
height: 60px;
}
.tableOverlay {
position: absolute;
width: 100%;
height: 100%;
background: $gray;
z-index: 99;
display: none;
opacity: 0.2;
}
......@@ -322,5 +322,6 @@ ul {
.col-sm-custom {
width: 92%;
margin: 36px 36px 0px;
position: relative;
}
}
......@@ -38,7 +38,7 @@ define(['require',
return this.get('name');
},
deleteTerm: function(termURL, options) {
var url = UrlLinks.baseURL + termURL;
var url = termURL;
options = _.extend({
contentType: 'application/json',
dataType: 'json'
......
......@@ -47,6 +47,7 @@ define([
this.bindCommonEvents();
this.listenTo(this, 'route', this.postRouteExecute, this);
this.tagCollection = new VTagList();
this.searchVent = new Backbone.Wreqr.EventAggregator();
},
bindCommonEvents: function() {
var that = this;
......@@ -233,6 +234,7 @@ define([
App.rSideNav.show(new SideNavLayoutView({
'value': paramObj,
'collection': that.tagCollection,
'searchVent': that.searchVent,
'typeHeaders': that.typeHeaders
}));
} else {
......@@ -243,7 +245,8 @@ define([
'value': paramObj,
'entityDefCollection': that.entityDefCollection,
'typeHeaders': that.typeHeaders,
'initialView': (paramObj.query.trim() || paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag)).length === 0
'searchVent': that.searchVent,
'initialView': (paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag) || (paramObj.query ? paramObj.query.trim() : "")).length === 0
}));
});
},
......
......@@ -15,19 +15,21 @@
* limitations under the License.
-->
<div class="position-relative">
<div class="tableOverlay"></div>
<!-- Not for table Loader its only for initial loading -->
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
<div class="auditTable">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<ul class="pager pull-right">
<li>
<button type="button" class="btn" data-id="previousAuditData">Previous</button>
</li>
<li>
<button type="button" class="btn" data-id="nextAuditData">Next</button>
</li>
</ul>
<div id="r_auditTableLayoutView"></div>
<div class="auditTable" style="display: none">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<ul class="pager pull-right">
<li>
<button type="button" class="btn" data-id="previousAuditData">Previous</button>
</li>
<li>
<button type="button" class="btn" data-id="nextAuditData">Next</button>
</li>
</ul>
<div id="r_auditTableLayoutView"></div>
</div>
</div>
......@@ -14,6 +14,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div>
<div class="t_tableOverlay"></div>
<div class="row banded">
<div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
<div data-id="r_pagination" class="col-sm-6 text-right"></div>
......@@ -37,3 +39,4 @@
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
......@@ -47,7 +47,7 @@
<div class="row">
<div class="col-sm-custom">
<div class="atlast-tabbable">
<h4 class="lineageLabel">LINEAGE</h4>
<h4 class="lineageLabel">LINEAGE & IMPACT</h4>
<div class="panel panel-default lineageLayout">
<div id="r_lineageLayoutView" style="height:405px">
<div class="fontLoader">
......
......@@ -14,8 +14,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="clearfix">
<a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
<div>
<div class="tableOverlay"></div>
<div class="clearfix">
<a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
</div>
<div id="r_schemaTableLayoutView"></div>
</div>
<div id="r_tagLayoutView"></div>
......@@ -14,16 +14,18 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="row">
<div class="">
<div class="tableOverlay"></div>
<!-- Not for table Loader its only for initial loading -->
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span>
<div class="ellipsis" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
</div>
<div class="searchTable">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<span style="display: none;" class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<div data-id="paginationDiv" style="display:none">
<ul class="pager pull-right">
<li>
......
......@@ -18,7 +18,7 @@
</div>
<div class="container-fluid gray-bg">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-custom">
<div class="atlast-tabbable">
<div id="r_searchResultLayoutView"></div>
</div>
......
......@@ -15,8 +15,6 @@
* limitations under the License.
-->
<div>
<div class="tableOverlay"></div>
<div id="r_tagTermTableLayoutView"></div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div id="r_tagTermTableLayoutView"></div>
......@@ -125,6 +125,8 @@ define(['require',
includeOrderAbleColumns: false,
includeOverlayLoader: false,
/** ui events hash */
events: function() {
......@@ -140,7 +142,7 @@ define(['require',
initialize: function(options) {
_.extend(this, _.pick(options, 'collection', 'columns', 'includePagination',
'includeHeaderSearch', 'includeFilter', 'includePageSize',
'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns'));
'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns', 'includeOverlayLoader'));
_.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
_.extend(this.filterOpts, options.filterOpts);
......@@ -155,9 +157,15 @@ define(['require',
bindEvents: function() {
this.listenTo(this.collection, 'request', function() {
this.$('div[data-id="r_tableSpinner"]').addClass('show');
if (this.includeOverlayLoader) {
this.$('.t_tableOverlay').show();
}
}, this);
this.listenTo(this.collection, 'sync error', function() {
this.$('div[data-id="r_tableSpinner"]').removeClass('show');
if (this.includeOverlayLoader) {
this.$('.t_tableOverlay').hide();
}
}, this);
this.listenTo(this.collection, 'reset', function(collection, response) {
......
......@@ -210,7 +210,13 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
if (options.urlParams) {
var urlParams = "?";
_.each(options.urlParams, function(value, key, obj) {
urlParams += key + "=" + value + "&";
if (value != undefined || value != null) {
value = String(value);
}
value = value || null;
if (value) {
urlParams += key + "=" + value + "&";
}
});
urlParams = urlParams.slice(0, -1);
options.url += urlParams;
......
......@@ -86,7 +86,6 @@ define(['require',
nextClick: false,
previous: this.ui.previousAuditData
});
this.renderTableLayoutView();
},
bindEvents: function() {},
getToOffset: function() {
......@@ -124,7 +123,7 @@ define(['require',
fetchCollection: function(options) {
var that = this;
this.$('.fontLoader').show();
this.$('.auditTable').hide();
this.$('.tableOverlay').show();
if (that.entityCollection.models.length > 1) {
if (options.nextClick) {
this.pervOld.push(that.entityCollection.first().get('eventKey'));
......@@ -132,12 +131,13 @@ define(['require',
}
this.entityCollection.fetch({
success: function() {
if (!(that.ui.pageRecordText instanceof jQuery)) {
return;
}
if (that.entityCollection.models.length < that.count) {
options.previous.attr('disabled', true);
options.next.attr('disabled', true);
}
that.$('.fontLoader').hide();
that.$('.auditTable').show();
that.renderOffset(options);
if (that.entityCollection.models.length) {
if (that.entityCollection && (that.entityCollection.models.length < that.count && that.currPage == 1) && that.next == that.entityCollection.last().get('eventKey')) {
......@@ -148,9 +148,12 @@ define(['require',
if (that.pervOld.length === 0) {
options.previous.attr('disabled', true);
}
that.renderTableLayoutView();
}
}
that.renderTableLayoutView();
that.$('.fontLoader').hide();
that.$('.tableOverlay').hide();
that.$('.auditTable').show(); // Only for first time table show because we never hide after first render.
},
silent: true
});
......
......@@ -70,7 +70,9 @@ define(['require',
if (that.multiple) {
for (var i = 0; i < that.multiple.length; i++) {
if (i == 0) {
that.showLoader();
if (that.showLoader) {
that.showLoader();
}
}
var obj = {
termName: termName,
......@@ -92,6 +94,9 @@ define(['require',
}
} else {
that.asyncFetchCounter = 0;
if (that.showLoader) {
that.showLoader();
}
CommonViewFunction.saveTermToAsset({
termName: termName,
guid: this.guid
......
......@@ -66,7 +66,7 @@ define(['require',
return events;
},
initialize: function(options) {
_.extend(this, _.pick(options, 'url', 'value', 'tag', 'selectFirst', 'collection', 'typeHeaders'));
_.extend(this, _.pick(options, 'url', 'value', 'tag', 'selectFirst', 'collection', 'typeHeaders', 'searchVent'));
if (Globals.taxonomy) {
this.tabClass = "tab col-sm-4";
} else {
......@@ -106,6 +106,7 @@ define(['require',
require(['views/search/SearchLayoutView'], function(SearchLayoutView) {
that.RSearchLayoutView.show(new SearchLayoutView({
value: that.value,
searchVent: that.searchVent,
typeHeaders: that.typeHeaders
}));
});
......
......@@ -298,7 +298,7 @@ define(['require',
d3.selectAll('button.zoomButton').on('click', zoomClick);
var tooltip = d3Tip()
.attr('class', 'd3-tip')
.offset([-13, 0])
.offset([-18, 0])
.html(function(d) {
var value = that.g.node(d);
var htmlStr = "";
......
......@@ -38,7 +38,7 @@ define(['require',
/** Layout sub regions */
regions: {
RTagLayoutView: "#r_tagLayoutView",
RSchemaTableLayoutView: "#r_schemaTableLayoutView",
},
/** ui selector cache */
ui: {
......@@ -171,9 +171,11 @@ define(['require',
},
showLoader: function() {
this.$('.fontLoader').show();
this.$('.tableOverlay').show()
},
hideLoader: function(argument) {
this.$('.fontLoader').hide();
this.$('.tableOverlay').hide();
},
renderTableLayoutView: function() {
var that = this;
......@@ -201,7 +203,7 @@ define(['require',
});
var columns = new columnCollection(that.getSchemaTableColumns());
//columns.setPositions().sort();
that.RTagLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
columns: columns,
includeOrderAbleColumns: true
})));
......
......@@ -43,7 +43,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders'));
_.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent'));
},
bindEvents: function() {},
onRender: function() {
......@@ -60,7 +60,8 @@ define(['require',
tag: that.tag,
initialView: that.initialView,
entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders
typeHeaders: that.typeHeaders,
searchVent: that.searchVent
}));
}
});
......
......@@ -72,24 +72,26 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'typeHeaders'));
_.extend(this, _.pick(options, 'value', 'typeHeaders', 'searchVent'));
this.type = "basic";
var param = Utils.getUrlState.getQueryParams();
this.query = {
dsl: {
query: "",
type: ""
query: null,
type: null
},
basic: {
query: "",
type: "",
tag: ""
query: null,
type: null,
tag: null
}
};
this.dsl = false;
if (param && param.searchType) {
_.extend(this.query[param.searchType], _.pick(param, 'query', 'type', 'tag'));
this.type = param.searchType;
this.updateQueryObject(param);
}
this.bindEvents();
},
bindEvents: function(param) {
this.listenTo(this.typeHeaders, "reset", function(value) {
......@@ -109,7 +111,7 @@ define(['require',
checkForButtonVisiblity: function() {
var that = this,
value = this.ui.searchInput.val() || this.ui.typeLov.val();
if (!this.dsl && !value.length) {
if (!this.dsl && !value) {
value = this.ui.tagLov.val();
}
if (value && value.length) {
......@@ -136,11 +138,25 @@ define(['require',
this.bindEvents();
this.checkForButtonVisiblity();
},
updateQueryObject: function(param) {
if (param && param.searchType) {
this.type = param.searchType;
}
_.extend(this.query[this.type], {
query: null,
type: null,
tag: null
},
param);
},
fetchCollection: function(value) {
this.typeHeaders.fetch({ reset: true });
},
onRefreshButton: function() {
this.fetchCollection();
if (this.searchVent) {
this.searchVent.trigger('search:refresh');
}
},
advancedInfo: function(e) {
require([
......@@ -161,6 +177,7 @@ define(['require',
});
},
manualRender: function(paramObj) {
this.updateQueryObject(paramObj);
this.setValues(paramObj);
},
renderTypeTagList: function() {
......@@ -198,36 +215,33 @@ define(['require',
} else if (this.value.dslChecked == "false" && this.dsl == true) {
this.ui.searchType.prop("checked", false).trigger("change");
}
if (this.value.query !== undefined) {
// get only search value and append it to input box
if (this.ui.typeLov.data('select2')) {
this.ui.typeLov.val(this.value.type).trigger('change');
} else {
this.ui.typeLov.val(this.value.type);
}
if (this.ui.typeLov.data('select2')) {
this.ui.typeLov.val(this.value.type).trigger('change');
if (!this.dsl) {
if (this.ui.tagLov.data('select2')) {
this.ui.tagLov.val(this.value.tag).trigger('change');
} else {
this.ui.typeLov.val(this.value.type);
}
if (!this.dsl) {
if (this.ui.tagLov.data('select2')) {
this.ui.tagLov.val(this.value.tag).trigger('change');
} else {
this.ui.tagLov.val(this.value.tag);
}
this.ui.typeLov.val(this.value.tag);
}
this.ui.searchInput.val(this.value.query);
setTimeout(function() {
that.ui.searchInput.focus();
}, 0);
}
this.ui.searchInput.val(this.value.query || "");
setTimeout(function() {
that.ui.searchInput.focus();
}, 0);
}
},
findSearchResult: function() {
this.triggerSearch(this.ui.searchInput.val());
},
triggerSearch: function(value) {
this.query[this.type].query = value;
this.query[this.type].type = this.ui.typeLov.select2('val');
this.query[this.type].query = value || null;
this.query[this.type].type = this.ui.typeLov.select2('val') || null;
if (!this.dsl) {
this.query[this.type].tag = this.ui.tagLov.select2('val');
this.query[this.type].tag = this.ui.tagLov.select2('val') || null;
}
Utils.setUrl({
......@@ -254,8 +268,8 @@ define(['require',
this.dsl = false;
this.type = "basic";
}
if (Utils.getUrlState.getQueryParams() && this.query[this.type].query !== Utils.getUrlState.getQueryParams().query && this.type == Utils.getUrlState.getQueryParams().searchType) {
this.query[this.type].query = Utils.getUrlState.getQueryParams().query;
if (Utils.getUrlState.getQueryParams() && this.type == Utils.getUrlState.getQueryParams().searchType) {
this.updateQueryObject(Utils.getUrlState.getQueryParams());
}
Utils.setUrl({
url: '#!/search/searchResult',
......@@ -271,13 +285,17 @@ define(['require',
});
},
clearSearchData: function() {
this.query[this.type].query = "";
this.updateQueryObject();
this.ui.typeLov.val("").trigger("change");
this.ui.tagLov.val("").trigger("change");
this.ui.searchInput.val("");
this.checkForButtonVisiblity()
Utils.setUrl({
url: '#!/search',
url: '#!/search/searchResult',
urlParams: {
searchType: this.type,
dslChecked: this.ui.searchType.is(':checked')
},
mergeBrowserUrl: false,
trigger: true
});
......
......@@ -118,17 +118,16 @@ define(['require',
Utils.hideTitleLoader(this.$('.fontLoader'), this.$('.tagDetail'));
},
onSaveButton: function(saveObject, message) {
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.tagDetail'));
var that = this;
var validate = true;
if (this.modal.$el.find(".attributeInput").length > 1) {
this.modal.$el.find(".attributeInput").each(function() {
if ($(this).val() === "") {
$(this).css('borderColor', "red")
validate = false;
}
});
}
this.modal.$el.find(".attributeInput").each(function() {
if ($(this).val() === "") {
$(this).css('borderColor', "red")
validate = false;
}
});
this.modal.$el.find(".attributeInput").keyup(function() {
$(this).css('borderColor', "#e8e9ee");
});
......@@ -138,7 +137,7 @@ define(['require',
});
return;
}
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.tagDetail'));
this.model.saveTagAttribute(this.model.get('guid'), {
data: JSON.stringify({
classificationDefs: [saveObject],
......@@ -155,9 +154,9 @@ define(['require',
Utils.notifySuccess({
content: message
});
that.modal.close();
}
});
that.modal.close();
},
onClickAddTagAttributeBtn: function(e) {
var that = this;
......@@ -172,10 +171,11 @@ define(['require',
cancelText: "Cancel",
okText: 'Add',
allowCancel: true,
okCloses: false
}).open();
that.modal.$el.find('button.ok').attr("disabled", "true");
$(view.ui.addAttributeDiv).on('keyup', that.modal.$el.find('attributeInput'), function(e) {
if ((e.keyCode == 8 || e.keyCode == 46 || e.keyCode == 32) && e.target.value.trim() == "") {
view.ui.addAttributeDiv.on('keyup', '.attributeInput', function(e) {
if (e.target.value.trim() == "") {
that.modal.$el.find('button.ok').attr("disabled", "disabled");
} else {
that.modal.$el.find('button.ok').removeAttr("disabled");
......
......@@ -55,12 +55,12 @@ define(['require',
var that = this;
require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) {
var value = {
'query': "`" + that.tag + "`"
'tag': that.tag,
'searchType': 'basic'
};
that.RSearchResultLayoutView.show(new SearchResultLayoutView({
value: value,
entityDefCollection: that.entityDefCollection,
tag: that.tag,
typeHeaders: that.typeHeaders
}));
});
......
......@@ -202,8 +202,16 @@ define(['require',
'tagName': tagName,
'guid': that.guid,
'tagOrTerm': (that.term ? "term" : "tag"),
callback: function() {
showLoader: function() {
that.$('.fontLoader').show();
that.$('.tableOverlay').show();
},
hideLoader: function() {
that.$('.fontLoader').hide();
that.$('.tableOverlay').hide();
},
callback: function() {
this.hideLoader();
if (that.fetchCollection) {
that.fetchCollection();
}
......
......@@ -148,12 +148,12 @@ define(['require',
if (checkTagOrTerm.tag) {
if (searchString) {
if (name.search(new RegExp(searchString, "i")) != -1) {
str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="`' + name + '`" >' + name + '</a></li>';
str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="' + name + '" >' + name + '</a></li>';
} else {
return;
}
} else {
str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="`' + name + '`">' + name + '</a></li>';
str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="' + name + '">' + name + '</a></li>';
}
}
});
......@@ -220,6 +220,7 @@ define(['require',
}
modal.$el.find(".attributeInput").keyup(function() {
$(this).css('borderColor', "#e8e9ee");
modal.$el.find('button.ok').removeAttr("disabled");
});
if (!validate) {
Utils.notifyInfo({
......@@ -304,9 +305,9 @@ define(['require',
Utils.setUrl({
url: '#!/search/searchResult',
urlParams: {
query: this.ui.tagsParent.find('li.active').find("a").data('name'),
searchType: "dsl",
dslChecked: true
tag: this.ui.tagsParent.find('li.active').find("a").data('name'),
searchType: "basic",
dslChecked: false
},
updateTabState: function() {
return { searchUrl: this.url, stateChanged: true };
......
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