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

[SSE] Custom sort: add/remove levels. Set sort options.

Browse source
This commit is contained in:
Julia Radzhabova 2019-10-07 15:20:00 +03:00
parent 488753ac57
commit 8be314b4f4
3 changed files with 88 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/spreadsheeteditor/main/app/template/SortDialog.template
View file

@ -13,14 +13,14 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<label class="header" style="width: 150px;"><%= scope.textColumn %></label> <label id="sort-dialog-label-column" class="header" style="width: 150px;"><%= scope.textColumn %></label>
<label class="header" style="width: 150px;"><%= scope.textSort %></label> <label class="header" style="width: 150px;"><%= scope.textSort %></label>
<label class="header" style=""><%= scope.textOrder %></label> <label class="header" style=""><%= scope.textOrder %></label>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div id="sort-dialog-list" class="" style="width:100%; height: 143px;"></div> <div id="sort-dialog-list" class="" style="width:100%; height: 152px;"></div>
</td> </td>
</tr> </tr>
</table> </table>

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

@ -53,7 +53,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
options: { options: {
alias: 'SortDialog', alias: 'SortDialog',
contentWidth: 500, contentWidth: 500,
height: 285, height: 294,
buttons: ['ok', 'cancel'] buttons: ['ok', 'cancel']
}, },
@ -84,14 +84,13 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.sortList = new Common.UI.ListView({ this.sortList = new Common.UI.ListView({
el: $('#sort-dialog-list', this.$window), el: $('#sort-dialog-list', this.$window),
store: new Common.UI.DataViewStore(), store: new Common.UI.DataViewStore(),
simpleAddMode: true,
emptyText: '', emptyText: '',
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;">',
'<div style="width:150px;padding-right: 5px;display: inline-block;"><div id="sort-dialog-cmb-col-<%= index %>" class="input-group-nr" style="width:100%;"></div></div>', '<div style="width:150px;padding-right: 5px;display: inline-block;"><div id="sort-dialog-cmb-col-<%= levelIndex %>" class="input-group-nr" style="width:100%;"></div></div>',
'<div style="width:150px;padding-right: 5px;display: inline-block;"><div id="sort-dialog-cmb-sort-<%= index %>" class="input-group-nr" style="width:100%;"></div></div>', '<div style="width:150px;padding-right: 5px;display: inline-block;"><div id="sort-dialog-cmb-sort-<%= levelIndex %>" class="input-group-nr" style="width:100%;"></div></div>',
'<div style="width:150px;display: inline-block;"><div id="sort-dialog-cmb-order-<%= index %>" class="input-group-nr" style="width:100%;"></div></div>', '<div style="width:150px;display: inline-block;"><div id="sort-dialog-cmb-order-<%= levelIndex %>" class="input-group-nr" style="width:100%;"></div></div>',
'</div>' '</div>'
].join('')) ].join(''))
}); });
@ -101,12 +100,12 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.btnAdd = new Common.UI.Button({ this.btnAdd = new Common.UI.Button({
el: $('#sort-dialog-btn-add') el: $('#sort-dialog-btn-add')
}); });
// this.btnAdd.on('click', _.bind(this.onAddLevel, this, false)); this.btnAdd.on('click', _.bind(this.onAddLevel, this, false));
this.btnDelete = new Common.UI.Button({ this.btnDelete = new Common.UI.Button({
el: $('#sort-dialog-btn-delete') el: $('#sort-dialog-btn-delete')
}); });
// this.btnDelete.on('click', _.bind(this.onDeleteLevel, this)); this.btnDelete.on('click', _.bind(this.onDeleteLevel, this));
this.btnCopy = new Common.UI.Button({ this.btnCopy = new Common.UI.Button({
el: $('#sort-dialog-btn-copy') el: $('#sort-dialog-btn-copy')
@ -134,6 +133,8 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.btnDown.render($('#sort-dialog-btn-down')) ; this.btnDown.render($('#sort-dialog-btn-down')) ;
// this.btnDown.on('click', _.bind(this.onDownClick, this)); // this.btnDown.on('click', _.bind(this.onDownClick, this));
this.lblColumn = $('#sort-dialog-label-column');
this.afterRender(); this.afterRender();
}, },
@ -146,15 +147,17 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.sortOptions = { this.sortOptions = {
headers: props.asc_getHasHeaders(), headers: props.asc_getHasHeaders(),
// sensitive: props.asc_getCaseSensitive(), // sensitive: props.asc_getCaseSensitive(),
sort: props.asc_getColumnSort() sortcol: props.asc_getColumnSort()
}; };
this.lblColumn.text(props.asc_getColumnSort() ? this.textColumn : this.textRow);
// get name from props // get name from props
this.column_data = [ this.column_data = [];
{ value: 'a', displayValue: 'a' }, var values = props.asc_getSortList();
{ value: 'b', displayValue: 'b' }, for (var i=0; i<values.length; i++) {
{ value: 'c', displayValue: 'c' } this.column_data.push({ value: i, displayValue: values[i] });
]; }
this.sort_data = [ this.sort_data = [
{ value: Asc.c_oAscSortOptions.ByValue, displayValue: this.textValues }, { value: Asc.c_oAscSortOptions.ByValue, displayValue: this.textValues },
{ value: Asc.c_oAscSortOptions.ByColorFill, displayValue: this.textCellColor }, { value: Asc.c_oAscSortOptions.ByColorFill, displayValue: this.textCellColor },
@ -182,31 +185,15 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
for (var i=0; i<levels.length; i++) { for (var i=0; i<levels.length; i++) {
var level = levels[i]; var level = levels[i];
arr.push({ arr.push({
index: level.asc_getIndex(), columnIndex: level.asc_getIndex(),
name: level.asc_getName(), levelIndex: i,
sort: level.asc_getSortBy(), sort: level.asc_getSortBy(),
order: level.asc_getDescending(), order: level.asc_getDescending(),
color: level.asc_getColor() color: level.asc_getColor()
}); });
} }
// arr.push({
// index: 0,
// name: 'a',
// sort: Asc.c_oAscSortOptions.ByValue,
// order: Asc.c_oAscSortOptions.Ascending
// });
// arr.push({
// index: 1,
// name: 's',
// sort: Asc.c_oAscSortOptions.ByValue,
// order: Asc.c_oAscSortOptions.Descending
// });
arr.sort(function (a, b) {
return a.index - b.index;
});
this.sortList.store.reset(arr); this.sortList.store.reset(arr);
(this.sortList.store.length>0) && this.sortList.selectByIndex(0);
} }
}, },
@ -214,19 +201,20 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
if (!item) return; if (!item) return;
var cmpEl = this.sortList.cmpEl; var cmpEl = this.sortList.cmpEl;
var i = item.get('index'); var i = item.get('levelIndex');
var el = cmpEl.find('#sort-dialog-cmb-col-' + i), var el = cmpEl.find('#sort-dialog-cmb-col-' + i),
combo = new Common.UI.ComboBox({ combo = new Common.UI.ComboBox({
el : el, el : el,
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
menuCls : 'menu-absolute', menuCls : 'menu-absolute',
menuStyle : 'max-height: 135px;',
data : this.column_data data : this.column_data
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
item.set('name', record.value); item.set('columnIndex', record.value);
}); });
var val = item.get('name'); var val = item.get('columnIndex');
(val!==null) && combo.setValue(item.get('name')); (val!==null) && combo.setValue(item.get('columnIndex'));
this.cmbsColumn[i] = combo; this.cmbsColumn[i] = combo;
el = cmpEl.find('#sort-dialog-cmb-sort-' + i); el = cmpEl.find('#sort-dialog-cmb-sort-' + i);
@ -266,17 +254,65 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
handler : function(result, settings) { handler : function(result, settings) {
if (result == 'ok' && settings) { if (result == 'ok' && settings) {
me.sortOptions = settings; me.sortOptions = settings;
me.lblColumn.text(settings.sortcol ? me.textColumn : me.textRow);
me.props.asc_setHasHeaders(settings.headers);
// me.props.asc_setCaseSensitive(settings.sensitive);
me.props.asc_setColumnSort(settings.sortcol);
me.props.asc_updateSortList();
me.updateSortValues();
} }
} }
}); });
win.show(); win.show();
}, },
updateSortValues: function() {
var values = this.props.asc_getSortList();
this.column_data = [];
for (var i=0; i<values.length; i++) {
this.column_data.push({ value: values[i], displayValue: values[i] });
}
for (var i=0; i<this.cmbsColumn.length; i++) {
var cmb = this.cmbsColumn[i];
if (!cmb) continue;
cmb.setData(this.column_data);
}
},
onAddLevel: function() {
var store = this.sortList.store,
rec = this.sortList.getSelectedRec();
rec = store.add({
levelIndex: this.cmbsColumn.length,
sort: Asc.c_oAscSortOptions.ByValue,
order: Asc.c_oAscSortOptions.Ascending
}, {at: rec ? store.indexOf(rec)+1 : store.length});
if (rec) {
this.sortList.selectRecord(rec);
this.sortList.scrollToRecord(rec);
}
},
onDeleteLevel: function() {
var store = this.sortList.store,
rec = this.sortList.getSelectedRec();
if (rec) {
var index = rec.get('levelIndex');
this.cmbsColumn[index] = undefined;
this.cmbsSort[index] = undefined;
this.cmbsOrder[index] = undefined;
index = store.indexOf(rec);
store.remove(rec);
(store.length>0) && this.sortList.selectByIndex(index<store.length ? index : store.length-1);
}
},
getSettings: function() { getSettings: function() {
var props = new Asc.CSortProperties(); var props = new Asc.CSortProperties();
props.asc_setHasHeaders(this.sortOptions.headers); props.asc_setHasHeaders(this.sortOptions.headers);
// props.asc_setCaseSensitive(this.sortOptions.sensitive); // props.asc_setCaseSensitive(this.sortOptions.sensitive);
props.asc_setColumnSort(this.sortOptions.sort); props.asc_setColumnSort(this.sortOptions.sortcol);
return {}; return {};
}, },
@ -295,6 +331,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
textDelete: 'Delete level', textDelete: 'Delete level',
textCopy: 'Copy level', textCopy: 'Copy level',
textColumn: 'Column', textColumn: 'Column',
textRow: 'Row',
textSort: 'Sort on', textSort: 'Sort on',
textOrder: 'Order', textOrder: 'Order',
textUp: 'Move level up', textUp: 'Move level up',

22
apps/spreadsheeteditor/main/app/view/SortOptionsDialog.js
View file

@ -78,12 +78,12 @@ define([
'</tr>', '</tr>',
'<tr>', '<tr>',
'<td class="padding-small">', '<td class="padding-small">',
'<div id="sort-options-radio-top"></div>', '<div id="sort-options-radio-row"></div>',
'</td>', '</td>',
'</tr>', '</tr>',
'<tr>', '<tr>',
'<td class="padding-small">', '<td class="padding-small">',
'<div id="sort-options-radio-left"></div>', '<div id="sort-options-radio-col"></div>',
'</td>', '</td>',
'</tr>', '</tr>',
'</table>', '</table>',
@ -113,19 +113,21 @@ define([
}); });
this.radioTop = new Common.UI.RadioBox({ this.radioTop = new Common.UI.RadioBox({
el: $('#sort-options-radio-top'), el: $('#sort-options-radio-row'),
labelText: this.textTopBottom, labelText: this.textTopBottom,
name: 'asc-radio-sort-orient', name: 'asc-radio-sort-orient',
checked: true checked: true
}).on('change', function(field, newValue) { }).on('change', _.bind(function(field, newValue, eOpts) {
}); newValue && this.chHeaders.setDisabled(false);
}, this));
this.radioLeft = new Common.UI.RadioBox({ this.radioLeft = new Common.UI.RadioBox({
el: $('#sort-options-radio-left'), el: $('#sort-options-radio-col'),
labelText: this.textLeftRight, labelText: this.textLeftRight,
name: 'asc-radio-sort-orient' name: 'asc-radio-sort-orient'
}).on('change', function(field, newValue) { }).on('change', _.bind(function(field, newValue, eOpts) {
}); newValue && this.chHeaders.setDisabled(true);
}, this));
this.afterRender(); this.afterRender();
}, },
@ -138,12 +140,12 @@ define([
if (props) { if (props) {
this.chHeaders.setValue(props.headers); this.chHeaders.setValue(props.headers);
this.chCase.setValue(props.sensitive); this.chCase.setValue(props.sensitive);
(props.sort == 'Row') ? this.radioLeft.setValue(true) : this.radioTop.setValue(true); (props.sortcol) ? this.radioTop.setValue(true) : this.radioLeft.setValue(true);
} }
}, },
getSettings: function () { getSettings: function () {
return {headers: this.chHeaders.getValue()=='checked', sensitive: this.chCase.getValue()=='checked', sort: this.radioLeft.getValue() ? 'Row' : 'Column'}; return {headers: this.radioTop.getValue() && (this.chHeaders.getValue()=='checked'), sensitive: this.chCase.getValue()=='checked', sortcol: this.radioTop.getValue()};
}, },
textTitle: 'Sort Options', textTitle: 'Sort Options',