feat: Add sort and date params in sessions (#4839)

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

Author: iamareebjamal

app/components/public/track-item.js

@@ -0,0 +1,18 @@
+import classic from 'ember-classic-decorator';
+import { action } from '@ember/object';
+import { classNames } from '@ember-decorators/component';
+import Component from '@ember/component';
+
+@classic
+@classNames('ui', 'segment')
+export default class TrackItem extends Component {
+  hideImage = false;
+
+  @action
+  hideSpeakerImage() {
+    this.toggleProperty('hideImage');
+    if (!this.session.speakers.length) {
+      this.set('hideImage', false);
+    }
+  }
+}

app/controllers/public/sessions.js

@@ -1,5 +1,21 @@
 import classic from 'ember-classic-decorator';
+import { computed } from '@ember/object';
 import Controller from '@ember/controller';
+import moment from 'moment';
 
 @classic
-export default class SessionsController extends Controller {}
+export default class SessionsController extends Controller {
+  queryParams = ['sort'];
+  sort = 'starts-at';
+  isTrackVisible = false;
+
+  @computed('model.event.startsAt', 'model.event.endsAt')
+  get allDates() {
+    const arr = [];
+    const difference = (this.model.event.endsAt).diff(this.model.event.startsAt, 'days');
+    for (let i = 0; i <= Math.abs(difference); i++) {
+      arr.push(moment.tz(this.model.event.startsAt, this.model.event.timezone).add(i, 'days').toISOString());
+    }
+    return arr;
+  }
+}

app/router.js

@@ -40,9 +40,7 @@ Router.map(function() {
   this.route('logout');
   this.route('oauth', { path: '/oauth/callback' });
   this.route('public', { path: '/e/:event_id' }, function() {
-    this.route('sessions', function() {
-      this.route('list', { path: '/:session_status' });
-    });
+    this.route('sessions');
     this.route('session', function() {
       this.route('view', { path: '/:session_id' });
     });

app/routes/public/sessions.js

@@ -1,9 +1,82 @@
 import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
+import moment from 'moment';
 
 @classic
 export default class SessionsRoute extends Route {
+  queryParams = {
+    date: {
+      refreshModel: true
+    },
+    sort: {
+      refreshModel: true
+    }
+  };
+
   titleToken() {
     return this.l10n.t('Sessions');
   }
+
+  async model(params) {
+    const eventDetails = this.modelFor('public');
+    const filterOptions = [
+      {
+        and: [
+          {
+            name : 'event',
+            op   : 'has',
+            val  : {
+              name : 'identifier',
+              op   : 'eq',
+              val  : eventDetails.id
+            }
+          },
+          {
+            or: [
+              {
+                name : 'state',
+                op   : 'eq',
+                val  : 'confirmed'
+              },
+              {
+                name : 'state',
+                op   : 'eq',
+                val  : 'accepted'
+              }
+            ]
+          }
+        ]
+      }
+    ];
+
+    if (params.date) {
+      filterOptions.push({
+        and: [
+          {
+            name : 'starts-at',
+            op   : 'ge',
+            val  : moment.tz(params.date, eventDetails.timezone).toISOString()
+          },
+          {
+            name : 'starts-at',
+            op   : 'le',
+            val  : moment.tz(params.date, eventDetails.timezone).add(1, 'days').toISOString()
+          }
+        ]
+      });
+    }
+
+    return {
+      event   : eventDetails,
+      session : await this.infinity.model('session', {
+        include      : 'track,speakers,session-type,microlocation',
+        filter       : filterOptions,
+        sort         : params.sort || 'starts-at',
+        perPage      : 6,
+        startingPage : 1,
+        perPageParam : 'page[size]',
+        pageParam    : 'page[number]'
+      })
+    };
+  }
 }

app/routes/public/sessions/index.js

@@ -7,3 +7,4 @@
 @import 'ui-table';
 @import 'scheduler';
 @import 'infinity-loader';
+@import 'track-item';

app/routes/public/sessions/list.js

@@ -0,0 +1,12 @@
+.tracks {
+  border-radius: 5px;
+}
+
+.vl {
+  border-left: 1px solid rgba(86, 86, 87, .25);
+  height: 100%;
+  left: -3%;
+  margin-left: -8px;
+  position: absolute;
+  top: 0;
+}

app/styles/components/all.scss

@@ -58,3 +58,11 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
     cursor: pointer;
   }
 }
+
+.d-flex {
+  display: flex;
+}
+
+.d-flex.wrap {
+  flex-wrap: wrap;
+}

app/styles/components/track-item.scss

@@ -32,6 +32,10 @@
   border-top-left-radius: 0 !important;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -43,3 +47,11 @@
 .m-2 {
   margin: .5rem;
 }
+
+.mb-2 {
+  margin-bottom: .5rem !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}