Add view, edit links to vue.js users index

tailbone/api/users.py

@@ -42,6 +42,7 @@ class UserView(APIMasterView):
 
     def normalize(self, user):
         return {
+            'uuid': user.uuid,
             'username': user.username,
             'person_display_name': (user.person.display_name or '') if user.person else '',
             'active': user.active,

tailbone/templates/users/vue_index.mako

@@ -36,10 +36,29 @@
 </%def>
 
 <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">
-    ## // TODO: why on earth doesn't it render bool as string by default?
+
+    ## TODO: make URLs more flexible / configurable... also perms?
+    % if request.has_perm('users.view'):
+        <span slot="username" slot-scope="props"><a :href="'/users/'+props.row.uuid">{{ props.row.username }}</a></span>
+        <span slot="person_display_name" slot-scope="props"><a :href="'/users/'+props.row.uuid">{{ props.row.person_display_name }}</a></span>
+    % endif
+
+    ## TODO: why on earth doesn't it render bool as string by default?
     <span slot="active" slot-scope="props">{{ props.row.active }}</span>
+
+    ## TODO: make URLs more flexible / configurable... also perms?
+    <span slot="actions" slot-scope="props">
+      % if request.has_perm('users.view'):
+          <a :href="'/users/'+props.row.uuid">View</a>
+      % endif
+      % if request.has_perm('users.edit'):
+          | <a :href="'/users/'+props.row.uuid+'/edit'">Edit</a>
+      % endif
+    </span>
+
   </v-server-table>
 </div>
 
@@ -79,15 +98,21 @@ Vue.use(VueTables.ServerTable, {
     }
 }, true, 'bulma', 'default');
 
+<%
+   columns = [
+       'username',
+       'person_display_name',
+       'active',
+   ]
+   if request.has_any_perm('users.view', 'users.edit'):
+       columns.append('actions')
+%>
+
 var app = new Vue({
     el: '#vue-app',
     store: store,
     data: {
-        columns: [
-            'username',
-            'person_display_name',
-            'active'
-        ],
+        columns: ${json.dumps(columns)|n},
         options: {
             columnsDropdown: true,
             filterable: false,