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 />
-        <br />
+          <p class="block">
-        <h2>Found ${len(principals)} ${model_title_plural} with permission: ${selected_permission}</h2>
+            Found ${len(principals)} ${model_title_plural} with permission:
-        ${self.principal_table()}
+            <span class="has-text-weight-bold">${selected_permission}</span>
-      </div>
+          </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()}

tailbone/views/principal.py

@@ -65,14 +65,21 @@ class PrincipalMasterView(MasterView):
         principals = None
         permission_group = self.request.GET.get('permission_group')
         permission = self.request.GET.get('permission')
+        grid = None
         if permission_group and permission:
             principals = self.find_principals_with_permission(self.Session(),
                                                               permission)
+            grid = self.find_by_perm_make_results_grid(principals)
         else: # otherwise clear both values
             permission_group = None
             permission = None
 
-        context = {'permissions': sorted_perms, 'principals': principals}
+        context = {
+            'permissions': sorted_perms,
+            'principals': principals,
+            'principals_data': self.find_by_perm_results_data(principals),
+            'grid': grid,
+        }
 
         perms = self.get_perms_data(sorted_perms)
         context['perms_data'] = perms
@@ -114,6 +121,35 @@ class PrincipalMasterView(MasterView):
 
         return data
 
+    def find_by_perm_make_results_grid(self, principals):
+        route_prefix = self.get_route_prefix()
+        factory = self.get_grid_factory()
+        g = factory(key=f'{route_prefix}.results',
+                    request=self.request,
+                    data=[],
+                    columns=[],
+                    main_actions=[
+                        self.make_action('view', icon='eye',
+                                         click_handler='navigateTo(props.row._url)'),
+                    ])
+        self.find_by_perm_configure_results_grid(g)
+        return g
+
+    def find_by_perm_configure_results_grid(self, g):
+        pass
+
+    def find_by_perm_results_data(self, principals):
+        data = []
+        for principal in principals or []:
+            data.append(self.find_by_perm_normalize(principal))
+        return data
+
+    def find_by_perm_normalize(self, principal):
+        return {
+            'uuid': principal.uuid,
+            '_url': self.get_action_url('view', principal),
+        }
+
     @classmethod
     def defaults(cls, config):
         cls._principal_defaults(config)

tailbone/views/roles.py

@@ -406,6 +406,17 @@ class RoleView(PrincipalMasterView):
                 roles.append(role)
         return roles
 
+    def find_by_perm_configure_results_grid(self, g):
+        g.append('name')
+        g.set_link('name')
+
+    def find_by_perm_normalize(self, role):
+        data = super().find_by_perm_normalize(role)
+
+        data['name'] = role.name
+
+        return data
+
     def download_permissions_matrix(self):
         """
         View which renders the complete role / permissions matrix data into an

tailbone/views/users.py

@@ -521,6 +521,21 @@ class UserView(PrincipalMasterView):
                 users.append(user)
         return users
 
+    def find_by_perm_configure_results_grid(self, g):
+        g.append('username')
+        g.set_link('username')
+
+        g.append('person')
+        g.set_link('person')
+
+    def find_by_perm_normalize(self, user):
+        data = super().find_by_perm_normalize(user)
+
+        data['username'] = user.username
+        data['person'] = str(user.person or '')
+
+        return data
+
     def preferences(self, user=None):
         """
         View to modify preferences for a particular user.