Add to model list of objects by power-select

Ember Data
1

Hi. I’m quite new to Ember and Javascript in general and got problem with adding objects to list of nested object inside my model by power-select addon. I wouldn’t have any problem if my ProductCategoryPointOfSale model would be represented as single object. The problem is, it needs to be represented as array. Could someone help me figure things out? Any help will be appreciated because it gonna enchance my further efforts with learing. I paste my code below.

ProductCategory:

export default DS.Model.extend({
  uniqueId: DS.attr('string'),
  name: DS.attr('string'),
  label: DS.attr('string'),
  color: DS.attr('string'),
  discountable: DS.attr('boolean'),

  productCategoryPointOfSales: DS.hasMany('product-category-point-of-sale', {async: false}),
});

ProductCategoryPointOfSale

export default DS.Model.extend({
  pointOfSaleUniqueId: DS.attr('string'),
  directionId: DS.attr('string'),
  directionUniqueId: DS.attr('string'),
  kitchenUniqueId: DS.attr('string'),
  inactive:  DS.attr('boolean'),

  productCategory: DS.belongsTo('product-category'),
  pointOfSale: DS.belongsTo('point-of-sale')
});

PointOfSale

export default DS.Model.extend({
  uniqueId: DS.attr('string'),
  name: DS.attr('string'),

  pointOfSale: DS.belongsTo('direction')
});

ProductCategory route:

export default Route.extend({
  model(){
    return this.store.createRecord('product-category', {
      deleted: false
    });
  },

  actions: {
    saveProductCategory(param) {
      param.save().then(() => this.transitionTo('product-category'));
    }
  }
});

ProductCategory component

export default Component.extend({
  store: service(),

  pointOfSales: computed(function(){
    return this.store.findAll('point-of-sale');
  }),

  actions: {
    addPointOfSale(pointOfSale){
      ??
    },

    saveProductCategory(param){
      this.sendAction('action', param);
    }
  }
});

Template: {{product-category/product-category-form model=model action='saveProductCategory'}}

And component template:

<div class="form-horizontal">
  <div class="col-sm-10">
    {{#validated-input model=model valuePath='name' placeholder='Nazwa'}}{{/validated-input}}
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Point of sale</label>
    {{#power-select
      options=pointOfSales
      selected=null
      onchange=(action "addPointOfSale") as |pointOfSale|}}
      {{pointOfSale.name}}
    {{/power-select}}
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary" {{action 'saveProductCategory' model}}>Save</button>
    </div>
  </div>
</div>
1 Like
2

i got the same issue

3

I think the problem in the above example was that the power select “selected” option was being set to null and the change action wasn’t filled in. Could you be more specific about your issue?