edit order user-interface update

also closes foodcoops#145

app/assets/javascripts/application.js

@@ -140,7 +140,7 @@ $(function() {
     });
 
     // Use bootstrap datepicker for dateinput
-    $('.datepicker').datepicker({format: 'yyyy-mm-dd', language: I18n.locale});
+    $('.datepicker').datepicker({format: 'yyyy-mm-dd', language: I18n.locale, todayHighlight: true});
 
     // bootstrap tooltips (for price)
     //   Extra options don't work when using selector, so override defaults

app/controllers/orders_controller.rb

@@ -62,7 +62,7 @@ class OrdersController < ApplicationController
 
   # Page to create a new order.
   def new
-    @order = Order.new :ends => 4.days.from_now, :supplier_id => params[:supplier_id]
+    @order = Order.new starts: Time.now, ends: 4.days.from_now, supplier_id: params[:supplier_id]
   end
 
   # Save a new order.

app/helpers/application_helper.rb

@@ -207,5 +207,16 @@ module ApplicationHelper
   def show_user_link(user=@current_user)
     show_user user
   end
+
+  # allow truncate to add title when tooltip option is given
+  def truncate(text, options={}, &block)
+    return text if not text or text.length <= (options[:length] or 30)
+    text_truncated = super(text, options, &block)
+    if options[:tooltip]
+      content_tag :span, text_truncated, title: text
+    else
+      text_truncated
+    end
+  end
   
 end

app/inputs/date_picker_input.rb

@@ -2,4 +2,4 @@ class DatePickerInput < SimpleForm::Inputs::StringInput
   def input
     @builder.text_field(attribute_name, input_html_options.merge({class: 'datepicker'}))
   end
-end
+end

app/inputs/date_picker_time_input.rb

@@ -0,0 +1,19 @@
+# DateTime picker using bootstrap-datepicker for the time part
+# requires `date_time_attribute` gem and active on the attribute
+#   http://stackoverflow.com/a/20317763/2866660
+#   https://github.com/einzige/date_time_attribute
+class DatePickerTimeInput < SimpleForm::Inputs::StringInput
+  def input
+    # Date format must match datepicker's, see app/assets/application.js .
+    # And for html5 inputs, match RFC3339, see http://dev.w3.org/html5/markup/datatypes.html#form.data.date .
+    # In the future, use html5 date&time inputs. This needs modernizr or equiv. to avoid
+    # double widgets, and perhaps conditional css to adjust input width (chrome).
+    value = @builder.object.send attribute_name
+    date_options = {as: :string, class: 'input-small datepicker', value: value.try {|e| e.strftime('%Y-%m-%d')}}
+    time_options = {as: :string, class: 'input-mini', value: value.try {|e| e.strftime('%H:%M')}}
+    @builder.input_field("#{attribute_name}_date", input_html_options.merge(date_options)) + ' ' +
+    @builder.input_field("#{attribute_name}_time", input_html_options.merge(time_options))
+    # time_select requires a date_select
+    #@builder.time_select("#{attribute_name}_time", {ignore_date: true}, input_html_options.merge(time_options))
+  end
+end

app/models/order.rb

@@ -1,7 +1,6 @@
 # encoding: utf-8
 #
 class Order < ActiveRecord::Base
-
   attr_accessor :ignore_warnings
 
   # Associations
@@ -30,9 +29,12 @@ class Order < ActiveRecord::Base
   scope :finished_not_closed, -> { where(state: 'finished').order('ends DESC') }
   scope :closed, -> { where(state: 'closed').order('ends DESC') }
   scope :stockit, -> { where(supplier_id: 0).order('ends DESC') }
-
   scope :recent, -> { order('starts DESC').limit(10) }
 
+  # Allow separate inputs for date and time
+  include DateTimeAttribute
+  date_time_attribute :starts, :ends
+
   def stockit?
     supplier_id == 0
   end

app/views/orders/_form.html.haml

@@ -1,8 +1,9 @@
 = simple_form_for @order do |f|
   = f.hidden_field :supplier_id
-  = f.input :note, input_html: {rows: 8}
-  = f.input :starts, input_html: {class: 'input-small'}
-  = f.input :ends, input_html: {class: 'input-small'}
+  .fold-line
+    = f.input :starts, as: :date_picker_time
+    = f.input :ends, as: :date_picker_time
+  = f.input :note, input_html: {rows: 2, class: 'input-xxlarge'}
 
   %h2= t '.title'
   - if @order.errors.has_key?(:articles)
@@ -18,7 +19,7 @@
       - else
         %th= heading_helper Article, :origin
         %th= heading_helper Article, :manufacturer
-        %th= heading_helper Article, :unit_quantity
+        %th= heading_helper Article, :units
       %th= t '.prices'
     - for category_name, articles in @order.articles_for_ordering
       %tr.article-category
@@ -37,13 +38,16 @@
         %tr{class: row_class, id: article.id}
           %td= check_box_tag "order[article_ids][]", article.id, included, :id => "checkbox_#{article.id}"
           %td.click-me{'data-check-this' => "#checkbox_#{article.id}"}= article.name
-          %td=h truncate article.note, :length => 25
+          %td= truncate article.note, length: 25, tooltip: true
           - if @order.stockit?
             %td= "#{article.quantity_available} * #{article.unit}"
           - else
-            %td=h truncate article.origin, :length => 15
-            %td=h truncate article.manufacturer, :length => 15
-            %td= "#{article.unit_quantity} x #{article.unit}"
+            %td= truncate article.origin, length: 15, tooltip: true
+            %td= truncate article.manufacturer, length: 15, tooltip: true
+            %td
+              = article.unit
+              - if article.unit_quantity > 1
+                %span{style: 'color: grey'} × #{article.unit_quantity}#{pkg_helper_icon}
           %td= "#{number_to_currency(article.price)} / #{number_to_currency(article.fc_price)}"
     %tr
       %td

app/views/orders/edit.html.haml

@@ -1,3 +1,3 @@
-- title t('.title')
+- title t('.title', name: @order.name)
 
 = render :partial => 'form'

app/views/orders/new.html.haml

@@ -1,3 +1,10 @@
 - title t('.title')
 
 = render 'form'
+
+- content_for :javascript do
+  :javascript
+    // select all articles by default
+    $(function() {
+      $('#checkall').click();
+    });