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>
<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=""><%= scope.textOrder %></label>
</td>
</tr>
<tr>
<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>
</tr>
</table>

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

@ -53,7 +53,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
options: {
alias: 'SortDialog',
contentWidth: 500,
height: 285,
height: 294,
buttons: ['ok', 'cancel']
},
@ -84,14 +84,13 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.sortList = new Common.UI.ListView({
el: $('#sort-dialog-list', this.$window),
store: new Common.UI.DataViewStore(),
simpleAddMode: true,
emptyText: '',
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<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-sort-<%= index %>" 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;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-<%= levelIndex %>" 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>'
].join(''))
});
@ -101,12 +100,12 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.btnAdd = new Common.UI.Button({
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({
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({
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.on('click', _.bind(this.onDownClick, this));
this.lblColumn = $('#sort-dialog-label-column');
this.afterRender();
},
@ -146,15 +147,17 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
this.sortOptions = {
headers: props.asc_getHasHeaders(),
// 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
this.column_data = [
{ value: 'a', displayValue: 'a' },
{ value: 'b', displayValue: 'b' },
{ value: 'c', displayValue: 'c' }
];
this.column_data = [];
var values = props.asc_getSortList();
for (var i=0; i<values.length; i++) {
this.column_data.push({ value: i, displayValue: values[i] });
}
this.sort_data = [
{ value: Asc.c_oAscSortOptions.ByValue, displayValue: this.textValues },
{ 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++) {
var level = levels[i];
arr.push({
index: level.asc_getIndex(),
name: level.asc_getName(),
columnIndex: level.asc_getIndex(),
levelIndex: i,
sort: level.asc_getSortBy(),
order: level.asc_getDescending(),
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.length>0) && this.sortList.selectByIndex(0);
}
},
@ -214,19 +201,20 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
if (!item) return;
var cmpEl = this.sortList.cmpEl;
var i = item.get('index');
var i = item.get('levelIndex');
var el = cmpEl.find('#sort-dialog-cmb-col-' + i),
combo = new Common.UI.ComboBox({
el : el,
editable : false,
cls : 'input-group-nr',
menuCls : 'menu-absolute',
menuStyle : 'max-height: 135px;',
data : this.column_data
}).on('selected', function(combo, record) {
item.set('name', record.value);
item.set('columnIndex', record.value);
});
var val = item.get('name');
(val!==null) && combo.setValue(item.get('name'));
var val = item.get('columnIndex');
(val!==null) && combo.setValue(item.get('columnIndex'));
this.cmbsColumn[i] = combo;
el = cmpEl.find('#sort-dialog-cmb-sort-' + i);
@ -266,17 +254,65 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
handler : function(result, settings) {
if (result == 'ok' && 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();
},
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() {
var props = new Asc.CSortProperties();
props.asc_setHasHeaders(this.sortOptions.headers);
// props.asc_setCaseSensitive(this.sortOptions.sensitive);
props.asc_setColumnSort(this.sortOptions.sort);
props.asc_setColumnSort(this.sortOptions.sortcol);
return {};
},
@ -295,6 +331,7 @@ define([ 'text!spreadsheeteditor/main/app/template/SortDialog.template',
textDelete: 'Delete level',
textCopy: 'Copy level',
textColumn: 'Column',
textRow: 'Row',
textSort: 'Sort on',
textOrder: 'Order',
textUp: 'Move level up',

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

@ -78,12 +78,12 @@ define([
'</tr>',
'<tr>',
'<td class="padding-small">',
'<div id="sort-options-radio-top"></div>',
'<div id="sort-options-radio-row"></div>',
'</td>',
'</tr>',
'<tr>',
'<td class="padding-small">',
'<div id="sort-options-radio-left"></div>',
'<div id="sort-options-radio-col"></div>',
'</td>',
'</tr>',
'</table>',
@ -113,19 +113,21 @@ define([
});
this.radioTop = new Common.UI.RadioBox({
el: $('#sort-options-radio-top'),
el: $('#sort-options-radio-row'),
labelText: this.textTopBottom,
name: 'asc-radio-sort-orient',
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({
el: $('#sort-options-radio-left'),
el: $('#sort-options-radio-col'),
labelText: this.textLeftRight,
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();
},
@ -138,12 +140,12 @@ define([
if (props) {
this.chHeaders.setValue(props.headers);
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 () {
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',