With a myriad of events present, it might get difficult for users to search for a specific event. So, giving the user a tool to search according to whatever clue they have to search for an event makes it easier for them. Search tool based on location, date (or day) or event’s name or rather a combination of any of these will answer most of the problems to this issue.

To create such a tool we implement a quick-filter component.

An Ember Component is a view that is completely isolated. Properties accessed in its templates got to the view object and actions are targeted at the view object. There is no access to the surrounding context or outer controller, all contextual information must be passed in.

Now, let’s create a component ‘quick-filter’

This command will create 3 files

• app/components/quick-filter.js
• app/templates/components/quick-filter.hbs
• tests/integration/components/quick-filter-test.js

1. Quick-filter.js

A JS file is used mainly to run client side JavaScript code on a webpage. The quick-filter component encapsulates certain snippets of Handlebar templates that can be reused in our code. If we need to customize the behaviour of our component we define a subclass of Ember.Component in the app/components

import Ember from ’ember’; const { Component } = Ember; export default Component.extend({ tagName   : ‘footer’ classNames: [‘ui’, ‘action’, ‘input’, ‘fluid’] });

 

2. Quick-filter-test.js

This is where we check whether our component is compatible with other components of the system or not. Here, for now, we are just making sure if our component renders or not, by checking the presence of ‘All Dates’.

import { test } from ’ember-qunit’; import moduleForComponent from ‘open-event-frontend/tests/helpers/component-helper’; import hbs from ‘htmlbars-inline-precompile’; moduleForComponent(‘quick-filter’, ‘Integration | Component | quick-filter’); test(‘it renders’, function(assert) { this.render(hbs`{{quick-filter}}`); assert.ok(this.$().html().trim().includes(‘Search’)); });

 

3. Quick-filter.hbs

Here we design our component. We have used semantic UI elements for designing. Specifically speaking we have used

• ui-action-input
• ui-dropdown
• ui-blue-button-large

Here we have used semantics fluid class to make the component take width of its container.

{{input type=‘text’ placeholder=(t ‘Search for events’)}} {{#unless device.isMobile }}  {{input type=‘text’ placeholder=(t ‘Location’)}}  {{#ui-dropdown class=‘search selection’ selected=filterDate forceSelection=false}}    {{input type=‘hidden’ id=‘filter_date’ value=filterDate}}    <i class=“dropdown icon”></i>    <div class=“default text”>{{t ‘All Dates’}}</div>    <div class=”menu”>      <div class=”item” data-value=”all-dates”>{{t ‘All Dates’}}</div>      <div class=“item” data-value=“today”>{{t ‘Today’}}</div>      <div class=“item” data-value=“tomorrow”>{{t ‘Tomorrow’}}</div>      <div class=”item” data-value=”this-week”>{{t ‘This Week’}}</div>      <div class=“item” data-value=“this-weekend”>{{t ‘This Weekend’}}</div>      <div class=“item” data-value=“next-week”>{{t ‘Next Week’}}</div>      <div class=”item” data-value=”this-month”>{{t ‘This Month’}}</div>    </div>  {{/ui-dropdown}} {{/unless}} <button class=“ui blue button large” type=“button”>{{t ‘Search’}}</button>

Now, our component is ready, and the only part remaining is to place it in our application. We place it in app/templates/index.hbs

<div class=“ui container”>  {{quick-filter}}  <h2>{{t ‘Upcoming Events’}}</h2>  <div class=”ui stackable three column grid”>    {{#each model as |event|}}      {{event-card event=event shareEvent=(action ‘shareEvent’)}}    {{/each}}  </div>

Now our filter component is up and running.