feat: Add tracks and rooms filters on sessions page (#4879)

Co-authored-by: iamareebjamal <[email protected]>

Author: maze-runnar

app/routes/public/sessions.js

@@ -10,6 +10,12 @@ export default class SessionsRoute extends Route {
     },
     sort: {
       refreshModel: true
+    },
+    track: {
+      refreshModel: true
+    },
+    room: {
+      refreshModel: true
     }
   };
 
@@ -66,6 +72,30 @@ export default class SessionsRoute extends Route {
       });
     }
 
+    if (params.track) {
+      filterOptions.push({
+        name : 'track',
+        op   : 'has',
+        val  : {
+          name : 'name',
+          op   : 'eq',
+          val  : params.track
+        }
+      });
+    }
+
+    if (params.room) {
+      filterOptions.push({
+        name : 'microlocation',
+        op   : 'has',
+        val  : {
+          name : 'name',
+          op   : 'eq',
+          val  : params.room
+        }
+      });
+    }
+
     return {
       event   : eventDetails,
       session : await this.infinity.model('session', {

app/styles/components/all.scss

@@ -8,3 +8,4 @@
 @import 'scheduler';
 @import 'infinity-loader';
 @import 'track-item';
+@import 'extras';

app/styles/components/extras.scss

@@ -0,0 +1,12 @@
+a.link-item {
+  color: #333;
+  display: table;
+
+  &.active {
+    background-color: rgba(0, 0, 0, .05);
+  }
+
+  &:hover {
+    background-color: rgba(0, 0, 0, .025);
+  }
+}

app/styles/partials/utils.scss

@@ -45,6 +45,10 @@
   padding: 0 !important;
 }
 
+.p-1 {
+  padding: .25rem !important;
+}
+
 .p-4 {
   padding: 1rem !important;
 }
@@ -73,6 +77,10 @@
   margin-bottom: .5rem !important;
 }
 
+.mb-1 {
+  margin-bottom: .25rem !important;
+}
+
 .ml-auto {
   margin-left: auto !important;
 }

app/templates/public.hbs

@@ -43,6 +43,40 @@
       </div>
       <div class="three wide column">
         {{#if (not-eq this.session.currentRouteName 'public.cfs.new-speaker')}}
+          {{#if (eq this.session.currentRouteName 'public.sessions')}}
+            <div class="ui basic segment">
+              <h4>
+                {{t 'Tracks'}}
+                <LinkTo @route="public.sessions" @models={{array this.model.id}} @query={{hash track=null}} data-tooltip="{{t 'Clear Track Filter'}}">
+                  <i class="minus circle icon" style={{css color='#f00'}}></i>
+                </LinkTo>
+              </h4>
+              {{#each this.model.tracks as |track|}} 
+                <LinkTo
+                  class="p-1 mb-1 rounded-default link-item {{if (eq this.params.track track.name) 'active'}}"
+                  @route="public.sessions"
+                  @models={{array this.model.id}}
+                  @query={{hash track=track.name}}>
+                  <i class="circle icon" style={{css color=track.color}}></i> {{track.name}}
+                </LinkTo>
+              {{/each}}
+              <h4>
+                {{t 'Rooms'}}
+                <LinkTo @route="public.sessions" @models={{array this.model.id}} @query={{hash room=null}} data-tooltip="{{t 'Clear Room Filter'}}">
+                  <i class="minus circle icon" style={{css color='#f00'}}></i>
+                </LinkTo>
+              </h4>
+              {{#each this.model.microlocations as |room|}}
+                <LinkTo
+                  class="p-1 mb-1 rounded-default link-item {{if (eq this.params.room room.name) 'active'}}"
+                  @route="public.sessions" 
+                  @models={{array this.model.id}}
+                  @query={{hash room=room.name}}>
+                  <i class="circle icon"></i> {{room.name}}
+                </LinkTo>
+              {{/each}}
+            </div>
+          {{/if}}
           <Public::SocialLinks @externalUrl={{this.model.externalEventUrl}} @socialLinks={{this.model.socialLinks}} />
         {{/if}}
       </div>