Release 1.5.3

src/web/views/signage/playlists/list.hbs

@@ -5,17 +5,21 @@
   </div>
 </div>
 
-<div class="card card-outline card-primary">
+<div class="card card-outline card-primary" data-table-search-container>
   <div class="card-header">
     <h3 class="card-title">Existing playlists</h3>
-    {{#if (hasPermission currentUser 'playlists.create')}}
-      <div class="card-tools">
-        <a class="btn btn-primary btn-sm" href="/playlists/new">Create playlist</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 playlists" aria-label="Search playlists" data-table-search />
       </div>
-    {{/if}}
+      {{#if (hasPermission currentUser 'playlists.create')}}
+        <a class="btn btn-primary btn-sm" href="/playlists/new">Create playlist</a>
+      {{/if}}
+    </div>
   </div>
   <div class="card-body table-responsive p-0">
-  <table class="table table-striped w-100 mb-0">
+  <table class="table table-striped w-100 mb-0" data-table-searchable>
     <thead>
       <tr>
         <th>Name</th>
@@ -26,7 +30,7 @@
     <tbody>
       {{#if playlists.length}}
         {{#each playlists}}
-          <tr>
+          <tr data-table-search-row>
             <td data-label="Name">{{name}}</td>
             <td data-label="Slides"><span class="chip">{{slideCount}} slide{{#unless slideCountIsOne}}s{{/unless}}</span></td>
             <td data-label="Actions">
@@ -48,10 +52,11 @@
           </tr>
         {{/each}}
       {{else}}
-        <tr><td colspan="3" class="empty">No playlists yet.</td></tr>
+        <tr data-table-search-empty-default><td colspan="3" class="empty">No playlists yet.</td></tr>
       {{/if}}
     </tbody>
   </table>
   </div>
+  {{> table-pagination pagination=pagination basePath="/playlists"}}
 </div>