feat: Add sort and date params in sessions

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/styles/components/all.scss

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

app/styles/components/track-item.scss

@@ -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/libs/_helpers.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/partials/utils.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;
+}

app/templates/components/public/session-item.hbs

@@ -1,48 +1,48 @@
 <UiAccordion>
   <div class="title" {{action 'hideSpeakerImage'}} role="button">
     <div class="ui">
-      <h3 class="ui header" id="session-id-{{this.session.id}}">
-        {{this.session.title}}
+      <h3 class="ui header" id="session-id-{{@session.id}}">
+        {{@session.title}}
         <div class="sub header">
-          {{this.session.sessionType.name}}
+          {{@session.sessionType.name}}
         </div>
       </h3>
-      <div class="ui row">{{this.session.track.name}}</div>
+      <div class="ui row">{{@session.track.name}}</div>
     </div>
     <br>
     <div class="ui grid stackable">
       {{#if this.hideImage}}
         <div class="left floated twelve wide column">
-          {{#if this.session.startsAt}}
-            <div class=""><i class="icon map marker alternate"></i>{{this.session.microlocation.name}}</div>
-            <div class="small text"><i class="wait icon"></i>{{general-date this.session.startsAt this.session.event.timezone}} - {{general-date this.session.endsAt this.session.event.timezone}}</div>
+          {{#if @session.startsAt}}
+            <div class=""><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
+            <div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt @timezone}} - {{general-date @session.endsAt @timezone}}</div>
           {{/if}}
         </div>
       {{else}}
         <div class="left floated ten wide column">
           <div class="session-speakers">
-            {{#each this.session.speakers as |speaker|}}
+            {{#each @session.speakers as |speaker|}}
               <img alt="speaker" class="ui mini avatar image" src="{{if speaker.iconImageUrl speaker.iconImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
             {{/each}}
           </div>
         </div>
         <div class="right floated six wide column">
-          {{#if this.session.startsAt}}
-            <div class=""><i class="icon map marker alternate"></i>{{this.session.microlocation.name}}</div>
-            <div class="small text"><i class="wait icon"></i>{{general-date this.session.startsAt this.session.event.timezone 'hh:mm a / DD-MM-YYYY (z)'}}</div>
+          {{#if @session.startsAt}}
+            <div class=""><i class="icon map marker alternate"></i>{{@session.microlocation.name}}</div>
+            <div class="small text"><i class="wait icon"></i>{{general-date @session.startsAt @timezone 'hh:mm a / DD-MM-YYYY (z)'}}</div>
           {{/if}}
         </div>
       {{/if}}
 
       <div class="row">
         <div class="column session-description">
-          {{sanitize this.session.shortAbstract}}
+          {{sanitize @session.shortAbstract}}
         </div>
       </div>
     </div>
   </div>
   <div class="content">
-    {{#each this.session.speakers as |speaker|}}
+    {{#each @session.speakers as |speaker|}}
       <div class="ui divider"></div>
       <img alt="speaker" class="ui tiny avatar image" src="{{if speaker.thumbnailImageUrl speaker.thumbnailImageUrl (if speaker.photoUrl speaker.photoUrl '/images/placeholders/avatar.png')}}">
       <p>