Ability to sort using form fields (for mobile portrait mode)

We now display sort options as a select box plus a descending checkbox, which
means you can apply sort orders even in portrait mode on a mobile phone where
the column headers are hidden.

Closes #199

datasette/app.py

@@ -617,6 +617,18 @@ class TableView(RowTableShared):
                 forward_querystring=False
             )
 
+        # Spot ?_sort_by_desc and redirect to _sort_desc=(_sort)
+        if '_sort_by_desc' in special_args:
+            return self.redirect(
+                request,
+                path_with_added_args(request, {
+                    '_sort_desc': special_args.get('_sort'),
+                    '_sort_by_desc': None,
+                    '_sort': None,
+                }),
+                forward_querystring=False
+            )
+
         filters = Filters(sorted(other_args.items()))
         where_clauses, params = filters.build_where_clauses()
 
@@ -836,6 +848,7 @@ class TableView(RowTableShared):
                 'display_columns': display_columns,
                 'filter_columns': filter_columns,
                 'display_rows': display_rows,
+                'is_sortable': any(c['sortable'] for c in display_columns),
                 'path_with_added_args': path_with_added_args,
                 'request': request,
                 'sort': sort,

datasette/static/app.css

@@ -103,6 +103,10 @@ form label {
     display: inline-block;
     width: 15%;
 }
+label.sort_by_desc {
+    width: auto;
+    padding-right: 1em;
+}
 form input[type=text],
 form input[type=search] {
     border: 1px solid #ccc;
@@ -216,10 +220,6 @@ form input[type=submit] {
     .filters input.filter-value {
         width: 140px;
     }
-    form input[type=submit] {
-        display: block;
-        margin-top: 0.6em;
-    }
 }
 
 a.not-underlined {

datasette/templates/table.html

@@ -66,7 +66,22 @@
                 {% endfor %}
             </select>
         </div><input type="text" name="_filter_value" class="filter-value">
-        <input type="submit" value="{% if filters.has_selections() %}Apply filters{% else %}Add filter{% endif %}">
+    </div>
+    <div class="filter-row">
+        {% if is_sortable %}
+            <div class="select-wrapper">
+                <select name="_sort" id="sort_by">
+                    <option value="">Sort...</option>
+                    {% for column in display_columns %}
+                        {% if column.sortable %}
+                            <option value="{{ column.name }}"{% if column.name == sort or column.name == sort_desc %} selected{% endif %}>Sort by {{ column.name }}</option>
+                        {% endif %}
+                    {% endfor %}
+                </select>
+            </div>
+            <label class="sort_by_desc"><input type="checkbox" name="_sort_by_desc"{% if sort_desc %} checked{% endif %}> descending</label>
+        {% endif %}
+        <input type="submit" value="Apply">
     </div>
 </form>
 

tests/test_html.py

@@ -135,6 +135,19 @@ def test_empty_search_parameter_gets_removed(app_client):
     )
 
 
+def test_sort_by_desc_redirects(app_client):
+    path_base = app_client.get(
+        '/test_tables/sortable', allow_redirects=False, gather_request=False
+    ).headers['Location']
+    path = path_base + '?' + urllib.parse.urlencode({
+        '_sort': 'sortable',
+        '_sort_by_desc': '1',
+    })
+    response = app_client.get(path, allow_redirects=False, gather_request=False)
+    assert response.status == 302
+    assert response.headers['Location'].endswith('?_sort_desc=sortable')
+
+
 @pytest.mark.parametrize('path,expected_classes', [
     ('/', ['index']),
     ('/test_tables', ['db', 'db-test_tables']),