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 @@ ...@@ -73,6 +73,7 @@
padding: 12px; padding: 12px;
background: $black_80; background: $black_80;
color: $white; color: $white;
z-index: 999;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px; border-radius: 2px;
&:after { &:after {
......
...@@ -59,3 +59,13 @@ ...@@ -59,3 +59,13 @@
right: 50%; right: 50%;
height: 60px; height: 60px;
} }
.tableOverlay {
position: absolute;
width: 100%;
height: 100%;
background: $gray;
z-index: 99;
display: none;
opacity: 0.2;
}
...@@ -322,5 +322,6 @@ ul { ...@@ -322,5 +322,6 @@ ul {
.col-sm-custom { .col-sm-custom {
width: 92%; width: 92%;
margin: 36px 36px 0px; margin: 36px 36px 0px;
position: relative;
} }
} }
...@@ -38,7 +38,7 @@ define(['require', ...@@ -38,7 +38,7 @@ define(['require',
return this.get('name'); return this.get('name');
}, },
deleteTerm: function(termURL, options) { deleteTerm: function(termURL, options) {
var url = UrlLinks.baseURL + termURL; var url = termURL;
options = _.extend({ options = _.extend({
contentType: 'application/json', contentType: 'application/json',
dataType: 'json' dataType: 'json'
......
...@@ -47,6 +47,7 @@ define([ ...@@ -47,6 +47,7 @@ define([
this.bindCommonEvents(); this.bindCommonEvents();
this.listenTo(this, 'route', this.postRouteExecute, this); this.listenTo(this, 'route', this.postRouteExecute, this);
this.tagCollection = new VTagList(); this.tagCollection = new VTagList();
this.searchVent = new Backbone.Wreqr.EventAggregator();
}, },
bindCommonEvents: function() { bindCommonEvents: function() {
var that = this; var that = this;
...@@ -233,6 +234,7 @@ define([ ...@@ -233,6 +234,7 @@ define([
App.rSideNav.show(new SideNavLayoutView({ App.rSideNav.show(new SideNavLayoutView({
'value': paramObj, 'value': paramObj,
'collection': that.tagCollection, 'collection': that.tagCollection,
'searchVent': that.searchVent,
'typeHeaders': that.typeHeaders 'typeHeaders': that.typeHeaders
})); }));
} else { } else {
...@@ -243,7 +245,8 @@ define([ ...@@ -243,7 +245,8 @@ define([
'value': paramObj, 'value': paramObj,
'entityDefCollection': that.entityDefCollection, 'entityDefCollection': that.entityDefCollection,
'typeHeaders': that.typeHeaders, '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 @@ ...@@ -15,19 +15,21 @@
* limitations under the License. * limitations under the License.
--> -->
<div class="position-relative"> <div class="position-relative">
<div class="tableOverlay"></div>
<!-- Not for table Loader its only for initial loading -->
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> <div class="auditTable" style="display: none">
<div class="auditTable"> <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span> <ul class="pager pull-right">
<ul class="pager pull-right"> <li>
<li> <button type="button" class="btn" data-id="previousAuditData">Previous</button>
<button type="button" class="btn" data-id="previousAuditData">Previous</button> </li>
</li> <li>
<li> <button type="button" class="btn" data-id="nextAuditData">Next</button>
<button type="button" class="btn" data-id="nextAuditData">Next</button> </li>
</li> </ul>
</ul> <div id="r_auditTableLayoutView"></div>
<div id="r_auditTableLayoutView"></div> </div>
</div> </div>
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div>
<div class="t_tableOverlay"></div>
<div class="row banded"> <div class="row banded">
<div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div> <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> <div data-id="r_pagination" class="col-sm-6 text-right"></div>
...@@ -37,3 +39,4 @@ ...@@ -37,3 +39,4 @@
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
</div> </div>
</div>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<div class="row"> <div class="row">
<div class="col-sm-custom"> <div class="col-sm-custom">
<div class="atlast-tabbable"> <div class="atlast-tabbable">
<h4 class="lineageLabel">LINEAGE</h4> <h4 class="lineageLabel">LINEAGE & IMPACT</h4>
<div class="panel panel-default lineageLayout"> <div class="panel panel-default lineageLayout">
<div id="r_lineageLayoutView" style="height:405px"> <div id="r_lineageLayoutView" style="height:405px">
<div class="fontLoader"> <div class="fontLoader">
......
...@@ -14,8 +14,11 @@ ...@@ -14,8 +14,11 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div class="clearfix"> <div>
<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> <div class="tableOverlay"></div>
<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 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>
<div id="r_tagLayoutView"></div>
...@@ -14,16 +14,18 @@ ...@@ -14,16 +14,18 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * 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"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </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 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> <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>
<div class="searchTable"> <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"> <div data-id="paginationDiv" style="display:none">
<ul class="pager pull-right"> <ul class="pager pull-right">
<li> <li>
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<div class="container-fluid gray-bg"> <div class="container-fluid gray-bg">
<div class="row"> <div class="row">
<div class="col-sm-10 col-sm-offset-1"> <div class="col-sm-custom">
<div class="atlast-tabbable"> <div class="atlast-tabbable">
<div id="r_searchResultLayoutView"></div> <div id="r_searchResultLayoutView"></div>
</div> </div>
......
...@@ -15,8 +15,6 @@ ...@@ -15,8 +15,6 @@
* limitations under the License. * limitations under the License.
--> -->
<div> <div>
<div class="tableOverlay"></div>
<div id="r_tagTermTableLayoutView"></div>
</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', ...@@ -125,6 +125,8 @@ define(['require',
includeOrderAbleColumns: false, includeOrderAbleColumns: false,
includeOverlayLoader: false,
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -140,7 +142,7 @@ define(['require', ...@@ -140,7 +142,7 @@ define(['require',
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'collection', 'columns', 'includePagination', _.extend(this, _.pick(options, 'collection', 'columns', 'includePagination',
'includeHeaderSearch', 'includeFilter', 'includePageSize', '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.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
_.extend(this.filterOpts, options.filterOpts); _.extend(this.filterOpts, options.filterOpts);
...@@ -155,9 +157,15 @@ define(['require', ...@@ -155,9 +157,15 @@ define(['require',
bindEvents: function() { bindEvents: function() {
this.listenTo(this.collection, 'request', function() { this.listenTo(this.collection, 'request', function() {
this.$('div[data-id="r_tableSpinner"]').addClass('show'); this.$('div[data-id="r_tableSpinner"]').addClass('show');
if (this.includeOverlayLoader) {
this.$('.t_tableOverlay').show();
}
}, this); }, this);
this.listenTo(this.collection, 'sync error', function() { this.listenTo(this.collection, 'sync error', function() {
this.$('div[data-id="r_tableSpinner"]').removeClass('show'); this.$('div[data-id="r_tableSpinner"]').removeClass('show');
if (this.includeOverlayLoader) {
this.$('.t_tableOverlay').hide();
}
}, this); }, this);
this.listenTo(this.collection, 'reset', function(collection, response) { this.listenTo(this.collection, 'reset', function(collection, response) {
......
...@@ -210,7 +210,13 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button ...@@ -210,7 +210,13 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
if (options.urlParams) { if (options.urlParams) {
var urlParams = "?"; var urlParams = "?";
_.each(options.urlParams, function(value, key, obj) { _.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); urlParams = urlParams.slice(0, -1);
options.url += urlParams; options.url += urlParams;
......
...@@ -86,7 +86,6 @@ define(['require', ...@@ -86,7 +86,6 @@ define(['require',
nextClick: false, nextClick: false,
previous: this.ui.previousAuditData previous: this.ui.previousAuditData
}); });
this.renderTableLayoutView();
}, },
bindEvents: function() {}, bindEvents: function() {},
getToOffset: function() { getToOffset: function() {
...@@ -124,7 +123,7 @@ define(['require', ...@@ -124,7 +123,7 @@ define(['require',
fetchCollection: function(options) { fetchCollection: function(options) {
var that = this; var that = this;
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$('.auditTable').hide(); this.$('.tableOverlay').show();
if (that.entityCollection.models.length > 1) { if (that.entityCollection.models.length > 1) {
if (options.nextClick) { if (options.nextClick) {
this.pervOld.push(that.entityCollection.first().get('eventKey')); this.pervOld.push(that.entityCollection.first().get('eventKey'));
...@@ -132,12 +131,13 @@ define(['require', ...@@ -132,12 +131,13 @@ define(['require',
} }
this.entityCollection.fetch({ this.entityCollection.fetch({
success: function() { success: function() {
if (!(that.ui.pageRecordText instanceof jQuery)) {
return;
}
if (that.entityCollection.models.length < that.count) { if (that.entityCollection.models.length < that.count) {
options.previous.attr('disabled', true); options.previous.attr('disabled', true);
options.next.attr('disabled', true); options.next.attr('disabled', true);
} }
that.$('.fontLoader').hide();
that.$('.auditTable').show();
that.renderOffset(options); that.renderOffset(options);
if (that.entityCollection.models.length) { if (that.entityCollection.models.length) {
if (that.entityCollection && (that.entityCollection.models.length < that.count && that.currPage == 1) && that.next == that.entityCollection.last().get('eventKey')) { 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', ...@@ -148,9 +148,12 @@ define(['require',
if (that.pervOld.length === 0) { if (that.pervOld.length === 0) {
options.previous.attr('disabled', true); 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 silent: true
}); });
......
...@@ -70,7 +70,9 @@ define(['require', ...@@ -70,7 +70,9 @@ define(['require',
if (that.multiple) { if (that.multiple) {
for (var i = 0; i < that.multiple.length; i++) { for (var i = 0; i < that.multiple.length; i++) {
if (i == 0) { if (i == 0) {
that.showLoader(); if (that.showLoader) {
that.showLoader();
}
} }
var obj = { var obj = {
termName: termName, termName: termName,
...@@ -92,6 +94,9 @@ define(['require', ...@@ -92,6 +94,9 @@ define(['require',
} }
} else { } else {
that.asyncFetchCounter = 0; that.asyncFetchCounter = 0;
if (that.showLoader) {
that.showLoader();
}
CommonViewFunction.saveTermToAsset({ CommonViewFunction.saveTermToAsset({
termName: termName, termName: termName,
guid: this.guid guid: this.guid
......
...@@ -66,7 +66,7 @@ define(['require', ...@@ -66,7 +66,7 @@ define(['require',
return events; return events;
}, },
initialize: function(options) { 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) { if (Globals.taxonomy) {
this.tabClass = "tab col-sm-4"; this.tabClass = "tab col-sm-4";
} else { } else {
...@@ -106,6 +106,7 @@ define(['require', ...@@ -106,6 +106,7 @@ define(['require',
require(['views/search/SearchLayoutView'], function(SearchLayoutView) { require(['views/search/SearchLayoutView'], function(SearchLayoutView) {
that.RSearchLayoutView.show(new SearchLayoutView({ that.RSearchLayoutView.show(new SearchLayoutView({
value: that.value, value: that.value,
searchVent: that.searchVent,
typeHeaders: that.typeHeaders typeHeaders: that.typeHeaders
})); }));
}); });
......
...@@ -298,7 +298,7 @@ define(['require', ...@@ -298,7 +298,7 @@ define(['require',
d3.selectAll('button.zoomButton').on('click', zoomClick); d3.selectAll('button.zoomButton').on('click', zoomClick);
var tooltip = d3Tip() var tooltip = d3Tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')
.offset([-13, 0]) .offset([-18, 0])
.html(function(d) { .html(function(d) {
var value = that.g.node(d); var value = that.g.node(d);
var htmlStr = ""; var htmlStr = "";
......
...@@ -38,7 +38,7 @@ define(['require', ...@@ -38,7 +38,7 @@ define(['require',
/** Layout sub regions */ /** Layout sub regions */
regions: { regions: {
RTagLayoutView: "#r_tagLayoutView", RSchemaTableLayoutView: "#r_schemaTableLayoutView",
}, },
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
...@@ -171,9 +171,11 @@ define(['require', ...@@ -171,9 +171,11 @@ define(['require',
}, },
showLoader: function() { showLoader: function() {
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$('.tableOverlay').show()
}, },
hideLoader: function(argument) { hideLoader: function(argument) {
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
this.$('.tableOverlay').hide();
}, },
renderTableLayoutView: function() { renderTableLayoutView: function() {
var that = this; var that = this;
...@@ -201,7 +203,7 @@ define(['require', ...@@ -201,7 +203,7 @@ define(['require',
}); });
var columns = new columnCollection(that.getSchemaTableColumns()); var columns = new columnCollection(that.getSchemaTableColumns());
//columns.setPositions().sort(); //columns.setPositions().sort();
that.RTagLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, { that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
columns: columns, columns: columns,
includeOrderAbleColumns: true includeOrderAbleColumns: true
}))); })));
......
...@@ -43,7 +43,7 @@ define(['require', ...@@ -43,7 +43,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders')); _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent'));
}, },
bindEvents: function() {}, bindEvents: function() {},
onRender: function() { onRender: function() {
...@@ -60,7 +60,8 @@ define(['require', ...@@ -60,7 +60,8 @@ define(['require',
tag: that.tag, tag: that.tag,
initialView: that.initialView, initialView: that.initialView,
entityDefCollection: that.entityDefCollection, entityDefCollection: that.entityDefCollection,
typeHeaders: that.typeHeaders typeHeaders: that.typeHeaders,
searchVent: that.searchVent
})); }));
} }
}); });
......
...@@ -72,24 +72,26 @@ define(['require', ...@@ -72,24 +72,26 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'typeHeaders')); _.extend(this, _.pick(options, 'value', 'typeHeaders', 'searchVent'));
this.type = "basic"; this.type = "basic";
var param = Utils.getUrlState.getQueryParams(); var param = Utils.getUrlState.getQueryParams();
this.query = { this.query = {
dsl: { dsl: {
query: "", query: null,
type: "" type: null
}, },
basic: { basic: {
query: "", query: null,
type: "", type: null,
tag: "" tag: null
} }
}; };
this.dsl = false; this.dsl = false;
if (param && param.searchType) { 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) { bindEvents: function(param) {
this.listenTo(this.typeHeaders, "reset", function(value) { this.listenTo(this.typeHeaders, "reset", function(value) {
...@@ -109,7 +111,7 @@ define(['require', ...@@ -109,7 +111,7 @@ define(['require',
checkForButtonVisiblity: function() { checkForButtonVisiblity: function() {
var that = this, var that = this,
value = this.ui.searchInput.val() || this.ui.typeLov.val(); value = this.ui.searchInput.val() || this.ui.typeLov.val();
if (!this.dsl && !value.length) { if (!this.dsl && !value) {
value = this.ui.tagLov.val(); value = this.ui.tagLov.val();
} }
if (value && value.length) { if (value && value.length) {
...@@ -136,11 +138,25 @@ define(['require', ...@@ -136,11 +138,25 @@ define(['require',
this.bindEvents(); this.bindEvents();
this.checkForButtonVisiblity(); 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) { fetchCollection: function(value) {
this.typeHeaders.fetch({ reset: true }); this.typeHeaders.fetch({ reset: true });
}, },
onRefreshButton: function() { onRefreshButton: function() {
this.fetchCollection(); this.fetchCollection();
if (this.searchVent) {
this.searchVent.trigger('search:refresh');
}
}, },
advancedInfo: function(e) { advancedInfo: function(e) {
require([ require([
...@@ -161,6 +177,7 @@ define(['require', ...@@ -161,6 +177,7 @@ define(['require',
}); });
}, },
manualRender: function(paramObj) { manualRender: function(paramObj) {
this.updateQueryObject(paramObj);
this.setValues(paramObj); this.setValues(paramObj);
}, },
renderTypeTagList: function() { renderTypeTagList: function() {
...@@ -198,36 +215,33 @@ define(['require', ...@@ -198,36 +215,33 @@ define(['require',
} else if (this.value.dslChecked == "false" && this.dsl == true) { } else if (this.value.dslChecked == "false" && this.dsl == true) {
this.ui.searchType.prop("checked", false).trigger("change"); this.ui.searchType.prop("checked", false).trigger("change");
} }
if (this.value.query !== undefined) { if (this.ui.typeLov.data('select2')) {
// get only search value and append it to input box this.ui.typeLov.val(this.value.type).trigger('change');
} else {
this.ui.typeLov.val(this.value.type);
}
if (this.ui.typeLov.data('select2')) { if (!this.dsl) {
this.ui.typeLov.val(this.value.type).trigger('change'); if (this.ui.tagLov.data('select2')) {
this.ui.tagLov.val(this.value.tag).trigger('change');
} else { } else {
this.ui.typeLov.val(this.value.type); this.ui.typeLov.val(this.value.tag);
}
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.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() { findSearchResult: function() {
this.triggerSearch(this.ui.searchInput.val()); this.triggerSearch(this.ui.searchInput.val());
}, },
triggerSearch: function(value) { triggerSearch: function(value) {
this.query[this.type].query = value; this.query[this.type].query = value || null;
this.query[this.type].type = this.ui.typeLov.select2('val'); this.query[this.type].type = this.ui.typeLov.select2('val') || null;
if (!this.dsl) { 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({ Utils.setUrl({
...@@ -254,8 +268,8 @@ define(['require', ...@@ -254,8 +268,8 @@ define(['require',
this.dsl = false; this.dsl = false;
this.type = "basic"; this.type = "basic";
} }
if (Utils.getUrlState.getQueryParams() && this.query[this.type].query !== Utils.getUrlState.getQueryParams().query && this.type == Utils.getUrlState.getQueryParams().searchType) { if (Utils.getUrlState.getQueryParams() && this.type == Utils.getUrlState.getQueryParams().searchType) {
this.query[this.type].query = Utils.getUrlState.getQueryParams().query; this.updateQueryObject(Utils.getUrlState.getQueryParams());
} }
Utils.setUrl({ Utils.setUrl({
url: '#!/search/searchResult', url: '#!/search/searchResult',
...@@ -271,13 +285,17 @@ define(['require', ...@@ -271,13 +285,17 @@ define(['require',
}); });
}, },
clearSearchData: function() { clearSearchData: function() {
this.query[this.type].query = ""; this.updateQueryObject();
this.ui.typeLov.val("").trigger("change"); this.ui.typeLov.val("").trigger("change");
this.ui.tagLov.val("").trigger("change"); this.ui.tagLov.val("").trigger("change");
this.ui.searchInput.val(""); this.ui.searchInput.val("");
this.checkForButtonVisiblity() this.checkForButtonVisiblity()
Utils.setUrl({ Utils.setUrl({
url: '#!/search', url: '#!/search/searchResult',
urlParams: {
searchType: this.type,
dslChecked: this.ui.searchType.is(':checked')
},
mergeBrowserUrl: false, mergeBrowserUrl: false,
trigger: true trigger: true
}); });
......
...@@ -123,7 +123,7 @@ define(['require', ...@@ -123,7 +123,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders')); _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent'));
var pagination = ""; var pagination = "";
this.entityModel = new VEntity(); this.entityModel = new VEntity();
this.searchCollection = new VSearchList(); this.searchCollection = new VSearchList();
...@@ -187,6 +187,7 @@ define(['require', ...@@ -187,6 +187,7 @@ define(['require',
}); });
this.listenTo(this.searchCollection, "error", function(model, response) { this.listenTo(this.searchCollection, "error", function(model, response) {
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
this.$('.tableOverlay').hide();
var responseJSON = response ? response.responseJSON : response; var responseJSON = response ? response.responseJSON : response;
if (response && responseJSON && (responseJSON.errorMessage || responseJSON.message || responseJSON.error)) { if (response && responseJSON && (responseJSON.errorMessage || responseJSON.message || responseJSON.error)) {
Utils.notifyError({ Utils.notifyError({
...@@ -198,6 +199,9 @@ define(['require', ...@@ -198,6 +199,9 @@ define(['require',
}); });
} }
}, this); }, this);
this.listenTo(this.searchVent, "search:refresh", function(model, response) {
this.fetchCollection();
}, this);
}, },
onRender: function() { onRender: function() {
if (!this.initialView) { if (!this.initialView) {
...@@ -207,7 +211,7 @@ define(['require', ...@@ -207,7 +211,7 @@ define(['require',
value = this.value; value = this.value;
} else { } else {
value = { value = {
'query': '', 'query': null,
'searchType': 'basic' 'searchType': 'basic'
}; };
} }
...@@ -233,76 +237,82 @@ define(['require', ...@@ -233,76 +237,82 @@ define(['require',
if (Globals.searchApiCallRef && Globals.searchApiCallRef.readyState === 1) { if (Globals.searchApiCallRef && Globals.searchApiCallRef.readyState === 1) {
Globals.searchApiCallRef.abort(); Globals.searchApiCallRef.abort();
} }
$.extend(this.searchCollection.queryParams, { limit: this.limit });
if (value) { if (value && !value.paginationChange) {
$.extend(this.searchCollection.queryParams, { limit: this.limit });
if (value.searchType) { if (value.searchType) {
this.searchCollection.url = UrlLinks.searchApiUrl(value.searchType); this.searchCollection.url = UrlLinks.searchApiUrl(value.searchType);
$.extend(this.searchCollection.queryParams, { limit: this.limit }); $.extend(this.searchCollection.queryParams, { limit: this.limit });
this.offset = 0; this.offset = 0;
} }
if (Utils.getUrlState.isTagTab()) { _.extend(this.searchCollection.queryParams, { 'query': (value.query ? value.query.trim() : null), 'typeName': value.type || null, 'classification': value.tag || null });
this.searchCollection.url = UrlLinks.searchApiUrl(Enums.searchUrlType.DSL);
}
_.extend(this.searchCollection.queryParams, { 'query': value.query.trim() || null, 'typeName': value.type || null, 'classification': value.tag || null });
} }
Globals.searchApiCallRef = this.searchCollection.fetch({ Globals.searchApiCallRef = this.searchCollection.fetch({
skipDefaultError: true, skipDefaultError: true,
success: function() { success: function() {
if (that.searchCollection.models.length < that.limit) {
that.ui.nextData.attr('disabled', true);
}
Globals.searchApiCallRef = undefined; Globals.searchApiCallRef = undefined;
if (that.offset === 0) { if (!(that.ui.pageRecordText instanceof jQuery)) {
that.pageFrom = 1; return;
that.pageTo = that.limit; }
if (that.searchCollection.length > 0) { if (value) {
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.searchCollection.length); if (that.searchCollection.models.length < that.limit) {
that.ui.nextData.attr('disabled', true);
} }
} else if (that.searchCollection.models.length && !that.previousClick) { if (that.offset === 0) {
//on next click, adding "1" for showing the another records.. that.pageFrom = 1;
that.pageFrom = that.pageTo + 1; that.pageTo = that.limit;
that.pageTo = that.pageTo + that.searchCollection.models.length; if (that.searchCollection.length > 0) {
if (that.pageFrom && that.pageTo) { that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.searchCollection.length);
}
} else if (that.searchCollection.models.length && !that.previousClick) {
//on next click, adding "1" for showing the another records..
that.pageFrom = that.pageTo + 1;
that.pageTo = that.pageTo + that.searchCollection.models.length;
if (that.pageFrom && that.pageTo) {
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo);
}
} else if (that.previousClick) {
that.pageTo = (that.pageTo - (that.pageTo - that.pageFrom)) - 1;
//if limit is 0 then result is change to 1 because page count is showing from 1
that.pageFrom = (that.pageFrom - that.limit === 0 ? 1 : that.pageFrom - that.limit);
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo); that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo);
} }
} else if (that.previousClick) { if (that.offset < that.limit) {
that.pageTo = (that.pageTo - (that.pageTo - that.pageFrom)) - 1; that.ui.previousData.attr('disabled', true);
//if limit is 0 then result is change to 1 because page count is showing from 1 }
that.pageFrom = (that.pageFrom - that.limit === 0 ? 1 : that.pageFrom - that.limit); if (that.searchCollection.models.length === 0) {
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo); that.checkTableFetch();
} that.offset = that.offset - that.limit;
if (that.searchCollection.models.length === 0) { if (that.firstFetch) {
that.checkTableFetch(); that.renderTableLayoutView();
that.offset = that.offset - that.limit; }
if (that.firstFetch) {
that.renderTableLayoutView();
} }
} }
if (that.firstFetch) { if (that.firstFetch) {
that.firstFetch = false; that.firstFetch = false;
} }
if (that.offset < that.limit) {
that.ui.previousData.attr('disabled', true);
}
// checking length for not rendering the table // checking length for not rendering the table
if (that.searchCollection.models.length) { if (that.searchCollection.models.length) {
that.renderTableLayoutView(); that.renderTableLayoutView();
} }
var resultArr = []; if (value) {
if (that.searchCollection.queryParams.typeName) { var resultArr = [];
resultArr.push(that.searchCollection.queryParams.typeName) if (that.searchCollection.queryParams.typeName) {
} resultArr.push(that.searchCollection.queryParams.typeName)
if (that.searchCollection.queryParams.classification) { }
resultArr.push(that.searchCollection.queryParams.classification) if (that.searchCollection.queryParams.classification) {
} resultArr.push(that.searchCollection.queryParams.classification)
if (that.searchCollection.queryParams.query) { }
resultArr.push(that.searchCollection.queryParams.query) if (that.searchCollection.queryParams.query) {
} resultArr.push(that.searchCollection.queryParams.query)
var searchString = 'Results for <b>' + _.escape(resultArr.join(that.searchType == 'Advanced Search' ? " " : " & ")) + '</b>'; }
if (Globals.entityCreate && Globals.entityTypeConfList && Utils.getUrlState.isSearchTab()) { var searchString = 'Results for <b>' + _.escape(resultArr.join(that.searchType == 'Advanced Search' ? " " : " & ")) + '</b>';
searchString += "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>'; if (Globals.entityCreate && Globals.entityTypeConfList && Utils.getUrlState.isSearchTab()) {
searchString += "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>';
}
that.$('.searchResult').html(searchString);
} }
that.$('.searchResult').html(searchString);
}, },
silent: true, silent: true,
reset: true reset: true
...@@ -319,6 +329,7 @@ define(['require', ...@@ -319,6 +329,7 @@ define(['require',
that.ui.paginationDiv.show(); that.ui.paginationDiv.show();
that.$(".ellipsis .inputAssignTag").hide(); that.$(".ellipsis .inputAssignTag").hide();
that.renderBreadcrumb(); that.renderBreadcrumb();
that.checkTableFetch();
}); });
}, },
renderBreadcrumb: function() { renderBreadcrumb: function() {
...@@ -332,7 +343,6 @@ define(['require', ...@@ -332,7 +343,6 @@ define(['require',
}, },
checkTableFetch: function() { checkTableFetch: function() {
if (this.asyncFetchCounter <= 0) { if (this.asyncFetchCounter <= 0) {
this.$('div[data-id="r_tableSpinner"]').removeClass('show');
this.hideLoader(); this.hideLoader();
} }
}, },
...@@ -467,7 +477,6 @@ define(['require', ...@@ -467,7 +477,6 @@ define(['require',
}) })
}; };
} }
that.checkTableFetch();
return this.searchCollection.constructor.getTableCols(col, this.searchCollection); return this.searchCollection.constructor.getTableCols(col, this.searchCollection);
}, },
addTagModalView: function(guid, multiple) { addTagModalView: function(guid, multiple) {
...@@ -508,13 +517,12 @@ define(['require', ...@@ -508,13 +517,12 @@ define(['require',
}, },
showLoader: function() { showLoader: function() {
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$('.searchTable').hide(); this.$('.tableOverlay').show();
this.$('.ellipsis').hide();
}, },
hideLoader: function() { hideLoader: function() {
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
this.$('.searchTable').show(); this.$('.ellipsis,.labelShowRecord').show(); // only for first time
this.$('.ellipsis').show(); this.$('.tableOverlay').hide();
}, },
checkedValue: function(e) { checkedValue: function(e) {
var guid = "", var guid = "",
...@@ -589,6 +597,8 @@ define(['require', ...@@ -589,6 +597,8 @@ define(['require',
'tagName': tagName, 'tagName': tagName,
'guid': guid, 'guid': guid,
'tagOrTerm': tagOrTerm, 'tagOrTerm': tagOrTerm,
showLoader: that.showLoader.bind(that),
hideLoader: that.hideLoader.bind(that),
callback: function() { callback: function() {
that.fetchCollection(); that.fetchCollection();
} }
...@@ -602,7 +612,7 @@ define(['require', ...@@ -602,7 +612,7 @@ define(['require',
offset: that.offset offset: that.offset
}); });
this.previousClick = false; this.previousClick = false;
this.fetchCollection(); this.fetchCollection({ paginationChange: true });
}, },
onClickpreviousData: function() { onClickpreviousData: function() {
var that = this; var that = this;
...@@ -612,7 +622,7 @@ define(['require', ...@@ -612,7 +622,7 @@ define(['require',
offset: that.offset offset: that.offset
}); });
this.previousClick = true; this.previousClick = true;
this.fetchCollection(); this.fetchCollection({ paginationChange: true });
}, },
onClickEditEntity: function(e) { onClickEditEntity: function(e) {
......
...@@ -118,17 +118,16 @@ define(['require', ...@@ -118,17 +118,16 @@ define(['require',
Utils.hideTitleLoader(this.$('.fontLoader'), this.$('.tagDetail')); Utils.hideTitleLoader(this.$('.fontLoader'), this.$('.tagDetail'));
}, },
onSaveButton: function(saveObject, message) { onSaveButton: function(saveObject, message) {
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.tagDetail'));
var that = this; var that = this;
var validate = true; var validate = true;
if (this.modal.$el.find(".attributeInput").length > 1) {
this.modal.$el.find(".attributeInput").each(function() { this.modal.$el.find(".attributeInput").each(function() {
if ($(this).val() === "") { if ($(this).val() === "") {
$(this).css('borderColor', "red") $(this).css('borderColor', "red")
validate = false; validate = false;
} }
}); });
}
this.modal.$el.find(".attributeInput").keyup(function() { this.modal.$el.find(".attributeInput").keyup(function() {
$(this).css('borderColor', "#e8e9ee"); $(this).css('borderColor', "#e8e9ee");
}); });
...@@ -138,7 +137,7 @@ define(['require', ...@@ -138,7 +137,7 @@ define(['require',
}); });
return; return;
} }
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.tagDetail'));
this.model.saveTagAttribute(this.model.get('guid'), { this.model.saveTagAttribute(this.model.get('guid'), {
data: JSON.stringify({ data: JSON.stringify({
classificationDefs: [saveObject], classificationDefs: [saveObject],
...@@ -155,9 +154,9 @@ define(['require', ...@@ -155,9 +154,9 @@ define(['require',
Utils.notifySuccess({ Utils.notifySuccess({
content: message content: message
}); });
that.modal.close();
} }
}); });
that.modal.close();
}, },
onClickAddTagAttributeBtn: function(e) { onClickAddTagAttributeBtn: function(e) {
var that = this; var that = this;
...@@ -172,10 +171,11 @@ define(['require', ...@@ -172,10 +171,11 @@ define(['require',
cancelText: "Cancel", cancelText: "Cancel",
okText: 'Add', okText: 'Add',
allowCancel: true, allowCancel: true,
okCloses: false
}).open(); }).open();
that.modal.$el.find('button.ok').attr("disabled", "true"); that.modal.$el.find('button.ok').attr("disabled", "true");
$(view.ui.addAttributeDiv).on('keyup', that.modal.$el.find('attributeInput'), function(e) { view.ui.addAttributeDiv.on('keyup', '.attributeInput', function(e) {
if ((e.keyCode == 8 || e.keyCode == 46 || e.keyCode == 32) && e.target.value.trim() == "") { if (e.target.value.trim() == "") {
that.modal.$el.find('button.ok').attr("disabled", "disabled"); that.modal.$el.find('button.ok').attr("disabled", "disabled");
} else { } else {
that.modal.$el.find('button.ok').removeAttr("disabled"); that.modal.$el.find('button.ok').removeAttr("disabled");
......
...@@ -55,12 +55,12 @@ define(['require', ...@@ -55,12 +55,12 @@ define(['require',
var that = this; var that = this;
require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) { require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) {
var value = { var value = {
'query': "`" + that.tag + "`" 'tag': that.tag,
'searchType': 'basic'
}; };
that.RSearchResultLayoutView.show(new SearchResultLayoutView({ that.RSearchResultLayoutView.show(new SearchResultLayoutView({
value: value, value: value,
entityDefCollection: that.entityDefCollection, entityDefCollection: that.entityDefCollection,
tag: that.tag,
typeHeaders: that.typeHeaders typeHeaders: that.typeHeaders
})); }));
}); });
......
...@@ -202,8 +202,16 @@ define(['require', ...@@ -202,8 +202,16 @@ define(['require',
'tagName': tagName, 'tagName': tagName,
'guid': that.guid, 'guid': that.guid,
'tagOrTerm': (that.term ? "term" : "tag"), 'tagOrTerm': (that.term ? "term" : "tag"),
callback: function() { showLoader: function() {
that.$('.fontLoader').show(); that.$('.fontLoader').show();
that.$('.tableOverlay').show();
},
hideLoader: function() {
that.$('.fontLoader').hide();
that.$('.tableOverlay').hide();
},
callback: function() {
this.hideLoader();
if (that.fetchCollection) { if (that.fetchCollection) {
that.fetchCollection(); that.fetchCollection();
} }
......
...@@ -148,12 +148,12 @@ define(['require', ...@@ -148,12 +148,12 @@ define(['require',
if (checkTagOrTerm.tag) { if (checkTagOrTerm.tag) {
if (searchString) { if (searchString) {
if (name.search(new RegExp(searchString, "i")) != -1) { 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 { } else {
return; return;
} }
} else { } 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', ...@@ -220,6 +220,7 @@ define(['require',
} }
modal.$el.find(".attributeInput").keyup(function() { modal.$el.find(".attributeInput").keyup(function() {
$(this).css('borderColor', "#e8e9ee"); $(this).css('borderColor', "#e8e9ee");
modal.$el.find('button.ok').removeAttr("disabled");
}); });
if (!validate) { if (!validate) {
Utils.notifyInfo({ Utils.notifyInfo({
...@@ -304,9 +305,9 @@ define(['require', ...@@ -304,9 +305,9 @@ define(['require',
Utils.setUrl({ Utils.setUrl({
url: '#!/search/searchResult', url: '#!/search/searchResult',
urlParams: { urlParams: {
query: this.ui.tagsParent.find('li.active').find("a").data('name'), tag: this.ui.tagsParent.find('li.active').find("a").data('name'),
searchType: "dsl", searchType: "basic",
dslChecked: true dslChecked: false
}, },
updateTabState: function() { updateTabState: function() {
return { searchUrl: this.url, stateChanged: true }; 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