fix: Reimplement session route to not reload page on filter (#5742)

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

Author: 3 people

app/controllers/public/sessions.js

@@ -1,7 +1,8 @@
 import classic from 'ember-classic-decorator';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import Controller from '@ember/controller';
 import moment from 'moment';
+import $ from 'jquery';
 
 @classic
 export default class SessionsController extends Controller {
@@ -11,6 +12,21 @@ export default class SessionsController extends Controller {
   isTrackVisible = false;
   timezone = null;
 
+  constructor(...args) {
+    super(...args);
+
+    this.addObserver('model.session', this, 'sessionChanged');
+  }
+
+  @action
+  sessionChanged() {
+    if (this.model.isFiltering) {
+      $('html,body').animate({
+        scrollTop: $('#session-heading').offset()?.top
+      });
+    }
+  }
+
   @computed('model.event.startsAt', 'model.event.endsAt', 'timezone')
   get allDates() {
     const arr = [];

app/routes/public/sessions.js

@@ -87,6 +87,8 @@ export default class SessionsRoute extends Route {
       });
     }
 
+    const isFiltering = params.room || params.track || params.date;
+
     return {
       event   : eventDetails,
       session : await this.infinity.model('sessions', {
@@ -98,7 +100,8 @@ export default class SessionsRoute extends Route {
         perPageParam : 'page[size]',
         pageParam    : 'page[number]',
         store        : eventDetails
-      })
+      }),
+      isFiltering
     };
   }
 }

app/templates/public/sessions.hbs

@@ -1,4 +1,4 @@
-<h1 class="ui header">{{t 'Sessions'}}</h1>
+<h1 class="ui header" id="session-heading">{{t 'Sessions'}}</h1>
 
 <div class="d-flex wrap">
   <LinkTo @route="public.sessions" @models={{array this.model.event.id}} @query={{hash date=null}} class="ui button mb-2">{{t 'All'}}</LinkTo>