Commit 9647c913 by kevalbhatt

ATLAS-3668 : UI: Sorting not working as expected for all the table

parent 97ecfc7e
...@@ -113,7 +113,7 @@ define(['require', ...@@ -113,7 +113,7 @@ define(['require',
/** BaseCollection's Static Attributes */ /** BaseCollection's Static Attributes */
{ {
// Static functions // Static functions
getTableCols: function(cols, collection) { getTableCols: function(cols, collection, defaultSortDirection) {
var retCols = _.map(cols, function(v, k, l) { var retCols = _.map(cols, function(v, k, l) {
var defaults = collection.constructor.tableCols[k]; var defaults = collection.constructor.tableCols[k];
if (!defaults) { if (!defaults) {
...@@ -121,7 +121,8 @@ define(['require', ...@@ -121,7 +121,8 @@ define(['require',
defaults = {}; defaults = {};
} }
return _.extend({ return _.extend({
'name': k 'name': k,
direction: defaultSortDirection ? defaultSortDirection : null,
}, defaults, v); }, defaults, v);
}); });
return retCols; return retCols;
......
...@@ -55,7 +55,10 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq ...@@ -55,7 +55,10 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
return this.charAt(0).toUpperCase() + this.slice(1); return this.charAt(0).toUpperCase() + this.slice(1);
} }
/*
* Overriding default sortType
*/
Backgrid.Column.prototype.defaults.sortType = "toggle";
/* /*
* Overriding Cell for adding custom className to Cell i.e <td> * Overriding Cell for adding custom className to Cell i.e <td>
......
...@@ -149,6 +149,20 @@ define(['require', ...@@ -149,6 +149,20 @@ define(['require',
includeAtlasTableSorting: false, includeAtlasTableSorting: false,
showDefaultTableSorted: false,
/**
* [updateFullCollectionManually If collection was updated using silent true
* then need to update FullCollection Manually for correct sorting experience]
* @type {Boolean}
*/
updateFullCollectionManually: false,
sortOpts: {
sortColumn: "name",
sortDirection: "ascending"
},
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -183,26 +197,29 @@ define(['require', ...@@ -183,26 +197,29 @@ define(['require',
initialize: function(options) { initialize: function(options) {
this.limit = 25; this.limit = 25;
this.offset = 0; this.offset = 0;
_.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts')); _.extend(this, _.omit(options, 'gridOpts', 'sortOpts', 'atlasPaginationOpts'));
_.extend(this, options.atlasPaginationOpts); _.extend(this, options.atlasPaginationOpts);
_.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns }); _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
_.extend(this.sortOpts, options.sortOpts);
if (this.includeAtlasTableSorting) { if (this.includeAtlasTableSorting) {
var oldSortingRef = this.collection.setSorting; var oldSortingRef = this.collection.setSorting;
this.collection.setSorting = function() { this.collection.setSorting = function() {
this.state.pageSize = this.length this.state.pageSize = this.length
var val = oldSortingRef.apply(this, arguments); var val = oldSortingRef.apply(this, arguments);
val.fullCollection.models.sort(); val.fullCollection.sort();
this.comparator = function(next, previous, data) { this.comparator = function(next, previous, data) {
var getValue = function(options) { var getValue = function(options) {
var next = options.next, var next = options.next,
previous = options.previous, previous = options.previous,
order = options.order; order = options.order;
if (next === previous) {
if (order === -1) { return null;
return next < previous ? -1 : 1;
} else { } else {
return next < previous ? 1 : -1; if (order === -1) {
return next < previous ? -1 : 1;
} else {
return next < previous ? 1 : -1;
}
} }
} }
if (val.state && (!_.isNull(val.state.sortKey))) { if (val.state && (!_.isNull(val.state.sortKey))) {
...@@ -263,11 +280,14 @@ define(['require', ...@@ -263,11 +280,14 @@ define(['require',
removeCellDirection function - removes "ascending" and "descending" removeCellDirection function - removes "ascending" and "descending"
which in turn removes chevrons from every 'sortable' header-cells*/ which in turn removes chevrons from every 'sortable' header-cells*/
this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) { this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) {
// backgrid:sorted fullCollection trigger required for icon chage
this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection) this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
if (this.includeAtlasTableSorting && this.updateFullCollectionManually) {
this.collection.fullCollection.reset(collection.toJSON(), { silent: true });
}
}, this); }, this);
this.listenTo(this, "grid:refresh", function() { this.listenTo(this, "grid:refresh", function() {
if (this.grid) { if (this.grid) {
this.grid.collection.fullCollection.reset(this.collection.entities, { silent: true });
this.grid.trigger("backgrid:refresh"); this.grid.trigger("backgrid:refresh");
} }
}); });
...@@ -337,8 +357,13 @@ define(['require', ...@@ -337,8 +357,13 @@ define(['require',
this.grid = new Backgrid.Grid(this.gridOpts).on('backgrid:rendered', function() { this.grid = new Backgrid.Grid(this.gridOpts).on('backgrid:rendered', function() {
that.trigger('backgrid:manual:rendered', this) that.trigger('backgrid:manual:rendered', this)
}); });
if (this.showDefaultTableSorted) {
this.rTableList.show(this.grid); this.grid.render();
this.grid.sort(this.sortOpts.sortColumn, this.sortOpts.sortDirection);
this.rTableList.show(this.grid);
} else {
this.rTableList.show(this.grid);
}
}, },
onShow: function() { onShow: function() {
if (this.includeSizeAbleColumns) { if (this.includeSizeAbleColumns) {
......
...@@ -255,6 +255,8 @@ define(['require', ...@@ -255,6 +255,8 @@ define(['require',
includeSizeAbleColumns: false, includeSizeAbleColumns: false,
includeTableLoader: false, includeTableLoader: false,
includeAtlasTableSorting: true, includeAtlasTableSorting: true,
showDefaultTableSorted: true,
updateFullCollectionManually: true,
columnOpts: { columnOpts: {
opts: { opts: {
initialColumnsVisible: null, initialColumnsVisible: null,
...@@ -436,9 +438,8 @@ define(['require', ...@@ -436,9 +438,8 @@ define(['require',
attributeObject: dataOrCollection.entities, attributeObject: dataOrCollection.entities,
referredEntities: dataOrCollection.referredEntities referredEntities: dataOrCollection.referredEntities
}); });
that.searchCollection.referredEntities = dataOrCollection.referredEntities;
that.searchCollection.entities = dataOrCollection.entities;
that.searchCollection.reset(dataOrCollection.entities, { silent: true }); that.searchCollection.reset(dataOrCollection.entities, { silent: true });
that.searchCollection.fullCollection.reset(dataOrCollection.entities, { silent: true });
} }
......
...@@ -116,7 +116,7 @@ define(['require', ...@@ -116,7 +116,7 @@ define(['require',
col = {}; col = {};
return this.tagCollection.constructor.getTableCols({ return this.tagCollection.constructor.getTableCols({
tag: { typeName: {
label: "Classification", label: "Classification",
cell: "html", cell: "html",
editable: false, editable: false,
......
...@@ -113,7 +113,7 @@ define(['require', ...@@ -113,7 +113,7 @@ define(['require',
/** BaseCollection's Static Attributes */ /** BaseCollection's Static Attributes */
{ {
// Static functions // Static functions
getTableCols: function(cols, collection) { getTableCols: function(cols, collection, defaultSortDirection) {
var retCols = _.map(cols, function(v, k, l) { var retCols = _.map(cols, function(v, k, l) {
var defaults = collection.constructor.tableCols[k]; var defaults = collection.constructor.tableCols[k];
if (!defaults) { if (!defaults) {
...@@ -121,7 +121,8 @@ define(['require', ...@@ -121,7 +121,8 @@ define(['require',
defaults = {}; defaults = {};
} }
return _.extend({ return _.extend({
'name': k 'name': k,
direction: defaultSortDirection ? defaultSortDirection : null,
}, defaults, v); }, defaults, v);
}); });
return retCols; return retCols;
......
...@@ -55,7 +55,10 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq ...@@ -55,7 +55,10 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq
return this.charAt(0).toUpperCase() + this.slice(1); return this.charAt(0).toUpperCase() + this.slice(1);
} }
/*
* Overriding default sortType
*/
Backgrid.Column.prototype.defaults.sortType = "toggle";
/* /*
* Overriding Cell for adding custom className to Cell i.e <td> * Overriding Cell for adding custom className to Cell i.e <td>
......
...@@ -149,6 +149,20 @@ define(['require', ...@@ -149,6 +149,20 @@ define(['require',
includeAtlasTableSorting: false, includeAtlasTableSorting: false,
showDefaultTableSorted: false,
/**
* [updateFullCollectionManually If collection was updated using silent true
* then need to update FullCollection Manually for correct sorting experience]
* @type {Boolean}
*/
updateFullCollectionManually: false,
sortOpts: {
sortColumn: "name",
sortDirection: "ascending"
},
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -183,26 +197,29 @@ define(['require', ...@@ -183,26 +197,29 @@ define(['require',
initialize: function(options) { initialize: function(options) {
this.limit = 25; this.limit = 25;
this.offset = 0; this.offset = 0;
_.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts')); _.extend(this, _.omit(options, 'gridOpts', 'sortOpts', 'atlasPaginationOpts'));
_.extend(this, options.atlasPaginationOpts); _.extend(this, options.atlasPaginationOpts);
_.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns }); _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns });
_.extend(this.sortOpts, options.sortOpts);
if (this.includeAtlasTableSorting) { if (this.includeAtlasTableSorting) {
var oldSortingRef = this.collection.setSorting; var oldSortingRef = this.collection.setSorting;
this.collection.setSorting = function() { this.collection.setSorting = function() {
this.state.pageSize = this.length this.state.pageSize = this.length
var val = oldSortingRef.apply(this, arguments); var val = oldSortingRef.apply(this, arguments);
val.fullCollection.models.sort(); val.fullCollection.sort();
this.comparator = function(next, previous, data) { this.comparator = function(next, previous, data) {
var getValue = function(options) { var getValue = function(options) {
var next = options.next, var next = options.next,
previous = options.previous, previous = options.previous,
order = options.order; order = options.order;
if (next === previous) {
if (order === -1) { return null;
return next < previous ? -1 : 1;
} else { } else {
return next < previous ? 1 : -1; if (order === -1) {
return next < previous ? -1 : 1;
} else {
return next < previous ? 1 : -1;
}
} }
} }
if (val.state && (!_.isNull(val.state.sortKey))) { if (val.state && (!_.isNull(val.state.sortKey))) {
...@@ -263,11 +280,14 @@ define(['require', ...@@ -263,11 +280,14 @@ define(['require',
removeCellDirection function - removes "ascending" and "descending" removeCellDirection function - removes "ascending" and "descending"
which in turn removes chevrons from every 'sortable' header-cells*/ which in turn removes chevrons from every 'sortable' header-cells*/
this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) { this.listenTo(this.collection, "backgrid:sorted", function(column, direction, collection) {
// backgrid:sorted fullCollection trigger required for icon chage
this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection) this.collection.fullCollection.trigger("backgrid:sorted", column, direction, collection)
if (this.includeAtlasTableSorting && this.updateFullCollectionManually) {
this.collection.fullCollection.reset(collection.toJSON(), { silent: true });
}
}, this); }, this);
this.listenTo(this, "grid:refresh", function() { this.listenTo(this, "grid:refresh", function() {
if (this.grid) { if (this.grid) {
this.grid.collection.fullCollection.reset(this.collection.entities, { silent: true });
this.grid.trigger("backgrid:refresh"); this.grid.trigger("backgrid:refresh");
} }
}); });
...@@ -337,8 +357,13 @@ define(['require', ...@@ -337,8 +357,13 @@ define(['require',
this.grid = new Backgrid.Grid(this.gridOpts).on('backgrid:rendered', function() { this.grid = new Backgrid.Grid(this.gridOpts).on('backgrid:rendered', function() {
that.trigger('backgrid:manual:rendered', this) that.trigger('backgrid:manual:rendered', this)
}); });
if (this.showDefaultTableSorted) {
this.rTableList.show(this.grid); this.grid.render();
this.grid.sort(this.sortOpts.sortColumn, this.sortOpts.sortDirection);
this.rTableList.show(this.grid);
} else {
this.rTableList.show(this.grid);
}
}, },
onShow: function() { onShow: function() {
if (this.includeSizeAbleColumns) { if (this.includeSizeAbleColumns) {
......
...@@ -264,6 +264,8 @@ define(['require', ...@@ -264,6 +264,8 @@ define(['require',
includeSizeAbleColumns: false, includeSizeAbleColumns: false,
includeTableLoader: false, includeTableLoader: false,
includeAtlasTableSorting: true, includeAtlasTableSorting: true,
showDefaultTableSorted: true,
updateFullCollectionManually: true,
columnOpts: { columnOpts: {
opts: { opts: {
initialColumnsVisible: null, initialColumnsVisible: null,
...@@ -445,9 +447,8 @@ define(['require', ...@@ -445,9 +447,8 @@ define(['require',
attributeObject: dataOrCollection.entities, attributeObject: dataOrCollection.entities,
referredEntities: dataOrCollection.referredEntities referredEntities: dataOrCollection.referredEntities
}); });
that.searchCollection.referredEntities = dataOrCollection.referredEntities;
that.searchCollection.entities = dataOrCollection.entities;
that.searchCollection.reset(dataOrCollection.entities, { silent: true }); that.searchCollection.reset(dataOrCollection.entities, { silent: true });
that.searchCollection.fullCollection.reset(dataOrCollection.entities, { silent: true });
} }
......
...@@ -116,7 +116,7 @@ define(['require', ...@@ -116,7 +116,7 @@ define(['require',
col = {}; col = {};
return this.tagCollection.constructor.getTableCols({ return this.tagCollection.constructor.getTableCols({
tag: { typeName: {
label: "Classification", label: "Classification",
cell: "html", cell: "html",
editable: false, editable: false,
......
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