Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,37 @@
|
||||
<div class="u-flex u-justifyCenter">
|
||||
<div class="Modal-inner Modal-inner--grid u-flex u-justifyCenter">
|
||||
<div class="Modal-icon">
|
||||
<svg width="25px" height="25px" viewBox="-1 4 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Outline_Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1.000000, 4.000000)">
|
||||
<path d="M1.9477838,21.5 C1.6977511,21.5 1.5,21.3016354 1.5,21.0431048 L1.5,1.95689523 C1.5,1.70555616 1.70315066,1.5 1.94113901,1.5 L16.058861,1.5 C16.2975949,1.5 16.5,1.70783627 16.5,1.96250326 L16.5,13.2661378 L17.5,13.2661378 L17.5,1.96250326 C17.5,1.16139088 16.8558926,0.5 16.058861,0.5 L1.94113901,0.5 C1.14821378,0.5 0.5,1.15588925 0.5,1.95689523 L0.5,21.0431048 C0.5,21.8532278 1.1447717,22.5 1.9477838,22.5 L10.0155676,22.5 L10.0155676,21.5 L1.9477838,21.5 Z" id="path-1" fill="#F19243"></path>
|
||||
<rect id="Rectangle-2" fill="#F19243" x="1" y="5" width="16" height="1"></rect>
|
||||
<path d="M23.854,14.646 L21.354,12.146 C21.166,11.958 20.834,11.958 20.647,12.146 L13.146,19.648 C13.089,19.705 13.054,19.773 13.03,19.845 C13.028,19.852 13.021,19.857 13.019,19.865 L12.019,23.365 C11.969,23.539 12.018,23.727 12.146,23.856 C12.241,23.951 12.369,24.002 12.5,24.002 C12.546,24.002 12.592,23.996 12.637,23.983 L16.137,22.983 C16.144,22.981 16.149,22.974 16.157,22.972 C16.229,22.948 16.297,22.913 16.354,22.856 L23.855,15.354 C24.05,15.158 24.05,14.842 23.854,14.646 L23.854,14.646 L23.854,14.646 Z M16,21.795 L14.207,20.002 L19.001,15.207 L20.794,17 L16,21.795 L16,21.795 L16,21.795 Z M13.747,20.957 L15.045,22.255 L13.228,22.775 L13.747,20.957 L13.747,20.957 L13.747,20.957 Z M21.501,16.293 L19.708,14.5 L21.001,13.207 L22.794,15 L21.501,16.293 L21.501,16.293 L21.501,16.293 Z" id="Shape" fill="#F19243"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--xl">
|
||||
<%- _t('components.table.columns.change-type.title', { columnName: columnName, newType: newType }) %>
|
||||
</h2>
|
||||
<p class="CDB-Text CDB-Size-large u-altTextColor">
|
||||
<%- _t('components.table.columns.change-type.desc') %>
|
||||
</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big js-cancel">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
|
||||
<%- _t('components.table.columns.change-type.cancel') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-confirm">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
|
||||
<%- _t('components.table.columns.change-type.confirm') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="u-flex u-justifyCenter">
|
||||
<div class="Modal-inner Modal-inner--grid u-flex u-justifyCenter">
|
||||
<div class="Modal-icon">
|
||||
<svg width="24px" height="25px" viewbox="521 436 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M524.5,440 L540.5,440 L540.5,460 L524.5,460 L524.5,440 Z M528.5,437 L536.5,437 L536.5,440 L528.5,440 L528.5,437 Z M522,440 L544,440 L522,440 Z M528.5,443.5 L528.5,455.5 L528.5,443.5 Z M532.5,443.5 L532.5,455.5 L532.5,443.5 Z M536.5,443.5 L536.5,455.5 L536.5,443.5 Z" id="Shape" stroke="#F19243" stroke-width="1" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--xl">
|
||||
<%- _t('components.table.columns.destroy.title', { columnName: name }) %>
|
||||
</h2>
|
||||
<p class="CDB-Text CDB-Size-large u-altTextColor"><%- _t('components.table.columns.destroy.desc') %></p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big js-cancel">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
|
||||
<%- _t('components.table.columns.destroy.cancel') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-confirm">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
|
||||
<%- _t('components.table.columns.destroy.confirm') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
<div class="u-flex u-justifyCenter">
|
||||
<div class="Modal-inner Modal-inner--grid u-flex u-justifyCenter">
|
||||
<div class="Modal-icon">
|
||||
<svg width="25px" height="25px" viewBox="67 153 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Group-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(67.000000, 153.000000)">
|
||||
<path d="M16,13 L17,13 L17,5.5 C17,5.433 16.986,5.368 16.961,5.308 C16.936,5.247 16.899,5.192 16.853,5.146 L11.854,0.147 C11.808,0.101 11.753,0.064 11.692,0.039 C11.632,0.014 11.567,0 11.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,21.5 C0,21.776 0.224,22 0.5,22 L9.5,22 L9.5,21 L1,21 L1,1 L11,1 L11,5.5 C11,5.776 11.224,6 11.5,6 L16,6 L16,13 L16,13 Z M12,1.707 L15.293,5 L12,5 L12,1.707 L12,1.707 Z" id="Shape" fill="#F19243"></path>
|
||||
<path d="M23.854,14.646 L21.354,12.146 C21.166,11.958 20.834,11.958 20.647,12.146 L13.146,19.648 C13.089,19.705 13.054,19.773 13.03,19.845 C13.028,19.852 13.021,19.857 13.019,19.865 L12.019,23.365 C11.969,23.539 12.018,23.727 12.146,23.856 C12.241,23.951 12.369,24.002 12.5,24.002 C12.546,24.002 12.592,23.996 12.637,23.983 L16.137,22.983 C16.144,22.981 16.149,22.974 16.157,22.972 C16.229,22.948 16.297,22.913 16.354,22.856 L23.855,15.354 C24.05,15.158 24.05,14.842 23.854,14.646 L23.854,14.646 Z M16,21.795 L14.207,20.002 L19.001,15.207 L20.794,17 L16,21.795 L16,21.795 Z M13.747,20.957 L15.045,22.255 L13.228,22.775 L13.747,20.957 L13.747,20.957 Z M21.501,16.293 L19.708,14.5 L21.001,13.207 L22.794,15 L21.501,16.293 L21.501,16.293 Z" id="Shape" fill="#F19243"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">
|
||||
<%- _t('components.table.columns.rename.title', {
|
||||
columnName: columnName,
|
||||
newName: newName
|
||||
}) %>
|
||||
</h2>
|
||||
<p class="CDB-Text CDB-Size-medium u-altTextColor">
|
||||
<%- _t('components.table.columns.rename.desc', {
|
||||
columnName: columnName,
|
||||
newName: newName
|
||||
}) %>
|
||||
</p>
|
||||
<ul class="Modal-listActions u-flex u-alignCenter">
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--big js-cancel">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
|
||||
<%- _t('components.table.columns.rename.cancel') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="Modal-listActionsitem">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-confirm">
|
||||
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
|
||||
<%- _t('components.table.columns.rename.confirm') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
350
lib/assets/javascripts/builder/components/table/head/table-head-item-view.js
Executable file
350
lib/assets/javascripts/builder/components/table/head/table-head-item-view.js
Executable file
@@ -0,0 +1,350 @@
|
||||
var $ = require('jquery');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./table-head-item.tpl');
|
||||
var ContextMenuView = require('builder/components/context-menu/context-menu-view');
|
||||
var CustomListCollection = require('builder/components/custom-list/custom-list-collection');
|
||||
var TableHeadOptionsItemView = require('./table-head-options-item-view');
|
||||
var tableHeadOptionsItemTemplate = require('./table-head-options-item.tpl');
|
||||
var ConfirmationModalView = require('builder/components/modals/confirmation/modal-confirmation-view');
|
||||
var QueryColumnModel = require('builder/data/query-column-model');
|
||||
var addColumnOperation = require('builder/components/table/operations/table-add-column');
|
||||
var renameColumnOperation = require('builder/components/table/operations/table-rename-column');
|
||||
var changeColumnTypeOperation = require('builder/components/table/operations/table-change-column-type');
|
||||
var removeTableColumnOperation = require('builder/components/table/operations/table-remove-column');
|
||||
|
||||
var ENTER_KEY_CODE = 13;
|
||||
var ESC_KEY_CODE = 27;
|
||||
|
||||
/*
|
||||
* Main table view
|
||||
*/
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
className: 'Table-headItem',
|
||||
tagName: 'th',
|
||||
|
||||
events: {
|
||||
'dblclick .js-attribute': '_onAttributeDblClicked',
|
||||
'focusout .js-attribute': '_saveNewName',
|
||||
'click .js-columnOptions': '_showContextMenu'
|
||||
},
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.tableViewModel) throw new Error('tableViewModel is required');
|
||||
if (!opts.columnsCollection) throw new Error('columnsCollection is required');
|
||||
if (!opts.modals) throw new Error('modals is required');
|
||||
|
||||
this._tableViewModel = opts.tableViewModel;
|
||||
this._columnsCollection = opts.columnsCollection;
|
||||
this._modals = opts.modals;
|
||||
|
||||
this._hideContextMenu = this._hideContextMenu.bind(this);
|
||||
this._onKeyDown = this._onKeyDown.bind(this);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
var columnName = this.model.get('name');
|
||||
this.$el.html(
|
||||
template({
|
||||
name: columnName,
|
||||
type: this.model.get('type'),
|
||||
isOrderBy: this._tableViewModel.get('order_by') === columnName,
|
||||
sortBy: this._tableViewModel.get('sort_order'),
|
||||
geometry: this.options.simpleGeometry
|
||||
})
|
||||
);
|
||||
return this;
|
||||
},
|
||||
|
||||
_hasContextMenu: function () {
|
||||
return this._menuView;
|
||||
},
|
||||
|
||||
_hideContextMenu: function () {
|
||||
this._unhighlightHead();
|
||||
this._destroyScrollBinding();
|
||||
this._menuView.collection.unbind(null, null, this);
|
||||
this.removeView(this._menuView);
|
||||
this._menuView.clean();
|
||||
delete this._menuView;
|
||||
},
|
||||
|
||||
_highlightHead: function () {
|
||||
this.$el.addClass('is-highlighted');
|
||||
},
|
||||
|
||||
_unhighlightHead: function () {
|
||||
this.$el.removeClass('is-highlighted');
|
||||
},
|
||||
|
||||
_initScrollBinding: function () {
|
||||
$('.Table').scroll(this._hideContextMenu);
|
||||
},
|
||||
|
||||
_destroyScrollBinding: function () {
|
||||
$('.Table').off('scroll', this._hideContextMenu);
|
||||
},
|
||||
|
||||
_showContextMenu: function (ev) {
|
||||
var self = this;
|
||||
var position = { x: ev.clientX, y: ev.clientY };
|
||||
var elementIndex = this.$el.index();
|
||||
var modelCID = this.model.cid;
|
||||
var columnName = this.model.get('name');
|
||||
|
||||
this._highlightHead();
|
||||
|
||||
var menuItems = [{
|
||||
label: _t('components.table.columns.options.order'),
|
||||
val: 'order',
|
||||
isOrderBy: this._tableViewModel.get('order_by') === columnName,
|
||||
sortBy: this._tableViewModel.get('sort_order'),
|
||||
action: function (model) {
|
||||
self._tableViewModel.set({
|
||||
sort_order: model.get('sort'),
|
||||
order_by: columnName
|
||||
});
|
||||
}
|
||||
}];
|
||||
|
||||
if (!this._tableViewModel.isDisabled()) {
|
||||
if (!this.model.isCartoDBIDColumn() && !this.model.isGeometryColumn()) {
|
||||
menuItems = menuItems.concat([
|
||||
{
|
||||
label: _t('components.table.columns.options.rename'),
|
||||
val: 'rename',
|
||||
action: function () {
|
||||
self._startEditing();
|
||||
}
|
||||
}, {
|
||||
label: _t('components.table.columns.options.change'),
|
||||
type: this.model.get('type'),
|
||||
isLastColumns: (this._columnsCollection.size() - elementIndex) < 3,
|
||||
val: 'change',
|
||||
action: function (model) {
|
||||
self._changeColumnType(model.get('type'));
|
||||
}
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
label: _t('components.table.columns.options.create'),
|
||||
val: 'create',
|
||||
action: function () {
|
||||
self._addColumn();
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.model.isCartoDBIDColumn() && !this.model.isGeometryColumn()) {
|
||||
menuItems.push(
|
||||
{
|
||||
label: _t('components.table.columns.options.delete'),
|
||||
val: 'delete',
|
||||
destructive: true,
|
||||
action: function () {
|
||||
self._removeColumn();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var collection = new CustomListCollection(menuItems);
|
||||
|
||||
this._menuView = new ContextMenuView({
|
||||
className: ContextMenuView.prototype.className + ' Table-columnMenu',
|
||||
collection: collection,
|
||||
itemTemplate: tableHeadOptionsItemTemplate,
|
||||
itemView: TableHeadOptionsItemView,
|
||||
triggerElementID: modelCID,
|
||||
position: position
|
||||
});
|
||||
|
||||
collection.bind('change:selected', function (menuItem) {
|
||||
var action = menuItem.get('action');
|
||||
action && action(menuItem);
|
||||
}, this);
|
||||
|
||||
this._menuView.model.bind('change:visible', function (model, isContextMenuVisible) {
|
||||
if (this._hasContextMenu() && !isContextMenuVisible) {
|
||||
this._hideContextMenu();
|
||||
}
|
||||
}, this);
|
||||
|
||||
this._menuView.show();
|
||||
this.addView(this._menuView);
|
||||
|
||||
this._initScrollBinding();
|
||||
},
|
||||
|
||||
_addColumn: function () {
|
||||
addColumnOperation({
|
||||
columnsCollection: this._columnsCollection
|
||||
});
|
||||
},
|
||||
|
||||
_changeColumnType: function (newType) {
|
||||
var self = this;
|
||||
var oldType = this.model.get('type');
|
||||
var isTypeChangeDestructive = QueryColumnModel.isTypeChangeDestructive(oldType, newType);
|
||||
if (!isTypeChangeDestructive) {
|
||||
changeColumnTypeOperation({
|
||||
columnModel: this.model,
|
||||
newType: newType
|
||||
});
|
||||
} else {
|
||||
this._modals.create(
|
||||
function (modalModel) {
|
||||
return new ConfirmationModalView({
|
||||
modalModel: modalModel,
|
||||
template: require('./modals-templates/change-table-column-type.tpl'),
|
||||
renderOpts: {
|
||||
columnName: self.model.get('name'),
|
||||
newType: newType
|
||||
},
|
||||
loadingTitle: _t('components.table.columns.change-type.loading', {
|
||||
columnName: self.model.get('name')
|
||||
}),
|
||||
runAction: function () {
|
||||
changeColumnTypeOperation({
|
||||
columnModel: self.model,
|
||||
newType: newType,
|
||||
onSuccess: function () {
|
||||
modalModel.destroy();
|
||||
},
|
||||
onError: function (e) {
|
||||
modalModel.destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
_removeColumn: function () {
|
||||
var self = this;
|
||||
this._modals.create(
|
||||
function (modalModel) {
|
||||
return new ConfirmationModalView({
|
||||
modalModel: modalModel,
|
||||
template: require('./modals-templates/remove-table-column.tpl'),
|
||||
renderOpts: {
|
||||
name: self.model.get('name')
|
||||
},
|
||||
loadingTitle: _t('components.table.columns.destroy.loading', {
|
||||
columnName: self.model.get('name')
|
||||
}),
|
||||
runAction: function () {
|
||||
removeTableColumnOperation({
|
||||
columnModel: self.model,
|
||||
onSuccess: function () {
|
||||
modalModel.destroy();
|
||||
},
|
||||
onError: function (e) {
|
||||
modalModel.destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
_onAttributeDblClicked: function () {
|
||||
if (this.model.isEditable() && !this._tableViewModel.isDisabled()) {
|
||||
this._startEditing();
|
||||
}
|
||||
},
|
||||
|
||||
_initRenameBinds: function () {
|
||||
$(document).bind('keydown', this._onKeyDown);
|
||||
},
|
||||
|
||||
_destroyRenameBinds: function () {
|
||||
$(document).unbind('keydown', this._onKeyDown);
|
||||
},
|
||||
|
||||
_onKeyDown: function (ev) {
|
||||
var keyCode = ev.which;
|
||||
if (keyCode === ENTER_KEY_CODE) {
|
||||
this._saveNewName();
|
||||
} else if (keyCode === ESC_KEY_CODE) {
|
||||
this._finishEditing();
|
||||
}
|
||||
},
|
||||
|
||||
_startEditing: function () {
|
||||
this.$('.js-attribute')
|
||||
.addClass('is-active')
|
||||
.removeAttr('readonly');
|
||||
|
||||
this._initRenameBinds();
|
||||
},
|
||||
|
||||
_finishEditing: function () {
|
||||
this.$('.js-attribute')
|
||||
.val(this.model.get('name'))
|
||||
.removeClass('is-active')
|
||||
.attr('readonly', '');
|
||||
|
||||
this._destroyRenameBinds();
|
||||
},
|
||||
|
||||
_saveNewName: function () {
|
||||
if (this.model.isEditable()) {
|
||||
var newName = this.$('.js-attribute').val();
|
||||
var columnModel = this.model;
|
||||
var oldName = columnModel.get('name');
|
||||
|
||||
if (oldName !== newName && newName !== '') {
|
||||
this._modals.create(
|
||||
function (modalModel) {
|
||||
return new ConfirmationModalView({
|
||||
modalModel: modalModel,
|
||||
template: require('./modals-templates/rename-table-column.tpl'),
|
||||
renderOpts: {
|
||||
columnName: oldName,
|
||||
newName: newName
|
||||
},
|
||||
loadingTitle: _t('components.table.columns.rename.loading', {
|
||||
columnName: oldName,
|
||||
newName: newName
|
||||
}),
|
||||
runAction: function () {
|
||||
renameColumnOperation({
|
||||
columnModel: columnModel,
|
||||
newName: newName,
|
||||
onSuccess: function () {
|
||||
modalModel.destroy();
|
||||
},
|
||||
onError: function (e) {
|
||||
modalModel.destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Setting old name just in case user cancel it
|
||||
this._finishEditing();
|
||||
},
|
||||
|
||||
focusInput: function () {
|
||||
this._startEditing();
|
||||
this.$('.js-attribute').select();
|
||||
},
|
||||
|
||||
clean: function () {
|
||||
this._destroyRenameBinds();
|
||||
this._destroyScrollBinding();
|
||||
CoreView.prototype.clean.apply(this);
|
||||
}
|
||||
});
|
||||
23
lib/assets/javascripts/builder/components/table/head/table-head-item.tpl
Executable file
23
lib/assets/javascripts/builder/components/table/head/table-head-item.tpl
Executable file
@@ -0,0 +1,23 @@
|
||||
<div class="
|
||||
Table-headItemWrapper
|
||||
<%- name === 'cartodb_id' || (type === 'geometry' && geometry !== 'point') ? 'Table-headItemWrapper--short' : '' %>
|
||||
">
|
||||
<div class="u-flex u-justifySpace">
|
||||
<input class="Table-headItemName CDB-Text CDB-Size-medium is-semibold u-ellipsis js-attribute" value="<%- name %>" title="<%- name %>" readonly />
|
||||
|
||||
<% if (isOrderBy) { %>
|
||||
<i class="CDB-Size CDB-Size-small CDB-IconFont CDB-IconFont-arrowNext
|
||||
Table-columnSorted
|
||||
Table-columnSorted--<% if (sortBy === 'asc') {%>asc<% } else {%>desc<% } %>
|
||||
u-rSpace u-altTextColor
|
||||
"></i>
|
||||
<% } %>
|
||||
|
||||
<button class="CDB-Shape-threePoints is-blue is-small js-columnOptions">
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
</button>
|
||||
</div>
|
||||
<p class="CDB-Size-small Table-headItemInfo u-altTextColor"><%- type %></p>
|
||||
</div>
|
||||
@@ -0,0 +1,127 @@
|
||||
var _ = require('underscore');
|
||||
var CustomListItemView = require('builder/components/custom-list/custom-list-item-view');
|
||||
var CustomListView = require('builder/components/custom-list/custom-view');
|
||||
var QueryColumnModel = require('builder/data/query-column-model');
|
||||
|
||||
module.exports = CustomListItemView.extend({
|
||||
|
||||
events: _.extend(
|
||||
CustomListItemView.prototype.events,
|
||||
{
|
||||
'click .js-desc': '_onDescClick',
|
||||
'click .js-asc': '_onAscClick',
|
||||
'click .js-order': 'killEvent'
|
||||
}
|
||||
),
|
||||
|
||||
render: function () {
|
||||
this.$el.empty();
|
||||
this.clearSubViews();
|
||||
|
||||
this.$el.append(
|
||||
this.options.template(
|
||||
{
|
||||
typeLabel: this.options.typeLabel,
|
||||
isSelected: this.model.get('selected'),
|
||||
isDisabled: this.model.get('disabled'),
|
||||
isDestructive: this.model.get('destructive'),
|
||||
isOrderBy: this.model.get('isOrderBy'),
|
||||
sortBy: this.model.get('sortBy'),
|
||||
name: this.model.getName(),
|
||||
val: this.model.getValue()
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
this.$el
|
||||
.attr('data-val', this.model.getValue())
|
||||
.toggleClass('is-disabled', !!this.model.get('disabled'));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_onClick: function (ev) {
|
||||
this.killEvent(ev);
|
||||
|
||||
if (this.model.getValue() === 'change') {
|
||||
this._openSubContextMenu(ev);
|
||||
} else {
|
||||
this.model.set('selected', true);
|
||||
}
|
||||
},
|
||||
|
||||
_hideSubContextMenu: function () {
|
||||
if (this._subContextMenu) {
|
||||
this._subContextMenu.clean();
|
||||
this.removeView(this._subContextMenu);
|
||||
delete this.collection;
|
||||
delete this._subContextMenu;
|
||||
}
|
||||
},
|
||||
|
||||
_openSubContextMenu: function (ev) {
|
||||
if (this._subContextMenu) {
|
||||
this._hideSubContextMenu();
|
||||
}
|
||||
|
||||
var subContextClassName = 'Table-columnTypeMenu ';
|
||||
if (this.model.get('isLastColumns')) {
|
||||
subContextClassName += ' Table-columnTypeMenu--toLeft ';
|
||||
}
|
||||
|
||||
this._subContextMenu = new CustomListView({
|
||||
className: subContextClassName + CustomListView.prototype.className,
|
||||
options: [
|
||||
{
|
||||
label: _t('components.table.columns.types.number'),
|
||||
disabled: !QueryColumnModel.isTypeChangeAllowed(this.model.get('type'), 'number'),
|
||||
val: 'number'
|
||||
}, {
|
||||
label: _t('components.table.columns.types.string'),
|
||||
disabled: !QueryColumnModel.isTypeChangeAllowed(this.model.get('type'), 'string'),
|
||||
val: 'string'
|
||||
}, {
|
||||
label: _t('components.table.columns.types.date'),
|
||||
disabled: !QueryColumnModel.isTypeChangeAllowed(this.model.get('type'), 'date'),
|
||||
val: 'date'
|
||||
}, {
|
||||
label: _t('components.table.columns.types.boolean'),
|
||||
disabled: !QueryColumnModel.isTypeChangeAllowed(this.model.get('type'), 'boolean'),
|
||||
val: 'boolean'
|
||||
}
|
||||
],
|
||||
showSearch: false,
|
||||
typeLabel: ''
|
||||
});
|
||||
|
||||
this._subContextMenu.collection.bind('change:selected', function (menuItem) {
|
||||
if (!menuItem.get('disabled')) {
|
||||
this.model.set({
|
||||
type: menuItem.getValue(),
|
||||
selected: true
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.$el.closest('.Table-columnMenu').append(this._subContextMenu.render().el);
|
||||
this._subContextMenu.show();
|
||||
this.addView(this._subContextMenu);
|
||||
},
|
||||
|
||||
_onAscClick: function (ev) {
|
||||
this.killEvent(ev);
|
||||
this.model.set({
|
||||
sort: 'asc',
|
||||
selected: true
|
||||
});
|
||||
},
|
||||
|
||||
_onDescClick: function (ev) {
|
||||
this.killEvent(ev);
|
||||
this.model.set({
|
||||
sort: 'desc',
|
||||
selected: true
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
<% if (val === 'order') { %>
|
||||
<div class="CDB-ListDecoration-itemLink js-order">
|
||||
<div class="u-flex u-justifySpace">
|
||||
<p class="CDB-Text CDB-Size-medium"><%- name %></p>
|
||||
<ul class="u-flex">
|
||||
<li class="js-asc">
|
||||
<i class="CDB-IconFont
|
||||
CDB-IconFont-arrowNext u-actionTextColor
|
||||
Table-columnSorted
|
||||
Table-columnSorted--asc
|
||||
<% if (isOrderBy && sortBy === 'asc') { %>is-disabled<% } %>
|
||||
<% if (isOrderBy && sortBy === 'desc') { %>is-semibold<% } %>
|
||||
"></i>
|
||||
</li>
|
||||
<li class="js-desc u-lSpace--xl">
|
||||
<i class="CDB-IconFont
|
||||
CDB-IconFont-arrowNext u-actionTextColor
|
||||
Table-columnSorted
|
||||
Table-columnSorted--desc
|
||||
<% if (isOrderBy && sortBy === 'desc') { %>is-disabled<% } %>
|
||||
<% if (isOrderBy && sortBy === 'asc') { %>is-semibold<% } %>
|
||||
"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% } else if (val === 'change') { %>
|
||||
<div class="CDB-ListDecoration-itemLink u-actionTextColor" title="<%- name %>">
|
||||
<div class="u-flex u-justifySpace u-alignCenter">
|
||||
<span><%- name %></span>
|
||||
<i class="CDB-IconFont CDB-Size-small is-semibold CDB-IconFont-rArrowLight"></i>
|
||||
</div>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div
|
||||
class="CDB-ListDecoration-itemLink <% if (isDestructive) { %> u-errorTextColor <% } else { %> u-actionTextColor <% } %>"
|
||||
title="<%- name %>"
|
||||
>
|
||||
<%- name %>
|
||||
</div>
|
||||
<% } %>
|
||||
100
lib/assets/javascripts/builder/components/table/head/table-head-view.js
Executable file
100
lib/assets/javascripts/builder/components/table/head/table-head-view.js
Executable file
@@ -0,0 +1,100 @@
|
||||
var $ = require('jquery');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var TableHeadItemView = require('./table-head-item-view');
|
||||
var template = require('./table-head.tpl');
|
||||
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
|
||||
var REQUIRED_OPTS = [
|
||||
'columnsCollection',
|
||||
'tableViewModel',
|
||||
'queryGeometryModel',
|
||||
'canHideColumns',
|
||||
'modals'
|
||||
];
|
||||
|
||||
/*
|
||||
* Main table head view
|
||||
*/
|
||||
module.exports = CoreView.extend({
|
||||
className: 'Table-head',
|
||||
tagName: 'table',
|
||||
|
||||
initialize: function (opts) {
|
||||
checkAndBuildOpts(opts, REQUIRED_OPTS, this);
|
||||
this._lastHeadItemView = null;
|
||||
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
this.$el.empty();
|
||||
this.$el.append(template());
|
||||
this._columnsCollection.each(this._renderColumnHead, this);
|
||||
return this;
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this._queryGeometryModel.bind('change:simple_geom', this.render, this);
|
||||
this.add_related_model(this._queryGeometryModel);
|
||||
this._tableViewModel.bind('change:sort_order change:order_by', this.render, this);
|
||||
this.add_related_model(this._tableViewModel);
|
||||
this._columnsCollection.bind('reset', function () {
|
||||
this.render();
|
||||
|
||||
if (this._newColumn) {
|
||||
var scrollWidth = this.$el.get(0).scrollWidth;
|
||||
|
||||
setTimeout(function () {
|
||||
this._scrollToLeft({
|
||||
pos: scrollWidth
|
||||
});
|
||||
this._focusLastHeadItem();
|
||||
}.bind(this), 500);
|
||||
|
||||
delete this._newColumn;
|
||||
}
|
||||
}, this);
|
||||
this._columnsCollection.bind('add', function (model) {
|
||||
this._newColumn = model;
|
||||
}, this);
|
||||
this.add_related_model(this._columnsCollection);
|
||||
},
|
||||
|
||||
_renderColumnHead: function (model) {
|
||||
var columnName = model.get('name');
|
||||
|
||||
if (!this._tableViewModel.isCustomQueryApplied() && columnName === 'the_geom_webmercator') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._canHideColumns && columnName === 'center' && model.isGeometryColumn()) {
|
||||
return;
|
||||
}
|
||||
|
||||
var view = new TableHeadItemView({
|
||||
model: model,
|
||||
modals: this._modals,
|
||||
columnsCollection: this._columnsCollection,
|
||||
tableViewModel: this._tableViewModel,
|
||||
simpleGeometry: this._queryGeometryModel.get('simple_geom')
|
||||
});
|
||||
this.$('.js-headRow').append(view.render().el);
|
||||
this.addView(view);
|
||||
|
||||
this._lastHeadItemView = view;
|
||||
},
|
||||
|
||||
_scrollToLeft: function (opts) {
|
||||
opts = opts || {};
|
||||
$('.Table').animate({
|
||||
scrollLeft: opts.pos || 0
|
||||
}, opts.speed || 'slow');
|
||||
},
|
||||
|
||||
_focusLastHeadItem: function () {
|
||||
if (this._lastHeadItemView) {
|
||||
this._lastHeadItemView.focusInput();
|
||||
}
|
||||
}
|
||||
});
|
||||
3
lib/assets/javascripts/builder/components/table/head/table-head.tpl
Executable file
3
lib/assets/javascripts/builder/components/table/head/table-head.tpl
Executable file
@@ -0,0 +1,3 @@
|
||||
<thead>
|
||||
<tr class="js-headRow"></tr>
|
||||
</thead>
|
||||
Reference in New Issue
Block a user