Add push buttons and support inactive products

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

@@ -2,7 +2,7 @@ App.MenuProductComponent = Ember.Component.extend
   editMode: false
   code_filter: ''
   classNames: 'menu-product-container'
-  classNameBindings: ['menu_product_class', 'editMode:editing']
+  classNameBindings: ['menu_product_class', 'editMode:editing', 'product.active:active:inactive']
   showProduct: (->
     return true unless filter = @get('code_filter')
     (@get('product.code') || "").toLowerCase().indexOf(filter.toLowerCase()) >= 0
@@ -16,7 +16,7 @@ App.MenuProductComponent = Ember.Component.extend
       pre_code = code.substring(0,index)
       highlight = code.substring(index,index + filter.length)
       post_code = code.substring(index + filter.length)
-      new Ember.Handlebars.SafeString("#{pre_code}<span class='highlight'>#{highlight}</span>#{post_code}")
+      "#{pre_code}<span class='highlight'>#{highlight}</span>#{post_code}".htmlSafe()
     else
       code
   ).property('code_filter')

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

@@ -1,10 +1,11 @@
 attr = DS.attr
 App.Product = DS.Model.extend Ember.Validations.Mixin,
   name: attr 'string'
-  price: attr 'number'
+  price: attr 'number', defaultValue: 0
   code: attr 'string'
   description: attr 'string'
   visible: attr('boolean', defaultValue: true)
+  active: attr('boolean', defaultValue: true)
   position: attr('number', defaultValue: 0)
   image: attr()
   product_category: DS.belongsTo('product_category')
@@ -23,5 +24,8 @@ App.Product = DS.Model.extend Ember.Validations.Mixin,
     #true
   #).property('price')
   validations:
-    name: {presence: true}
-    price: {format: /^[+-]?\d+(\.?\d?\d)?$/}
+    name:
+      presence: true
+    price:
+      format:
+        width: /^[+-]?\d*(\.?\d?\d)?$/

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

@@ -4,13 +4,16 @@ if editMode
       = input value=product.name placeholder=namePlaceholder action="save"
       = errors product.errors.name
     .small-3.columns.price
-      = edit-currency value=product.price validatePresence=true action="save"
+      = edit-currency value=product.price action="save"
       = errors product.errors.price
     .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
       a.save-product-action{action "save"}: span
+  .row
+    .small-4.large-2.columns= t 'attributes.product.active'
+    .small-8.large-10.columns: view boolean-switch value=product.active
   .row.menu-product-container
     .medium-4.small-6.columns
       = view "upload-file" name="image" accept="image/*" file=product.image
@@ -27,5 +30,5 @@ else
         = errors product.errors.price includeAttribute="product"
       .small-3.columns: span= code_filter_display
       .small-3.columns
-        span.fa.fa-edit{action "makeEditable"}
+        a.edit-product-action{action "makeEditable"}: span
         /img src=product.image_src

app/assets/javascripts/supplier/app/templates/menu.emblem

@@ -11,7 +11,7 @@ each product_category in sorted_product_categories
       span.title= product_category.name
       span.availability= product_category.availability_text
       can manage menu
-        a.edit-product-category-button{action "editProductCategory" product_category} href="#"
+        a.edit-product-category-button{action "editProductCategory" product_category} href="#": span
         a.add-product-product_category-button{action "addProduct" product_category} href="#": span
     each product in product_category.sorted_products
       = menu-product product=product code_filter=product_code_filter

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

@@ -1,6 +1,6 @@
 App.MenuProductComponent = Ember.Component.extend
   tagName: 'li'
-  classNameBindings: ['specific_id']
+  classNameBindings: ['specific_id', 'product.active:active:inactive']
   specific_id: (-> "order-product-#{@get('product.id')}").property('product.id')
   orderProducts: false
   target: -> @get('parentView.targetObject')

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

@@ -4,6 +4,7 @@ App.Product = DS.Model.extend
   price: attr 'number'
   description: attr 'string'
   position: attr('number', defaultValue: 0)
+  active: attr 'boolean', defaultValue: true
   image: attr()
   product_category: DS.belongsTo('product_category')
   product_orders: DS.hasMany('product_order')

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

@@ -4,9 +4,12 @@ if product.description
 else
   span.no-product-description
 if orderProducts
-  a{action "addProduct" product}= product.name
-  button.add-product-to-list{action "addProduct" product}
-    span
+  if product.active
+    a{action "addProduct" product}= product.name
+    button.add-product-to-list{action "addProduct" product}
+      span
+  else
+    a{action "showProductDescription" product}= product.name
 else
   span= product.name
 span.product-price.currency=currency product.price

app/assets/stylesheets/supplier/foundation1/_mixins.sass

@@ -5,3 +5,13 @@
 @mixin table-fit
   width: 1px
   white-space: nowrap
+= button-shadow
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  transition-delay: 0.2s
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)
+= push-button($bg: $secondary-color, $padding: 10px)
+  +button($bg: $bg)
+  +button-shadow
+  padding: $padding
+  margin: 0
+  border-radius: $global-rounded

app/assets/stylesheets/supplier/foundation1/components/_menu-products.sass

@@ -26,12 +26,20 @@
     .time-range
       color: rgb(39, 6, 121)
   .edit-product-category-button
-    @extend .fa
-    @extend .fa-lg
-    @extend .fa-edit
+    +push-button($bg: $secondary-color, $padding: 5px)
+    color: $warning-color
+    font-size: 0.7em
+    vertical-align: top
+    span
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-edit
   .add-product-product_category-button
-    float: right
-    margin-top: 1.2em
+    +push-button($bg: $secondary-color)
+    font-size: 0.7em
+    position: absolute
+    right: 10px
+    top: 0.6em
     span
       @extend .fa
       @extend .fa-lg
@@ -45,19 +53,29 @@
       color: rgb(39, 6, 121)
 
 .menu-product-container
+  &.inactive
+    color: #777
   &.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
+    margin-bottom: 16px
     background-color: #ccc
     padding: 5px
     z-index: 722
   .highlight
     text-decoration: underline
     font-weight: bold
+  .edit-product-action
+    +push-button($bg: $secondary-color)
+    padding: 4px
+    font-size: 0.7em
+    span
+      @extend .fa, .fa-edit
   .rollback-product-action
+    +push-button($bg: $secondary-color)
     color: $warning-color
     margin-right: 12px
     span
@@ -65,6 +83,7 @@
       @extend .fa-lg
       @extend .fa-undo
   .destroy-product-action
+    +push-button($bg: $secondary-color)
     color: $alert-color
     margin-right: 12px
     span
@@ -76,6 +95,7 @@
   input
     margin-bottom: 0
   .save-product-action
+    +push-button($bg: $secondary-color)
     color: $success-color
     span
       @extend .fa

app/assets/stylesheets/user/foundation/components/_product_categories.sass

@@ -16,6 +16,10 @@ ul.product_category-products
   list-style: none
   margin: 0 0 5px rem-calc(1.0)
 .product_category-products
+  .inactive
+    color: #777
+    a
+      color: #777
   .product-price
     float: right
   .show-product-description