Add dropdown, autohide magic when editing Role permissions

only for Buefy theme though

tailbone/templates/deform/permissions.pt

@@ -1,6 +1,10 @@
 <div tal:define="oid oid|field.oid;
-                 true_val true_val|field.widget.true_val;"
+                 true_val true_val|field.widget.true_val;
+                 use_buefy use_buefy|0;"
      tal:omit-tag="">
+
+  <div tal:condition="not use_buefy"
+       tal:omit-tag="">
   ${field.start_mapping()}
 
   <div class="permissions-outer">
@@ -29,4 +33,57 @@
   </div>
 
   ${field.end_mapping()}
+  </div>
+
+  <div tal:condition="use_buefy">
+    ${field.start_mapping()}
+
+    <div class="level">
+      <div class="level-left">
+        <div class="level-item">
+          showing group:
+        </div>
+        <div class="level-item">
+          <!-- TODO: should make this v-model dynamic -->
+          <b-select v-model="showingPermissionGroup">
+            <option value="">(all)</option>
+            <tal:loop tal:repeat="groupkey sorted(permissions, key=lambda k: permissions[k]['label'].lower())">
+              <option tal:attributes="value groupkey">
+                ${permissions[groupkey]['label']}
+              </option>
+            </tal:loop>
+          </b-select>
+        </div>
+      </div>
+    </div>
+
+    <tal:loop tal:repeat="groupkey sorted(permissions, key=lambda k: permissions[k]['label'].lower())">
+      <div tal:define="perms permissions[groupkey]['perms'];"
+           class="permissions-group">
+        <!-- TODO: should use more dynamic v-model name -->
+        <div class="card"
+             tal:attributes="v-show string: !showingPermissionGroup || showingPermissionGroup == '${permissions[groupkey]['key']}';">
+          <header class="card-header">
+            <p class="card-header-title">${permissions[groupkey]['label']}</p>
+          </header>
+          <div class="card-content">
+            <tal:loop tal:repeat="key sorted(perms, key=lambda p: perms[p]['label'].lower())">
+              <div class="perm">
+                <label>
+                  <input type="checkbox"
+                         name="${key}"
+                         id="${oid}-${key}"
+                         value="${true_val}"
+                         tal:attributes="checked python:field.widget.get_checked_value(cstruct, key);" />
+                  ${perms[key]['label']}
+                </label>
+              </div>
+            </tal:loop>
+          </div><!-- card-content -->
+        </div><!-- card -->
+      </div><!-- permissions-group -->
+    </tal:loop>
+
+    ${field.end_mapping()}
+  </div>
 </div>

tailbone/templates/roles/edit.mako

@@ -6,4 +6,15 @@
   ${h.stylesheet_link(request.static_url('tailbone:static/css/perms.css'))}
 </%def>
 
+<%def name="modify_this_page_vars()">
+  ${parent.modify_this_page_vars()}
+  <script type="text/javascript">
+
+    // TODO: this variable name should be more dynamic (?) since this is
+    // connected to (and only here b/c of) the permissions field
+    TailboneFormData.showingPermissionGroup = ''
+
+  </script>
+</%def>
+
 ${parent.body()}

tailbone/views/roles.py

@@ -137,6 +137,7 @@ class RolesView(PrincipalMasterView):
     def configure_form(self, f):
         super(RolesView, self).configure_form(f)
         role = f.model_instance
+        use_buefy = self.get_use_buefy()
 
         # name
         f.set_validator('name', self.unique_name)
@@ -148,7 +149,9 @@ class RolesView(PrincipalMasterView):
         self.tailbone_permissions = self.get_available_permissions()
         f.set_renderer('permissions', PermissionsRenderer(permissions=self.tailbone_permissions))
         f.set_node('permissions', colander.Set())
-        f.set_widget('permissions', PermissionsWidget(permissions=self.tailbone_permissions))
+        f.set_widget('permissions', PermissionsWidget(
+            permissions=self.tailbone_permissions,
+            use_buefy=use_buefy))
         if self.editing:
             granted = []
             for groupkey in self.tailbone_permissions: