Merge pull request #219 from foodcoop-rostock/publish-subscribe-from-scratch

Publish/subscribe pattern for DOM updates after AJAX database manipulation

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -104,6 +104,10 @@ table {
   td.odd {
     background-color: @tableBackgroundAccent;
   }
+  
+  td.main_info {
+    font-weight: bold;
+  }
 
   tr.selected td {
     background-color: @successBackground;

app/controllers/deliveries_controller.rb

@@ -50,57 +50,22 @@ class DeliveriesController < ApplicationController
     redirect_to supplier_deliveries_url(@supplier)
   end
   
-  # three possibilites to fill a new_stock_article form
-  # (1) start from blank or use params
-  def new_stock_article
-    @stock_article = @supplier.stock_articles.build(params[:stock_article])
-
-    render :layout => false
-  end
-  
-  # (2) StockArticle as template
-  def copy_stock_article
-    @stock_article = StockArticle.find(params[:old_stock_article_id]).dup
-    
-    render :layout => false
-  end
-  
-  # (3) non-stock Article as template
-  def derive_stock_article
-    @stock_article = Article.find(params[:old_article_id]).becomes(StockArticle).dup
-    
-    render :layout => false
-  end
-
-  def create_stock_article
-    @stock_article = StockArticle.new(params[:stock_article])
-    
-    if @stock_article.valid? and @stock_article.save
-      render :layout => false
-    else
-      render :action => 'new_stock_article', :layout => false
-    end
-  end
-
-  def edit_stock_article
-    @stock_article = StockArticle.find(params[:stock_article_id])
-    render :layout => false
-  end
-
-  def update_stock_article
-    @stock_article = StockArticle.find(params[:stock_article][:id])
-    
-    if @stock_article.update_attributes(params[:stock_article])
-      render :layout => false
-    else
-      render :action => 'edit_stock_article', :layout => false
-    end
-  end
-
   def add_stock_change
     @stock_change = StockChange.new
     @stock_change.stock_article = StockArticle.find(params[:stock_article_id])
     render :layout => false
   end
+  
+  def form_on_stock_article_create # See publish/subscribe design pattern in /doc.
+    @stock_article = StockArticle.find(params[:id])
+    
+    render :layout => false
+  end
+
+  def form_on_stock_article_update # See publish/subscribe design pattern in /doc.
+    @stock_article = StockArticle.find(params[:id])
+    
+    render :layout => false
+  end
 
 end

app/controllers/stockit_controller.rb

@@ -4,30 +4,62 @@ class StockitController < ApplicationController
     @stock_articles = StockArticle.undeleted.includes(:supplier, :article_category).
         order('suppliers.name, article_categories.name, articles.name')
   end
+  
+  def index_on_stock_article_create # See publish/subscribe design pattern in /doc.
+    @stock_article = StockArticle.find(params[:id])
+    
+    render :layout => false
+  end
 
+  def index_on_stock_article_update # See publish/subscribe design pattern in /doc.
+    @stock_article = StockArticle.find(params[:id])
+    
+    render :layout => false
+  end
+
+  # three possibilites to fill a new_stock_article form
+  # (1) start from blank or use params
   def new
-    @stock_article = StockArticle.new
+    @stock_article = StockArticle.new(params[:stock_article])
+
+    render :layout => false
+  end
+  
+  # (2) StockArticle as template
+  def copy
+    @stock_article = StockArticle.find(params[:stock_article_id]).dup
+    
+    render :layout => false
+  end
+  
+  # (3) non-stock Article as template
+  def derive
+    @stock_article = Article.find(params[:old_article_id]).becomes(StockArticle).dup
+    
+    render :layout => false
   end
 
   def create
     @stock_article = StockArticle.new(params[:stock_article])
-    if @stock_article.save
-      redirect_to stock_articles_path, :notice => I18n.t('stockit.stock_create.notice')
+    if @stock_article.valid? and @stock_article.save
+      render :layout => false
     else
-      render :action => 'new'
+      render :action => 'new', :layout => false
     end
   end
 
   def edit
     @stock_article = StockArticle.find(params[:id])
+    
+    render :layout => false
   end
 
   def update
     @stock_article = StockArticle.find(params[:id])
     if @stock_article.update_attributes(params[:stock_article])
-      redirect_to stock_articles_path, :notice => I18n.t('stockit.stock_update.notice')
+      render :layout => false
     else
-      render :action => 'edit'
+      render :action => 'edit', :layout => false
     end
   end
 
@@ -36,9 +68,15 @@ class StockitController < ApplicationController
     @stock_changes = @stock_article.stock_changes.order('stock_changes.created_at DESC')
   end
 
+  def show_on_stock_article_update # See publish/subscribe design pattern in /doc.
+    @stock_article = StockArticle.find(params[:id])
+    
+    render :layout => false
+  end
+
   def destroy
-    @article = StockArticle.find(params[:id])
-    @article.mark_as_deleted
+    @stock_article = StockArticle.find(params[:id])
+    @stock_article.mark_as_deleted
     render :layout => false
   rescue => error
     render :partial => "destroy_fail", :layout => false,

app/helpers/deliveries_helper.rb

@@ -25,13 +25,4 @@ module DeliveriesHelper
     return output.html_safe
   end
   
-  def stock_article_price_hint(stock_article)
-    t('simple_form.hints.stock_article.edit_stock_article.price',
-      :stock_article_copy_link => link_to(t('.copy_stock_article'),
-        copy_stock_article_supplier_deliveries_path(@supplier, :old_stock_article_id => stock_article.id),
-        :remote => true
-      )
-    )
-  end
-  
 end

app/helpers/stockit_helper.rb

@@ -14,4 +14,13 @@ module StockitHelper
       link_to StockTaking.model_name.human, stock_taking_path(stock_change.stock_taking)
     end
   end
+  
+  def stock_article_price_hint(stock_article)
+    t('simple_form.hints.stock_article.edit_stock_article.price',
+      :stock_article_copy_link => link_to(t('.copy_stock_article'),
+        stock_article_copy_path(stock_article),
+        :remote => true
+      )
+    )
+  end
 end

app/views/deliveries/_form.html.haml

@@ -42,9 +42,9 @@
         }
         if('new' == selectedArticle.id) {
           $.ajax({
-            url: '#{new_stock_article_supplier_deliveries_path(@supplier)}',
+            url: '#{new_stock_article_path}',
             type: 'get',
-            data: {stock_article: {name: selectedArticle.text}},
+            data: {stock_article: {name: selectedArticle.text, supplier_id: #{@supplier.id}}},
             contentType: 'application/json; charset=UTF-8'
           });
           $('#new_stock_article').select2('data', null);
@@ -52,7 +52,7 @@
         }
         if('' != selectedArticle.id) {
           $.ajax({
-            url: '#{derive_stock_article_supplier_deliveries_path(@supplier)}',
+            url: '#{derive_stock_articles_path}',
             type: 'get',
             data: {old_article_id: selectedArticle.id},
             contentType: 'application/json; charset=UTF-8'
@@ -61,6 +61,26 @@
           return true;
         }
       });
+      
+      // Subscribe to database changes.
+      // See publish/subscribe design pattern in /doc.
+      $(document).on('StockArticle#create', function(e) {
+        $.ajax({
+          url: '#{form_on_stock_article_create_supplier_deliveries_path(@supplier)}',
+          type: 'get',
+          data: {id: e.stock_article_id},
+          contentType: 'application/json; charset=UTF-8'
+        });
+      });
+      
+      $(document).on('StockArticle#update', function(e) {
+        $.ajax({
+          url: '#{form_on_stock_article_update_supplier_deliveries_path(@supplier)}',
+          type: 'get',
+          data: {id: e.stock_article_id},
+          contentType: 'application/json; charset=UTF-8'
+        });
+      });
     });
     
     function mark_article_for_delivery(stock_article_id) {
@@ -96,7 +116,7 @@
       %tr
         %th{:colspan => 5}
           - if articles_for_select2(@supplier).empty?
-            = link_to t('.create_stock_article'), new_stock_article_supplier_deliveries_path(@supplier), :remote => true, :class => 'btn'
+            = link_to t('.create_stock_article'), new_stock_article_path, :remote => true, :class => 'btn'
           - else
             %input#new_stock_article{:style => 'width: 500px;'}
     %tbody

app/views/deliveries/_stock_article_for_adding.html.haml

@@ -1,11 +1,13 @@
-- css_class = ( @delivery and @delivery.includes_article? article ) ? ( 'unavailable' ) : ( false )
+- disable_delivery_action = ( @delivery and @delivery.includes_article? article )
+- css_class = ( disable_delivery_action ) ? ( 'unavailable' ) : ( false )
+- deliver_button_disabled = ( disable_delivery_action ) ? ( 'disabled' ) : ( false )
+
 %tr{:id => "stock_article_#{article.id}", :class => css_class}
   %td= article.name
   %td{:data => {:toggle => :tooltip, :title => render(:partial => 'shared/article_price_info', :locals => {:article => article})}}= number_to_currency article.price
   %td= article.unit
   %td= article.article_category.name
   %td
-    = 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'), copy_stock_article_supplier_deliveries_path(@supplier, :old_stock_article_id => article.id), remote: true, class: 'btn btn-mini'
-    - deliver_button_disabled = ( @delivery and @delivery.includes_article? article ) ? ( 'disabled' ) : ( false )
+    = link_to t('.action_edit'), edit_stock_article_path(article), remote: true, class: 'btn btn-mini'
+    = link_to t('.action_other_price'), stock_article_copy_path(article), remote: true, class: 'btn btn-mini'
     = 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 btn-primary', disabled: deliver_button_disabled

app/views/deliveries/_stock_article_form.html.haml

@@ -1,23 +0,0 @@
-- url = ( stock_article.new_record? ) ? ( create_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.association :supplier, :as => :hidden
-  = f.hidden_field :id unless stock_article.new_record?
-  .modal-header
-    = link_to t('ui.marks.close').html_safe, '#', class: 'close', data: {dismiss: 'modal'}
-    %h3= t 'activerecord.models.stock_article'
-  .modal-body
-    = f.input :name
-    = f.input :unit
-    = f.input :note
-    - if stock_article.new_record?
-      = f.input :price
-      = f.input :tax, :wrapper => :append do
-        = f.input_field :tax
-        %span.add-on %
-      = f.input :deposit
-    - else
-      = f.input :price, :input_html => {:disabled => 'disabled'}, :hint => stock_article_price_hint(stock_article)
-    = f.association :article_category
-  .modal-footer
-    = link_to t('ui.close'), '#', class: 'btn', data: {dismiss: 'modal'}
-    = f.submit :class => 'btn btn-primary', 'data-disable-with' => t('ui.please_wait')

app/views/deliveries/copy_stock_article.js.erb

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

app/views/deliveries/create_stock_article.js.erb

@@ -1,16 +0,0 @@
-$('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 stock_article_for_adding = $(
-    '<%= j(render(:partial => 'stock_article_for_adding', :locals => {:article => @stock_article})) %>'
-  ).addClass('success');
-  
-  $('#stock_articles_for_adding tbody').append(stock_article_for_adding);
-  updateSort('#stock_articles_for_adding');
-})();
-
-$('#modalContainer').modal('hide');

app/views/deliveries/derive_stock_article.js.erb

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

app/views/deliveries/edit_stock_article.js.erb

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

app/views/deliveries/form_on_stock_article_create.js.erb

@@ -0,0 +1,31 @@
+// Handle more advanced DOM update after AJAX database manipulation.
+// See publish/subscribe design pattern in /doc.
+(function(w) {
+  
+  $('#stock_articles_for_adding tr').removeClass('success');
+  
+  if(<%= @supplier.id != @stock_article.supplier.id %>) {
+    // the stock_article does _NOT_ belong to the current supplier
+    var try_again = w.confirm('<%= j(
+      t('deliveries.form.confirm_foreign_supplier_reedit', :name => @stock_article.name)
+    ) %>');
+    
+    if(try_again) {
+      $.ajax({
+        url: '<%= j edit_stock_article_path(@stock_article) %>',
+        type: 'get',
+        contentType: 'application/json; charset=UTF-8'
+      });
+    }
+    
+    return false;
+  }
+  
+  // the stock_article _DOES_ belong to the current supplier
+  var stock_article_for_adding = $(
+    '<%= j(render(:partial => 'stock_article_for_adding', :locals => {:article => @stock_article})) %>'
+  ).addClass('success');
+  
+  $('#stock_articles_for_adding tbody').append(stock_article_for_adding);
+  updateSort('#stock_articles_for_adding');
+})(window);

app/views/deliveries/form_on_stock_article_update.js.erb

@@ -0,0 +1,47 @@
+// Handle more advanced DOM update after AJAX database manipulation.
+// See publish/subscribe design pattern in /doc.
+(function(w) {
+  // update entry in stock_article table
+  
+  $('#stock_articles_for_adding tr').removeClass('success');
+  
+  $('#stock_article_<%= @stock_article.id %>').remove();
+  
+  if(<%= @supplier.id != @stock_article.supplier.id %>) {
+    // the stock_article does _NOT_ belong to the current supplier
+    var try_again = w.confirm('<%= j(
+      t('deliveries.form.confirm_foreign_supplier_reedit', :name => @stock_article.name)
+    ) %>');
+    
+    if(try_again) {
+      $.ajax({
+        url: '<%= j edit_stock_article_path(@stock_article) %>',
+        type: 'get',
+        contentType: 'application/json; charset=UTF-8'
+      });
+    }
+  }
+  else {
+    // the stock_article _DOES_ belong to the current supplier
+    var stock_article_for_adding = $(
+      '<%= j(render(:partial => 'stock_article_for_adding', :locals => {:article => @stock_article})) %>'
+    ).addClass('success');
+    
+    $('#stock_articles_for_adding tbody').append(stock_article_for_adding);
+    updateSort('#stock_articles_for_adding');
+  }
+  
+  mark_article_for_delivery(<%= @stock_article.id %>);
+  
+  // update entry in stock_changes table
+  
+  $('#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) %>');
+  $('.unit', stock_change_entry).text('<%= j(@stock_article.unit) %>');
+  
+  stock_change_entry.addClass('success');
+  
+  updateSort('#stock_changes');
+})(window);

app/views/deliveries/new_stock_article.js.erb

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

app/views/deliveries/update_stock_article.js.erb

@@ -1,32 +0,0 @@
-$('div.container-fluid').prepend(
-  '<%= j(render(:partial => 'shared/alert_success', :locals => {:alert_message => t('.notice', :name => @stock_article.name)})) %>'
-);
-
-(function() {
-  // update entry in stock_article table
-  
-  $('#stock_articles_for_adding tr').removeClass('success');
-  
-  var stock_article_for_adding = $(
-    '<%= j(render(:partial => 'stock_article_for_adding', :locals => {:article => @stock_article, :delivery => @delivery})) %>'
-  ).addClass('success');
-  
-  $('#stock_article_<%= @stock_article.id %>').replaceWith(stock_article_for_adding);
-  updateSort('#stock_articles_for_adding');
-  
-  mark_article_for_delivery(<%= @stock_article.id %>);
-  
-  // update entry in stock_changes table
-  
-  $('#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) %>');
-  $('.unit', stock_change_entry).text('<%= j(@stock_article.unit) %>');
-  
-  stock_change_entry.addClass('success');
-  
-  updateSort('#stock_changes');
-})();
-
-$('#modalContainer').modal('hide');

app/views/stockit/_form.html.haml

@@ -1,18 +1,21 @@
-= simple_form_for stock_article, :validate => true do |f|
-  = f.association :supplier
-  = f.input :name
-  = f.input :unit
-  = f.input :note
-
-  - if stock_article.new_record?
-    = f.input :price
-    = f.input :tax, :wrapper => :append do
-      = f.input_field :tax
-      %span.add-on %
-    = f.input :deposit
-  - else
-    = f.input :price, :input_html => {:disabled => 'disabled'}, :hint => t('.price_hint')
-  = f.association :article_category
-  .form-actions
-    = f.submit class: 'btn'
-    = link_to t('ui.or_cancel'), stock_articles_path
+= simple_form_for stock_article, remote: true, :validate => true do |f|
+  .modal-header
+    = link_to t('ui.marks.close').html_safe, '#', class: 'close', data: {dismiss: 'modal'}
+    %h3= title
+  .modal-body
+    = f.association :supplier
+    = f.input :name
+    = f.input :unit
+    = f.input :note
+    - if stock_article.new_record?
+      = f.input :price
+      = f.input :tax, :wrapper => :append do
+        = f.input_field :tax
+        %span.add-on %
+      = f.input :deposit
+    - else
+      = f.input :price, :input_html => {:disabled => 'disabled'}, :hint => stock_article_price_hint(stock_article).html_safe
+    = f.association :article_category
+  .modal-footer
+    = link_to t('ui.close'), '#', class: 'btn', data: {dismiss: 'modal'}
+    = f.submit :class => 'btn btn-primary', 'data-disable-with' => t('ui.please_wait')

app/views/stockit/_stock_article.html.haml

@@ -0,0 +1,14 @@
+%tr{:class => stock_article_classes(stock_article), :id => "stockArticle-#{stock_article.id}"}
+  %td= link_to stock_article.name, stock_article
+  %td= stock_article.quantity
+  %td= stock_article.quantity_ordered
+  %td.main_info= stock_article.quantity_available
+  %td= stock_article.unit
+  %td= stock_article.price
+  %td= number_to_percentage stock_article.tax
+  %td= link_to stock_article.supplier.name, stock_article.supplier
+  %td= stock_article.article_category.name
+  %td
+    = link_to t('ui.edit'), edit_stock_article_path(stock_article), remote: true, class: 'btn btn-mini'
+    = link_to t('ui.delete'), stock_article, :method => :delete, :confirm => t('.confirm_delete', :name => stock_article.name),
+      class: 'btn btn-mini btn-danger', :remote => true

app/views/stockit/_stock_article_details.html.haml

@@ -0,0 +1,26 @@
+#stockArticleDetails
+  %dl.dl-horizontal
+    %dt= heading_helper(StockArticle, :supplier)
+    %dd= link_to stock_article.supplier.name, stock_article.supplier
+    %dt= heading_helper(StockArticle, :name)
+    %dd= stock_article.name
+    %dt= heading_helper(StockArticle, :unit)
+    %dd= stock_article.unit
+    %dt= heading_helper(StockArticle, :price)
+    %dd= number_to_currency stock_article.price
+    %dt= heading_helper(StockArticle, :tax)
+    %dd= number_to_percentage stock_article.tax
+    %dt= heading_helper(StockArticle, :deposit)
+    %dd= number_to_currency stock_article.deposit
+    %dt= heading_helper(StockArticle, :fc_price)
+    %dd= number_to_currency stock_article.fc_price
+    %dt= heading_helper(StockArticle, :article_category)
+    %dd= stock_article.article_category.name
+    %dt= heading_helper(StockArticle, :note)
+    %dd= stock_article.note
+    %dt= heading_helper(StockArticle, :quantity)
+    %dd= stock_article.quantity
+    %dt= heading_helper(StockArticle, :quantity_available)
+    %dd= stock_article.quantity_available
+  .form-actions
+    = link_to t('ui.edit'), edit_stock_article_path(stock_article), remote: true, class: 'btn'

app/views/stockit/copy.js.erb

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

app/views/stockit/create.js.erb

@@ -0,0 +1,15 @@
+$('div.container-fluid').prepend('<%= j(render(
+  :partial => 'shared/alert_success',
+  :locals => {
+    :alert_message => t('.notice', :name => @stock_article.name)
+  }
+)) %>');
+
+// Publish database changes.
+// See publish/subscribe design pattern in /doc.
+$(document).trigger({
+  type: 'StockArticle#create',
+  stock_article_id: <%= @stock_article.id %>
+});
+
+$('#modalContainer').modal('hide');

app/views/stockit/derive.js.erb

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

app/views/stockit/destroy.js.erb

@@ -0,0 +1,13 @@
+$('div.container-fluid').prepend('<%= j(render(
+  :partial => 'shared/alert_success',
+  :locals => {
+    :alert_message => t('.notice', :name => @stock_article.name)
+  }
+)) %>');
+
+// Publish database changes.
+// See publish/subscribe design pattern in /doc.
+$(document).trigger({
+  type: 'StockArticle#destroy',
+  stock_article_id: <%= @stock_article.id %>
+});

app/views/stockit/destroy.js.haml

@@ -1,8 +0,0 @@
--# please polish the following line if you know how, same in partial _destroy_fail
-var successDiv = $('<div class="alert fade in alert-success"><a class="close" data-dismiss="alert" href="#">#{escape_javascript(t('ui.marks.close').html_safe)}</a></div>');
-
-successDiv.append(document.createTextNode('#{escape_javascript(t('.notice', name: @article.name))}'));
-$('div.container-fluid').prepend(successDiv);
-
-$('#stockArticle-#{@article.id}').remove();
--# WARNING: Do not use a simple .fadeOut() above, because it conflicts with the show/hide function of unavailable articles.

app/views/stockit/edit.html.haml

@@ -1,3 +0,0 @@
-- title t('.title')
-
-= render :partial => 'form', :locals => {:stock_article => @stock_article}

app/views/stockit/edit.js.erb

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

app/views/stockit/index.html.haml

@@ -3,6 +3,30 @@
   :javascript
     $(function() {
       $('tr.unavailable').hide();
+      
+      // Subscribe to database changes.
+      // See publish/subscribe design pattern in /doc.
+      $(document).on('StockArticle#create', function(e) {
+        $.ajax({
+          url: '#{index_on_stock_article_create_stock_articles_path}',
+          type: 'get',
+          data: {id: e.stock_article_id},
+          contentType: 'application/json; charset=UTF-8'
+        });
+      });
+      
+      $(document).on('StockArticle#destroy', function(e) {
+        $('#stockArticle-' + e.stock_article_id).remove();
+      });
+      
+      $(document).on('StockArticle#update', function(e) {
+        $.ajax({
+          url: '#{index_on_stock_article_update_stock_articles_path}',
+          type: 'get',
+          data: {id: e.stock_article_id},
+          contentType: 'application/json; charset=UTF-8'
+        });
+      });
     })
 
 .well.well-small
@@ -17,7 +41,7 @@
     .btn-group
       = link_to_if @current_user.role_orders?, t('.order_online'), new_order_path(supplier_id: 0),
         class: 'btn', class: 'btn btn-primary'
-      = link_to t('.new_stock_article'), new_stock_article_path, class: 'btn'
+      = link_to t('.new_stock_article'), new_stock_article_path, remote: true, class: 'btn'
       = link_to t('.new_stock_taking'), new_stock_taking_path, class: 'btn'
       = link_to t('.show_stock_takings'), stock_takings_path, class: 'btn'
 
@@ -42,22 +66,9 @@
       %th= heading_helper StockArticle, :supplier
       %th= heading_helper StockArticle, :article_category
       %th
-  %tbody
-    - for article in @stock_articles
-      %tr{:class => stock_article_classes(article), :id => "stockArticle-#{article.id}"}
-        %td= link_to article.name, article
-        %td= article.quantity
-        %td= article.quantity_ordered
-        %th= article.quantity_available
-        %td= article.unit
-        %td= article.price
-        %td= number_to_percentage article.tax
-        %td= link_to article.supplier.name, article.supplier
-        %td= article.article_category.name
-        %td
-          = link_to t('ui.edit'), edit_stock_article_path(article), class: 'btn btn-mini'
-          = link_to t('ui.delete'), article, :method => :delete, :confirm => t('.confirm_delete'),
-            class: 'btn btn-mini btn-danger', :remote => true
+  %tbody#articles-tbody
+    - for stock_article in @stock_articles
+      = render :partial => 'stock_article', :locals => {:stock_article => stock_article}
 %p
   = t '.stock_worth'
   = number_to_currency StockArticle.stock_value

app/views/stockit/index_on_stock_article_create.js.erb

@@ -0,0 +1,14 @@
+// Handle more advanced DOM update after AJAX database manipulation.
+// See publish/subscribe design pattern in /doc.
+(function() {
+  $('#articles-tbody tr').removeClass('success');
+  
+  var stock_article_row = $('<%= j(render(
+    :partial => 'stock_article',
+    :locals => {
+      :stock_article => @stock_article
+    }
+  )) %>').addClass('success');
+
+  $('#articles-tbody').prepend(stock_article_row);
+})();

app/views/stockit/index_on_stock_article_update.js.erb

@@ -0,0 +1,14 @@
+// Handle more advanced DOM update after AJAX database manipulation.
+// See publish/subscribe design pattern in /doc.
+(function() {
+  $('#articles-tbody tr').removeClass('success');
+  
+  var stock_article_row = $('<%= j(render(
+    :partial => 'stock_article',
+    :locals => {
+      :stock_article => @stock_article
+    }
+  )) %>').addClass('success');
+
+  $('#stockArticle-<%= @stock_article.id %>').replaceWith(stock_article_row);
+})();

app/views/stockit/new.html.haml

@@ -1,22 +0,0 @@
-- title t('.title')
-
-- content_for :head do
-  :javascript
-    $(function() {
-      $('#article_search').autocomplete({
-          source: '#{articles_search_stock_articles_path}',
-          select: function(e, ui) {
-            alert(ui.item.value);
-            //location.href = '#{nil}' + ui.item.value;
-          }
-        });
-    })
-
-
-/
-  TODO: Fix this
-  %p
-  = t '.search_text'
-  = text_field_tag 'article_search'
-#stock_article_form
-  = render :partial => 'form', :locals => {:stock_article => @stock_article}

app/views/stockit/new.js.erb

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

app/views/stockit/show.html.haml

@@ -1,32 +1,22 @@
 - title @stock_article.name
+- content_for :javascript do
+  :javascript
+    $(function() {
+      // Subscribe to database changes.
+      // See publish/subscribe design pattern in /doc.
+      $(document).on('StockArticle#update', function(e) {
+        $.ajax({
+          url: '#{show_on_stock_article_update_stock_articles_path}',
+          type: 'get',
+          data: {id: e.stock_article_id},
+          contentType: 'application/json; charset=UTF-8'
+        });
+      });
+    });
 
 .row-fluid
   .span6
-    %dl.dl-horizontal
-      %dt= StockArticle.human_attribute_name 'supplier'
-      %dd= link_to @stock_article.supplier.name, @stock_article.supplier
-      %dt= StockArticle.human_attribute_name 'name'
-      %dd= @stock_article.name
-      %dt= StockArticle.human_attribute_name 'unit'
-      %dd= @stock_article.unit
-      %dt= StockArticle.human_attribute_name 'price'
-      %dd= number_to_currency @stock_article.price
-      %dt= StockArticle.human_attribute_name 'tax'
-      %dd= number_to_percentage @stock_article.tax
-      %dt= StockArticle.human_attribute_name 'deposit'
-      %dd= number_to_currency @stock_article.deposit
-      %dt= StockArticle.human_attribute_name 'fc_price'
-      %dd= number_to_currency @stock_article.fc_price
-      %dt= StockArticle.human_attribute_name 'article_category'
-      %dd= @stock_article.article_category.name
-      %dt= StockArticle.human_attribute_name 'note'
-      %dd= @stock_article.note
-      %dt= StockArticle.human_attribute_name 'quantity'
-      %dd= @stock_article.quantity
-      %dt= StockArticle.human_attribute_name 'quantity_available'
-      %dd= @stock_article.quantity_available
-    .form-actions
-      = link_to t('ui.edit'), edit_stock_article_path(@stock_article), class: 'btn'
+    = render :partial => 'stock_article_details', :locals => {:stock_article => @stock_article}
   
   .span6
     %h2= t('.stock_changes')

app/views/stockit/show_on_stock_article_update.js.erb

@@ -0,0 +1,13 @@
+// Handle more advanced DOM update after AJAX database manipulation.
+// See publish/subscribe design pattern in /doc.
+(function() {
+  var stock_article_details = $('<%= j(render(
+    :partial => 'stock_article_details',
+    :locals => {
+      :stock_article => @stock_article
+    }
+  )) %>');
+
+  $('#stockArticleDetails').replaceWith(stock_article_details);
+  $('h1').first().text('<%= j(@stock_article.name) %>');
+})();

app/views/stockit/update.js.erb

@@ -0,0 +1,15 @@
+$('div.container-fluid').prepend('<%= j(render(
+  :partial => 'shared/alert_success',
+  :locals => {
+    :alert_message => t('.notice', :name => @stock_article.name)
+  }
+)) %>');
+
+// Publish database changes.
+// See publish/subscribe design pattern in /doc.
+$(document).trigger({
+  type: 'StockArticle#update',
+  stock_article_id: <%= @stock_article.id %>
+});
+
+$('#modalContainer').modal('hide');