Toggle component enabled/disabled using service


#1

I found this example in the forum and I have attempted to use it in my code below

//Example found

hbs ```{{modal-filter feature=feature property=someProperty}}``

compoenent

     ...
})```

Generally, when you need to share state between different layers of an Ember application, the tool for the job is to create a service. Here for instance, you could imagine having a panel service, maybe something like this:

// app/services/panels.js
```export default Ember.Service.extend({
    mainPanelShown: false,

    setPanel: function (name, visible) {
        set(this, name + 'PanelShown', visible);
    }
});```

You can then use it from anywhere:

// If you need to know whether to show the panel/the panel is shown
```export default Ember.Controller.exend({
    panels: Ember.inject.service(),
    isPanelShown: Ember.computed.readOnly('panels.mainPanelShown')
});```

If you need to trigger it:

```export default Ember.Controller.extend({
    panels: Ember.inject.service(),
    actions: {
        showTheMainPanel: function () {
            get(this, 'panels').setPanel('main', true);
        }
    }
});```

Granted, this is definitely not polished, but you get the idea. The point is to have the service be the central interface for triggering panels and getting their state.

//My version

// Component hbs

```<ul>
  <select {{action 'selectTagType' on='change' }} register-as=countryComponent id=tag-type-select disabled={{citySelectDisabled}}>
    {{#each cityProp as |elem|}}
      <option value="{{elem.id}}" selected={{eq elem.id model.id}}>{{elem.name}} {{elem.currency_id}}</option>
    {{/each}}
  </select>
</ul>```

// Component JS
```import Ember from 'ember';

export default Ember.Component.extend({

  store: Ember.inject.service(),
  selects: Ember.inject.service(),

  cityProp: Ember.computed({
      get() {
        // Since we are using Ember.inject.service, we need to call the store using the get helper
          return this.get('store').findAll('country');
      }
  }).readOnly(),

  didInsertElement: function() {
      this.set('register-as', this);
  },

  actions: {
    selectTagType() {

      const selectedEl = this.$('#tag-type-select')[0];
      console.log(selectedEl);

      const selectedIndex = selectedEl.selectedIndex;
      console.log(selectedIndex);

        const options = this.$('#tag-type-select option');
        console.log(options);

        const selectedValue = options(selectedIndex).value;
        console.log(selectedValue.innerHTML);

      },
      enableCitySelect() {
          get(this, 'selects').setSelect('city', true);

      }
    }

});```

// Service
```import Ember from 'ember';

export default Ember.Service.extend({

  citySelectDisabled: true,

  setSelect: function (name, visible) {
      set(this, name + 'SelectDisabled', false);
  }

});```

The service is not setting the attribute to true to enable the component to be rendered as disabled