Better menu product editing for supplier

app/assets/javascripts/supplier/app/components/menu_product_component.js.coffee

@@ -1,7 +1,8 @@
 App.MenuProductComponent = Ember.Component.extend
   editMode: false
   code_filter: ''
-  classNameBindings: ['menu_product_class']
+  classNames: 'menu-product-container'
+  classNameBindings: ['menu_product_class', 'editMode:editing']
   showProduct: (-> !@get('code_filter') or (@get('product.code') || "").match(@get('code_filter'))).property('code_filter')
   menu_product_class: (-> "menu-product-#{@get('product.id') || 'new'}").property('product.id')
   code_filter_display: (->
@@ -19,6 +20,7 @@ App.MenuProductComponent = Ember.Component.extend
   actions:
     makeEditable: -> @set('editMode', true)
     save: ->
+      return unless @get('product.isValid')
       if @get('product.isDirty')
         @get('product').save().then((-> true), (-> true))
       @set 'editMode', false
@@ -31,9 +33,15 @@ App.MenuProductComponent = Ember.Component.extend
           title_path: 'product.destroy_confirmation'
           ok: -> product.destroyRecord()
     rollbackProduct: ->
-      @get('product').rollback()
+      if @get('product.isNew')
+        @get('product').deleteRecord()
+      else
+        @get('product').rollback()
       @set 'editMode', false
   didInsertElement: ->
     @set 'editMode', true if @get('product.isNew')
-
+  namePlaceholder: (-> t "attributes.product.name").property()
+  pricePlaceholder: (-> t "attributes.product.price").property()
+  codePlaceholder: (-> t "attributes.product.code").property()
+  descriptionPlaceholder: (-> t "attributes.product.description").property()
   #templateName: 'menu/product'

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

@@ -16,3 +16,8 @@ App.Product = DS.Model.extend
     return image.small if image.small and typeof(image.small) is "string"
     image
   ).property('image')
+
+  isValid: (-> 
+    return false unless price = @get('price')
+    return false unless "#{price}".match(/^[+-]?\d+(\.?\d?\d)?$/)
+  ).property('price')

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

@@ -1,12 +1,12 @@
 if editMode
-  .row.menu-product-container
+  .row
     .small-3.columns.name
-      = input value=product.name
+      = input value=product.name placeholder=namePlaceholder
       = errors product.errors.name
     .small-3.columns.price
       = edit-currency value=product.price validatePresence=true
       = errors product.errors.price
-    .small-3.columns.code= input value=product.code
+    .small-3.columns.code= input value=product.code placeholder=codePlaceholder
     .small-3.columns.actions
       a.rollback-product-action{action "rollbackProduct"}: span
       a.destroy-product-action{action "destroyProduct" product}: span
@@ -15,10 +15,10 @@ if editMode
     .medium-4.small-6.columns
       = view "upload-file" name="image" accept="image/*" file=product.image
     .medium-4.small-6.columns: img src=product.image_src
-    .medium-4.small-6.columns= textarea value=product.description placeholder="Description"
+    .medium-4.small-6.columns= textarea value=product.description placeholder=descriptionPlaceholder
 else
   if showProduct
-    .row.menu-product-container
+    .row
       .small-3.columns
         span= product.name
         = errors product.errors.name includeAttribute="product"

app/assets/stylesheets/supplier/foundation1/components/_products_menu.css.sass

@@ -45,6 +45,14 @@
       color: rgb(39, 6, 121)
 
 .menu-product-container
+  &.editing
+    box-shadow: 5px 5px 5px #555
+    //border-left: 1px solid rgba(100,100,100,0.3)
+    //border-top: 1px solid rgba(100,100,100,0.3)
+    margin-left: -5px
+    margin-top: -5px
+    background-color: #ccc
+    padding: 5px
   .highlight
     text-decoration: underline
     font-weight: bold

config/locales/models.en.yml

@@ -35,6 +35,8 @@ en:
         name: Name
         code: Code
         price: Price
+        description: Description
+        visible: Visible?
         created_at: Created
         image: Image
       list:

config/locales/models.nl.yml

@@ -33,6 +33,8 @@ nl:
         name: Naam
         code: Code
         price: Prijs
+        description: Omschrijving
+        visible: Zichtbaar?
         created_at: Aangemaakt
         image: Afbeelding
       list: