More work on sorting:

- added "sorted" drop down menu to data table view if it's sorted.
- set forward and reverse radio button labels depending on value type.
- don't use a whole submenu for sorting if a column isn't sorted yet.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@836 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/views/data-table-column-header-ui.js

@@ -7,6 +7,10 @@ function DataTableColumnHeaderUI(dataTableView, column, columnIndex, td) {
     this._render();
 }
 
+DataTableColumnHeaderUI.prototype.getColumn = function() {
+    return this._column;
+};
+
 DataTableColumnHeaderUI.prototype._render = function() {
     var self = this;
     
@@ -56,7 +60,7 @@ DataTableColumnHeaderUI.prototype._render = function() {
 };
 
 DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
-    self = this;
+    var self = this;
     MenuSystem.createAndShowStandardMenu([
         {
             label: "Facet",
@@ -313,10 +317,19 @@ DataTableColumnHeaderUI.prototype._createMenuForColumnHeader = function(elmt) {
             ]
         },
         {},
-        {
+        (
-            label: "Sort",
+            this._dataTableView._getSortingCriterionForColumn(this._column.name) == null ?
-            submenu: this.createSortingMenu()
+                {
-        },
+                    "label": "Sort ...",
+                    "click": function() {
+                        self._showSortingCriterion(null, self._dataTableView._getSortingCriteriaCount() > 0)
+                    }
+                } :
+                {
+                    label: "Sort",
+                    submenu: this.createSortingMenu()
+                }
+        ),
         {
             label: "View",
             tooltip: "Collapse/expand columns to make viewing the data more convenient",
@@ -1174,8 +1187,8 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
                 '</td>' +
             '</tr>' +
             '<tr><td colspan="2" bind="directionOptions">' +
-                '<input type="radio" class="inline" name="sorting-dialog-direction" value="forward" /><label>forward</label> ' +
+                '<input type="radio" class="inline" name="sorting-dialog-direction" value="forward" /><label id="sorting-dialog-direction-forward">forward</label> ' +
-                '<input type="radio" class="inline" name="sorting-dialog-direction" value="reverse" /><label>reverse</label> ' +
+                '<input type="radio" class="inline" name="sorting-dialog-direction" value="reverse" /><label id="sorting-dialog-direction-reverse">reverse</label> ' +
                 '<span bind="sortAloneContainer" style="display:none;"><input type="checkbox" class="inline" /><label>sort by this column alone</label></span>' +
             '</td></tr>' +
         '</table></div>'
@@ -1186,6 +1199,27 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
     bodyElmts.valueTypeOptions.find("input[type='radio'][value='" + criterion.valueType + "']")
         .attr("checked", "checked");
         
+    var setValueType = function(valueType) {
+        var forward = $("#sorting-dialog-direction-forward");
+        var reverse = $("#sorting-dialog-direction-reverse");
+        if (valueType == "string") {
+            forward.html("a - z");
+            reverse.html("z - a");
+        } else if (valueType == "number") {
+            forward.html("smallest first");
+            reverse.html("largest first");
+        } else if (valueType == "date") {
+            forward.html("earliest first");
+            reverse.html("latest first");
+        } else if (valueType == "boolean") {
+            forward.html("false then true");
+            reverse.html("true then false");
+        }
+    };
+    bodyElmts.valueTypeOptions.find("input[type='radio']").change(function() {
+        setValueType(this.value);
+    });
+       
     if (criterion.valueType == "string" && criterion.caseSensitive) {
         bodyElmts.caseSensitiveCheckbox.attr("checked", "checked");
     }
@@ -1208,6 +1242,8 @@ DataTableColumnHeaderUI.prototype._showSortingCriterion = function(criterion, ha
         DialogSystem.dismissUntil(level - 1);
     };
     
+    setValueType(criterion.valueType); 
+    
     footerElmts.cancelButton.click(dismiss);
     footerElmts.okButton.click(function() {
         var criterion2 = {

src/main/webapp/scripts/views/data-table-view.js

@@ -1,9 +1,11 @@
 function DataTableView(div) {
     this._div = div;
+    
     this._pageSize = 20;
     this._showRecon = true;
     this._collapsedColumnNames = {};
     this._sorting = { criteria: [] };
+    this._columnHeaderUIs = [];
     
     this._showRows(0);
 }
@@ -30,6 +32,7 @@ DataTableView.prototype.render = function() {
         '<table class="viewPanel-header">' +
             '<tr>' +
                 '<td bind="summary"></td>' +
+                '<td bind="sortingControls" align="right"></td>' +
                 '<td bind="pageSizeControls" align="right"></td>' +
                 '<td bind="pagingControls" align="right"></td>' +
             '</tr>' +
@@ -42,6 +45,10 @@ DataTableView.prototype.render = function() {
     this._renderPagingControls(elmts.pageSizeControls, elmts.pagingControls);
     this._renderDataTable(elmts.table[0]);
     
+    if (this._sorting.criteria.length > 0) {
+        this._renderSortingControls(elmts.sortingControls);
+    }
+    
     this._div.empty().append(html);
     
     this.resize();
@@ -64,6 +71,19 @@ DataTableView.prototype._renderSummaryText = function(elmt) {
     $('<span>').html(summaryText).appendTo(elmt);
 };
 
+DataTableView.prototype._renderSortingControls = function(sortingControls) {
+    var self = this;
+    
+    $('<a href="javascript:{}"></a>')
+        .addClass("action")
+        .text("Sorted")
+        .append($('<img>').attr("src", "/images/down-arrow.png"))
+        .appendTo(sortingControls)
+        .click(function() {
+            self._createSortingMenu(this);
+        });
+};
+
 DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagingControls) {
     var self = this;
     
@@ -218,6 +238,7 @@ DataTableView.prototype._renderDataTable = function(table) {
         self._createMenuForAllColumns(this);
     });
     
+    this._columnHeaderUIs = [];
     var createColumnHeader = function(column, index) {
         var td = trHead.insertCell(trHead.cells.length);
         $(td).addClass("column-header");
@@ -228,7 +249,8 @@ DataTableView.prototype._renderDataTable = function(table) {
                 self.render();
             });
         } else {
-            new DataTableColumnHeaderUI(self, column, index, td);
+            var columnHeaderUI = new DataTableColumnHeaderUI(self, column, index, td);
+            self._columnHeaderUIs.push(columnHeaderUI);
         }
     };
     
@@ -402,7 +424,7 @@ DataTableView.prototype._addSortingCriterion = function(criterion, alone) {
 };
 
 DataTableView.prototype._createMenuForAllColumns = function(elmt) {
-    self = this;
+    var self = this;
     MenuSystem.createAndShowStandardMenu([
         {   label: "Facet",
             submenu: [
@@ -499,6 +521,45 @@ DataTableView.prototype._createMenuForAllColumns = function(elmt) {
     ], elmt, { width: "80px", horizontal: false });
 };
 
+DataTableView.prototype._createSortingMenu = function(elmt) {
+    var self = this;
+    var items = [
+        {
+            "label" : "Un-sort",
+            "click" : function() {
+                self._sorting.criteria = [];
+                self.update();
+            }
+        },
+        {}
+    ];
+    
+    var getColumnHeaderUI = function(columnName) {
+        for (var i = 0; i < self._columnHeaderUIs.length; i++) {
+            var columnHeaderUI = self._columnHeaderUIs[i];
+            if (columnHeaderUI.getColumn().name == columnName) {
+                return columnHeaderUI;
+            }
+        }
+        return null;
+    }
+    var createSubmenu = function(criterion) {
+        var columnHeaderUI = getColumnHeaderUI(criterion.column);
+        if (columnHeaderUI != null) {
+            items.push({
+                "label" : "By " + criterion.column,
+                "submenu" : columnHeaderUI.createSortingMenu()
+            })
+        }
+    };
+    for (var i = 0; i < this._sorting.criteria.length; i++) {
+        createSubmenu(this._sorting.criteria[i]);
+    }
+    
+    MenuSystem.createAndShowStandardMenu(items, elmt, { horizontal: false });
+};
+
+
 DataTableView.prototype._updateCell = function(rowIndex, cellIndex, cell) {
     var rows = theProject.rowModel.rows;
     for (var r = 0; r < rows.length; r++) {