Add basic FontAwesome support to new Vue.js table grid

i.e. for sortable column icons

tailbone/api/users.py

@@ -44,6 +44,7 @@ class UserView(APIMasterView):
         return {
             'username': user.username,
             'person': six.text_type(user.person or ''),
+            'active': user.active,
         }
 
     @view(permission='users.list')

tailbone/templates/users/vue_index.mako

@@ -1,6 +1,13 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/users/index.mako" />
 
+## <%def name="head_tags()">
+##   ${parent.head_tags()}
+##   ## TODO: this is needed according to Bulma docs?
+##   ## https://bulma.io/documentation/overview/start/#code-requirements
+##   <meta name="viewport" content="width=device-width, initial-scale=1">
+## </%def>
+
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
 
@@ -12,22 +19,31 @@
 
   <!-- vue-tables-2 -->
   ${h.javascript_link('https://cdn.jsdelivr.net/npm/vue-tables-2@1.4.70/dist/vue-tables-2.min.js')}
+  ## ${h.javascript_link(request.static_url('tailbone:static/js/lib/vue-tables.js'))}
 
   <!-- bulma -->
   ${h.stylesheet_link('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css')}
-##   <style type="text/css">
+
-##     /* workaround for header logo */
+  <!-- fontawesome -->
-##     .home img { height: 49px; }
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-##   </style>
+
+  <style type="text/css">
+    /* workaround for header logo, needed for Bulma (ugh) */
+    ## TODO: this img should be 49px for height, what gives here?
+    .home img { height: 59px; }
+  </style>
 
 </%def>
 
 ## TODO: just, ugh.
-<br /><br /><br />
+<br />
 
 <div id="vue-app">
   ## TODO: need to make endpoint a bit more configurable somehow
-  <v-server-table name="users" url="/api/users" :columns="columns" :options="options"></v-server-table>
+  <v-server-table name="users" url="/api/users" :columns="columns" :options="options">
+    ## // TODO: why on earth doesn't it render bool as string by default?
+    <span slot="active" slot-scope="props">{{ props.row.active }}</span>
+  </v-server-table>
 </div>
 
 <script type="text/javascript">
@@ -57,7 +73,14 @@ var store = new Vuex.Store({
   // }
 })
 
-Vue.use(VueTables.ServerTable, {}, true, 'bulma', 'default');
+Vue.use(VueTables.ServerTable, {
+    sortIcon: {
+        is: 'fa-sort',
+        base: 'fas',
+        up: 'fa-sort-up',
+        down: 'fa-sort-down'
+    }
+}, true, 'bulma', 'default');
 
 var app = new Vue({
     el: '#vue-app',
@@ -65,12 +88,14 @@ var app = new Vue({
     data: {
         columns: [
             'username',
-            'person'
+            'person',
+            'active'
         ],
         options: {
             filterable: false,
             sortable: [
-                'username'// ,
+                'username',
+                'active'
                 // TODO: add sort for Person.display_name
                 // 'person'
             ],