Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Refactoring sort settings (select data in combobox, add limit for rows/columns)

Browse source
This commit is contained in:
Julia Radzhabova 2019-11-26 10:39:44 +03:00
parent 9a1ed5cf70
commit 48fe19c588
2 changed files with 53 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/common/main/lib/component/ListView.js
View file

@ -67,11 +67,15 @@ define([
this.trigger('items:reset', this); this.trigger('items:reset', this);
}, },
onAddItem: function(record, store, opts) { createNewItem: function(record) {
var view = new Common.UI.DataViewItem({ return new Common.UI.DataViewItem({
template: this.itemTemplate, template: this.itemTemplate,
model: record model: record
}); });
},
onAddItem: function(record, store, opts) {
var view = this.createNewItem(record);
if (!this.innerEl) if (!this.innerEl)
this.innerEl = $(this.el).find('.inner'); this.innerEl = $(this.el).find('.inner');

61
apps/spreadsheeteditor/main/app/view/SortDialog.js
View file

@ -49,7 +49,29 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
SSE.Views = SSE.Views || {}; SSE.Views = SSE.Views || {};
var _CustomItem = Common.UI.DataViewItem.extend({
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
var me = this;
me.template = me.options.template || me.template;
me.listenTo(me.model, 'change:sort', function() {
me.render();
me.trigger('change', me, me.model);
});
me.listenTo(me.model, 'change:selected', function() {
var el = me.$el || $(me.el);
el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected'));
me.onSelectChange();
});
me.listenTo(me.model, 'remove', me.remove);
}
});
SSE.Views.SortDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ SSE.Views.SortDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: { options: {
alias: 'SortDialog', alias: 'SortDialog',
contentWidth: 500, contentWidth: 500,
@ -94,9 +116,10 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
el: $('#sort-dialog-list', this.$window), el: $('#sort-dialog-list', this.$window),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
emptyText: '', emptyText: '',
enableKeyEvents: false,
template: _.template(['<div class="listview inner" style=""></div>'].join('')), template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([ itemTemplate: _.template([
'<div class="list-item" style="width: 100%;display:inline-block;">', '<div class="list-item" style="width: 100%;display:inline-block;" id="sort-dialog-item-<%= levelIndex %>">',
'<div style="width:33%;padding-right: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-col-<%= levelIndex %>" class="input-group-nr"></div></div>', '<div style="width:33%;padding-right: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-col-<%= levelIndex %>" class="input-group-nr"></div></div>',
'<div style="width:33%;padding-right: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-sort-<%= levelIndex %>" class="input-group-nr"></div></div>', '<div style="width:33%;padding-right: 5px;display: inline-block;vertical-align: top;"><div id="sort-dialog-cmb-sort-<%= levelIndex %>" class="input-group-nr"></div></div>',
'<% if (sort==Asc.c_oAscSortOptions.ByColorFill || sort==Asc.c_oAscSortOptions.ByColorFont) { %>', '<% if (sort==Asc.c_oAscSortOptions.ByColorFill || sort==Asc.c_oAscSortOptions.ByColorFont) { %>',
@ -108,6 +131,12 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
'</div>' '</div>'
].join('')) ].join(''))
}); });
this.sortList.createNewItem = function(record) {
return new _CustomItem({
template: this.itemTemplate,
model: record
});
};
this.sortList.on('item:select', _.bind(this.onSelectLevel, this)) this.sortList.on('item:select', _.bind(this.onSelectLevel, this))
.on('item:keydown', _.bind(this.onKeyDown, this)); .on('item:keydown', _.bind(this.onKeyDown, this));
@ -170,8 +199,9 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
// get name from props // get name from props
this.column_data = []; this.column_data = [];
var values = props.asc_getSortList(); var values = props.asc_getSortList(),
for (var i=0; i<values.length; i++) { len = Math.min(values.length, 500);
for (var i=0; i<len; i++) {
this.column_data.push({ value: i, displayValue: values[i] }); this.column_data.push({ value: i, displayValue: values[i] });
} }
this.sort_data = [ this.sort_data = [
@ -224,16 +254,15 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
if (!item) return; if (!item) return;
var me = this, var me = this,
cmpEl = this.sortList.cmpEl, i = item.get('levelIndex'),
i = item.get('levelIndex'); cmpEl = this.sortList.cmpEl.find('#sort-dialog-item-' + i);
if (!this.levels[i]) if (!this.levels[i])
this.levels[i] = { this.levels[i] = {
order_data: this.order_data order_data: this.order_data
}; };
var level = this.levels[i]; var level = this.levels[i];
var el = cmpEl.find('#sort-dialog-cmb-col-' + i), var combo = new Common.UI.ComboBox({
combo = new Common.UI.ComboBox({ el : cmpEl.find('#sort-dialog-cmb-col-' + i),
el : el,
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
menuCls : 'menu-absolute', menuCls : 'menu-absolute',
@ -248,9 +277,8 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
(val!==null) && combo.setValue(item.get('columnIndex')); (val!==null) && combo.setValue(item.get('columnIndex'));
level.cmbColumn = combo; level.cmbColumn = combo;
el = cmpEl.find('#sort-dialog-cmb-sort-' + i);
combo = new Common.UI.ComboBox({ combo = new Common.UI.ComboBox({
el : el, el : cmpEl.find('#sort-dialog-cmb-sort-' + i),
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
menuCls : 'menu-absolute', menuCls : 'menu-absolute',
@ -269,6 +297,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
el : cmpEl.find('#sort-dialog-btn-color-' + i), el : cmpEl.find('#sort-dialog-btn-color-' + i),
editable : false, editable : false,
menuCls : 'menu-absolute', menuCls : 'menu-absolute',
menuStyle : 'max-height: 135px;',
data : level.color_data data : level.color_data
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
item.set('color', record.value); item.set('color', record.value);
@ -278,9 +307,8 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
level.cmbColor = combo; level.cmbColor = combo;
} }
el = cmpEl.find('#sort-dialog-cmb-order-' + i);
combo = new Common.UI.ComboBox({ combo = new Common.UI.ComboBox({
el : el, el : cmpEl.find('#sort-dialog-cmb-order-' + i),
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
menuCls : 'menu-absolute', menuCls : 'menu-absolute',
@ -291,6 +319,10 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
val = item.get('order'); val = item.get('order');
(val!==null) && combo.setValue(val); (val!==null) && combo.setValue(val);
level.cmbOrder = combo; level.cmbOrder = combo;
cmpEl.on('mousedown', '.combobox', function(){
me.sortList.selectRecord(item);
});
}, },
onOptions: function () { onOptions: function () {
@ -314,9 +346,10 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
}, },
updateSortValues: function() { updateSortValues: function() {
var values = this.props.asc_getSortList(); var values = this.props.asc_getSortList(),
len = Math.min(values.length, 500);
this.column_data = []; this.column_data = [];
for (var i=0; i<values.length; i++) { for (var i=0; i<len; i++) {
this.column_data.push({ value: i, displayValue: values[i] }); this.column_data.push({ value: i, displayValue: values[i] });
} }
var me = this; var me = this;