lib/assets/javascripts/cartodb/table/tableview.js
(function() {
/**
* table view shown in admin
*/
cdb.admin.TableView = cdb.ui.common.Table.extend({
classLabel: 'cdb.admin.TableView',
events: cdb.core.View.extendEvents({
'click .clearview': '_clearView',
'click .sqlview .export_query': '_tableFromQuery',
'click .noRows': 'addEmptyRow'
}),
rowView: cdb.admin.RowView,
initialize: function() {
var self = this;
this.elder('initialize');
this.options.row_header = true;
this.globalError = this.options.globalError;
this.vis = this.options.vis;
this.user = this.options.user;
this._editorsOpened = null;
this.initializeBindings();
this.initPaginationAndScroll();
},
/**
* Append all the bindings needed for this view
* @return undefined
*/
initializeBindings: function() {
var self = this;
_.bindAll(this, "render", "rowSaving", "addEmptyRow",
"_checkEmptyTable", "_forceScroll", "_scrollMagic",
"rowChanged", "rowSynched", "_startPagination", "_finishPagination",
"rowFailed", "rowDestroyed", "emptyTable");
this.model.data().bind('newPage', this.newPage, this);
//this.model.data().bind('loadingRows', this._startPagination);
this.model.data().bind('endLoadingRows', this._finishPagination);
this.bind('cellDblClick', this._editCell, this);
this.bind('createRow', function() {
self._checkEmptyTable();
});
this.model.bind('change:dataSource', this._onSQLView, this);
// when model changes the header is re rendered so the notice should be added
//this.model.bind('change', this._onSQLView, this);
this.model.bind('dataLoaded', function() {
//self._checkEmptyTable();
self._forceScroll();
}, this);
this.model.bind('change:permission', this._checkEmptyTable, this);
this.model.bind('change:isSync', this._swicthEnabled, this);
this._swicthEnabled();
// Actions triggered in the right panel
cdb.god.bind("panel_action", function(action) {
self._moveInfo(action);
}, this);
this.add_related_model(cdb.god);
// Geocoder binding
this.options.geocoder.bind('geocodingComplete geocodingError geocodingCanceled', function() {
this.notice(_t('loaded'));
}, this);
this.add_related_model(this.options.geocoder);
},
initPaginationAndScroll: function() {
var self = this;
var topReached = false;
var bottomReached = false;
// Initialize moving header and loaders when scrolls
this.scroll_position = { x:$(window).scrollLeft(), y:$(window).scrollTop(), last: 'vertical' };
$(window).scroll( this._scrollMagic );
// Pagination
var SCROLL_BACK_PIXELS = 2;
this.checkScrollTimer = setInterval(function() {
if(!self.$el.is(":visible") || self.model.data().isFetchingPage()) {
return;
}
var pos = $(this).scrollTop();
var d = self.model.data();
// do not let to fetch previous pages
// until the user dont scroll back a little bit
// see comments below
if(pos > SCROLL_BACK_PIXELS) {
topReached = false;
}
var pageSize = $(window).height() - self.$el.offset().top;
var tableHeight = this.$('tbody').height();
var realPos = pos + pageSize;
if(tableHeight < pageSize) {
return;
}
// do not let to fetch previous pages
// until the user dont scroll back a little bit
// if we dont do this when the user reach the end of the page
// and there are more rows than max_rows, the rows form the beggining
// are removed and the scroll keeps at the bottom so a new page is loaded
// doing this the user have to move the scroll a little bit (2 px)
// in order to load the page again
if(realPos < tableHeight - SCROLL_BACK_PIXELS) {
bottomReached = false;
}
if(realPos >= tableHeight) {
if(!bottomReached) {
// Simulating loadingRows event
if (!d.lastPage) self._startPagination('down');
setTimeout(function() {
d.loadPageAtBottom();
},600);
}
bottomReached = true;
} else if (pos <= 0) {
if(!topReached) {
// Simulating loadingRows event
if (d.pages && d.pages[0] != 0) self._startPagination('up');
setTimeout(function() {
d.loadPageAtTop()
},600);
}
topReached = true;
}
self._setUpPagination(d);
}, 300);
this.bind('clean', function() {
clearInterval(this.checkScrollTimer);
}, this);
},
needsRender: function(table) {
if (!table) return true;
var ca = table.changedAttributes();
if (ca.geometry_types && _.keys(ca).length === 1) {
return false;
}
return true;
},
render: function(args) {
if (!this.needsRender(args)) return;
this.elder('render', args);
if (this.model.isInSQLView()) {
this._onSQLView();
}
this._swicthEnabled();
this.trigger('render');
},
_renderHeader: function() {
var thead = cdb.ui.common.Table.prototype._renderHeader.apply(this);
// New custom shadow (better performance)
thead.append($('<div>').addClass('shadow'));
return thead;
},
addColumn: function(column){
this.newColumnName = "column_" + new Date().getTime();
this.model.addColumn(this.newColumnName, 'string');
this.unbind("render", this._highlightColumn, this);
this.bind("render", this._highlightColumn, this);
},
_highlightColumn: function() {
if (this.newColumnName) {
var $th = this.$("a[href='#" + this.newColumnName + "']").parents("th");
var position = $th.index();
if (position) {
setTimeout(function() {
var windowWidth = $(window).width();
if ($th && $th.position()) {
var centerPosition = $th.position().left - windowWidth/2 + $th.width()/2;
$(window).scrollLeft(centerPosition);
}
this.$("[data-x='" + position + "']").addClass("is-highlighted");
}, 300);
this.unbind("render", this._highlightColumn, this);
}
}
},
/**
* Take care if the table needs space at top and bottom
* to show the loaders.
*/
_setUpPagination: function(d) {
var pages = d.pages;
// Check if the table is not in the first page
if (pages.length > 0 && pages[0] > 0) {
// In that case, add the paginator-up loader and leave it ready
// when it is necessary
if (this.$el.find('tfoot.page_loader.up').length == 0) {
this.$el.append(this.getTemplate('table/views/table_pagination_loaders')({ direction: 'up' }));
}
// Table now needs some space at the top to show the loader
this.$el.parent().addClass("page_up");
} else {
// Loader is not needed and table doesn't need any space at the top
this.$el.parent().removeClass("page_up");
}
// Checks if we are in the last page
if (!d.lastPage) {
// If not, let's prepare the paginator-down
if (this.$el.find('tfoot.page_loader.down').length == 0) {
this.$el.append(this.getTemplate('table/views/table_pagination_loaders')({ direction: 'down' }));
}
// Let's say to the table that we have paginator-down
this.$el.parent().addClass("page_down");
} else {
// Loader is not needed and table doesn't need any space at the bottom
this.$el.parent().removeClass("page_down");
}
},
/**
* What to do when a pagination starts
*/
_startPagination: function(updown) {
// Loader... move on buddy!
this.$el.find(".page_loader." + updown + "").addClass('active');
},
/**
* What to do when a pagination finishes
*/
_finishPagination: function(page, updown) {
// If we are in a different page than 0, and we are paginating up
// let's move a little bit the scroll to hide the loader again
// HACKY
if (page != 0 && updown == "up") {
setTimeout(function(){
$(window).scrollTop(180);
},300);
}
this.$el.find('.page_loader.active').removeClass('active');
},
_onSQLView: function() {
// bind each time we change dataSource because table unbind
// all the events from sqlView object each time useSQLView is called
this.$('.sqlview').remove();
this.options.sqlView.unbind('reset error', this._renderSQLHeader, this);
this.options.sqlView.unbind('loading', this._renderLoading, this);
this.options.sqlView.bind('loading', this._renderLoading, this);
this.options.sqlView.bind('reset', this._renderSQLHeader, this);
this.options.sqlView.bind('error', this._renderSQLHeader, this);
this._renderSQLHeader();
},
_renderLoading: function(opts) {
opts = opts || {};
this.cleanEmptyTableInfo();
if(!opts.add) {
this._renderBodyTemplate('table/views/sql_loading');
}
},
_renderSQLHeader: function() {
var self = this;
if(self.model.isInSQLView()) {
var empty = self.isEmptyTable();
self.$('thead').find('.sqlview').remove();
self.$('thead').append(
self.getTemplate('table/views/sql_view_notice')({
empty: empty,
isVisualization: self.vis.isVisualization(),
warnMsg: null
})
);
self.$('thead > tr').css('height', 64 + 42);
if(self.isEmptyTable()) {
self.addEmptySQLIfo();
}
self._moveInfo();
}
},
// depending if the sync is enabled add or remove a class
_swicthEnabled: function() {
// Synced?
this.$el[ this.model.isSync() ? 'addClass' : 'removeClass' ]('synced');
// Visualization?
this.$el[ this.vis.isVisualization() ? 'addClass' : 'removeClass' ]('vis');
},
_clearView: function(e) {
if (e) e.preventDefault();
this.options.layer.clearSQLView();
return false;
},
_tableFromQuery: function(e) {
e.preventDefault();
var duplicate_dialog = new cdb.editor.DuplicateDatasetView({
model: this.model,
user: this.user,
clean_on_hide: true
});
duplicate_dialog.appendToBody();
},
/**
* Function to control the scroll in the table (horizontal and vertical)
*/
_scrollMagic: function(ev) {
var actual_scroll_position = { x:$(window).scrollLeft(), y:$(window).scrollTop() };
if (this.scroll_position.x != actual_scroll_position.x) {
this.scroll_position.x = actual_scroll_position.x;
this.$el.find("thead").addClass("horizontal");
// If last change was vertical
if (this.scroll_position.last == "vertical") {
this.scroll_position.x = actual_scroll_position.x;
this.$el.find("thead > tr > th > div > div:not(.dropdown)")
.removeAttr("style")
.css("top", actual_scroll_position.y + "px");
this.scroll_position.last = "horizontal";
}
} else if (this.scroll_position.y != actual_scroll_position.y) {
this.scroll_position.y = actual_scroll_position.y;
this.$el.find("thead").removeClass("horizontal");
// If last change was horizontal
if (this.scroll_position.last == "horizontal") {
this.$el.find("thead > tr > th > div > div:not(.dropdown)")
.removeAttr('style')
.css({"marginLeft": "-" + actual_scroll_position.x + "px"});
this.scroll_position.last = "vertical";
}
}
},
/**
* Move the info content if the panel is opened or hidden.
* - Query info if query is applied
* - Query loader if query is appliying in that moment
* - Add some padding to last column of the content to show them
*/
_moveInfo: function(type) {
if (type == "show") {
this.$el
.removeClass('narrow')
.addClass('displaced');
} else if (type == "narrow") {
this.$el.addClass('displaced narrow')
} else if (type == "hide") {
this.$el.removeClass('displaced narrow');
} else {
// Check from the beginning if the right menu is openned, isOpen from
// the menu is not working properly
if ($('.table_panel').length > 0) {
var opened = $('.table_panel').css("right").replace("px","") == 0 ? true : false;
if (!opened) {
this.$el.removeClass('displaced');
}
}
}
},
_getEditor: function(columnType, opts) {
var editors = {
'string': cdb.admin.StringField,
'number': cdb.admin.NumberField,
'date': cdb.admin.DateField,
'geometry': cdb.admin.GeometryField,
'timestamp with time zone': cdb.admin.DateField,
'timestamp without time zone': cdb.admin.DateField,
'boolean': cdb.admin.BooleanField
};
var editorExists = _.filter(editors, function(a,i) { return i === columnType }).length > 0;
if(columnType !== "undefined" && editorExists) {
return editors[columnType];
} else {
return editors['string']
}
},
closeEditor: function() {
if (this._editorsOpened) {
this._editorsOpened.hide();
this._editorsOpened.clean();
}
},
_editCell: function(e, cell, x, y) {
var self = this;
// Clean and close previous cell editor
this.closeEditor();
var column = self.model.columnName(x-1);
var columnType = this.model.getColumnType(column);
if (this.model.isReservedColumn(column) && !this.model.isReadOnly() && columnType!='geometry') {
return;
}
var row = self.model.data().getRowAt(y);
var initial_value = '';
if(self.model.data().getCell(y, column) === 0 || self.model.data().getCell(y, column) === '0') {
initial_value = '0';
} else if (self.model.data().getCell(y, column) !== undefined) {
initial_value = self.model.data().getCell(y, column);
}
// dont let generic editor
if(column == 'the_geom') {
columnType = 'geometry'
}
var prevRow = _.clone(row.toJSON());
var dlg = this._editorsOpened = new cdb.admin.SmallEditorDialog({
value: initial_value,
column: column,
row: row,
rowNumber: y,
readOnly: this.model.isReadOnly(),
editorField: this._getEditor(columnType),
res: function(new_value) {
if(!_.isEqual(new_value, prevRow[column])) {
// do not use save error callback since it avoid model error method to be called
row.bind('error', function editError() {
row.unbind('error', editError);
// restore previopis on error
row.set(column, prevRow[column]);
});
row
.save(column, new_value)
.done(function(a){
self.model.trigger('data:saved');
});
}
}
});
if(!dlg) {
cdb.log.error("editor not defined for column type " + columnType);
return;
}
// auto add to table view
// Check first if the row is the first or the cell is the last :)
var $td = $(e.target).closest("td")
, offset = $td.offset()
, $tr = $(e.target).closest("tr")
, width = Math.min($td.outerWidth(), 278);
// Remove header spacing from top offset
offset.top = offset.top - this.$el.offset().top;
if ($td.parent().index() == 0) {
offset.top += 5;
} else {
offset.top -= 11;
}
if ($td.index() == ($tr.find("td").size() - 1) && $tr.find("td").size() < 2) {
offset.left -= width/2;
} else {
offset.left -= 11;
}
dlg.showAt(offset.left, offset.top, width, true);
},
headerView: function(column) {
var self = this;
if(column[1] !== 'header') {
var v = new cdb.admin.HeaderView({
column: column,
table: this.model,
sqlView: this.options.sqlView,
user: this.user,
vis: this.vis
})
.bind('clearView', this._clearView, this)
.bind('georeference', function(column) {
var dlg;
var bkgPollingModel = this.options.backgroundPollingModel;
var tableIsReadOnly = this.model.isSync();
var canAddGeocoding = bkgPollingModel !== "" ? bkgPollingModel.canAddGeocoding() : true; // With new modals
if (!this.options.geocoder.isGeocoding() && !tableIsReadOnly && canAddGeocoding) {
var dlg = new cdb.editor.GeoreferenceView({
table: this.model,
user: this.user,
tabs: ['lonlat', 'city', 'admin', 'postal', 'ip', 'address'],
option: 'lonlat',
data: { longitude: column }
});
} else if (this.options.geocoder.isGeocoding() || ( !canAddGeocoding && !tableIsReadOnly )) {
dlg = cdb.editor.ViewFactory.createDialogByTemplate('common/background_polling/views/geocodings/geocoding_in_progress');
} else {
// If table can't geocode == is synched, return!
return;
}
dlg.appendToBody();
}, this)
.bind('applyFilter', function(column) {
self.options.menu.show('filters_mod');
self.options.layer.trigger('applyFilter',column);
}, this)
this.addView(v);
if (this.newColumnName == column[0]) {
setTimeout(function() {
v.renameColumn();
self.newColumnName = null;
}, 300);
}
return v.render().el;
} else {
return '<div><div></div></div>';
}
},
/**
* Checks if the table has any rows, and if not, launch the method for showing the appropiate view elements
* @method _checkEmptyTable
*/
_checkEmptyTable: function() {
if(this.isEmptyTable()) {
this.addEmptyTableInfo();
} else {
this.cleanEmptyTableInfo();
}
},
/**
* Force the table to be at the beginning
* @method _forceScroll
*/
_forceScroll: function(ev){
$(window).scrollLeft(0);
},
_renderEmpty: function() {
this.addEmptyTableInfo();
},
/**
* Adds the view elements associated with no content in the table
* @method addemptyTableInfo
*/
addEmptyTableInfo: function() {
if(this.$('.noRows').length == 0 && !this.model.isInSQLView() && this.model.get('schema')) {
this.elder('addEmptyTableInfo');
this.$el.hide();
// Fake empty row if the table is not readonly
if (!this.model.isReadOnly()) {
//TODO: use row view instead of custom HTML
var columnsNumber = this.model.get('schema').length;
var columns = '<tr class="placeholder noRows"><td class="addNewRow">+</td>';
for(var i = 0; i < columnsNumber; i++) {
columns += '<td></td>';
}
columns += '</tr>';
var columnsFooter = '<tr class="placeholder noRows decoration"><td></td>';
for(var i = 0; i < columnsNumber; i++) {
columnsFooter += '<td></td>';
}
columnsFooter += '</tr>';
var $columns = $(columns+columnsFooter)
this.$el.append($columns);
}
this.template_base = cdb.templates.getTemplate( this.model.isReadOnly() ? 'table/views/empty_readtable_info' : 'table/views/empty_table');
var content = this.template_base();
var $footer = $('<tfoot><tr><td colspan="100">' + content + '</td></tr></tfoot>');
this.$el.append($footer);
this.$el.fadeIn();
}
},
/**
* Adds the view elements associated with no content in the table when a SQL is applied
* @method addEmptySQLIfo
*/
addEmptySQLIfo: function() {
if(this.model.isInSQLView()) {
this._renderBodyTemplate('table/views/empty_sql');
}
},
_renderBodyTemplate: function(tmpl) {
this.$('tbody').html('');
this.$('tfoot').remove();
this.$el.hide();
// Check if panel is opened to move the loader some bit left
var panel_opened = false;
if ($('.table_panel').length > 0) {
panel_opened = $('.table_panel').css("right").replace("px","") == 0 ? true : false;
}
var content = cdb.templates.getTemplate(tmpl)({ panel_opened: panel_opened })
, $footer = $('<tfoot class="sql_loader"><tr><td colspan="100">' + content + '</td></tr></tfoot>');
this.$el.append($footer);
this.$el.fadeIn();
},
/**
* Removes from the view the no-content elements
* @method cleanEmptyTableInfo
*/
cleanEmptyTableInfo: function() {
this.$('tfoot').fadeOut('fast', function() {
$(this).remove();
})
this.$('.noRows').slideUp('fast', function() {
$(this).remove();
})
},
notice: function(text, type, time) {
this.globalError.showError(text, type, time);
},
/**
* Add a new row and removes the empty table view elemetns
* @method addEmptyRow
* @todo: (xabel) refactor this to include a "addRow" method in _models[0]
*/
addEmptyRow: function() {
this.dataModel.addRow({ at: 0});
this.cleanEmptyTableInfo();
},
/**
* Captures the saving event from the row and produces a notification
* @todo (xabel) i'm pretty sure there has to be a less convulted way of doing this, without capturing a event
* to throw another event in the model to be captured by some view
*/
rowSaving: function() {
this.notice('Saving your edit', 'load', -1);
},
/**
* Captures the change event from the row and produces a notification
* @method rowSynched
* @todo (xabel) i'm pretty sure there has to be a less convulted way of doing this, without capturing a event
* to throw another event in the model to be captured by some view
*/
rowSynched: function() {
this.notice('Sucessfully saved');
},
/**
* Captures the change event from the row and produces a notification
* @method rowSynched
* @todo (xabel) i'm pretty sure there has to be a less convulted way of doing this, without capturing a event
* to throw another event in the model to be captured by some view
*/
rowFailed: function() {
this.notice('Oops, there has been an error saving your changes.', 'error');
},
/**
* Captures the destroy event from the row and produces a notification
* @method rowDestroyed
*/
rowDestroying: function() {
this.notice('Deleting row', 'load', -1)
},
/**
* Captures the sync after a destroy event from the row and produces a notification
* @method rowDestroyed
*/
rowDestroyed: function() {
this.notice('Sucessfully deleted')
this._checkEmptyTable();
}
});
/**
* table tab controller
*/
cdb.admin.TableTab = cdb.core.View.extend({
className: 'table',
initialize: function() {
this.user = this.options.user;
this.sqlView = this.options.sqlView;
this.geocoder = this.options.geocoder;
this.backgroundPollingModel = this.options.backgroundPollingModel;
this._initBinds();
},
setActiveLayer: function(layerView) {
var recreate = !!this.tableView;
this.deactivated();
this.model = layerView.table;
this.layer = layerView.model;
this.sqlView = layerView.sqlView;
if(recreate) {
this.activated();
}
},
_initBinds: function() {
// Geocoder binding
this.geocoder.bind('geocodingComplete geocodingError geocodingCanceled', function() {
if (this.model.data) {
this.model.data().refresh()
}
}, this);
this.add_related_model(this.geocoder);
},
_createTable: function() {
this.tableView = new cdb.admin.TableView({
dataModel: this.model.data(),
model: this.model,
sqlView: this.sqlView,
layer: this.layer,
geocoder: this.options.geocoder,
backgroundPollingModel: this.backgroundPollingModel,
vis: this.options.vis,
menu: this.options.menu,
user: this.user,
globalError: this.options.globalError
});
},
activated: function() {
if(!this.tableView) {
this._createTable();
this.tableView.render();
this.render();
}
},
deactivated: function() {
if(this.tableView) {
this.tableView.clean();
this.tableView = null;
this.hasRenderedTableView = false;
}
},
render: function() {
// Since render should be idempotent (i.e. should not append the tableView twice when called multiple times)
if(this.tableView && !this.hasRenderedTableView) {
this.hasRenderedTableView = true;
this.$el.append(this.tableView.el);
}
return this;
}
});
})();