feat: Filter Side Bar Enhancements (#3102)

* Filter Side Bar Enhancements

* Using modern syntax

* Requested Changes making

* Using setProperties

* Travis Issue

* Dangling Comma

Author: kushthedude

app/components/explore/side-bar.js

@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 import moment from 'moment';
 import { computed } from '@ember/object';
+import { not } from '@ember/object/computed';
 import { getDateRanges } from 'open-event-frontend/utils/dictionary/filters';
 
 export default Component.extend({
@@ -16,6 +17,13 @@ export default Component.extend({
     return !(this.category || this.sub_category || this.event_type || this.startDate || this.endDate || this.location || this.ticket_type !== null);
   }),
 
+  showAllCategories: computed('category', 'sub_category', function() {
+    return !this.category || !this.sub_category;
+
+  }),
+  showAllTypes: not('event_type'),
+
+
   dateRanges: computed(function() {
     return getDateRanges.bind(this)();
   }),
@@ -111,20 +119,36 @@ export default Component.extend({
     onDateChange() {
       this.send('selectDateFilter', 'custom_dates');
     },
+    clearFilterCategory() {
+      this.setProperties({
+        category     : null,
+        sub_category : null
+      });
 
-    clearFilters() {
-      this.set('startDate', null);
-      this.set('endDate', null);
-      this.set('dateType', null);
-      this.set('category', null);
-      this.set('sub_category', null);
+    },
+    clearFilterTypes() {
       this.set('event_type', null);
-      this.set('location', null);
-      this.set('ticket_type', null);
+
+    },
+
+    clearFilters() {
+      this.setProperties({
+        startDate    : null,
+        endDate      : null,
+        dateType     : null,
+        category     : null,
+        sub_category : null,
+        event_type   : null,
+        location     : null,
+        ticket_type  : null
+      });
+
+
     },
 
     toggleFilters() {
       this.set('showFilters', !this.showFilters);
+
     }
   }
 });

app/components/side-bar.js

@@ -41,6 +41,7 @@ export default Component.extend({
     if (this.$sidebarOpener) {
       this.$sidebarOpener.off('click', this.toggleSidebar.bind(this));
     }
+
     if (this.$sidebarClosers && this.$sidebarClosers.length > 0) {
       this.$sidebarClosers.off('click', this.hideSidebar.bind(this));
     }

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

@@ -13,13 +13,57 @@
   </div>
 </div>
 {{#if showFiltersOnMobile}}
+  <div class="item">
+    {{#ui-accordion}}
+      <span class="title">
+        <i class="dropdown icon"></i>
+        {{t 'Date'}}
+      </span>
+      <div class="content menu">
+        {{#each dateRanges as |dateRange|}}
+          <a href="#" class="link item {{if (eq dateType dateRange.key) 'active'}}" {{action 'selectDateFilter'
+                                                                                              dateRange.key}}>
+            {{dateRange.name}}
+            {{#if (and (eq dateRange.key 'custom_dates') (eq dateType 'custom_dates'))}}
+              <div class="explore sub menu">
+                <div class="ui form">
+                  <div class="grouped fields">
+                    <div class="item field">
+                      <label class="required" for="start_date">{{t 'Starts'}}</label>
+                      {{widgets/forms/date-picker type='text'
+                                                  value=customStartDate
+                                                  rangePosition='start'
+                                                  onChange=(action 'dateValidate')
+                      }}
+                    </div>
+                    <div class="item field">
+                      <label class="required" for="end_date">{{t 'Ends'}}</label>
+                      {{widgets/forms/date-picker type='text'
+                                                  value=customEndDate
+                                                  rangePosition='end'
+                                                  onChange=(action 'onDateChange')
+                      }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            {{/if}}
+          </a>
+        {{/each}}
+      </div>
+    {{/ui-accordion}}
+  </div>
   <div class="item">
     {{#ui-accordion}}
       <span class="title">
         <i class="right floated dropdown icon"></i>
         {{t 'Categories'}}
       </span>
       <div class="content menu">
+        <a href="#" class="link item {{if showAllCategories 'active'}}" {{action 'clearFilterCategory'}}>
+          <i class="caret right icon"></i>
+          {{t 'All Categories'}}
+        </a>
         {{#each model.eventTopics as |Category| }}
           <a href="#"
             class="link item {{if (eq category Category.name) 'active'}}" {{action 'selectCategory' Category.name}}>
@@ -46,6 +90,9 @@
         {{t 'Event Type' }}
       </span>
       <div class="content menu">
+        <a href="#" class="link item {{if showAllTypes 'active'}}" {{action 'clearFilterTypes'}}>
+          {{t 'All Types'}}
+        </a>
         {{#each model.eventTypes as |eventType|}}
           <a href="#"
             class="link item {{if (eq event_type eventType.name) 'active'}}"
@@ -56,46 +103,6 @@
       </div>
     {{/ui-accordion}}
   </div>
-  <div class="item">
-    {{#ui-accordion}}
-      <span class="title">
-        <i class="dropdown icon"></i>
-        {{t 'Date'}}
-      </span>
-      <div class="content menu">
-        {{#each dateRanges as |dateRange|}}
-          <a href="#" class="link item {{if (eq dateType dateRange.key) 'active'}}" {{action 'selectDateFilter'
-                                                                                              dateRange.key}}>
-            {{dateRange.name}}
-            {{#if (and (eq dateRange.key 'custom_dates') (eq dateType 'custom_dates'))}}
-              <div class="explore sub menu">
-                <div class="ui form">
-                  <div class="grouped fields">
-                    <div class="item field">
-                      <label class="required" for="start_date">{{t 'Starts'}}</label>
-                      {{widgets/forms/date-picker type='text'
-                                                  value=customStartDate
-                                                  rangePosition='start'
-                                                  onChange=(action 'dateValidate')
-                      }}
-                    </div>
-                    <div class="item field">
-                      <label class="required" for="end_date">{{t 'Ends'}}</label>
-                      {{widgets/forms/date-picker type='text'
-                                                  value=customEndDate
-                                                  rangePosition='end'
-                                                  onChange=(action 'onDateChange')
-                      }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            {{/if}}
-          </a>
-        {{/each}}
-      </div>
-    {{/ui-accordion}}
-  </div>
   <div class="item">
     {{#ui-accordion}}
       <span class="title">