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}
+    name:
-    price: {format: /^[+-]?\d+(\.?\d?\d)?$/}
+      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
+  if product.active
-  button.add-product-to-list{action "addProduct" product}
+    a{action "addProduct" product}= product.name
-    span
+    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
+    +push-button($bg: $secondary-color, $padding: 5px)
-    @extend .fa-lg
+    color: $warning-color
-    @extend .fa-edit
+    font-size: 0.7em
+    vertical-align: top
+    span
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-edit
   .add-product-product_category-button
-    float: right
+    +push-button($bg: $secondary-color)
-    margin-top: 1.2em
+    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

app/controllers/dashboard_controller.rb

@@ -27,7 +27,7 @@ class DashboardController < ApplicationController
     if Rails.env.test?
       @tables = Table.all
     else
-      @tables = List.active.map(&:table) | Supplier.find_by_name('Mozo').tables.select{|t| t.number.between? 20, 50}.sample(3)
+      @tables = List.active.map(&:table) | Supplier.find_by_name('Mozo').tables.select{|t| t.number.between? 20, 500}.sample(3)
     end
     respond_to do |format|
       format.html { render layout: 'phone' }

app/controllers/suppliers/products_controller.rb

@@ -98,7 +98,7 @@ module Suppliers
     private
 
     def product_params
-      params.require(:product).permit(:name, :code, :price, :description, :image, :visible, :position, :product_category_id)
+      params.require(:product).permit(:name, :code, :price, :description, :image, :visible, :position, :active, :product_category_id)
     end
   end
 end

app/models/product.rb

@@ -8,6 +8,7 @@ class Product
   property :price, type: Float
   property :description
   property :visible, type: :boolean, default: true
+  property :active, type: :boolean, default: true
   property :position, type: Fixnum
 
   belongs_to :product_category
@@ -19,7 +20,7 @@ class Product
 
   validates :name, presence: true
   validates :supplier_id, presence: true
-  validates :price, numericality: {greater_than: 0}
+  validates :price, numericality: true
   view :by_supplier_id_and_id, key: [:supplier_id, :_id]
 
   #after_save :persist_product_category_ids

app/serializers/product_serializer.rb

@@ -1,5 +1,5 @@
 class ProductSerializer < Qwaiter::Serializer
-  attributes :name, :price, :description, :image, :code, :position, :visible, :product_category_id
+  attributes :name, :price, :description, :image, :code, :position, :visible, :active, :product_category_id
 
   def image
     if object.image.present?

config/locales/models.en.yml

@@ -48,6 +48,7 @@ en:
         code: Code
         price: Price
         description: Description
+        active: "Active?"
         visible: Visible?
         created_at: Created
         image: Image

config/locales/models.nl.yml

@@ -47,6 +47,7 @@ nl:
         price: Prijs
         description: Omschrijving
         visible: Zichtbaar?
+        active: "Actief?"
         created_at: Aangemaakt
         image: Afbeelding
       list:

wip.md

@@ -23,10 +23,15 @@ User
 
 - test met veel producten
 - product variants
+- option to make products inactive, no order plus and click on name
+  opens information
 - remove active orders on list close
 - fix ajaxError duplicity
 - rename "I am signed in as a user" to "there is a signed in user" in
   the specs
+- Kom in aanmerking voor vaste klanten acties!
+
+
 
 Bugs
 ----