Add basic Buefy support for "find user/role with permission X"

still not totally polished, but works as expected

tailbone/templates/principal/find_by_perm.mako

@@ -1,10 +1,11 @@
-## -*- coding: utf-8 -*-
+## -*- coding: utf-8; -*-
 <%inherit file="/base.mako" />
 
 <%def name="title()">Find ${model_title_plural} by Permission</%def>
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   <script type="text/javascript">
 
     <% gcount = len(permissions) %>
@@ -42,9 +43,11 @@
     });
 
   </script>
+  % endif
 </%def>
 
 
+% if not use_buefy:
 ${h.form(request.current_route_url(), id='find-by-perm-form')}
 ${h.csrf_token(request)}
 
@@ -65,3 +68,114 @@ ${h.end_form()}
   ${self.principal_table()}
 </div>
 % endif
+
+
+% else:
+## use_buefy!
+
+<div id="find-principals-app">
+  <find-principals :permission-groups="permissionGroups"
+                   :sorted-groups="sortedGroups">
+  </find-principals>
+</div>
+
+<script type="text/x-template" id="find-principals-template">
+  <div class="app-wrapper">
+
+    ${h.form(request.current_route_url())}
+    ${h.csrf_token(request)}
+
+    <div class="field-wrapper">
+      <label for="permission_group">${form['permission_group'].label}</label>
+      <div class="field">
+        <b-select name="permission_group"
+                  id="permission_group"
+                  v-model="selectedGroup"
+                  @input="selectGroup">
+          <option v-for="groupkey in sortedGroups"
+                  :key="groupkey"
+                  :value="groupkey">
+            {{ permissionGroups[groupkey].label }}
+          </option>
+        </b-select>
+      </div>
+    </div>
+
+    <div class="field-wrapper">
+      <label for="permission">${form['permission'].label}</label>
+      <div class="field">
+        <b-select name="permission"
+                  v-model="selectedPermission">
+          <option v-for="perm in groupPermissions"
+                  :key="perm.permkey"
+                  :value="perm.permkey">
+            {{ perm.label }}
+          </option>
+        </b-select>
+      </div>
+    </div>
+
+    <div class="buttons">
+      <b-button type="is-primary"
+                native-type="submit">
+        Find ${model_title_plural}
+      </b-button>
+    </div>
+
+    ${h.end_form()}
+
+    % if principals is not None:
+    <div class="grid half">
+      <br />
+      <h2>${model_title_plural} with that permission (${len(principals)} total):</h2>
+      ${self.principal_table()}
+    </div>
+    % endif
+
+  </div><!-- app-wrapper -->
+</script>
+
+<script type="text/javascript">
+
+  Vue.component('find-principals', {
+      template: '#find-principals-template',
+      props: {
+          permissionGroups: Object,
+          sortedGroups: Array
+      },
+      data() {
+          return {
+              groupPermissions: ${json.dumps(buefy_perms.get(selected_group, {}).get('permissions', []))|n},
+              selectedGroup: ${json.dumps(selected_group)|n},
+              % if selected_permission:
+              selectedPermission: ${json.dumps(selected_permission)|n}
+              % elif selected_group in buefy_perms:
+              selectedPermission: ${json.dumps(buefy_perms[selected_group]['permissions'][0]['permkey'])|n}
+              % else:
+              selectedPermission: null
+              % endif
+          }
+      },
+      methods: {
+
+          selectGroup(groupkey) {
+
+              // re-populate Permission dropdown, auto-select first option
+              this.groupPermissions = this.permissionGroups[groupkey].permissions
+              this.selectedPermission = this.groupPermissions[0].permkey
+          }
+      }
+  })
+
+  new Vue({
+      el: '#find-principals-app',
+      data() {
+          return {
+              permissionGroups: ${json.dumps(buefy_perms)|n},
+              sortedGroups: ${json.dumps(buefy_sorted_groups)|n}
+          }
+      }
+  })
+
+</script>
+% endif

tailbone/views/principal.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2018 Lance Edgar
+#  Copyright © 2010-2019 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -30,6 +30,7 @@ import copy
 
 from rattail.db.auth import has_permission
 from rattail.core import Object
+from rattail.util import OrderedDict
 
 import wtforms
 from webhelpers2.html import HTML
@@ -84,8 +85,35 @@ class PrincipalMasterView(MasterView):
             principals = self.find_principals_with_permission(self.Session(), permission)
 
         context = {'form': form, 'permissions': sorted_perms, 'principals': principals}
+
+        if self.get_use_buefy():
+            perms = self.get_buefy_perms_data(sorted_perms)
+            context['buefy_perms'] = perms
+            context['buefy_sorted_groups'] = list(perms)
+            context['selected_group'] = self.request.POST.get('permission_group', 'common')
+            context['selected_permission'] = self.request.POST.get('permission', None)
+
         return self.render_to_response('find_by_perm', context)
 
+    def get_buefy_perms_data(self, sorted_perms):
+        data = OrderedDict()
+        for gkey, group in sorted_perms:
+
+            gperms = []
+            for pkey, perm in group['perms']:
+                gperms.append({
+                    'permkey': pkey,
+                    'label': perm['label'],
+                })
+
+            data[gkey] = {
+                'groupkey': gkey,
+                'label': group['label'],
+                'permissions': gperms,
+            }
+
+        return data
+
     @classmethod
     def defaults(cls, config):
         cls._principal_defaults(config)