Release 1.5.3

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

@@ -5,19 +5,24 @@
   </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 slides</h3>
-    {{#if (hasPermission currentUser 'slides.create')}}
-      <div class="card-tools">
-        <a class="btn btn-primary btn-sm" href="/slides/new">Create slide</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 slides" aria-label="Search slides" data-table-search />
       </div>
-    {{/if}}
+      {{#if (hasPermission currentUser 'slides.create')}}
+        <a class="btn btn-primary btn-sm" href="/slides/new">Create slide</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>Thumbnail</th>
         <th>Title</th>
         <th>Template</th>
         <th>Actions</th>
@@ -26,7 +31,16 @@
     <tbody>
       {{#if slides.length}}
         {{#each slides}}
-          <tr>
+          <tr data-table-search-row data-search-text="{{title}} {{template_name}}">
+            <td data-label="Thumbnail">
+              <div class="playlist-slide-thumb" aria-hidden="true">
+                {{#if thumbnail_path}}
+                  <img class="playlist-slide-thumb-image" src="{{thumbnail_path}}" alt="" loading="lazy" />
+                {{else}}
+                  <span class="playlist-slide-thumb-placeholder"><i class="bi bi-image" aria-hidden="true"></i></span>
+                {{/if}}
+              </div>
+            </td>
             <td data-label="Title">{{title}}</td>
             <td data-label="Template">{{template_name}}</td>
             <td data-label="Actions">
@@ -48,10 +62,17 @@
           </tr>
         {{/each}}
       {{else}}
-        <tr><td colspan="3" class="empty">No slides yet.</td></tr>
+        <tr data-table-search-empty-default><td colspan="4" class="empty">No slides yet.</td></tr>
       {{/if}}
     </tbody>
   </table>
   </div>
+  {{> table-pagination pagination=pagination basePath="/slides"}}
 </div>
 
+<script>
+  if (typeof window.attachSlideThumbFallbacks === 'function') {
+    window.attachSlideThumbFallbacks(document);
+  }
+</script>
+