Add to model list of objects by power-select


#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>