provider example

adapters.appointment-query\.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'https://604630b1f0c6dc00177b180b.mockapi.io',
  namespace: 'api/v1',
  pathForType() {
  	return 'appointment-queries'
  }
});

components.appointment-query-provider\.js

import Component from '@ember/component';
import { task } from 'ember-concurrency';
import { get, set } from '@ember/object';
import { inject as service } from '@ember/service';

export default Component.extend({
  // Services
  store: service(),
 
  // Lifecycle hooks
  init() {
    this._super(...arguments);
 
    set(this, 'appointmentQueries', []);
    get(this, 'fetchAppointmentQueriesTask').perform();
  },
 
  // Functions
  fetchAppointmentQueriesTask: task(function* () {
  	try {
      const appointmentQueries = yield get(this, 'store').findAll('appointment-query');
      set(this, 'appointmentQueries', appointmentQueries);
    } catch (adapterErrors) {
      console.error(adapterErrors);
    }
  }),
  
  createAppointmentQuery(params) {
  	return get(this, 'store').createRecord('appointment-query', params);
  },
  
  saveAppointmentQueryTask: (function* (model) {
  	try {
    	yield model.save();
      console.log('Appointment query created successfully');
      get(this, 'fetchAppointmentQueriesTask').perform();
    } catch(adapterErrors) {
    	console.error(adapterErrors);
    }
  })
});

controllers.application\.js

import Controller from '@ember/controller';
import { get, set } from '@ember/object';
import { isBlank } from '@ember/utils';

export default Controller.extend({
  // Properties
  queryParams: ['state'],
  state: null,

  // Functions
  actions: {
  	selectAppointmentQuery(appointmentQueryId) {
      if (isBlank(appointmentQueryId)) {
      	return;
      }

      const appointmentQuery = get(this, 'store').peekRecord('appointment-query', appointmentQueryId);
      set(this, 'state', appointmentQuery.get('params.state'))
    }
  }
});

helpers.eq\.js

import { helper } from '@ember/component/helper';

export default helper(function eq([param1, param2]) {
  return param1 === param2;
});

models.appointment-query\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export const schema = {
  // Attributes
  name: attr('string'),
 	params: attr()
};

export default Model.extend(schema);

templates.application\.hbs

{{#appointment-query-provider as |provider|}}
  <select onchange={{action "selectAppointmentQuery" value="target.value"}}>
    {{#if provider.fetchAppointmentQueriesTask.isRunning}}
      <option>loading...</option>
    {{else}}
    	<option value=null>Appointment queries</option>
      {{#each provider.appointmentQueries as |appointmentQuery|}}
        <option 
        	value={{appointmentQuery.id}}
          selected={{eq currentAppointmentQuery appointmentQuery}}
        >
        	{{appointmentQuery.name}}
        </option>
      {{/each}}
    {{/if}}
  </select>
{{/appointment-query-provider}}

templates.components.appointment-query-provider\.hbs

{{yield (hash 
	appointmentQueries=appointmentQueries
  fetchAppointmentQueriesTask=fetchAppointmentQueriesTask
)}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "2.18.5",
    "ember-concurrency": "0.7.19"
  }
}