128 lines
3.5 KiB
JavaScript
Executable File
128 lines
3.5 KiB
JavaScript
Executable File
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
|
|
});
|
|
}
|
|
|
|
});
|