Add support for sorting by person name in Vue.js Users grid

tailbone/api/master.py

@@ -32,6 +32,13 @@ from tailbone.api import APIView, api
 from tailbone.db import Session
 
 
+class SortColumn(object):
+
+    def __init__(self, field_name, model_name=None):
+        self.field_name = field_name
+        self.model_name = model_name
+
+
 class APIMasterView(APIView):
     """
     Base class for data model REST API views.
@@ -85,13 +92,38 @@ class APIMasterView(APIView):
         # these params are based on 'vue-tables-2'
         # https://github.com/matfish2/vue-tables-2#server-side
         if 'orderBy' in self.request.params and 'ascending' in self.request.params:
-            return [
-                {
-                    # 'model': self.model_class.__name__,
-                    'field': self.request.params['orderBy'],
+            sortcol = self.interpret_sortcol(self.request.params['orderBy'])
+            if sortcol:
+                spec = {
+                    'field': sortcol.field_name,
                     'direction': 'asc' if parse_bool(self.request.params['ascending']) else 'desc',
-                },
-            ]
+                }
+                if sortcol.model_name:
+                    spec['model'] = sortcol.model_name
+                return [spec]
+
+    def interpret_sortcol(self, order_by):
+        """
+        This must return a ``SortColumn`` object based on parsing of the given
+        ``order_by`` string, which is "raw" as received from the client.
+
+        Please override as necessary, but in all cases you should invoke
+        :meth:`sortcol()` to obtain your return value.  Default behavior
+        for this method is to simply do (only) that::
+
+           return self.sortcol(order_by)
+
+        Note that you can also return ``None`` here, if the given ``order_by``
+        string does not represent a valid sort.
+        """
+        return self.sortcol(order_by)
+
+    def sortcol(self, field_name, model_name=None):
+        """
+        Return a simple ``SortColumn`` object which denotes the field and
+        optionally, the model, to be used when sorting.
+        """
+        return SortColumn(field_name, model_name)
 
     def make_pagination_spec(self):
 

tailbone/api/users.py

@@ -43,10 +43,16 @@ class UserView(APIMasterView):
     def normalize(self, user):
         return {
             'username': user.username,
-            'person': six.text_type(user.person or ''),
+            'person_name': six.text_type(user.person or ''),
             'active': user.active,
         }
 
+    def interpret_sortcol(self, order_by):
+        if order_by == 'person_name':
+            return self.sortcol('display_name', 'Person')
+
+        return self.sortcol(order_by)
+
     @view(permission='users.list')
     def collection_get(self):
         return self._collection_get()

tailbone/templates/users/vue_index.mako

@@ -88,13 +88,14 @@ var app = new Vue({
     data: {
         columns: [
             'username',
-            'person',
+            'person_name',
             'active'
         ],
         options: {
             filterable: false,
             sortable: [
                 'username',
+                'person_name',
                 'active'
                 // TODO: add sort for Person.display_name
                 // 'person'