Release 1.5.3

src/web/views/settings/rbac/list.hbs

@@ -7,17 +7,21 @@
 
 <div class="row g-4">
   <div class="col-12">
-    <div class="card card-outline card-primary admin-form-card">
+    <div class="card card-outline card-primary admin-form-card" data-table-search-container>
       <div class="card-header">
         <h3 class="card-title">Existing roles</h3>
-        {{#if (hasPermission currentUser 'rbac.create')}}
-          <div class="card-tools">
-            <a class="btn btn-primary btn-sm" href="/rbac/new">Add role</a>
+        <div class="card-tools d-flex flex-nowrap align-items-center gap-2">
+          <div class="input-group input-group-sm flex-shrink-1" style="width: min(14rem, 100%);">
+            <span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
+            <input type="search" class="form-control" placeholder="Search roles" aria-label="Search roles" data-table-search />
           </div>
-        {{/if}}
+          {{#if (hasPermission currentUser 'rbac.create')}}
+            <a class="btn btn-primary btn-sm" href="/rbac/new">Add role</a>
+          {{/if}}
+        </div>
       </div>
       <div class="card-body table-responsive p-0">
-        <table class="table table-striped w-100 mb-0 users-table">
+        <table class="table table-striped w-100 mb-0 users-table" data-table-searchable>
           <thead>
             <tr>
               <th>Role</th>
@@ -30,7 +34,7 @@
           <tbody>
             {{#if roles.length}}
               {{#each roles}}
-                <tr>
+                <tr data-table-search-row>
                   <td data-label="Role">
                     <div class="user-cell">
                       <div>
@@ -68,11 +72,12 @@
                 </tr>
               {{/each}}
             {{else}}
-              <tr><td colspan="5" class="empty">No roles found.</td></tr>
+              <tr data-table-search-empty-default><td colspan="5" class="empty">No roles found.</td></tr>
             {{/if}}
           </tbody>
         </table>
       </div>
+      {{> table-pagination pagination=pagination basePath="/rbac"}}
     </div>
   </div>
 </div>