454 lines
19 KiB
JavaScript
454 lines
19 KiB
JavaScript
/**
|
|
* TableSettings.js
|
|
*
|
|
* Created by Julia Radzhabova on 3/28/16
|
|
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
|
|
*
|
|
*/
|
|
|
|
define([
|
|
'text!spreadsheeteditor/main/app/template/TableSettings.template',
|
|
'jquery',
|
|
'underscore',
|
|
'backbone',
|
|
'common/main/lib/component/Button',
|
|
'common/main/lib/component/CheckBox',
|
|
'common/main/lib/component/ComboDataView',
|
|
'spreadsheeteditor/main/app/view/TableOptionsDialog'
|
|
], function (menuTemplate, $, _, Backbone) {
|
|
'use strict';
|
|
|
|
SSE.Views.TableSettings = Backbone.View.extend(_.extend({
|
|
el: '#id-table-settings',
|
|
|
|
// Compile our stats template
|
|
template: _.template(menuTemplate),
|
|
|
|
// Delegated events for creating new items, and clearing completed ones.
|
|
events: {
|
|
},
|
|
|
|
options: {
|
|
alias: 'TableSettings'
|
|
},
|
|
|
|
initialize: function () {
|
|
var me = this;
|
|
|
|
this._state = {
|
|
TableName: '',
|
|
TemplateName: '',
|
|
Range: '',
|
|
CheckHeader: false,
|
|
CheckTotal: false,
|
|
CheckBanded: false,
|
|
CheckFirst: false,
|
|
CheckLast: false,
|
|
CheckColBanded: false,
|
|
CheckFilter: false,
|
|
DisabledControls: false,
|
|
TableNameError: false
|
|
};
|
|
this.lockedControls = [];
|
|
this._locked = false;
|
|
|
|
this._originalProps = null;
|
|
this._noApply = false;
|
|
|
|
this.render();
|
|
|
|
this.chHeader = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-header'),
|
|
labelText: this.textHeader
|
|
});
|
|
this.lockedControls.push(this.chHeader);
|
|
|
|
this.chTotal = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-total'),
|
|
labelText: this.textTotal
|
|
});
|
|
this.lockedControls.push(this.chTotal);
|
|
|
|
this.chBanded = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-banded'),
|
|
labelText: this.textBanded
|
|
});
|
|
this.lockedControls.push(this.chBanded);
|
|
|
|
this.chFirst = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-first'),
|
|
labelText: this.textFirst
|
|
});
|
|
this.lockedControls.push(this.chFirst);
|
|
|
|
this.chLast = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-last'),
|
|
labelText: this.textLast
|
|
});
|
|
this.lockedControls.push(this.chLast);
|
|
|
|
this.chColBanded = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-col-banded'),
|
|
labelText: this.textBanded
|
|
});
|
|
this.lockedControls.push(this.chColBanded);
|
|
|
|
this.chFilter = new Common.UI.CheckBox({
|
|
el: $('#table-checkbox-filter'),
|
|
labelText: this.textFilter
|
|
});
|
|
this.lockedControls.push(this.chFilter);
|
|
|
|
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.rowHeader));
|
|
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.rowTotal));
|
|
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.rowBanded));
|
|
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.columnFirst));
|
|
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.columnLast));
|
|
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.columnBanded));
|
|
this.chFilter.on('change', _.bind(this.onCheckTemplateChange, this, c_oAscChangeTableStyleInfo.filterButton));
|
|
|
|
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
|
itemWidth: 61,
|
|
itemHeight: 46,
|
|
menuMaxHeight: 300,
|
|
enableKeyEvents: true
|
|
});
|
|
this.cmbTableTemplate.render($('#table-combo-template'));
|
|
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
|
'min-width': 175,
|
|
'max-width': 175
|
|
});
|
|
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
|
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
|
me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
});
|
|
this.lockedControls.push(this.cmbTableTemplate);
|
|
|
|
this.txtTableName = new Common.UI.InputField({
|
|
el : $('#table-txt-name'),
|
|
name : 'tablename',
|
|
style : 'width: 100%;',
|
|
validateOnBlur: false
|
|
});
|
|
this.txtTableName.on('changed:after', _.bind(this.onTableNameChanged, this));
|
|
this.lockedControls.push(this.txtTableName);
|
|
|
|
this.btnSelectData = new Common.UI.Button({
|
|
el: $('#table-btn-select-data')
|
|
});
|
|
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
|
|
|
|
this.btnEdit = new Common.UI.Button({
|
|
cls: 'btn-icon-default',
|
|
iconCls: 'btn-edit-table',
|
|
menu : new Common.UI.Menu({
|
|
menuAlign: 'tr-br',
|
|
items: [
|
|
{ caption: this.selectRowText, value: c_oAscChangeSelectionFormatTable.row, idx: 0 },
|
|
{ caption: this.selectColumnText, value: c_oAscChangeSelectionFormatTable.column, idx: 1 },
|
|
{ caption: this.selectDataText, value: c_oAscChangeSelectionFormatTable.data, idx: 2 },
|
|
{ caption: this.selectTableText, value: c_oAscChangeSelectionFormatTable.all, idx: 3 },
|
|
{ caption: '--' },
|
|
{ caption: this.insertRowAboveText, value: c_oAscInsertOptions.InsertTableRowAbove, idx: 4 },
|
|
{ caption: this.insertRowBelowText, value: c_oAscInsertOptions.InsertTableRowBelow, idx: 5 },
|
|
{ caption: this.insertColumnLeftText, value: c_oAscInsertOptions.InsertTableColLeft, idx: 6 },
|
|
{ caption: this.insertColumnRightText, value: c_oAscInsertOptions.InsertTableColRight, idx: 7 },
|
|
{ caption: '--' },
|
|
{ caption: this.deleteRowText, value: c_oAscDeleteOptions.DeleteRows, idx: 8 },
|
|
{ caption: this.deleteColumnText, value: c_oAscDeleteOptions.DeleteColumns, idx: 9 },
|
|
{ caption: this.deleteTableText, value: c_oAscDeleteOptions.DeleteTable, idx: 10 }
|
|
]
|
|
})
|
|
});
|
|
this.btnEdit.render( $('#table-btn-edit')) ;
|
|
this.btnEdit.menu.on('show:after', _.bind( function(menu){
|
|
if (this.api) {
|
|
menu.items[5].setDisabled(!this._originalProps.asc_getIsInsertRowAbove());
|
|
menu.items[6].setDisabled(!this._originalProps.asc_getIsInsertRowBelow());
|
|
menu.items[7].setDisabled(!this._originalProps.asc_getIsInsertColumnLeft());
|
|
menu.items[8].setDisabled(!this._originalProps.asc_getIsInsertColumnRight());
|
|
|
|
menu.items[10].setDisabled(!this._originalProps.asc_getIsDeleteRow());
|
|
menu.items[11].setDisabled(!this._originalProps.asc_getIsDeleteColumn());
|
|
menu.items[12].setDisabled(!this._originalProps.asc_getIsDeleteTable());
|
|
}
|
|
}, this));
|
|
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
|
this.lockedControls.push(this.btnEdit);
|
|
},
|
|
|
|
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
|
|
if (this.api)
|
|
this.api.asc_changeFormatTableInfo(this._state.TableName, type, newValue=='checked');
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
},
|
|
|
|
onTableTemplateSelect: function(combo, record){
|
|
if (this.api && !this._noApply) {
|
|
if (this._state.TemplateName)
|
|
this.api.asc_changeAutoFilter(this._state.TableName, c_oAscChangeFilterOptions.style, record.get('name'));
|
|
}
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
},
|
|
|
|
onEditClick: function(menu, item, e) {
|
|
if (this.api) {
|
|
if (item.options.idx>=0 && item.options.idx<4)
|
|
this.api.asc_changeSelectionFormatTable(this._state.TableName, item.value);
|
|
else if (item.options.idx>=4 && item.options.idx<8) {
|
|
this.api.asc_insertCellsInTable(this._state.TableName, item.value);
|
|
} else {
|
|
this.api.asc_deleteCellsInTable(this._state.TableName, item.value);
|
|
}
|
|
}
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
},
|
|
|
|
onTableNameChanged: function(input, newValue, oldValue) {
|
|
var oldName = this._state.TableName;
|
|
this._state.TableName = '';
|
|
|
|
if (oldName.toLowerCase() == newValue.toLowerCase()) {
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
isvalid = this.api.asc_checkDefinedName(newValue, null);
|
|
if (isvalid.asc_getStatus() === true) isvalid = true;
|
|
else {
|
|
switch (isvalid.asc_getReason()) {
|
|
case c_oAscDefinedNameReason.IsLocked:
|
|
isvalid = this.textIsLocked;
|
|
break;
|
|
case c_oAscDefinedNameReason.Existed:
|
|
isvalid = this.textExistName;
|
|
break;
|
|
case c_oAscDefinedNameReason.NameReserved:
|
|
isvalid = this.textReservedName;
|
|
break;
|
|
default:
|
|
isvalid = this.textInvalidName;
|
|
}
|
|
}
|
|
if (isvalid === true) {
|
|
this.api.asc_changeDisplayNameTable(oldName, newValue);
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
} else if (!this._state.TableNameError) {
|
|
this._state.TableNameError = true;
|
|
Common.UI.alert({
|
|
msg: isvalid,
|
|
title: this.notcriticalErrorTitle,
|
|
iconCls: 'warn',
|
|
buttons: ['ok'],
|
|
callback: function(btn){
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
me._state.TableNameError = false;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
render: function () {
|
|
var el = $(this.el);
|
|
el.html(this.template({
|
|
scope: this
|
|
}));
|
|
},
|
|
|
|
setApi: function(o) {
|
|
this.api = o;
|
|
if (o) {
|
|
this.api.asc_registerCallback('asc_onInitTablePictures', _.bind(this.onApiInitTableTemplates, this));
|
|
}
|
|
return this;
|
|
},
|
|
|
|
ChangeSettings: function(props) {
|
|
this.disableControls(this._locked);
|
|
|
|
if (props )//formatTableInfo
|
|
{
|
|
this._originalProps = props;
|
|
|
|
var value = props.asc_getTableName();
|
|
if (this._state.TableName!==value) {
|
|
this.txtTableName.setValue(value);
|
|
this._state.TableName=value;
|
|
}
|
|
|
|
this._state.Range = props.asc_getTableRange();
|
|
|
|
var needTablePictures = false;
|
|
value = props.asc_getFirstRow();
|
|
if (this._state.CheckHeader!==value) {
|
|
this.chHeader.setValue(value, true);
|
|
this._state.CheckHeader=value;
|
|
needTablePictures = true;
|
|
}
|
|
|
|
value = props.asc_getLastRow();
|
|
if (this._state.CheckTotal!==value) {
|
|
this.chTotal.setValue(value, true);
|
|
this._state.CheckTotal=value;
|
|
needTablePictures = true;
|
|
}
|
|
|
|
value = props.asc_getBandHor();
|
|
if (this._state.CheckBanded!==value) {
|
|
this.chBanded.setValue(value, true);
|
|
this._state.CheckBanded=value;
|
|
needTablePictures = true;
|
|
}
|
|
|
|
value = props.asc_getFirstCol();
|
|
if (this._state.CheckFirst!==value) {
|
|
this.chFirst.setValue(value, true);
|
|
this._state.CheckFirst=value;
|
|
needTablePictures = true;
|
|
}
|
|
|
|
value = props.asc_getLastCol();
|
|
if (this._state.CheckLast!==value) {
|
|
this.chLast.setValue(value, true);
|
|
this._state.CheckLast=value;
|
|
needTablePictures = true;
|
|
}
|
|
|
|
value = props.asc_getBandVer();
|
|
if (this._state.CheckColBanded!==value) {
|
|
this.chColBanded.setValue(value, true);
|
|
this._state.CheckColBanded=value;
|
|
needTablePictures = true;
|
|
}
|
|
|
|
value = props.asc_getFilterButton();
|
|
if (this._state.CheckFilter!==value) {
|
|
this.chFilter.setValue(value, true);
|
|
this._state.CheckFilter=value;
|
|
}
|
|
|
|
if (needTablePictures)
|
|
this.onApiInitTableTemplates(this.api.asc_getTablePictures(props));
|
|
|
|
//for table-template
|
|
value = props.asc_getTableStyleName();
|
|
if (this._state.TemplateName!==value || this._isTemplatesChanged) {
|
|
this.cmbTableTemplate.suspendEvents();
|
|
var rec = this.cmbTableTemplate.menuPicker.store.findWhere({
|
|
name: value
|
|
});
|
|
this.cmbTableTemplate.menuPicker.selectRecord(rec);
|
|
this.cmbTableTemplate.resumeEvents();
|
|
|
|
if (this._isTemplatesChanged) {
|
|
if (rec)
|
|
this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.getSelectedRec(),true);
|
|
else
|
|
this.cmbTableTemplate.fillComboView(this.cmbTableTemplate.menuPicker.store.at(0), true);
|
|
}
|
|
this._state.TemplateName=value;
|
|
}
|
|
this._isTemplatesChanged = false;
|
|
}
|
|
},
|
|
|
|
onApiInitTableTemplates: function(Templates){
|
|
var self = this;
|
|
this._isTemplatesChanged = true;
|
|
|
|
var count = self.cmbTableTemplate.menuPicker.store.length;
|
|
if (count>0 && count==Templates.length) {
|
|
var data = self.cmbTableTemplate.menuPicker.store.models;
|
|
_.each(Templates, function(template, index){
|
|
data[index].set('imageUrl', template.asc_getImage());
|
|
});
|
|
} else {
|
|
self.cmbTableTemplate.menuPicker.store.reset([]);
|
|
var arr = [];
|
|
_.each(Templates, function(template){
|
|
arr.push({
|
|
id : Common.UI.getId(),
|
|
name : template.asc_getName(),
|
|
caption : template.asc_getDisplayName(),
|
|
type : template.asc_getType(),
|
|
imageUrl : template.asc_getImage(),
|
|
allowSelected : true,
|
|
selected : false
|
|
});
|
|
});
|
|
self.cmbTableTemplate.menuPicker.store.add(arr);
|
|
}
|
|
},
|
|
|
|
onSelectData: function() {
|
|
return;
|
|
var me = this;
|
|
if (me.api) {
|
|
var handlerDlg = function(dlg, result) {
|
|
if (result == 'ok') {
|
|
me.api.asc_setSelectionDialogMode(c_oAscSelectionDialogType.None);
|
|
// me.api.asc_changeAutoFilter(me._state.TableName, c_oAscChangeFilterOptions.style, fmtname);
|
|
}
|
|
|
|
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
|
|
};
|
|
var win = new SSE.Views.TableOptionsDialog({
|
|
handler: handlerDlg
|
|
});
|
|
|
|
win.show();
|
|
win.setSettings({
|
|
api : me.api
|
|
});
|
|
}
|
|
},
|
|
|
|
setLocked: function (locked) {
|
|
this._locked = locked;
|
|
},
|
|
|
|
disableControls: function(disable) {
|
|
if (this._state.DisabledControls!==disable) {
|
|
this._state.DisabledControls = disable;
|
|
_.each(this.lockedControls, function(item) {
|
|
item.setDisabled(disable);
|
|
});
|
|
}
|
|
},
|
|
|
|
textEdit: 'Rows & Columns',
|
|
selectRowText : 'Select Row',
|
|
selectColumnText : 'Select Entire Column',
|
|
selectDataText : 'Select Column Data',
|
|
selectTableText : 'Select Table',
|
|
insertRowAboveText : 'Insert Row Above',
|
|
insertRowBelowText : 'Insert Row Below',
|
|
insertColumnLeftText : 'Insert Column Left',
|
|
insertColumnRightText : 'Insert Column Right',
|
|
deleteRowText : 'Delete Row',
|
|
deleteColumnText : 'Delete Column',
|
|
deleteTableText : 'Delete Table',
|
|
textOK : 'OK',
|
|
textCancel : 'Cancel',
|
|
textTemplate : 'Select From Template',
|
|
textRows : 'Rows',
|
|
textColumns : 'Columns',
|
|
textHeader : 'Header',
|
|
textTotal : 'Total',
|
|
textBanded : 'Banded',
|
|
textFirst : 'First',
|
|
textLast : 'Last',
|
|
textEmptyTemplate : 'No templates',
|
|
textFilter : 'Filter button',
|
|
textTableName : 'Table Name',
|
|
textResize : 'Resize table',
|
|
textSelectData : 'Select Data',
|
|
textInvalidName : 'ERROR! Invalid table name',
|
|
textExistName : 'ERROR! Range with such a name already exists',
|
|
textIsLocked : 'This element is being edited by another user.',
|
|
notcriticalErrorTitle : 'Warning',
|
|
textReservedName : 'The name you are trying to use is already referenced in cell formulas. Please use some other name.'
|
|
|
|
}, SSE.Views.TableSettings || {}));
|
|
}); |