I've been making great progress on my Emberjs application, but I've hit a roadblock that's leaving me stumped. Despite scouring the web for answers, I can't seem to find a solution.
The issue at hand involves a dropdown feature in my app that queries records based on user selection. For example, there is a "Dental" Department with a service called "Braces." When a user changes the dropdown option, a query filters the results accordingly. Within these results, there is a text field that should allow users to search within the displayed services specific to the selected department.
Here's where things get tricky. The search function disrupts the condition for services belonging to the selected department. Is there a way to implement an 'AND' operator in my Ember controller to query records with multiple conditions?
Take a look at my Template:
<div class="form-group">
{{#power-select
options=departments
selected=selectedDepartment
searchField="name"
placeholder="Select Department..."
onchange=(action (mut selectedDepartment))
dropdownClass="in-modal-dropdown"
renderInPlace=true
as |department|
}}
{{department.name}}
{{/power-select}}
</div>
{{#if selectedDepartment}}
<hr />
<div class="form-group has-feedback">
{{input value=searchText class="form-control input-sm" placeholder="Search Services" insert-newline="doSearch"}}
{{#if searchText}}
<i class="glyphicon glyphicon-remove form-control-feedback"></i>
{{/if}}
</div>
<br />
{{#each departmentServices as |service|}}
<button {{action 'selectService' service}} class="ux-product-override-for-request w-clearfix w-inline-block">
<div class="ux-product-icon"></div>
<div class="ux-product-title">{{service.name}}</div>
<div class="ux-product-price">{{service.price}} RS</div>
</button>
{{/each}}
{{/if}}
Now, let's take a look at my Controller:
store: Ember.inject.service(),
departments: Ember.computed(function(){
return this.get('store').findAll('department')
}),
departmentServices: Ember.computed('selectedDepartment', 'search', function(){
if(this.get('search') == '' || this.get('search') == null){
console.log(this.get('search'));
return this.get('store').query('service', {
where: {
department: this.get('selectedDepartment.id')
}
})
} else {
return this.get('store').query('service', {
where: {
{ department: { this.get('selectedDepartment.id')} }
{ name: { contains: this.get('search')} }
}
})
}
}),
selectedDepartment: null,