feat: add search feature in schedule page (#5823)

Co-authored-by: Areeb Jamal <jamal.areeb@gmail.com>

Author: maze-runnar

app/controllers/public/sessions.js

@@ -6,7 +6,8 @@ import moment from 'moment';
 @classic
 export default class SessionsController extends Controller {
 
-  queryParams = ['sort'];
+  queryParams = ['sort', 'search'];
+  search = null;
   sort = 'starts-at';
   isTrackVisible = false;
   timezone = null;

app/routes/public/sessions.js

@@ -16,6 +16,9 @@ export default class SessionsRoute extends Route {
     },
     room: {
       refreshModel: true
+    },
+    search: {
+      refreshModel: true
     }
   };
 
@@ -87,6 +90,45 @@ export default class SessionsRoute extends Route {
       });
     }
 
+    if (params.search) {
+      filterOptions.push({
+        or: [
+          {
+            name : 'title',
+            op   : 'ilike',
+            val  : `%${params.search}%`
+          },
+          {
+            name : 'track',
+            op   : 'has',
+            val  : {
+              name : 'name',
+              op   : 'ilike',
+              val  : `%${params.search}%`
+            }
+          },
+          {
+            name : 'microlocation',
+            op   : 'has',
+            val  : {
+              name : 'name',
+              op   : 'ilike',
+              val  : `%${params.search}%`
+            }
+          },
+          {
+            name : 'speakers',
+            op   : 'any',
+            val  : {
+              name : 'name',
+              op   : 'ilike',
+              val  : `%${params.search}%`
+            }
+          }
+        ]
+      });
+    }
+
     return {
       event   : eventDetails,
       session : await this.infinity.model('sessions', {

app/templates/components/tables/utilities/search-box.hbs

@@ -1,4 +1,4 @@
-<div class="ui small icon input search-box">
+<div class="ui {{if (eq @size "large") '' 'small'}} icon input search-box">
   <Input @type="text" @value={{readonly this.searchQuery}} @keyUp={{action 'setSearchQuery' value="target.value"}} placeholder="Search ..." />
   <i class="search icon"></i>
 </div>

app/templates/public/sessions.hbs

@@ -12,6 +12,12 @@
     @eventTimezone={{this.model.event.timezone}}
     @timezone={{this.timezone}} />
 
+  <Tables::Utilities::SearchBox
+    class="mb-2 mr-2"
+    @searchQuery={{this.search}}
+    @size="large"
+  />
+
   <UiDropdown class="labeled icon button mb-2">
     <i class="sort amount down icon"></i>
     <span class="default text">{{if (eq this.sort 'title') (t 'By Title') (t 'By Time')}}</span>