[SSE] Custom sort: fill list for custom sort

apps/common/main/lib/component/ComboBox.js

@@ -217,6 +217,11 @@ define([
                         });
                     }
 
+                    var $list = el.find('.dropdown-menu');
+                    if ($list.hasClass('menu-absolute')) {
+                        $list.css('min-width', el.outerWidth());
+                    }
+
                     el.on('show.bs.dropdown',             _.bind(me.onBeforeShowMenu, me));
                     el.on('shown.bs.dropdown',            _.bind(me.onAfterShowMenu, me));
                     el.on('hide.bs.dropdown',             _.bind(me.onBeforeHideMenu, me));
@@ -292,6 +297,12 @@ define([
                         tip.hide();
                     }
                 }
+
+                var $list = this.cmpEl.find('ul');
+                if ($list.hasClass('menu-absolute')) {
+                    var offset = this.cmpEl.offset();
+                    $list.css({left: offset.left, top: offset.top + this.cmpEl.outerHeight() + 2});
+                }
             },
 
             onAfterShowMenu: function(e) {

apps/common/main/resources/less/combobox.less

@@ -106,4 +106,8 @@
         padding-top: 0;
         padding-bottom: 0;
     }
+
+    .dropdown-menu.menu-absolute {
+        position: fixed;
+    }
 }

apps/spreadsheeteditor/main/app/template/SortDialog.template

@@ -13,14 +13,14 @@
             </tr>
             <tr>
                 <td>
-                    <label class="header" style="width: 169px;"><%= scope.textColumn %></label>
+                    <label class="header" style="width: 150px;"><%= scope.textColumn %></label>
-                    <label class="header" style="width: 92px;"><%= scope.textSort %></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="range-tableview" style="width:100%; height: 143px;"></div>
+                    <div id="sort-dialog-list" class="" style="width:100%; height: 143px;"></div>
                 </td>
             </tr>
         </table>

apps/spreadsheeteditor/main/app/view/SortDialog.js

@@ -88,11 +88,10 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                 emptyText: '',
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
-                        '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
+                        '<div class="list-item" style="width: 100%;display:inline-block;">',
-                            '<div class="listitem-icon <% if (isTable) {%>listitem-table<%} %>"></div>',
+                            '<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:141px;padding-right: 5px;"><%= name %></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:94px;padding-right: 5px;"><%= scopeName %></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:212px;"><%= range %></div>',
                         '</div>'
                 ].join(''))
             });
@@ -149,76 +148,114 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
                     // sensitive: props.asc_getCaseSensitive(),
                     sort: props.asc_getColumnSort()
                 };
+
+                // get name from props
+                this.column_data = [
+                    { value: 'a', displayValue: 'a' },
+                    { value: 'b', displayValue: 'b' },
+                    { value: 'c', displayValue: 'c' }
+                ];
+                this.sort_data = [
+                    { value: Asc.c_oAscSortOptions.ByValue, displayValue: this.textValues },
+                    { value: Asc.c_oAscSortOptions.ByColorFill, displayValue: this.textCellColor },
+                    { value: Asc.c_oAscSortOptions.ByColorFont, displayValue: this.textFontColor },
+                    { value: Asc.c_oAscSortOptions.ByIcon, displayValue: this.textCellIcon }
+                ];
+                this.order_data = [
+                    { value: Asc.c_oAscSortOptions.Ascending, displayValue: this.textAZ },
+                    { value: Asc.c_oAscSortOptions.Descending, displayValue: this.textZA }
+                    ];
+
+                this.sortList.on('item:add', _.bind(this.addControls, this));
+                this.sortList.on('item:change', _.bind(this.addControls, this));
+                this.refreshList(props.asc_getLevels());
             }
         },
 
-        refreshRangeList: function(ranges, selectedItem) {
+        refreshList: function(levels) {
-            if (ranges) {
+            this.cmbsColumn = [];
-                this.ranges = ranges;
+            this.cmbsSort = [];
+            this.cmbsOrder = [];
+
+            if (levels) {
                 var arr = [];
-                for (var i=0; i<this.ranges.length; i++) {
+                for (var i=0; i<levels.length; i++) {
-                    var scope = this.ranges[i].asc_getScope(),
+                    var level = levels[i];
-                        id = this.ranges[i].asc_getIsLock();
                     arr.push({
-                        name: this.ranges[i].asc_getName(true),
+                        index: level.asc_getIndex(),
-                        scope: scope,
+                        name: level.asc_getName(),
-                        scopeName: (scope===null) ? this.textWorkbook: this.sheetNames[scope],
+                        sort: level.asc_getSortBy(),
-                        range: this.ranges[i].asc_getRef(),
+                        order: level.asc_getDescending(),
-                        isTable: (this.ranges[i].asc_getIsTable()===true),
+                        color: level.asc_getColor()
-                        lock: (id!==null && id!==undefined),
-                        lockuser: (id) ? this.getUserName(id) : this.guestText
                     });
                 }
-                this.rangesStore.reset(arr);
-                this.rangeList.setEmptyText((this.rangesStore.length>0) ? this.textnoNames : this.textEmpty);
-            }
 
-            var me = this,
+                // arr.push({
-                store = this.rangeList.store,
+                //     index: 0,
-                models = this.rangesStore.models,
+                //     name: 'a',
-                val = this.cmbFilter.getValue(),
+                //     sort: Asc.c_oAscSortOptions.ByValue,
-                isTableFilter = (val<3) ? (val==2) : -1,
+                //     order: Asc.c_oAscSortOptions.Ascending
-                isWorkbook = (val>2) ? (val==4) : -1;
+                // });
-            if (val>0)
+                // arr.push({
-                models = this.rangesStore.filter(function(item) {
+                //     index: 1,
-                    if (isTableFilter!==-1)
+                //     name: 's',
-                        return (isTableFilter===item.get('isTable'));
+                //     sort: Asc.c_oAscSortOptions.ByValue,
-                    if (isWorkbook!==-1)
+                //     order: Asc.c_oAscSortOptions.Descending
-                        return (isWorkbook===(item.get('scope')===null));
+                // });
-                    return false;
+
+                arr.sort(function (a, b) {
+                    return a.index - b.index;
                 });
-
+                this.sortList.store.reset(arr);
-            store.reset(models, {silent: false});
-
-            val = store.length;
-            this.btnEditRange.setDisabled(!val);
-            this.btnDeleteRange.setDisabled(!val);
-            if (val>0) {
-                if (selectedItem===undefined || selectedItem===null) selectedItem = 0;
-                if (_.isNumber(selectedItem)) {
-                    if (selectedItem>val-1) selectedItem = val-1;
-                    this.rangeList.selectByIndex(selectedItem);
-                    setTimeout(function() {
-                        me.rangeList.scrollToRecord(store.at(selectedItem));
-                    }, 50);
-
-                } else if (selectedItem){ // object
-                    var rec = store.findWhere({name: selectedItem.asc_getName(true), scope: selectedItem.asc_getScope()});
-                    if (rec) {
-                        this.rangeList.selectRecord(rec);
-                        setTimeout(function() {
-                            me.rangeList.scrollToRecord(rec);
-                        }, 50);
-                    }
-                }
-
-                if (this.userTooltip===true && this.rangeList.cmpEl.find('.lock-user').length>0)
-                    this.rangeList.cmpEl.on('mouseover',  _.bind(me.onMouseOverLock, me)).on('mouseout',  _.bind(me.onMouseOutLock, me));
             }
-            _.delay(function () {
+        },
-                me.rangeList.cmpEl.find('.listview').focus();
+
-                me.rangeList.scroller.update({alwaysVisibleY: true});
+        addControls: function(listView, itemView, item) {
-            }, 100, this);
+            if (!item) return;
+
+            var cmpEl = this.sortList.cmpEl;
+            var i = item.get('index');
+            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',
+                    data        : this.column_data
+                }).on('selected', function(combo, record) {
+                    item.set('name', record.value);
+                });
+            var val = item.get('name');
+            (val!==null) && combo.setValue(item.get('name'));
+            this.cmbsColumn[i] = combo;
+
+            el = cmpEl.find('#sort-dialog-cmb-sort-' + i);
+            combo = new Common.UI.ComboBox({
+                el          : el,
+                editable    : false,
+                cls         : 'input-group-nr',
+                menuCls     : 'menu-absolute',
+                data        : this.sort_data
+            }).on('selected', function(combo, record) {
+                item.set('sort', record.value);
+            });
+            val = item.get('sort');
+            (val!==null) && combo.setValue(val);
+            this.cmbsSort[i] = combo;
+
+            el = cmpEl.find('#sort-dialog-cmb-order-' + i);
+            combo = new Common.UI.ComboBox({
+                el          : el,
+                editable    : false,
+                cls         : 'input-group-nr',
+                menuCls     : 'menu-absolute',
+                data        : this.order_data
+            }).on('selected', function(combo, record) {
+                item.set('order', record.value);
+            });
+            val = item.get('order');
+            (val!==null) && combo.setValue(val);
+            this.cmbsOrder[i] = combo;
         },
 
         onOptions: function () {
@@ -262,7 +299,13 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
         textOrder: 'Order',
         textUp: 'Move level up',
         textDown: 'Move level down',
-        textOptions: 'Options'
+        textOptions: 'Options',
+        textValues: 'Values',
+        textCellColor: 'Cell color',
+        textFontColor: 'Font color',
+        textCellIcon: 'Cell icon',
+        textAZ: 'A to Z',
+        textZA: 'Z to A'
 
     }, SSE.Views.SortDialog || {}));
 });