Release 1.5.3

src/web/views/signage/screens/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 screens</h3>
-    {{#if (hasPermission currentUser 'screens.create')}}
-      <div class="card-tools">
-        <a class="btn btn-primary btn-sm" href="/screens/new">Add screen</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 screens" aria-label="Search screens" data-table-search />
       </div>
-    {{/if}}
+      {{#if (hasPermission currentUser 'screens.create')}}
+        <a class="btn btn-primary btn-sm" href="/screens/new">Add screen</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>
@@ -28,7 +32,7 @@
     <tbody>
       {{#if screens.length}}
         {{#each screens}}
-          <tr>
+          <tr data-table-search-row>
             <td data-label="Name">{{name}}</td>
             <td data-label="Player URL"><a href="{{playerUrl slug}}" target="_blank">{{playerUrl slug}}</a></td>
             <td data-label="Playlist">{{playlist_name}}</td>
@@ -58,10 +62,11 @@
           </tr>
         {{/each}}
       {{else}}
-        <tr><td colspan="5" class="empty">No screens yet.</td></tr>
+        <tr data-table-search-empty-default><td colspan="5" class="empty">No screens yet.</td></tr>
       {{/if}}
     </tbody>
   </table>
   </div>
+  {{> table-pagination pagination=pagination basePath="/screens"}}
 </div>