emberjs using AND on querying from mongodb

Question

I'm working on an Emberjs application and I've got quite far with it but i'm having an issue and I think that I've looked at every corner in the web without finding the solution

Now my problem is that I have a dropdown that queries record on change "meaning" I have a "Dental" Department which contains "Braces" as a service (service belongs to department) so when the user changes the dropdown option a query runs to filter the results again but within the results showing there is a text field which should be able to allow the user to search within the services shown accordingly to the selected department.

So far so good. The problem is that when the user starts typing to filter the data the condition in which services belongs to the selected department won't work any more so is there a way to use AND in my "Ember" controller to query records with more than one condition ?

Here is 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}}

and 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,

return this.get('store').query('service', { where: { { department: { this.get('selectedDepartment.id')} } { name: { contains: this.get('search')} } } — Abdul-Elah JS, Jul 12 '17 at 19:26

score 0 · Answer 1 · answered Jul 13 '17 at 06:33

{{input value=searchText - here you are using searchText but in departmentServices computed property you are using search but this is not the actual issue.

Issue is, this.get('store').query will return the Promise not the value so your implementation will not work out.(if you want to make it work you can try 3rd options Special promise-backed objects mentioned https://emberigniter.com/guide-promises-computed-properties/)

I will encourage you to introduce setDepartmentServices function which will query and update departmentServices property. and power-select for onchange instead of using the mut you can use onchange = (action 'setSelectedDepartment') and searchText input filed doSearch will call setDepartmentServices. Here is the pseudo code,

setDepartmentServices() {
    //this will do query and will set the result in departmentServices property.
}
actions: {
    setSelectedDepartment(selectedDepartment) {
        this.set('selectedDepartment', selectedDepartment);
        //check if its ok to update departmentServices
        this.send('setDepartmentServices');
    }
    doSearch() {
        //check if its ok to update departmentServices
        this.send('setDepartmentServices');
    }
}

emberjs using AND on querying from mongodb

1 Answers1