feat: Add Past filter to Explore page (#5976)

Author: sachinchauhan2889

app/components/explore/side-bar.js

@@ -18,9 +18,9 @@ export default class SideBar extends Component {
   isMapVisible = true;
   eventLocationType = null;
 
-  @computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', 'ticket_type', 'cfs', 'event_name', 'is_online', 'has_logo', 'has_image')
+  @computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', 'ticket_type', 'cfs', 'event_name', 'is_online', 'has_logo', 'has_image', 'is_past')
   get hideClearFilters() {
-    return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location || this.ticket_type || this.cfs || this.event_name || this.is_online || this.has_logo || this.has_image);
+    return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location || this.ticket_type || this.cfs || this.event_name || this.is_online || this.has_logo || this.has_image || this.is_past);
   }
 
   @computed('category', 'sub_category')
@@ -58,6 +58,14 @@ export default class SideBar extends Component {
     });
   }
 
+  @action
+  enablePastEvents(val) {
+    this.set('startDate', null);
+    this.set('endDate', null);
+    this.set('dateType', null);
+    this.set('is_past', this.is_past === val ? null : val);
+  }
+
   @action
   setLocationType(locationType, val) {
     this.set('is_online', this.eventLocationType === locationType ? null : val);
@@ -147,6 +155,7 @@ export default class SideBar extends Component {
     }
     this.set('startDate', newStartDate);
     this.set('endDate', newEndDate);
+    this.set('is_past', null);
   }
 
   @action
@@ -184,6 +193,7 @@ export default class SideBar extends Component {
       is_online         : null,
       has_logo          : null,
       has_image         : null,
+      is_past           : null,
       eventLocationType : null
     });
   }

app/controllers/explore.js

@@ -4,9 +4,10 @@ import Controller from '@ember/controller';
 
 @classic
 export default class ExploreController extends Controller {
-  queryParams = ['category', 'sub_category', 'event_type', 'start_date', 'end_date', 'location', 'ticket_type', 'cfs', 'event_name', 'is_online', 'has_logo', 'has_image'];
+  queryParams = ['category', 'sub_category', 'event_type', 'start_date', 'end_date', 'location', 'ticket_type', 'cfs', 'event_name', 'is_online', 'has_logo', 'has_image', 'is_past'];
   event_name = null;
   is_online = null;
+  is_past = null;
   has_logo = null;
   has_image = null;
   category = null;
@@ -38,6 +39,9 @@ export default class ExploreController extends Controller {
     if (filterType === 'has_image') {
       this.set('has_image', null);
     }
+    if (filterType === 'is_past') {
+      this.set('is_past', null);
+    }
     if (filterType === 'start_date') {
       this.set('startDate', null);
     }

app/routes/explore.js

@@ -2,6 +2,7 @@ import classic from 'ember-classic-decorator';
 import { action } from '@ember/object';
 import Route from '@ember/routing/route';
 import { debounce } from 'lodash-es';
+import moment from 'moment';
 
 @classic
 export default class ExploreRoute extends Route {
@@ -179,6 +180,21 @@ export default class ExploreRoute extends Route {
           }
         ]
       });
+    } else if (params.is_past) {
+      filterOptions.push({
+        and: [
+          {
+            name : 'starts-at',
+            op   : 'lt',
+            val  : moment().toISOString()
+          },
+          {
+            name : 'ends-at',
+            op   : 'lt',
+            val  : moment().toISOString()
+          }
+        ]
+      });
     } else {
       filterOptions.push({
         or: [
@@ -199,7 +215,7 @@ export default class ExploreRoute extends Route {
     return this.infinity.model('event', {
       include      : 'event-topic,event-sub-topic,event-type',
       filter       : filterOptions,
-      sort         : 'starts-at',
+      sort         : params.is_past ? '-starts-at' : 'starts-at',
       perPage      : 6,
       startingPage : 1,
       perPageParam : 'page[size]',

app/templates/components/explore/side-bar.hbs

@@ -96,6 +96,11 @@
                 </div>
               {{/if}}
             {{/each}}
+            <UiCheckbox
+              @label={{t "Past"}}
+              @class="ui checkbox"
+              @checked={{if (eq this.is_past "true") true}}
+              @onChange={{action "enablePastEvents" "true"}} />
           </div>
         </div>
       </div>

app/templates/explore.hbs

@@ -1,6 +1,6 @@
 <div class="ui stackable grid">
   <div class="three wide column">
-    <Explore::SideBar @model={{this.model}} @category={{this.category}} @sub_category={{this.sub_category}} @event_type={{this.event_type}} @startDate={{this.start_date}} @endDate={{this.end_date}} @event_name={{this.event_name}} @is_online={{this.is_online}} @has_logo={{this.has_logo}} @has_image={{this.has_image}} @location={{this.location}} @ticket_type={{this.ticket_type}} @cfs={{this.cfs}} />
+    <Explore::SideBar @model={{this.model}} @category={{this.category}} @sub_category={{this.sub_category}} @event_type={{this.event_type}} @startDate={{this.start_date}} @endDate={{this.end_date}} @event_name={{this.event_name}} @is_past={{this.is_past}} @is_online={{this.is_online}} @has_logo={{this.has_logo}} @has_image={{this.has_image}} @location={{this.location}} @ticket_type={{this.ticket_type}} @cfs={{this.cfs}} />
   </div>
   <div class="thirteen wide column">
     <h1 class="ui header">{{t 'Events'}}</h1>