Bug 11375: Improve patrons permissions display

This patch updates the patron permissions interface in order to
emphasize permission descriptions (which can be translated) over
permission code (which cannot).

The tree structure (and jQuery plugin) is removed, and permissions are
displayed in a table-like way. Sub-permissions are shown or hidden with
a link.

A free-text filter is added to the top for narrowing the list by
keyword.

Save and cancel buttons are now in a floating toolbar.

To test, apply the patch, regenerate the staff client CSS, and clear
your browser cache if necessary.

 - Open the "Set permissions" page for any patron.
 - Confirm that the filter works correctly to show only lines which
   match your entry
   - Note that the superlibrarian line stays visible all the time. This
     is to make it clearer that sub-permissions cannot be selected if
     superlibrarian is checked.
 - Check the superlibrarain "hint" text for clarity.
 - Test the show/hide controls.
 - Test that checking a "parent" permission displays the
   sub-permissions.
 - Test that the toolbar with Save and Cancel floats when scrolling.
 - Test that changing and saving permissions works correctly.

Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.treeview.pack.js b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.treeview.pack.js
deleted file mode 100644 (file)
index eddac49..0000000
--- a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.treeview.pack.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Treeview 1.4 - jQuery plugin to hide and show branches of a tree
- * 
- * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
- * http://docs.jquery.com/Plugins/Treeview
- *
- * Copyright (c) 2007 Jörn Zaefferer
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- *
- * Revision: $Id: jquery.treeview.js 4684 2008-02-07 19:08:06Z joern.zaefferer $
- *
- */
-eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}(';(4($){$.1l($.F,{E:4(b,c){l a=3.n(\'.\'+b);3.n(\'.\'+c).o(c).m(b);a.o(b).m(c);8 3},s:4(a,b){8 3.n(\'.\'+a).o(a).m(b).P()},1n:4(a){a=a||"1j";8 3.1j(4(){$(3).m(a)},4(){$(3).o(a)})},1h:4(b,a){b?3.1g({1e:"p"},b,a):3.x(4(){T(3)[T(3).1a(":U")?"H":"D"]();7(a)a.A(3,O)})},12:4(b,a){7(b){3.1g({1e:"D"},b,a)}1L{3.D();7(a)3.x(a)}},11:4(a){7(!a.1k){3.n(":r-1H:G(9)").m(k.r);3.n((a.1F?"":"."+k.X)+":G(."+k.W+")").6(">9").D()}8 3.n(":y(>9)")},S:4(b,c){3.n(":y(>9):G(:y(>a))").6(">1z").C(4(a){c.A($(3).19())}).w($("a",3)).1n();7(!b.1k){3.n(":y(>9:U)").m(k.q).s(k.r,k.t);3.G(":y(>9:U)").m(k.u).s(k.r,k.v);3.1r("<J 14=\\""+k.5+"\\"/>").6("J."+k.5).x(4(){l a="";$.x($(3).B().1o("14").13(" "),4(){a+=3+"-5 "});$(3).m(a)})}3.6("J."+k.5).C(c)},z:4(g){g=$.1l({N:"z"},g);7(g.w){8 3.1K("w",[g.w])}7(g.p){l d=g.p;g.p=4(){8 d.A($(3).B()[0],O)}}4 1m(b,c){4 L(a){8 4(){K.A($("J."+k.5,b).n(4(){8 a?$(3).B("."+a).1i:1I}));8 1G}}$("a:10(0)",c).C(L(k.u));$("a:10(1)",c).C(L(k.q));$("a:10(2)",c).C(L())}4 K(){$(3).B().6(">.5").E(k.Z,k.Y).E(k.I,k.M).P().E(k.u,k.q).E(k.v,k.t).6(">9").1h(g.1f,g.p);7(g.1E){$(3).B().1D().6(">.5").s(k.Z,k.Y).s(k.I,k.M).P().s(k.u,k.q).s(k.v,k.t).6(">9").12(g.1f,g.p)}}4 1d(){4 1C(a){8 a?1:0}l b=[];j.x(4(i,e){b[i]=$(e).1a(":y(>9:1B)")?1:0});$.V(g.N,b.1A(""))}4 1c(){l b=$.V(g.N);7(b){l a=b.13("");j.x(4(i,e){$(e).6(">9")[1y(a[i])?"H":"D"]()})}}3.m("z");l j=3.6("Q").11(g);1x(g.1w){18"V":l h=g.p;g.p=4(){1d();7(h){h.A(3,O)}};1c();17;18"1b":l f=3.6("a").n(4(){8 3.16.15()==1b.16.15()});7(f.1i){f.m("1v").1u("9, Q").w(f.19()).H()}17}j.S(g,K);7(g.R){1m(3,g.R);$(g.R).H()}8 3.1t("w",4(a,b){$(b).1s().o(k.r).o(k.v).o(k.t).6(">.5").o(k.I).o(k.M);$(b).6("Q").1q().11(g).S(g,K)})}});l k=$.F.z.1J={W:"W",X:"X",q:"q",Y:"q-5",M:"t-5",u:"u",Z:"u-5",I:"v-5",v:"v",t:"t",r:"r",5:"5"};$.F.1p=$.F.z})(T);',62,110,'|||this|function|hitarea|find|if|return|ul||||||||||||var|addClass|filter|removeClass|toggle|expandable|last|replaceClass|lastExpandable|collapsable|lastCollapsable|add|each|has|treeview|apply|parent|click|hide|swapClass|fn|not|show|lastCollapsableHitarea|div|toggler|handler|lastExpandableHitarea|cookieId|arguments|end|li|control|applyClasses|jQuery|hidden|cookie|open|closed|expandableHitarea|collapsableHitarea|eq|prepareBranches|heightHide|split|class|toLowerCase|href|break|case|next|is|location|deserialize|serialize|height|animated|animate|heightToggle|length|hover|prerendered|extend|treeController|hoverClass|attr|Treeview|andSelf|prepend|prev|bind|parents|selected|persist|switch|parseInt|span|join|visible|binary|siblings|unique|collapsed|false|child|true|classes|trigger|else'.split('|'),0,{}))
\ No newline at end of file

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 5eb6f5e..d6fa56d 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -537,19 +537,6 @@ label,
         font-weight: bold;
     }
 
-    // Permissions Labels
-    &.permissioncode {
-        font-style: italic;
-
-        &::before {
-            content: "(";
-        }
-
-        &::after {
-            content: ")";
-        }
-    }
-
     &.required {
         color: #C00;
     }
@@ -3751,10 +3738,6 @@ span {
         font-weight: bold;
     }
 
-    &.permissiondesc {
-        font-weight: normal;
-    }
-
     &.required {
         color: #C00;
         font-style: italic;
@@ -4387,6 +4370,95 @@ span {
     }
 }
 
+/* Permissions */
+
+#permissionstree {
+    display: inline-block;
+
+    label {
+        cursor: pointer;
+
+        &:hover {
+            color: #004d99;
+        }
+    }
+}
+
+.main_permission {
+    font-size: 110%;
+    font-weight: bold;
+}
+
+.permissioncode {
+    color: #666;
+    font-style: italic;
+}
+
+.permission-highlight {
+    background-color: #FFC;
+}
+
+.togglechildren_on,
+.togglechildren_off {
+    float: right;
+}
+
+.togglechildren_off,
+.children {
+    display: none;
+}
+
+.open {
+    .togglechildren_off {
+        display: inline;
+    }
+
+    .togglechildren_on {
+        display: none;
+    }
+}
+
+.parent {
+    border: 1px solid #DDD;
+    border-bottom-width: 0;
+    padding: 5px;
+
+    &:last-child {
+        border-bottom-width: 1px;
+    }
+
+    &:nth-child(odd) {
+        background-color: #F8F8F8;
+    }
+}
+
+
+.superlibrarian-hint {
+    color: #000;
+    padding: .2em 0;
+    text-indent: 2em;
+}
+
+.child-flags {
+    background-color: #FFF;
+    border: 1px solid #DDD;
+    border-bottom-width: 0;
+    margin: 0 5px 0 20px;
+    padding: 5px;
+
+    &:first-child {
+        margin-top: 10px;
+    }
+
+    &:last-child {
+        border-bottom-width: 1px;
+    }
+
+    &:nth-child(odd) {
+        background-color: #EEE;
+    }
+}
+
 @media (min-width: 200px) {
     .navbar-nav > li {
         float: left;

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/file.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/file.gif
deleted file mode 100644 (file)
index 7e62167..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/file.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/folder-closed.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/folder-closed.gif
deleted file mode 100644 (file)
index 5411078..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/folder-closed.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/folder.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/folder.gif
deleted file mode 100644 (file)
index 2b31631..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/folder.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/minus.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/minus.gif
deleted file mode 100644 (file)
index 47fb7b7..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/minus.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/plus.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/plus.gif
deleted file mode 100644 (file)
index 6906621..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/plus.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-black-line.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-black-line.gif
deleted file mode 100644 (file)
index e549687..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-black-line.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-black.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-black.gif
deleted file mode 100644 (file)
index d549b9f..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-black.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-default-line.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-default-line.gif
deleted file mode 100644 (file)
index 37114d3..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-default-line.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-default.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-default.gif
deleted file mode 100644 (file)
index a12ac52..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-default.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-famfamfam-line.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-famfamfam-line.gif
deleted file mode 100644 (file)
index 6e289ce..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-famfamfam-line.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-famfamfam.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-famfamfam.gif
deleted file mode 100644 (file)
index 0cb178e..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-famfamfam.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-gray-line.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-gray-line.gif
deleted file mode 100644 (file)
index 3760044..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-gray-line.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-gray.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-gray.gif
deleted file mode 100644 (file)
index cfb8a2f..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-gray.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-red-line.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-red-line.gif
deleted file mode 100644 (file)
index df9e749..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-red-line.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-red.gif b/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-red.gif
deleted file mode 100644 (file)
index 3bbb3a1..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/css/treeview/images/treeview-red.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/css/treeview/jquery.treeview.css b/koha-tmpl/intranet-tmpl/prog/css/treeview/jquery.treeview.css
deleted file mode 100644 (file)
index 41d07d6..0000000
--- a/koha-tmpl/intranet-tmpl/prog/css/treeview/jquery.treeview.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.treeview, .treeview ul { 
-       padding: 0;
-       margin: 0;
-       list-style: none;
-}
-
-.treeview ul {
-       background-color: white;
-       margin-top: 4px;
-}
-
-.treeview .hitarea {
-       background: url(images/treeview-default.gif) -64px -25px no-repeat;
-       height: 16px;
-       width: 16px;
-       margin-left: -16px;
-       float: left;
-       cursor: pointer;
-}
-/* fix for IE6 */
-* html .hitarea {
-       display: inline;
-       float:none;
-}
-
-.treeview li { 
-       margin: 0;
-       padding: 3px 0pt 3px 16px;
-    list-style: none;
-}
-
-.treeview a.selected {
-       background-color: #eee;
-}
-
-#treecontrol { margin: 1em 0; display: none; }
-
-.treeview .hover { color: red; cursor: pointer; }
-
-.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
-.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
-
-.treeview .expandable-hitarea { background-position: -80px -3px; }
-
-.treeview li.last { background-position: 0 -1766px }
-.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }  
-.treeview li.lastCollapsable { background-position: 0 -111px }
-.treeview li.lastExpandable { background-position: -32px -67px }
-
-.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
-
-.treeview-red li { background-image: url(images/treeview-red-line.gif); }
-.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 
-
-.treeview-black li { background-image: url(images/treeview-black-line.gif); }
-.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  
-
-.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
-.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 
-
-.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
-.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 
-
-
-.filetree li { padding: 3px 0 2px 16px; }
-.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
-.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
-.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
-.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/permissions.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/permissions.inc
index e014db7..fd4800e 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/permissions.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/permissions.inc
@@ -1,150 +1,666 @@
 [%- BLOCK main_permissions -%]
     [% SWITCH name %]
-    [%- CASE 'superlibrarian' -%]<span>Access to all librarian functions</span>
-    [%- CASE 'circulate' -%]<span>Check out and check in items</span>
-    [%- CASE 'catalogue' -%]<span><b>Required for staff login.</b> Staff access, allows viewing of catalogue in staff client.</span>
-    [%- CASE 'parameters' -%]<span>Manage Koha system settings (Administration panel)</span>
-    [%- CASE 'borrowers' -%]<span>Add, modify and view patron information</span>
-    [%- CASE 'permissions' -%]<span>Set user permissions</span>
-    [%- CASE 'reserveforothers' -%]<span>Place and modify holds for patrons</span>
-    [%- CASE 'editcatalogue' -%]<span>Edit catalog (Modify bibliographic/holdings data)</span>
-    [%- CASE 'updatecharges' -%]<span>Manage patrons fines and fees</span>
-    [%- CASE 'acquisition' -%]<span>Acquisition and/or suggestion management</span>
-    [%- CASE 'tools' -%]<span>Use all tools (expand for granular tools permissions)</span>
-    [%- CASE 'editauthorities' -%]<span>Edit authorities</span>
-    [%- CASE 'serials' -%]<span>Manage serial subscriptions</span>
-    [%- CASE 'reports' -%]<span>Allow access to the reports module</span>
-    [%- CASE 'staffaccess' -%]<span>Allow staff members to modify permissions for other staff members</span>
-    [%- CASE 'coursereserves' -%]<span>Course reserves</span>
-    [%- CASE 'plugins' -%]<span>Koha plugins</span>
-    [%- CASE 'lists' -%]<span>Lists</span>
-    [%- CASE 'clubs' -%]<span>Patron clubs</span>
-    [%- CASE 'ill' -%]<span>Create and modify Interlibrary loan requests</span>
-    [%- CASE 'self_check' -%]<span>Self check modules</span>
-    [%- CASE 'stockrotation' -%]<span>Manage stockrotation operations</span>
+    [%- CASE 'superlibrarian' -%]
+        <span class="main_permission superlibrarian_permission">Access to all librarian functions</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'circulate' -%]
+        <span class="main_permission circulate_permission">Check out and check in items</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'catalogue' -%]
+        <span class="main_permission catalogue_permission">Staff access, allows viewing of catalogue in staff client.</span>
+        <span class="permissioncode">([% name | html %])</span> <span class="required">Required for staff login.</span>
+    [%- CASE 'parameters' -%]
+        <span class="main_permission parameters_permission">Manage Koha system settings (Administration panel)</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'borrowers' -%]
+        <span class="main_permission borrowers_permission">Add, modify and view patron information</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'permissions' -%]
+        <span class="main_permission permissions_permission">Set user permissions</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'reserveforothers' -%]
+        <span class="main_permission reserveforothers_permission">Place and modify holds for patrons</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'editcatalogue' -%]
+        <span class="main_permission editcatalogue_permission">Edit catalog (Modify bibliographic/holdings data)</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'updatecharges' -%]
+        <span class="main_permission updatecharges_permission">Manage patrons fines and fees</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'acquisition' -%]
+        <span class="main_permission acquisition_permission">Acquisition and/or suggestion management</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'tools' -%]
+        <span class="main_permission tools_permission">Use all tools (expand for granular tools permissions)</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'editauthorities' -%]
+        <span class="main_permission editauthorities_permission">Edit authorities</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'serials' -%]
+        <span class="main_permission serials_permission">Manage serial subscriptions</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'reports' -%]
+        <span class="main_permission reports_permission">Allow access to the reports module</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'staffaccess' -%]
+        <span class="main_permission staffaccess_permission">Allow staff members to modify permissions for other staff members</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'coursereserves' -%]
+        <span class="main_permission coursereserves_permission">Course reserves</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'plugins' -%]
+        <span class="main_permission plugins_permission">Koha plugins</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'lists' -%]
+        <span class="main_permission lists_permission">Lists</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'clubs' -%]
+        <span class="main_permission clubs_permission">Patron clubs</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'ill' -%]
+        <span class="main_permission ill_permission">Create and modify Interlibrary loan requests</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'self_check' -%]
+        <span class="main_permission self_check_permission">Self check modules</span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'stockrotation' -%]
+        <span class="main_permission self_check_permission">Manage stockrotation operations</span>
+        <span class="permissioncode">([% name | html %])</span>
     [%- END -%]
 [%- END -%]
 
 [%- BLOCK sub_permissions -%]
   [% SWITCH name %]
-    [%- CASE 'circulate_remaining_permissions' -%]<span>Remaining circulation permissions</span>
-    [%- CASE 'force_checkout' -%]<span>Force checkout if a limitation exists</span>
-    [%- CASE 'manage_restrictions' -%]<span>Manage restrictions for accounts</span>
-    [%- CASE 'overdues_report' -%]<span>Execute overdue items report</span>
-    [%- CASE 'override_renewals' -%]<span>Override blocked renewals</span>
-    [%- CASE 'manage_checkout_notes' %]<span>Mark checkout notes as seen/not seen</span>
-    [%- CASE 'manage_circ_rules' -%]<span>manage circulation rules</span>
-    [%- CASE 'manage_circ_rules_from_any_libraries' -%]<span>Manage circulation rules for any library. If not set the logged in user can only edit circulation rules for their own library (please note that manage_circ_rules is still required)</span>
-    [%- CASE 'parameters_remaining_permissions' -%]<span>Remaining system parameters permissions</span>
-    [%- CASE 'manage_circ_rules' -%]<span>Manage circulation rules</span>
-    [%- CASE 'manage_sysprefs' -%]<span>Manage global system preferences</span>
-    [%- CASE 'manage_libraries' -%]<span>Manage libraries and library groups</span>
-    [%- CASE 'manage_itemtypes' -%]<span>Manage item types</span>
-    [%- CASE 'manage_auth_values' -%]<span>Manage authorized value categories and authorized values</span>
-    [%- CASE 'manage_patron_categories' -%]<span>Manage patron categories</span>
-    [%- CASE 'manage_patron_attributes' -%]<span>Manage extended patron attributes</span>
-    [%- CASE 'manage_transfers' -%]<span>Manage library transfer limits and transport cost matrix</span>
-    [%- CASE 'manage_item_circ_alerts' -%]<span>Manage item circulation alerts</span>
-    [%- CASE 'manage_cities' -%]<span>Manage cities and towns</span>
-    [%- CASE 'manage_marc_frameworks' -%]<span>Manage MARC bibliographic and authority frameworks and test them</span>
-    [%- CASE 'manage_keywords2koha_mappings' -%]<span>Manage keywords to Koha mappings</span>
-    [%- CASE 'manage_classifications' -%]<span>Manage classification sources and filing rules</span>
-    [%- CASE 'manage_matching_rules' -%]<span>Manage record matching rules</span>
-    [%- CASE 'manage_oai_sets' -%]<span>Manage OAI sets</span>
-    [%- CASE 'manage_item_search_fields' -%]<span>Manage item search fields</span>
-    [%- CASE 'manage_search_engine_config' -%]<span>Manage search engine configuration</span>
-    [%- CASE 'manage_search_targets' -%]<span>Manage Z39.50 and SRU server configuration</span>
-    [%- CASE 'manage_didyoumean' -%]<span>Manage Did you mean? configuration</span>
-    [%- CASE 'manage_column_config' -%]<span>Manage column configuration</span>
-    [%- CASE 'manage_audio_alerts' -%]<span>Manage audio alerts</span>
-    [%- CASE 'manage_additional_fields' -%]<span>Manage additional fields for baskets or subscriptions (requires edit_subscription or order_manage permissions)</span>
-    [%- CASE 'manage_sms_providers' -%]<span>Manage SMS cellular providers</span>
-    [%- CASE 'manage_usage_stats' -%]<span>Manage usage statistics settings</span>
-    [%- CASE 'manage_mana' -%]<span>Manage Mana KB content sharing</span>
-    [%- CASE 'edit_borrowers' -%]<span>Add, modify and view patron information</span>
-    [%- CASE 'view_borrower_infos_from_any_libraries' -%]<span>View patron infos from any libraries. If not set the logged in user could only access patron infos from its own library or group of libraries.</span>
-    [%- CASE 'modify_holds_priority' -%]<span>Modify holds priority</span>
-    [%- CASE 'place_holds' -%]<span>Place holds for patrons</span>
-    [%- CASE 'delete_all_items' -%]<span>Delete all items at once</span>
-    [%- CASE 'edit_catalogue' -%]<span>Edit catalog (Modify bibliographic/holdings data)</span>
-    [%- CASE 'edit_items' -%]<span>Edit items</span>
-    [%- CASE 'edit_items_restricted' -%]<span>Limit item modification to subfields defined in the SubfieldsToAllowForRestrictedEditing preference (please note that edit_item is still required)</span>
-    [%- CASE 'fast_cataloging' -%]<span>Fast cataloging</span>
-    [%- CASE 'remaining_permissions' -%]<span>Remaining permissions for managing fines and fees</span>
-    [%- CASE 'writeoff' -%]<span>Write off fines and fees</span>
-    [%- CASE 'suggestions_manage' -%]<span>Manage purchase suggestions</span>
-    [%- CASE 'budget_add_del' -%]<span>Add and delete funds (but can't modify funds)</span>
-    [%- CASE 'budget_manage' -%]<span>Manage funds</span>
-    [%- CASE 'budget_manage_all' -%]<span>Manage all funds</span>
-    [%- CASE 'budget_modify' -%]<span>Modify funds (can't create lines, but can modify existing ones)</span>
-    [%- CASE 'contracts_manage' -%]<span>Manage contracts</span>
-    [%- CASE 'group_manage' -%]<span>Manage basket groups</span>
-    [%- CASE 'order_manage' -%]<span>Manage basket and order lines</span>
-    [%- CASE 'order_manage_all' -%]<span>Manage all baskets and order lines, regardless of restrictions on them</span>
-    [%- CASE 'order_receive' -%]<span>Receive orders and manage shipments</span>
-    [%- CASE 'period_manage' -%]<span>Manage budgets</span>
-    [%- CASE 'planning_manage' -%]<span>Manage budget plannings</span>
-    [%- CASE 'vendors_manage' -%]<span>Manage vendors</span>
-    [%- CASE 'currencies_manage' -%]<span>Manage currencies and exchange rates</span>
-    [%- CASE 'batch_upload_patron_images' -%]<span>Upload patron images in a batch or one at a time</span>
-    [%- CASE 'delete_anonymize_patrons' -%]<span>Delete old borrowers and anonymize circulation history (deletes borrower reading history)</span>
-    [%- CASE 'edit_calendar' -%]<span>Define days when the library is closed</span>
-    [%- CASE 'edit_news' -%]<span>Write news for the OPAC and staff interfaces</span>
-    [%- CASE 'edit_notice_status_triggers' -%]<span>Set notice/status triggers for overdue items</span>
-    [%- CASE 'edit_notices' -%]<span>Define notices</span>
-    [%- CASE 'edit_patrons' -%]<span>Perform batch modification of patrons</span>
-    [%- CASE 'edit_quotes' -%]<span>Edit quotes for quote-of-the-day feature</span>
-    [%- CASE 'export_catalog' -%]<span>Export bibliographic and holdings data</span>
-    [%- CASE 'import_patrons' -%]<span>Import patron data</span>
-    [%- CASE 'inventory' -%]<span>Perform inventory of your catalog</span>
-    [%- CASE 'items_batchdel' -%]<span>Perform batch deletion of items</span>
-    [%- CASE 'items_batchmod' -%]<span>Perform batch modification of items</span>
-    [%- CASE 'items_batchmod_restricted' -%]<span>Limit batch item modification to subfields defined in the SubfieldsToAllowForRestrictedBatchmod preference (please note that items_batchmod is still required)</span>
-    [%- CASE 'label_creator' -%]<span>Create printable labels and barcodes from catalog and patron data</span>
-    [%- CASE 'manage_csv_profiles' -%]<span>Manage CSV export profiles</span>
-    [%- CASE 'manage_patron_lists' -%]<span>Add, edit and delete patron lists and their contents</span>
-    [%- CASE 'manage_staged_marc' -%]<span>Managed staged MARC records, including completing and reversing imports</span>
-    [%- CASE 'marc_modification_templates' -%]<span>Manage marc modification templates</span>
-    [%- CASE 'moderate_comments' -%]<span>Moderate patron comments</span>
-    [%- CASE 'moderate_tags' -%]<span>Moderate patron tags</span>
-    [%- CASE 'records_batchdel' -%]<span>Perform batch deletion of records (bibliographic or authority)</span>
-    [%- CASE 'records_batchmod' -%]<span>Perform batch modification of records (biblios or authorities)</span>
-    [%- CASE 'rotating_collections' -%]<span>Manage rotating collections</span>
-    [%- CASE 'schedule_tasks' -%]<span>Schedule tasks to run</span>
-    [%- CASE 'stage_marc_import' -%]<span>Stage MARC records into the reservoir</span>
-    [%- CASE 'upload_local_cover_images' -%]<span>Upload local cover images</span>
-    [%- CASE 'view_system_logs' -%]<span>Browse the system logs</span>
-    [%- CASE 'check_expiration' -%]<span>Check the expiration of a serial</span>
-    [%- CASE 'claim_serials' -%]<span>Claim missing serials</span>
-    [%- CASE 'create_subscription' -%]<span>Create a new subscription</span>
-    [%- CASE 'delete_subscription' -%]<span>Delete an existing subscription</span>
-    [%- CASE 'edit_subscription' -%]<span>Edit an existing subscription</span>
-    [%- CASE 'receive_serials' -%]<span>Serials receiving</span>
-    [%- CASE 'renew_subscription' -%]<span>Renew a subscription</span>
-    [%- CASE 'routing' -%]<span>Routing</span>
-    [%- CASE 'superserials' -%]<span>Manage subscriptions from any branch (only applies when IndependentBranches is used)</span>
-    [%- CASE 'delete_reports' -%]<span>Delete SQL reports</span>
-    [%- CASE 'create_reports' -%]<span>Create SQL reports</span>
-    [%- CASE 'execute_reports' -%]<span>Execute SQL reports</span>
-    [%- CASE 'add_reserves' -%]<span>Add course reserves</span>
-    [%- CASE 'delete_reserves' -%]<span>Remove course reserves</span>
-    [%- CASE 'manage_courses' -%]<span>Add, edit and delete courses</span>
-    [%- CASE 'configure' -%]<span>Configure plugins</span>
-    [%- CASE 'manage' -%]<span>Manage plugins ( install / uninstall )</span>
-    [%- CASE 'report' -%]<span>Use report plugins</span>
-    [%- CASE 'tool' -%]<span>Use tool plugins</span>
-    [%- CASE 'delete_public_lists' -%]<span>Delete public lists</span>
-    [%- CASE 'upload_general_files' -%]<span>Upload any file</span>
-    [%- CASE 'upload_manage' -%]<span>Manage uploaded files (<i>Useless without upload_general_files</i>)</span>
-    [%- CASE 'access_files' -%]<span>Access to the files stored on the server</span>
-    [%- CASE 'edit_clubs' -%]<span>Create and edit clubs</span>
-    [%- CASE 'edit_templates' -%]<span>Create and edit club templates</span>
-    [%- CASE 'enroll' -%]<span>Enroll patrons in clubs</span>
-    [%- CASE 'edi_manage' -%]<span>Manage EDIFACT transmissions</span>
+    [%- CASE 'circulate_remaining_permissions' -%]
+        <span class="sub_permission circulate_remaining_permissions_subpermission">
+            Remaining circulation permissions
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'force_checkout' -%]
+        <span class="sub_permission force_checkout_subpermission">
+            Force checkout if a limitation exists
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_restrictions' -%]
+        <span class="sub_permission manage_restrictions_subpermission">
+            Manage restrictions for accounts
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'overdues_report' -%]
+        <span class="sub_permission overdues_report_subpermission">
+            Execute overdue items report
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'override_renewals' -%]
+        <span class="sub_permission override_renewals_subpermission">
+            Override blocked renewals
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_checkout_notes' %]
+        <span class="sub_permission manage_checkout_notes_subpermission">
+            Mark checkout notes as seen/not seen
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_circ_rules' -%]
+        <span class="sub_permission manage_circ_rules_subpermission">
+            manage circulation rules
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_circ_rules_from_any_libraries' -%]
+        <span class="sub_permission manage_circ_rules_from_any_libraries_subpermission">
+            Manage circulation rules for any library. If not set the logged in user can only edit circulation rules for their own library (please note that manage_circ_rules is still required)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'parameters_remaining_permissions' -%]
+        <span class="sub_permission parameters_remaining_permissions_subpermission">
+            Remaining system parameters permissions
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_circ_rules' -%]
+        <span class="sub_permission manage_circ_rules_subpermission">
+            Manage circulation rules
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_sysprefs' -%]
+        <span class="sub_permission manage_sysprefs_subpermission">
+            Manage global system preferences
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_libraries' -%]
+        <span class="sub_permission manage_libraries_subpermission">
+            Manage libraries and library groups
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_itemtypes' -%]
+        <span class="sub_permission manage_itemtypes_subpermission">
+            Manage item types
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_auth_values' -%]
+        <span class="sub_permission manage_auth_values_subpermission">
+            Manage authorized value categories and authorized values
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_patron_categories' -%]
+        <span class="sub_permission manage_patron_categories_subpermission">
+            Manage patron categories
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_patron_attributes' -%]
+        <span class="sub_permission manage_patron_attributes_subpermission">
+            Manage extended patron attributes
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_transfers' -%]
+        <span class="sub_permission manage_transfers_subpermission">
+            Manage library transfer limits and transport cost matrix
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_item_circ_alerts' -%]
+        <span class="sub_permission manage_item_circ_alerts_subpermission">
+            Manage item circulation alerts
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_cities' -%]
+        <span class="sub_permission manage_cities_subpermission">
+            Manage cities and towns
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_marc_frameworks' -%]
+        <span class="sub_permission manage_marc_frameworks_subpermission">
+            Manage MARC bibliographic and authority frameworks and test them
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_keywords2koha_mappings' -%]
+        <span class="sub_permission manage_keywords2koha_mappings_subpermission">
+            Manage keywords to Koha mappings
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_classifications' -%]
+        <span class="sub_permission manage_classifications_subpermission">
+            Manage classification sources and filing rules
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_matching_rules' -%]
+        <span class="sub_permission manage_matching_rules_subpermission">
+            Manage record matching rules
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_oai_sets' -%]
+        <span class="sub_permission manage_oai_sets_subpermission">
+            Manage OAI sets
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_item_search_fields' -%]
+        <span class="sub_permission manage_item_search_fields_subpermission">
+            Manage item search fields
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_search_engine_config' -%]
+        <span class="sub_permission manage_search_engine_config_subpermission">
+            Manage search engine configuration
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_search_targets' -%]
+        <span class="sub_permission manage_search_targets_subpermission">
+            Manage Z39.50 and SRU server configuration
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_didyoumean' -%]
+        <span class="sub_permission manage_didyoumean_subpermission">
+            Manage Did you mean? configuration
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_column_config' -%]
+        <span class="sub_permission manage_column_config_subpermission">
+            Manage column configuration
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_audio_alerts' -%]
+        <span class="sub_permission manage_audio_alerts_subpermission">
+            Manage audio alerts
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_additional_fields' -%]
+        <span class="sub_permission manage_aditional_fields_subpermission">
+            Manage additional fields for baskets or subscriptions (requires edit_subscription or order_manage permissions)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_sms_providers' -%]
+        <span class="sub_permission manage_sms_providers_subpermission">
+            Manage SMS cellular providers
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_usage_stats' -%]
+        <span class="sub_permission manage_usage_stats_subpermission">
+            Manage usage statistics settings
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_mana' -%]
+        <span class="sub_permission manage_mana_subpermission">
+            Manage Mana KB content sharing
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_borrowers' -%]
+        <span class="sub_permission edit_borrowers_subpermission">
+            Add, modify and view patron information
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'view_borrower_infos_from_any_libraries' -%]
+        <span class="sub_permission view_borrower_infos_from_any_libraries_subpermission">
+            View patron infos from any libraries. If not set the logged in user could only access patron infos from its own library or group of libraries.
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'modify_holds_priority' -%]
+        <span class="sub_permission modify_holds_priority_subpermission">
+            Modify holds priority
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'place_holds' -%]
+        <span class="sub_permission place_holds_subpermission">
+            Place holds for patrons
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'delete_all_items' -%]
+        <span class="sub_permission delete_all_items_subpermission">
+            Delete all items at once
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_catalogue' -%]
+        <span class="sub_permission edit_catalogue_subpermission">
+            Edit catalog (Modify bibliographic/holdings data)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_items' -%]
+        <span class="sub_permission edit_items_subpermission">
+            Edit items
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_items_restricted' -%]
+        <span class="sub_permission edit_items_restricted_subpermission">
+            Limit item modification to subfields defined in the SubfieldsToAllowForRestrictedEditing preference (please note that edit_item is still required)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'fast_cataloging' -%]
+        <span class="sub_permission fast_cataloging_subpermission">
+            Fast cataloging
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'remaining_permissions' -%]
+        <span class="sub_permission remaining_permissions_subpermission">
+            Remaining permissions for managing fines and fees
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'writeoff' -%]
+        <span class="sub_permission writeoff_subpermission">
+            Write off fines and fees
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'suggestions_manage' -%]
+        <span class="sub_permission suggestions_manage_subpermission">
+            Manage purchase suggestions
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'budget_add_del' -%]
+        <span class="sub_permission budget_add_del_subpermission">
+            Add and delete funds (but can't modify funds)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'budget_manage' -%]
+        <span class="sub_permission budget_manage_subpermission">
+            Manage funds
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'budget_manage_all' -%]
+        <span class="sub_permission budget_manage_all_subpermission">
+            Manage all funds
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'budget_modify' -%]
+        <span class="sub_permission budget_modify_subpermission">
+            Modify funds (can't create lines, but can modify existing ones)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'contracts_manage' -%]
+        <span class="sub_permission contracts_manage_subpermission">
+            Manage contracts
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'group_manage' -%]
+        <span class="sub_permission group_manage_subpermission">
+            Manage basket groups
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'order_manage' -%]
+        <span class="sub_permission order_manage_subpermission">
+            Manage basket and order lines
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'order_manage_all' -%]
+        <span class="sub_permission order_manage_all_subpermission">
+            Manage all baskets and order lines, regardless of restrictions on them
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'order_receive' -%]
+        <span class="sub_permission order_receive_subpermission">
+            Receive orders and manage shipments
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'period_manage' -%]
+        <span class="sub_permission period_manage_subpermission">
+            Manage budgets
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'planning_manage' -%]
+        <span class="sub_permission planning_manage_subpermission">
+            Manage budget plannings
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'vendors_manage' -%]
+        <span class="sub_permission vendors_manage_subpermission">
+            Manage vendors
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'currencies_manage' -%]
+        <span class="sub_permission currencies_manage_subpermission">
+            Manage currencies and exchange rates
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'batch_upload_patron_images' -%]
+        <span class="sub_permission batch_upload_patron_images_subpermission">
+            Upload patron images in a batch or one at a time
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'delete_anonymize_patrons' -%]
+        <span class="sub_permission delete_anonymize_patrons_subpermission">
+            Delete old borrowers and anonymize circulation history (deletes borrower reading history)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_calendar' -%]
+        <span class="sub_permission edit_calendar_subpermission">
+            Define days when the library is closed
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_news' -%]
+        <span class="sub_permission edit_news_subpermission">
+            Write news for the OPAC and staff interfaces
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_notice_status_triggers' -%]
+        <span class="sub_permission edit_notice_status_triggers_subpermission">
+            Set notice/status triggers for overdue items
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_notices' -%]
+        <span class="sub_permission edit_notices_subpermission">
+            Define notices
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_patrons' -%]
+        <span class="sub_permission edit_patrons_subpermission">
+            Perform batch modification of patrons
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_quotes' -%]
+        <span class="sub_permission edit_quotes_subpermission">
+            Edit quotes for quote-of-the-day feature
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'export_catalog' -%]
+        <span class="sub_permission export_catalog_subpermission">
+            Export bibliographic and holdings data
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'import_patrons' -%]
+        <span class="sub_permission import_patrons_subpermission">
+            Import patron data
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'inventory' -%]
+        <span class="sub_permission inventory_subpermission">
+            Perform inventory of your catalog
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'items_batchdel' -%]
+        <span class="sub_permission items_batchdel_subpermission">
+            Perform batch deletion of items
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'items_batchmod' -%]
+        <span class="sub_permission items_batchmod_subpermission">
+            Perform batch modification of items
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'items_batchmod_restricted' -%]
+        <span class="sub_permission items_batchmod_restricted_subpermission">
+            Limit batch item modification to subfields defined in the SubfieldsToAllowForRestrictedBatchmod preference (please note that items_batchmod is still required)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'label_creator' -%]
+        <span class="sub_permission label_creator_subpermission">
+            Create printable labels and barcodes from catalog and patron data
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_csv_profiles' -%]
+        <span class="sub_permission manage_csv_profiles_subpermission">
+            Manage CSV export profiles
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_patron_lists' -%]
+        <span class="sub_permission manage_patron_lists_subpermission">
+            Add, edit and delete patron lists and their contents
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_staged_marc' -%]
+        <span class="sub_permission manage_staged_marc_subpermission">
+            Managed staged MARC records, including completing and reversing imports
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'marc_modification_templates' -%]
+        <span class="sub_permission marc_modification_templates_subpermission">
+            Manage marc modification templates
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'moderate_comments' -%]
+        <span class="sub_permission moderate_comments_subpermission">
+            Moderate patron comments
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'moderate_tags' -%]
+        <span class="sub_permission moderate_tags_subpermission">
+            Moderate patron tags
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'records_batchdel' -%]
+        <span class="sub_permission records_batchdel_subpermission">
+            Perform batch deletion of records (bibliographic or authority)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'records_batchmod' -%]
+        <span class="sub_permission records_batchmod_subpermission">
+            Perform batch modification of records (biblios or authorities)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'rotating_collections' -%]
+        <span class="sub_permission rotating_collections_subpermission">
+            Manage rotating collections
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'schedule_tasks' -%]
+        <span class="sub_permission schedule_tasks_subpermission">
+            Schedule tasks to run
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'stage_marc_import' -%]
+        <span class="sub_permission stage_marc_import_subpermission">
+            Stage MARC records into the reservoir
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'upload_local_cover_images' -%]
+        <span class="sub_permission upload_local_cover_images_subpermission">
+            Upload local cover images
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'view_system_logs' -%]
+        <span class="sub_permission view_system_logs_subpermission">
+            Browse the system logs
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'check_expiration' -%]
+        <span class="sub_permission check_expiration_subpermission">
+            Check the expiration of a serial
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'claim_serials' -%]
+        <span class="sub_permission claim_serials_subpermission">
+            Claim missing serials
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'create_subscription' -%]
+        <span class="sub_permission create_subscription_subpermission">
+            Create a new subscription
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'delete_subscription' -%]
+        <span class="sub_permission delete_subscription_subpermission">
+            Delete an existing subscription
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_subscription' -%]
+        <span class="sub_permission edit_subscription_subpermission">
+            Edit an existing subscription
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'receive_serials' -%]
+        <span class="sub_permission receive_serials_subpermission">
+            Serials receiving
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'renew_subscription' -%]
+        <span class="sub_permission renew_subscription_subpermission">
+            Renew a subscription
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'routing' -%]
+        <span class="sub_permission routing_subpermission">
+            Routing
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'superserials' -%]
+        <span class="sub_permission superserials_subpermission">
+            Manage subscriptions from any branch (only applies when IndependentBranches is used)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'delete_reports' -%]
+        <span class="sub_permission delete_reports_subpermission">
+            Delete SQL reports
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'create_reports' -%]
+        <span class="sub_permission create_reports_subpermission">
+            Create SQL reports
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'execute_reports' -%]
+        <span class="sub_permission execute_reports_subpermission">
+            Execute SQL reports
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'add_reserves' -%]
+        <span class="sub_permission add_reserves_subpermission">
+            Add course reserves
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'delete_reserves' -%]
+        <span class="sub_permission delete_reserves_subpermission">
+            Remove course reserves
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_courses' -%]
+        <span class="sub_permission manage_courses_subpermission">
+            Add, edit and delete courses
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'configure' -%]
+        <span class="sub_permission configure_subpermission">
+            Configure plugins
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage' -%]
+        <span class="sub_permission manage_subpermission">
+            Manage plugins ( install / uninstall )
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'report' -%]
+        <span class="sub_permission report_subpermission">
+            Use report plugins
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'tool' -%]
+        <span class="sub_permission tool_subpermission">
+            Use tool plugins
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'delete_public_lists' -%]
+        <span class="sub_permission delete_public_lists_subpermission">
+            Delete public lists
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'upload_general_files' -%]
+        <span class="sub_permission upload_general_files_subpermission">
+            Upload any file
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'upload_manage' -%]
+        <span class="sub_permission upload_manage_subpermission">
+            Manage uploaded files (<i>Useless without upload_general_files</i>)
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'access_files' -%]
+        <span class="sub_permission access_files_subpermission">
+            Access to the files stored on the server
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_clubs' -%]
+        <span class="sub_permission edit_clubs_subpermission">
+            Create and edit clubs
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edit_templates' -%]
+        <span class="sub_permission edit_templates_subpermission">
+            Create and edit club templates
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'enroll' -%]
+        <span class="sub_permission enroll_subpermission">
+            Enroll patrons in clubs
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'edi_manage' -%]
+        <span class="sub_permission edi_manage_subpermission">
+            Manage EDIFACT transmissions
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
   [%# self_check %]
-    [%- CASE 'self_checkin_module' -%]<span>Log into the self check-in module. Note: this permission prevents the patron from using any other OPAC functionality</span>
-    [%- CASE 'self_checkout_module' -%]<span>Perform self checkout at the OPAC. It should be used for the patron matching the AutoSelfCheckID</span>
-    [%- CASE 'manage_rota_items' -%]<span>Add and remove items from rotas</span>
-    [%- CASE 'manage_rotas' -%]<span>Create, edit and delete rotas</span>
+    [%- CASE 'self_checkin_module' -%]
+        <span class="sub_permission self_checkin_module_subpermission">
+            Log into the self check-in module. Note: this permission prevents the patron from using any other OPAC functionality
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'self_checkout_module' -%]
+        <span class="sub_permission self_checkout_module_subpermission">
+            Perform self checkout at the OPAC. It should be used for the patron matching the AutoSelfCheckID
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_rota_items' -%]
+        <span class="sub_permission manage_rota_items_subpermission">
+            Add and remove items from rotas
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
+    [%- CASE 'manage_rotas' -%]
+        <span class="sub_permission manage_rotas_subpermission">
+            Create, edit and delete rotas
+        </span>
+        <span class="permissioncode">([% name | html %])</span>
   [%- END -%]
 [%- END -%]

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member-flags.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member-flags.tt
index f4d1c2a..503cfbf 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member-flags.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member-flags.tt
@@ -5,7 +5,6 @@
 [% PROCESS 'permissions.inc' %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Patrons &rsaquo; Set permissions for [% patron.surname | html %], [% patron.firstname | html %]</title>
-[% Asset.css("css/treeview/jquery.treeview.css") | $raw %]
 [% INCLUDE 'doc-head-close.inc' %]
 </head>
 
@@ -27,56 +26,63 @@
     <input type="hidden" name="member" id="borrowernumber" value="[% patron.borrowernumber | html %]" />
     <input type="hidden" name="newflags" value="1" />
     <h1>Set permissions for [% patron.surname | html %], [% patron.firstname | html %]</h1>
-    <!-- <ul id="permissionstree"><li class="root">All privileges<ul> -->
-    <ul id="permissionstree" class="treeview-grey">
-        <!-- <li class="folder-close">One level down<ul> -->
-    [% FOREACH loo IN loop %]
-        [% IF ( loo.expand ) %]
-        <li class="open">
-        [% ELSE %]
-        <li>
-        [% END %]
-                       [% IF ( loo.checked ) %]
-          [% IF disable_superlibrarian_privs && loo.bit == 0 %]
-              <input type="checkbox" disabled="disabled" class="flag parent superlib" id="flag-[% loo.bit | html %]_disabled" name="flag" value="[% loo.flag | html %]" checked="checked" title="The system preference ProtectSuperlibrarianPrivileges is enabled" />
-              <input type="hidden" id="flag-[% loo.bit | html %]" name="flag" value="[% loo.flag | html %]" >
-          [% ELSE %]
-              <input type="checkbox" class="flag parent" id="flag-[% loo.bit | html %]" name="flag" value="[% loo.flag | html %]" checked="checked" />
-          [% END %]
-                       [% ELSE %]
-          [% IF disable_superlibrarian_privs && loo.bit == 0 %]
-              <input type="checkbox" disabled="disabled" class="flag parent" id="flag-[% loo.bit | html %]_disabled" name="flag" value="[% loo.flag | html %]" title="The system preference ProtectSuperlibrarianPrivileges is enabled" />
-          [% ELSE %]
-              <input type="checkbox" class="flag parent" id="flag-[% loo.bit | html %]" name="flag" value="[% loo.flag | html %]" />
-          [% END %]
-                       [% END %]
-                <label class="permissioncode" for="flag-[% loo.bit | html %]">[% loo.flag | html %]</label>
-                <span class="permissiondesc">[% PROCESS main_permissions name=loo.flag %]</span>
-            [% IF ( loo.sub_perm_loop ) %]
-                <ul id="flag-[% loo.bit | html %]-children">
-                    [% FOREACH sub_perm_loo IN loo.sub_perm_loop %]
-                        <li>
-                                   [% IF ( sub_perm_loo.checked ) %]
-                            <input type="checkbox" class="flag child" id="[% sub_perm_loo.id | html %]" name="flag" value="[% sub_perm_loo.perm | html %]" checked="checked" />
-                                   [% ELSE %]
-                            <input type="checkbox" class="flag child" id="[% sub_perm_loo.id | html %]" name="flag" value="[% sub_perm_loo.perm | html %]" />
-                                   [% END %]
-                    <label class="permissioncode" for="[% sub_perm_loo.id | html %]">[% sub_perm_loo.code | html %]</label>
-                             <span class="permissiondesc">[% PROCESS sub_permissions name=sub_perm_loo.code %]</span>
-                        </li>
-                    [% END %]
-                </ul>
-                </li>
-            [% ELSE %]
-                </li>
-                       [% END %]
-    [% END %]
-        <!-- </ul></li> -->
-    <!-- </ul></li></ul> -->
-    </ul>
-
-<fieldset class="action"><input type="submit" value="Save" /> <a class="cancel" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% patron.borrowernumber | html %]">Cancel</a></fieldset>
 
+    <div id="permissionstree">
+        <div id="permissions_toolbar" class="btn-toolbar">
+            <button type="submit" class="btn btn-sm btn-default"><i class="fa fa-save"></i> Save</button>
+            <a class="btn btn-sm btn-default" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% patron.borrowernumber | html %]"><i class="fa fa-remove"></i> Cancel</a>
+            <div class="btn-group pull-right">
+                Filter: <input type="text" name="permissions_filter" id="permissions_filter" size="20" />
+                <a href="#" id="clear_filter" style="display:none"><i class="fa fa-remove"></i></a>
+            </div>
+        </div>
+        <div class="permissions">
+            [% FOREACH loo IN loop %]
+                [% IF ( loo.expand ) %]
+                    <div id="parent-flag-[% loo.flag | html %]" class="open parent">
+                [% ELSE %]
+                    <div id="parent-flag-[% loo.flag | html %]" class="parent">
+                [% END %]
+                [% IF ( loo.checked ) %]
+                    [% IF disable_superlibrarian_privs && loo.bit == 0 %]
+                        <input type="checkbox" disabled="disabled" data-bit="[% loo.bit | html %]" id="flag-[% loo.bit | html %]_disabled" class="parent flag superlib" name="flag" value="[% loo.flag | html %]" checked="checked" title="The system preference ProtectSuperlibrarianPrivileges is enabled" />
+                        <input type="hidden" id="flag-[% loo.bit | html %]" name="flag" value="[% loo.flag | html %]" >
+                    [% ELSE %]
+                          <input type="checkbox" data-bit="[% loo.bit | html %]" id="flag-[% loo.bit | html %]" class="parent flag" name="flag" value="[% loo.flag | html %]" checked="checked" />
+                    [% END %]
+                [% ELSE %]
+                    [% IF disable_superlibrarian_privs && loo.bit == 0 %]
+                        <input type="checkbox" disabled="disabled" class="flag parent" data-bit="[% loo.bit | html %]" id="flag-[% loo.bit | html %]_disabled" name="flag" value="[% loo.flag | html %]" title="The system preference ProtectSuperlibrarianPrivileges is enabled" />
+                    [% ELSE %]
+                        <input type="checkbox" class="flag parent" data-bit="[% loo.bit | html %]" id="flag-[% loo.bit | html %]" name="flag" value="[% loo.flag | html %]" />
+                    [% END %]
+                [% END # /IF loo.checked %]
+                    <label class="permissiondesc" for="flag-[% loo.bit | html %]">
+                        [% PROCESS main_permissions name=loo.flag %]
+                    </label>
+                    [% IF ( loo.flag == "superlibrarian" ) %]<div class="hint superlibrarian-hint">This permission grants access to all areas. If selected, specific sub-permissions cannot be selected.</div>[% END %]
+                [% IF ( loo.sub_perm_loop ) %]
+                    <a class="toggle-[% loo.bit | html %] togglechildren_off" href="#" data-bit="[% loo.bit | html %]"><i class="fa fa-minus-square-o"></i> Hide details</a>
+                    <a class="toggle-[% loo.bit | html %] togglechildren_on" href="#" data-bit="[% loo.bit | html %]"><i class="fa fa-plus-square-o"></i> Show details</a>
+                    <div class="children" id="flag-[% loo.bit | html %]-children">
+                        [% FOREACH sub_perm_loo IN loo.sub_perm_loop %]
+                            <div class="child-flags">
+                                [% IF ( sub_perm_loo.checked ) %]
+                                    <input type="checkbox" id="[% sub_perm_loo.id | html %]" class="child flag" name="flag" value="[% sub_perm_loo.perm | html %]" checked="checked" />
+                                [% ELSE %]
+                                    <input type="checkbox" id="[% sub_perm_loo.id | html %]" class="child flag" name="flag" value="[% sub_perm_loo.perm | html %]" />
+                                [% END %]
+                                <label class="permissiondesc" for="[% sub_perm_loo.id | html %]">
+                                    [% PROCESS sub_permissions name=sub_perm_loo.code %]
+                                </label>
+                            </div>
+                        [% END %]
+                    </div> <!-- /#flag-[% loo.bit | html %]-children -->
+                [% END # /IF loo.sub_perm_loop %]
+                </div> <!-- /.parent -->
+            [% END # /FOREACH loo %]
+        </div>
+    </div> <!-- /#permissionstree -->
 </form>
 
             </main>
@@ -92,16 +98,48 @@
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'str/members-menu.inc' %]
     [% Asset.js("js/members-menu.js") | $raw %]
-    [% Asset.js("lib/jquery/plugins/jquery.treeview.pack.js") | $raw %]
-    <!-- set up tree -->
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
     <script>
+        var Sticky;
         $(document).ready(function() {
-            $("#permissionstree").treeview({animated: "fast", collapsed: true});
+
+            Sticky = $("#permissions_toolbar");
+            Sticky.hcSticky({
+                stickTo: "#permissionstree",
+                stickyClass: "floating"
+            });
+
+            $(".open div").show();
+
+            $("#permissions_filter").on("keyup", function(){
+                $("#clear_filter").css("display","inline-block");
+                $("a[class^=toggle-]").hide();
+                var string = $(this).val();
+                var divs = $("div[id!='parent-flag-superlibrarian']", ".permissions");
+                if( string != "" && string.length > 3 ){
+                    divs.each(function(){
+                        if ( $(this).text().search(new RegExp( string, "i")) < 0 ) {
+                            $(this).hide();
+                        } else {
+                            $(this).show();
+                        }
+                    });
+                } else {
+                    divs.show();
+                }
+            });
+
+            $("#clear_filter").on("click", function(){
+                $(".togglechildren_off").show();
+                $("#permissions_filter").val("");
+                $("div", "#permissionstree").show();
+                $(this).css("display","none");
+            });
 
             // Enforce Superlibrarian Privilege Mutual Exclusivity
             if( $('input[id="flag-0"]:checked').length || $(".superlib:checked").length ){
                 if ($('input[name="flag"]:checked').length > 1){
-                    alert(_("Inconsistency detected! The superlibrarian privilege is mutually exclusive of other privileges, as it includes them all. This patron's privileges will now be reset to include only superlibrarian."));
+                    alert(_("Inconsistency detected!") + "\n\n" + _("The superlibrarian privilege is mutually exclusive of other privileges, as it includes them all.") + "\n\n" + _("This patron's privileges will now be reset to include only superlibrarian."));
                 }
 
                 $('input[name="flag"]').each(function() {
@@ -128,71 +166,32 @@
                 }
             });
 
-            $(".flag").on("change",function(){
-                if( $(this).hasClass("parent") ){
-                    toggleChildren(this);
-                } else {
-                    toggleParent(this);
-                }
+            $(".togglechildren_off, .togglechildren_on").on('click', function(e) {
+                e.preventDefault();
+                var bit = $(this).data("bit");
+                $("#flag-" + bit + "-children").toggle();
+                $(".toggle-" + bit).toggle();
             });
 
-        });
-
-        // manage checking/unchecking parent permissions
-        var originalChildStates = {}; /* keep track of subpermission checkbox values
-                                         so that user can recover from accidentally
-                                         toggling a parent/module permission */
-        function selectChildren(parentInput) {
-            var childListId = parentInput.id + '-children';
-            var list = document.getElementById(childListId);
-            var children = [];
-            if (list) {
-                var inputs = list.getElementsByTagName('input');
-                for (var i = 0; i < inputs.length; i++) {
-                    if (inputs[i].type == 'checkbox') {
-                        children.push(inputs[i]);
-                    }
-                }
-            }
-            return children;
-        }
+            $(".togglechildren_off, .togglechildren_on").hover( function(){
+                $(this).parent().addClass("permission-highlight");
+            }, function(){
+                $(this).parent().removeClass("permission-highlight");
+            });
 
-        function toggleChildren(parentInput) {
-            var children = selectChildren(parentInput);
-            if (children.length == 0) {
-                return;
-            }
-            var checked = parentInput.checked;
-            if (checked && parentInput.parentNode.className == 'expandable') {
-                /* expand the tree */
-                $(".hitarea", parentInput.parentNode).click();
-            }
-            for (var i = 0; i < children.length; i++) {
-                if (checked) {
-                    originalChildStates[children[i].id] = children[i].checked;
-                    children[i].checked = checked;
+            $(".flag").on("change",function(e){
+                e.preventDefault();
+                var bit = $(this).data("bit");
+                if( $(this).is(":checked") ){
+                    $("#flag-" + bit + "-children").show().find(".flag").prop("checked", true);
+                    $(".toggle-" + bit + ".togglechildren_on").hide();
+                    $(".toggle-" + bit + ".togglechildren_off").show();
                 } else {
-                    if (children[i].id in originalChildStates) {
-                        children[i].checked = originalChildStates[children[i].id];
-                    } else {
-                        children[i].checked = checked;
-                    }
+                    $("#flag-" + bit + "-children").show().find(".flag").prop("checked", false);
                 }
-            }
-        }
-
-        function toggleParent(childInput) {
-            originalChildStates[childInput.id] = childInput.checked;
-            if (childInput.checked) {
-                return;
-            }
-            var parentId = childInput.parentNode.parentNode.id.replace(/-children$/, '');;
-            var parentInput = document.getElementById(parentId);
-            if (parentInput) {
-                parentInput.checked = false;
-            }
-        }
+            });
 
+        });
     </script>
 [% END %]