feat: Add filter to filter events by ticket type.

Reference: #3098

Author: Anupam-dagar

app/components/explore/side-bar.js

@@ -12,8 +12,8 @@ export default Component.extend({
   customEndDate : null,
   showFilters   : false,
 
-  hideClearFilters: computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', function() {
-    return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location !== null);
+  hideClearFilters: computed('category', 'sub_category', 'event_type', 'startDate', 'endDate', 'location', 'ticket_type', function() {
+    return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location || this.ticket_type !== null);
   }),
 
   dateRanges: computed(function() {
@@ -41,6 +41,10 @@ export default Component.extend({
       this.set('event_type', eventType === this.event_type ? null : eventType);
     },
 
+    selectTicketType(ticketType) {
+      this.set('ticket_type', ticketType === this.ticket_type ? null : ticketType);
+    },
+
     dateValidate(date) {
       if (moment(date).isAfter(this.customEndDate)) {
         this.set('customEndDate', date);
@@ -116,6 +120,7 @@ export default Component.extend({
       this.set('sub_category', null);
       this.set('event_type', null);
       this.set('location', null);
+      this.set('ticket_type', null);
     },
 
     toggleFilters() {

app/controllers/explore.js

@@ -1,13 +1,14 @@
 import Controller from '@ember/controller';
 
 export default Controller.extend({
-  queryParams  : ['category', 'sub_category', 'event_type', 'start_date', 'end_date', 'location'],
+  queryParams  : ['category', 'sub_category', 'event_type', 'start_date', 'end_date', 'location', 'ticket_type'],
   category     : null,
   sub_category : null,
   event_type   : null,
   start_date   : null,
   end_date     : null,
   location     : null,
+  ticket_type  : null,
 
   actions: {
     shareEvent(event) {
@@ -33,6 +34,9 @@ export default Controller.extend({
       if (filterType === 'location') {
         this.set('location', null);
       }
+      if (filterType === 'ticket_type') {
+        this.set('ticket_type', null);
+      }
     }
   }
 });

app/routes/explore.js

@@ -57,6 +57,18 @@ export default Route.extend({
       });
     }
 
+    if (params.ticket_type) {
+      filterOptions.push({
+        name : 'tickets',
+        op   : 'any',
+        val  : {
+          name : 'type',
+          op   : 'eq',
+          val  : params.ticket_type
+        }
+      });
+    }
+
     if (params.location) {
       filterOptions.push({
         name : 'location_name',

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

@@ -96,6 +96,26 @@
       </div>
     {{/ui-accordion}}
   </div>
+  <div class="item">
+    {{#ui-accordion}}
+      <span class="title">
+        <i class="dropdown icon"></i>
+        {{t 'Ticket Type' }}
+      </span>
+      <div class="content menu">
+          <a href="#"
+            class="link item {{if (eq ticket_type 'free') 'active'}}"
+            {{action 'selectTicketType' 'free'}}>
+            {{t 'Free'}}
+          </a>
+          <a href="#"
+            class="link item {{if (eq ticket_type 'paid') 'active'}}"
+            {{action 'selectTicketType' 'paid'}}>
+            {{t 'Paid'}}
+          </a>
+      </div>
+    {{/ui-accordion}}
+  </div>
 {{/if}}
 <div class="item">
   <button class="ui red button {{if hideClearFilters 'disabled'}}" {{action 'clearFilters'}}>{{t 'Clear Filters'}}</button>

app/templates/explore.hbs

@@ -1,6 +1,6 @@
 <div class="ui stackable grid">
   <div class="four wide column">
-    {{explore/side-bar model=model category=category sub_category=sub_category event_type=event_type startDate=start_date endDate=end_date location=location}}
+    {{explore/side-bar model=model category=category sub_category=sub_category event_type=event_type startDate=start_date endDate=end_date location=location ticket_type=ticket_type}}
   </div>
   <div class="twelve wide column">
     <h1 class="ui header">{{t 'Events'}}</h1>
@@ -35,6 +35,12 @@
           <a role="button" {{action 'clearFilter' 'end_date'}}><i class="icon close"></i></a>
         </div>
       {{/if}}
+      {{#if filters.ticket_type}}
+        <div class="ui mini label">
+          {{ticket_type}}
+          <a role="button" {{action 'clearFilter' 'ticket_type'}}><i class="icon close"></i></a>
+        </div>
+      {{/if}}
     </div>
     {{#each filteredEvents as |event|}}
       {{event-card event=event isWide=true filterByTags=true category=category subCategory=sub_category eventType=event_type shareEvent=(action 'shareEvent')}}