Add very basic Vue.js grid/index experiment for Users table

tailbone/templates/users/index.mako

@@ -0,0 +1,11 @@
+## -*- coding: utf-8; -*-
+<%inherit file="/principal/index.mako" />
+
+<%def name="context_menu_items()">
+  ${parent.context_menu_items()}
+  % if expose_vuejs_experiments:
+      <li>${h.link_to("Vue.js Index", url('{}.vue_index'.format(route_prefix)))}</li>
+  % endif
+</%def>
+
+${parent.body()}

tailbone/templates/users/vue_index.mako

@@ -0,0 +1,95 @@
+## -*- coding: utf-8; -*-
+<%inherit file="/users/index.mako" />
+
+<%def name="extra_javascript()">
+  ${parent.extra_javascript()}
+
+  <!-- vue -->
+  ${h.javascript_link('https://cdn.jsdelivr.net/npm/vue')}
+
+  <!-- vuex -->
+  ${h.javascript_link('https://unpkg.com/vuex')}
+
+  <!-- vue-tables-2 -->
+  ${h.javascript_link('https://cdn.jsdelivr.net/npm/vue-tables-2@1.4.70/dist/vue-tables-2.min.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 */
+##     .home img { height: 49px; }
+##   </style>
+
+</%def>
+
+## TODO: just, ugh.
+<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>
+</div>
+
+<script type="text/javascript">
+
+// Vue.use(Vuex);
+
+var store = new Vuex.Store({
+  // state: {
+  //     appVersion: null,
+  //     // TODO: is this really needed or can we just always check appsettings?
+  //     production: appsettings.production,
+  //     user: null,
+  //     pageTitle: null
+  // },
+  // mutations: {
+  //     setAppVersion(state, payload) {
+  //         state.appVersion = payload;
+  //     },
+  //     setPageTitle(state, payload) {
+  //         state.pageTitle = payload;
+  //     },
+  //     setUser(state, payload)  {
+  //         state.user = payload;
+  //     }
+  // },
+  // actions: {
+  // }
+})
+
+Vue.use(VueTables.ServerTable, {}, true, 'bulma', 'default');
+
+var app = new Vue({
+    el: '#vue-app',
+    store: store,
+    data: {
+        columns: [
+            'username',
+            'person'
+        ],
+        options: {
+            filterable: false,
+            sortable: [
+                'username'// ,
+                // TODO: add sort for Person.display_name
+                // 'person'
+            ],
+            orderBy: {
+                column: 'username',
+                ascending: true
+            },
+            perPageValues: [10, 25, 50, 100, 200],
+            // preserveState: true,
+            saveState: true,
+            // TODO: why doesn't local storage work?  but alas, table does not
+            // properly submit the 'orderBy' param, and results aren't paginated
+            storage: 'session'
+        }
+    }
+});
+
+// $.get('/api/users', {sort: 'username|desc', page: 1, per_page: 10}, function(data) {
+//     app.users = data.users;
+// });
+
+</script>