Improve delivery workflow; introduce sortable tables; use js.erb for deliveries

app/views/deliveries/_form.html.haml

@@ -2,42 +2,94 @@
   :javascript
     $(function() {
       $('.destroy_stock_change').live('click', function() {
-        $(this).prev('input').val('1').parent().hide();
+        $(this).prev('input').val('1'); // check for destruction
+        
+        var stock_change = $(this).closest('tr');
+        stock_change.hide(); // do not remove (to ensure destruction)
+        unmark_article_unavailable_for_delivery( stock_change.data('id') );
         return false;
       });
 
       $('.remove_new_stock_change').live('click', function() {
-        $(this).parent().remove();
+        var stock_change = $(this).closest('tr');
+        stock_change.remove();
+        unmark_article_unavailable_for_delivery( stock_change.data('id') );
         return false;
       })
     });
+    function mark_article_unavailable_for_delivery(stock_article_id) {
+      var articleTr = $('#stock_article_' + stock_article_id);
+      articleTr.addClass('unavailable');
+      $('.button-add-stock-change', articleTr).attr('disabled', 'disabled');
+    }
+    function unmark_article_unavailable_for_delivery(stock_article_id) {
+      var articleTr = $('#stock_article_' + stock_article_id);
+      articleTr.removeClass('unavailable');
+      $('.button-add-stock-change', articleTr).removeAttr('disabled');
+    }
+    function is_article_unavailable_for_delivery(stock_article_id) {
+      var articleTr = $('#stock_article_' + stock_article_id);
+      return articleTr.hasClass('unavailable');
+    }
 
-- content_for :javascript do
-  :javascript
-    $(function() {
-      $('#add-stock-change').click();
-    });
-
-.well.well-small
-  .btn-toolbar
-    .btn-group
-      = link_to t('.new_stock_article'), new_stock_article_supplier_deliveries_path(@supplier), remote: true, class: 'btn'
-
-= simple_form_for [@supplier, @delivery], validate: true do |f|
+-# remove validate true for the form, because it disabled html5 validation
+-# is there anything broken with the simple_form validation? (bootstrap issue?)
+= simple_form_for [@supplier, @delivery] do |f|
   = f.hidden_field :supplier_id
-  #stock_changes
-    = f.fields_for :stock_changes do |stock_change_form|
-      %p
-        = stock_change_form.select :stock_article_id, stock_articles_for_select(@supplier)
-        Menge
-        = stock_change_form.text_field :quantity, size: 5, autocomplete: 'off'
-        = stock_change_form.hidden_field :_destroy
-        = link_to t('.remove_article'), "#", class: 'destroy_stock_change'
-  %p
-    = link_to t('.add_article'), {action: 'add_stock_change', supplier_id: @supplier.id}, :id => 'add-stock-change', remote: true, class: 'btn btn-small btn-primary'
-  %hr/
-  = f.input :delivered_on, as: :date_picker
-  = f.input :note, input_html: {size: '35x4'}
-  .form-actions
-    = f.submit class: 'btn btn-primary'
-    = link_to t('ui.or_cancel'), supplier_deliveries_path(@supplier)
+  .row-fluid
+      
+    .span6
+      %h2 #{t '.title_select_stock_articles'}
+      .well.well-small
+        .btn-toolbar
+          .btn-group
+            = link_to t('.new_stock_article'), new_stock_article_supplier_deliveries_path(@supplier), remote: true, class: 'btn'
+      %table.table.table-condensed.table-hover#stock_articles_for_adding
+        %thead
+          %tr
+            %th
+              = t '.article'
+              %span.sorter-bar.default-sort-asc{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-name'}}
+            %th= t '.unit'
+            %th
+              = t '.price'
+              %span.sorter-bar{:data => {'compare-function' => 'compareFloat', 'sort-criterion' => 'sort-by-price'}}
+            %th= t '.vat'
+            %th
+              = t '.category'
+              %span.sorter-bar{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-category'}}
+            %th= t '.actions'
+        %tbody
+          - for article in stock_articles_for_table(@supplier)
+            = render :partial => 'stock_article_for_adding', :locals => {:article => article}
+    
+    .span6
+      %h2 #{t '.title_fill_quantities'}
+      %table.table.table-condensed#stock_changes
+        %thead
+          %tr
+            %th
+              = t '.article'
+              %span.sorter-bar.default-sort-asc{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-name'}}
+            %th= t '.price_per_unit'
+            %th= t '.quantity'
+            %th= t '.actions'
+        %tbody
+          = f.fields_for :stock_changes do |stock_change_form|
+            - stock_change = stock_change_form.object
+            %tr{:id => "stock_change_stock_article_#{stock_change.stock_article.id}", :data => {:id => stock_change.stock_article.id}}
+              %td.sort-by-name
+                = stock_change_form.hidden_field :stock_article_id
+                %span.stock_article_name= stock_change.stock_article.name
+              %td.numeric.price-per-unit #{number_to_currency stock_change.stock_article.price}/#{stock_change.stock_article.unit}
+              %td= stock_change_form.text_field :quantity, :size => 5, :autocomplete => 'off'
+              %td
+                = stock_change_form.hidden_field :_destroy
+                = link_to t('.remove_article'), "#", :class => 'destroy_stock_change btn btn-small'
+      
+      %h2 #{t '.title_finish_delivery'}
+      = f.input :delivered_on, as: :date_picker
+      = f.input :note, input_html: {size: '35x4'}
+      .form-actions
+        = f.submit class: 'btn btn-primary'
+        = link_to t('ui.or_cancel'), supplier_deliveries_path(@supplier)

app/views/deliveries/_stock_article_for_adding.html.haml

@@ -0,0 +1,16 @@
+- css_class = ( @delivery and @delivery.includes_article? article ) ? ( 'unavailable' ) : ( false )
+%tr{:id => "stock_article_#{article.id}", :class => css_class}
+  %td.sort-by-name
+    = article.name
+  %td.numeric= article.unit
+  %td.numeric= number_to_currency article.price
+  %td.numeric= number_to_percentage article.tax
+  %td.sort-by-category= article.article_category.name
+  %td
+    .btn-group
+      = link_to t('.action_edit'), edit_stock_article_supplier_deliveries_path(@supplier, :stock_article_id => article.id), remote: true, class: 'btn btn-mini'
+      = link_to t('.action_other_price'), new_stock_article_supplier_deliveries_path(@supplier, :old_stock_article_id => article.id), remote: true, class: 'btn btn-mini'
+      - if @delivery and @delivery.includes_article? article
+        = link_to t('.action_add_to_delivery'), add_stock_change_supplier_deliveries_path(@supplier, :stock_article_id => article.id), :method => :post, remote: true, class: 'button-add-stock-change btn btn-mini', disabled: 'disabled'
+      - else
+        = link_to t('.action_add_to_delivery'), add_stock_change_supplier_deliveries_path(@supplier, :stock_article_id => article.id), :method => :post, remote: true, class: 'button-add-stock-change btn btn-mini'

app/views/deliveries/_stock_article_form.html.haml

@@ -1,5 +1,8 @@
-= simple_form_for stock_article, url: add_stock_article_supplier_deliveries_path(supplier), remote: true, validate: true do |f|
+- url = ( stock_article.new_record? ) ? ( add_stock_article_supplier_deliveries_path(@supplier) ) : ( update_stock_article_supplier_deliveries_path(@supplier) )
+= simple_form_for stock_article, url: url, remote: true, validate: true do |f|
   = f.hidden_field :supplier_id
+  - unless stock_article.new_record?
+    = f.hidden_field :id
   .modal-header
     = link_to t('ui.marks.close').html_safe, '#', class: 'close', data: {dismiss: 'modal'}
     %h3= t 'activerecord.models.stock_article'
@@ -12,7 +15,7 @@
       = f.input :tax
       = f.input :deposit
     - else
-      = f.input :price, :input_html => {:disabled => 'disabled'}, :hint => t('.form.price_hint')
+      = f.input :price, :input_html => {:disabled => 'disabled'}, :hint => t('stockit.form.price_hint')
     = f.association :article_category
   .modal-footer
     = link_to t('ui.close'), '#', class: 'btn', data: {dismiss: 'modal'}

app/views/deliveries/_stock_change.html.haml

@@ -1,6 +1,9 @@
-%p
-  = fields_for "delivery[new_stock_changes][]", stock_change do |form|
-    = form.select :stock_article_id, stock_articles_for_select(supplier)
-    Menge
-    = form.text_field :quantity, :size => 5, :autocomplete => 'off'
-    = link_to t('.remove_article'), "#", :class => 'remove_new_stock_change btn btn-small'
+= fields_for "delivery[new_stock_changes][]", stock_change, validate: true do |f|
+  - f.object.quantity = '' if 0 == f.object.quantity
+  %tr{:id => "stock_change_stock_article_#{stock_change.stock_article.id}", :data => {:id => stock_change.stock_article.id}}
+    %td.sort-by-name
+      = f.hidden_field :stock_article_id
+      %span.stock_article_name= stock_change.stock_article.name
+    %td.numeric.price-per-unit #{number_to_currency stock_change.stock_article.price}/#{stock_change.stock_article.unit}
+    %td= f.text_field :quantity, :size => 4, :autocomplete => 'off', :required => true, :class => 'stock-change-quantity'
+    %td= link_to t('.remove_article'), "#", :class => 'remove_new_stock_change btn btn-small'

app/views/deliveries/add_stock_article.js.erb

@@ -0,0 +1,14 @@
+$('div.container-fluid').prepend(
+  '<%= j(render(:partial => 'shared/alert_success', :locals => {:alert_message => t('.notice', :name => @stock_article.name)})) %>'
+);
+
+$('#stock_articles_for_adding tr').removeClass('success');
+
+$('#stock_articles_for_adding tbody').append(
+  $(
+    '<%= j(render(:partial => 'stock_article_for_adding', :locals => {:article => @stock_article})) %>'
+  ).addClass('success')
+);
+updateSort('#stock_articles_for_adding');
+
+$('#modalContainer').modal('hide');

app/views/deliveries/add_stock_article.js.haml

@@ -1,3 +0,0 @@
-$('div.container-fluid').prepend('#{j(render(:partial => 'shared/alert_success', :locals => {:alert_message => t('.notice', :name => @stock_article.name)}))}');
-
-$('#modalContainer').modal('hide');

app/views/deliveries/add_stock_change.js.erb

@@ -0,0 +1,20 @@
+if(!is_article_unavailable_for_delivery(<%= @stock_change.stock_article.id %>)) {
+  <%# would be easier to return in the opposite case, but how? %>
+  
+  mark_article_unavailable_for_delivery(<%= @stock_change.stock_article.id %>);
+  
+  (function(w) {
+    $('#stock_changes tr').removeClass('success');
+    
+    var stock_change = $(
+      '<%= j(render(:partial => 'stock_change', :locals => {:stock_change => @stock_change})) %>'
+    ).addClass('success');
+    
+    $('#stock_changes').append(stock_change);
+    updateSort('#stock_changes');
+    
+    var quantity = w.prompt('<%= j(t('.how_many_units', :unit => @stock_change.stock_article.unit, :name => @stock_change.stock_article.name)) %>'); <%# how to properly escape here? %>
+    $('input.stock-change-quantity', stock_change).val(quantity);
+  })(window);
+
+}

app/views/deliveries/add_stock_change.js.haml

@@ -1 +0,0 @@
-$('#stock_changes').append('#{escape_javascript(render(:partial => 'stock_change', :locals => {:stock_change => StockChange.new, :supplier => @supplier}))}');

app/views/deliveries/edit_stock_article.js.erb

@@ -0,0 +1,5 @@
+$('#modalContainer').html(
+  '<%= j(render(:partial => "stock_article_form", :locals => {:stock_article => @stock_article})) %>'
+);
+
+$('#modalContainer').modal();

app/views/deliveries/new_stock_article.js.erb

@@ -0,0 +1,5 @@
+$('#modalContainer').html(
+  '<%= j(render(:partial => "stock_article_form", :locals => {:stock_article => @stock_article})) %>'
+);
+
+$('#modalContainer').modal();

app/views/deliveries/new_stock_article.js.haml

@@ -1,2 +0,0 @@
-$('#modalContainer').html('#{j(render(:partial => "stock_article_form", :locals => {:stock_article => @stock_article, :supplier => @supplier}))}');
-$('#modalContainer').modal();

app/views/deliveries/update_stock_article.js.erb

@@ -0,0 +1,35 @@
+$('div.container-fluid').prepend(
+  '<%= j(render(:partial => 'shared/alert_success', :locals => {:alert_message => t('.notice', :name => @stock_article.name)})) %>'
+);
+
+(function() {
+  $('#stock_articles_for_adding tr').removeClass('success');
+  
+  var old_entry = $('#stock_article_<%= @stock_article.id %>');
+  var unavailable = old_entry.hasClass('unavailable');
+  var stock_article_for_adding = $(
+    '<%= j(render(:partial => 'stock_article_for_adding', :locals => {:article => @stock_article, :delivery => @delivery})) %>'
+  ).addClass('success');
+  
+  if(unavailable) {
+    stock_article_for_adding.addClass('unavailable');
+    $('.button-add-stock-change', stock_article_for_adding).attr('disabled', 'disabled');
+  }
+  
+  old_entry.replaceWith(stock_article_for_adding);
+  updateSort('#stock_articles_for_adding');
+  
+  $('#stock_changes tr').removeClass('success');
+  
+  var stock_change_entry = $('#stock_change_stock_article_<%= @stock_article.id %>');
+  $('.stock_article_name', stock_change_entry).text('<%= j(@stock_article.name) %>');
+  $('.price-per-unit', stock_change_entry).text(
+    '<%= "#{j(number_to_currency(@stock_article.price))}/#{j(number_to_currency(@stock_article.unit))}" %>'
+  );
+  
+  stock_change_entry.addClass('success');
+  
+  updateSort('#stock_changes');
+})();
+
+$('#modalContainer').modal('hide');