Setup of product variants

app/assets/javascripts/supplier/app/components/menu-product.js.coffee

@@ -24,8 +24,11 @@ App.MenuProductComponent = Ember.Component.extend
     makeEditable: -> @set('editMode', true)
     save: ->
       return unless @get('product.isValid')
+      @get('product.product_variants').forEach (product_variant)->
+        product_variant.save() if product_variant.get('isDirty')
       if @get('product.isDirty')
-        @get('product').save().then((=> @set 'editMode', false), (-> true))
+        @get('product').save()
+      @set 'editMode', false
     destroyProduct: (product)->
       if product.get('isNew')
         product.deleteRecord()
@@ -38,6 +41,8 @@ App.MenuProductComponent = Ember.Component.extend
       if @get('product.isNew')
         @get('product').deleteRecord()
       else
+        @get('product.product_variants').forEach (product_variant)->
+          product_variant.rollback()
         @get('product').rollback()
       @set 'editMode', false
   didInsertElement: ->

app/assets/javascripts/supplier/app/models/product.js.coffee

@@ -10,6 +10,7 @@ App.Product = DS.Model.extend Ember.Validations.Mixin,
   image: attr()
   product_category: DS.belongsTo('product_category')
   product_orders: DS.hasMany('product_order')
+  product_variants: DS.hasMany('product_variant')
 
   image_src: (->
     image = @get('image')
@@ -18,6 +19,12 @@ App.Product = DS.Model.extend Ember.Validations.Mixin,
     image
   ).property('image')
 
+  sorted_product_variants: Ember.computed 'product_variants.@each.name', 'product_variants.@each.position', ->
+    @get('product_variants').sortBy('position')
+
+  variantsDisplay: Ember.computed 'sorted_product_variants', ->
+    @get('sorted_product_variants').mapBy('name').join(', ')
+
   #isValid: (->
     #return false unless price = @get('price')
     #return false unless "#{price}".match(/^[+-]?\d+(\.?\d?\d)?$/)

app/assets/javascripts/supplier/app/models/product_variant.js.coffee

@@ -0,0 +1,8 @@
+attr = DS.attr
+App.ProductVariant = DS.Model.extend Ember.Validations.Mixin,
+  name: attr 'string'
+  product: DS.belongsTo 'product'
+  position: attr 'number', defaultValue: 0
+  validations:
+    name:
+      presence: true

app/assets/javascripts/supplier/app/templates/components/menu-product.emblem

@@ -3,14 +3,14 @@ if editMode
     .small-6.medium-3.columns.name
       = input value=product.name placeholder=namePlaceholder action="save"
       = errors product.errors.name
-    .small-6.medium-3.columns.actions
-      a.rollback-product-action{action "rollbackProduct"}: span
-      a.destroy-product-action{action "destroyProduct" product}: span
-      a.save-product-action{action "save"}: span
     .small-6.medium-3.columns.price
       = edit-currency value=product.price action="save"
       = errors product.errors.price
     .small-6.medium-3.columns.code= input value=product.code placeholder=codePlaceholder
+    .small-6.medium-3.columns.actions
+      a.rollback-product-action{action "rollbackProduct"}: span
+      a.destroy-product-action{action "destroyProduct" product}: span
+      a.save-product-action{action "save"}: span
   .row
     .small-3.columns= t 'attributes.product.active'
     .small-9.columns: view boolean-switch value=product.active
@@ -21,6 +21,11 @@ if editMode
     .small-12.medium-6.columns
       = view "upload-file" name="image" accept="image/*" file=product.image
       img src=product.image_src
+  each product_variant in product.product_variants
+    .row
+      .small-3.medium-2.large-1.columns plus
+      .small-9.medium-5.large-4.columns.end
+        = input value=product_variant.name
 else
   if showProduct
     .row
@@ -34,3 +39,6 @@ else
       .small-3.columns
         a.edit-product-action{action "makeEditable"}: span
         /img src=product.image_src
+    if product.product_variants
+      .row
+        .small-12.columns= product.variantsDisplay