[SSE] Add sort settings for slicer to the right menu

apps/spreadsheeteditor/main/app/template/SlicerSettings.template

@@ -80,6 +80,46 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="header"><%= scope.strSorting %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-radio-asc"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-large" colspan=2>
+            <div id="slicer-radio-desc"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-hide-nodata"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-indicate-nodata"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-show-nodata-last"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-show-deleted"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td align="center" colspan=2>
             <label class="link" id="slicer-advanced-link"><%= scope.textAdvanced %></label>

apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template

@@ -29,10 +29,6 @@
                 <label class="input-label"><%= scope.strColumns %></label>
                 <div id="sliceradv-spin-columns"></div>
             </div>
-            <!-- <div style="display: inline-block; margin-right: 5px;"> -->
-            <!--     <label class="input-label"><%= scope.strWidth %></label> -->
-            <!--     <div id="sliceradv-spin-col-width"></div> -->
-            <!-- </div> -->
             <div style="display: inline-block;">
                 <label class="input-label"><%= scope.strHeight %></label>
                 <div id="sliceradv-spin-col-height"></div>

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

@@ -76,7 +76,11 @@ define([
                 ColHeight: 0,
                 PosVert: 0,
                 PosHor: 0,
-                PosLocked: false
+                PosLocked: false,
+                SortOrder: Asc.ST_tabularSlicerCacheSortOrder.Ascending,
+                IndNoData: false,
+                ShowNoData: false,
+                HideNoData: false
             };
             this.spinners = [];
             this.lockedControls = [];
@@ -253,6 +257,95 @@ define([
             this.spnColHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
             this.numCols.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
 
+            // Sorting & Filtering
+
+            this.radioAsc = new Common.UI.RadioBox({
+                el: $('#slicer-radio-asc'),
+                name: 'asc-radio-sliceradv-sort',
+                labelText: this.textAsc + ' (' + this.textAZ + ')',
+                checked: true
+            });
+            this.radioAsc.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue && this.api) {
+                    if (this._originalProps) {
+                        this._originalProps.asc_getSlicerProperties().asc_setSortOrder(Asc.ST_tabularSlicerCacheSortOrder.Ascending);
+                        this.api.asc_setGraphicObjectProps(this._originalProps);
+                    }
+                }
+            }, this));
+            this.lockedControls.push(this.radioAsc);
+
+            this.radioDesc = new Common.UI.RadioBox({
+                el: $('#slicer-radio-desc'),
+                name: 'asc-radio-sliceradv-sort',
+                labelText: this.textDesc + ' (' + this.textZA + ')',
+                checked: false
+            });
+            this.radioDesc.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue && this.api) {
+                    if (this._originalProps) {
+                        this._originalProps.asc_getSlicerProperties().asc_setSortOrder(Asc.ST_tabularSlicerCacheSortOrder.Descending);
+                        this.api.asc_setGraphicObjectProps(this._originalProps);
+                    }
+                }
+            }, this));
+            this.lockedControls.push(this.radioDesc);
+
+            this.chHideNoData = new Common.UI.CheckBox({
+                el: $('#slicer-check-hide-nodata'),
+                labelText: this.strHideNoData
+            });
+            this.chHideNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var checked = (field.getValue()=='checked');
+                this.chIndNoData.setDisabled(checked);
+                this.chShowNoData.setDisabled(checked || (this.chIndNoData.getValue()!='checked'));
+                this.chShowDel.setDisabled(checked);
+                if (this._originalProps && this.api) {
+                    this._originalProps.asc_getSlicerProperties().asc_setHideItemsWithNoData(checked);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }, this));
+            this.lockedControls.push(this.chHideNoData);
+
+            this.chIndNoData = new Common.UI.CheckBox({
+                el: $('#slicer-check-indicate-nodata'),
+                labelText: this.strIndNoData
+            });
+            this.chIndNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var checked = (field.getValue()=='checked');
+                this.chShowNoData.setDisabled(!checked);
+                if (this._originalProps && this.api) {
+                    this._originalProps.asc_getSlicerProperties().asc_setIndicateItemsWithNoData(checked);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }, this));
+            this.lockedControls.push(this.chIndNoData);
+
+            this.chShowNoData = new Common.UI.CheckBox({
+                el: $('#slicer-check-show-nodata-last'),
+                disabled: true,
+                labelText: this.strShowNoData
+            });
+            this.chShowNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._originalProps && this.api) {
+                    this._originalProps.asc_getSlicerProperties().asc_setShowItemsWithNoDataLast(field.getValue()=='checked');
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }, this));
+            this.lockedControls.push(this.chShowNoData);
+
+            this.chShowDel = new Common.UI.CheckBox({
+                el: $('#slicer-check-show-deleted'),
+                labelText: this.strShowDel
+            });
+            this.chShowDel.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                // if (this._originalProps && this.api) {
+                //     this._originalProps.asc_getSlicerProperties().asc_setIndicateItemsWithNoData(field.getValue()=='checked');
+                //     this.api.asc_setGraphicObjectProps(this._originalProps);
+                // }
+            }, this));
+            this.lockedControls.push(this.chShowDel);
+
             $(this.el).on('click', '#slicer-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
 
@@ -381,6 +474,43 @@ define([
                         this.chLock.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
                         this._state.PosLocked=value;
                     }
+
+                    // depends of data type
+                    // this.radioAsc.setCaption(this.textAsc + ' (' + this.textAZ + ')' );
+                    // this.radioDesc.setCaption(this.textDesc + ' (' + this.textZA + ')' );
+                    value = slicerprops.asc_getSortOrder();
+                    if ( this._state.SortOrder!==value ) {
+                        (value==Asc.ST_tabularSlicerCacheSortOrder.Ascending) ? this.radioAsc.setValue(true, true) : this.radioDesc.setValue(true, true);
+                        this._state.SortOrder=value;
+                    }
+
+                    value = slicerprops.asc_getIndicateItemsWithNoData();
+                    if ( this._state.IndNoData!==value ) {
+                        this.chIndNoData.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                        this._state.IndNoData=value;
+                    }
+
+                    value = slicerprops.asc_getShowItemsWithNoDataLast();
+                    if ( this._state.ShowNoData!==value ) {
+                        this.chShowNoData.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                        this._state.ShowNoData=value;
+                    }
+
+                    value = slicerprops.asc_getHideItemsWithNoData();
+                    if ( this._state.HideNoData!==value ) {
+                        this.chHideNoData.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                        this._state.HideNoData=value;
+                    }
+
+                    this.chIndNoData.setDisabled(value);
+                    this.chShowNoData.setDisabled(value || (this.chIndNoData.getValue()!='checked'));
+                    this.chShowDel.setDisabled(value);
+
+                    // value = slicerprops.asc_getShowDeleted();
+                    // if ( this._state.ShowDel!==value ) {
+                    //     this.chShowDel.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                    //     this._state.ShowDel=value;
+                    // }
                 }
             }
         },
@@ -555,7 +685,20 @@ define([
         textButtons: 'Buttons',
         textColumns: 'Columns',
         textStyle: 'Style',
-        textLock: 'Disable resizing or moving'
+        textLock: 'Disable resizing or moving',
+        strSorting: 'Sorting and filtering',
+        textAsc: 'Ascending',
+        textDesc: 'Descending',
+        textAZ: 'A to Z',
+        textZA: 'Z to A',
+        textOldNew: 'oldest to newest',
+        textNewOld: 'newest to oldest',
+        textSmallLarge: 'smallest to largest',
+        textLargeSmall: 'largest to smallest',
+        strHideNoData: 'Hide items with no data',
+        strIndNoData: 'Visually indicate items with no data',
+        strShowNoData: 'Show items with no data last',
+        strShowDel: 'Show items deleted from the data source'
 
     }, SSE.Views.SlicerSettings || {}));
 });

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

@@ -300,7 +300,7 @@ define([    'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.tem
             });
             this.chShowNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
                 if (this._changedProps) {
-                    this._changedProps.asc_setHideItemsWithNoData(field.getValue()=='checked');
+                    this._changedProps.asc_setShowItemsWithNoDataLast(field.getValue()=='checked');
                 }
             }, this));