Use buefy table for "find principal by perm" results

this should work for oruga as well

tailbone/templates/principal/find_by_perm.mako

@@ -24,13 +24,13 @@
                             ref="permissionGroupAutocomplete"
                             v-model="permissionGroupTerm"
                             :data="permissionGroupChoices"
-                            field="groupkey"
                             :custom-formatter="filtr => filtr.label"
                             open-on-focus
                             keep-first
                             icon-pack="fas"
                             clearable
                             clear-on-select
+                            expanded
                             @select="permissionGroupSelect">
             </b-autocomplete>
             <b-button v-if="selectedGroup"
@@ -45,13 +45,13 @@
                             ref="permissionAutocomplete"
                             v-model="permissionTerm"
                             :data="permissionChoices"
-                            field="permkey"
                             :custom-formatter="filtr => filtr.label"
                             open-on-focus
                             keep-first
                             icon-pack="fas"
                             clearable
                             clear-on-select
+                            expanded
                             @select="permissionSelect">
             </b-autocomplete>
             <b-button v-if="selectedPermission"
@@ -80,17 +80,26 @@
       ${h.end_form()}
 
       % if principals is not None:
-      <div class="grid half">
-        <br />
-        <h2>Found ${len(principals)} ${model_title_plural} with permission: ${selected_permission}</h2>
-        ${self.principal_table()}
-      </div>
+          <br />
+          <p class="block">
+            Found ${len(principals)} ${model_title_plural} with permission:
+            <span class="has-text-weight-bold">${selected_permission}</span>
+          </p>
+          ${self.principal_table()}
       % endif
 
     </div>
   </script>
 </%def>
 
+<%def name="principal_table()">
+  <div
+    style="width: 50%;"
+    >
+    ${grid.render_table_element(data_prop='principalsData')|n}
+  </div>
+</%def>
+
 <%def name="modify_this_page_vars()">
   ${parent.modify_this_page_vars()}
   <script type="text/javascript">
@@ -105,7 +114,7 @@
   ${parent.make_this_page_component()}
   <script type="text/javascript">
 
-    Vue.component('find-principals', {
+    const FindPrincipals = {
         template: '#find-principals-template',
         props: {
             permissionGroups: Object,
@@ -120,6 +129,7 @@
                 selectedPermission: ${json.dumps(selected_permission)|n},
                 selectedPermissionLabel: ${json.dumps(selected_permission_label or '')|n},
                 formSubmitting: false,
+                principalsData: ${json.dumps(principals_data)|n},
             }
         },
 
@@ -187,6 +197,10 @@
 
         methods: {
 
+            navigateTo(url) {
+                location.href = url
+            },
+
             permissionGroupSelect(option) {
                 this.selectedPermission = null
                 this.selectedPermissionLabel = null
@@ -224,7 +238,9 @@
                 })
             },
         }
-    })
+    }
+
+    Vue.component('find-principals', FindPrincipals)
 
   </script>
 </%def>

tailbone/templates/roles/find_by_perm.mako

@@ -1,21 +0,0 @@
-## -*- coding: utf-8 -*-
-<%inherit file="/principal/find_by_perm.mako" />
-
-<%def name="principal_table()">
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-      </tr>
-    </thead>
-    <tbody>
-      % for role in principals:
-          <tr>
-            <td>${h.link_to(role.name, url('roles.view', uuid=role.uuid))}</td>
-          </tr>
-      % endfor
-    </tbody>
-  </table>
-</%def>
-
-${parent.body()}

tailbone/templates/users/find_by_perm.mako

@@ -1,23 +0,0 @@
-## -*- coding: utf-8 -*-
-<%inherit file="/principal/find_by_perm.mako" />
-
-<%def name="principal_table()">
-  <table>
-    <thead>
-      <tr>
-        <th>Username</th>
-        <th>Person</th>
-      </tr>
-    </thead>
-    <tbody>
-      % for user in principals:
-          <tr>
-            <td>${h.link_to(user.username, url('users.view', uuid=user.uuid))}</td>
-            <td>${user.person or ''}</td>
-          </tr>
-      % endfor
-    </tbody>
-  </table>
-</%def>
-
-${parent.body()}