Rails on the road

Nelle nostre applicazioni usiamo molto l’in_place_editor perchè spesso è utile per velocizzare la fase di modifica dei record. A me serviva fare un in_place per il campo updated_at, per fare in modo che cliccando sulla data apparissero le tre select con giorno, mese e anno.

Mentre facevo delle prove per vedere come risolvere il problema mi sono accorto che Internet Explorer da errore javascript quando in rjs si cerca di renderizzare un link_to_remote o un form_remote_tag. Per questo motivo per risolvere il problema ho associato dei comportamenti ad alcuni tag html per fare il submit del form e abilitare il cancel dopo aver cliccato per visualizzare l’in_place.

Di seguito il codice necessario per far funzionare l’in_place_editor per le date, sullo stesso principio ho fatto un plugin per abilitare l’in_place_editor con la validazione e con la gestione dei valori nulli nei record che pubblicherò in un articolo tra qualche giorno.

Ho creato un parziale chiamato _date.rhtml:

    1 <p><strong>Data:</strong>
    2 <span id="<%= obj %>_<%= attribute %>_<%= id %>_in_place_editor" class="in_place_date_editor_field" title="Click to edit" style="background-color: transparent; background-image: none;"><%= date.updated_at.to_s(:long_date) %></span>
    3 <span id="date" style="display:none">
    4   <% e_obj = obj 
    5   @obj  = date %>
    6 <form id="set-date" method="post" action="<%= url_for(:action =>"set_date", :id => date.id) %>">
    7 <%= date_select("#{e_obj}", :updated_at, :order => [:day, :month, :year]) %>
    8 <input type="button" value="ok" class="editor_ok_button_date" id="button_date"/>
    9 <a class="editor_cancel editor_cancel_date" id="<%= obj %>_<%= attribute %>_<%= id %>">cancel</a>
   10 </form>
   11 </span>
   12 <span id="saving" style="display:none">Saving...</span>
   13 </p>

Nelle vostre viste lo richiamate così:

    1 <%= render :partial => "/shared/date", :object => @obj, :locals => {:obj => "event", :attribute => "updated_at", :id => "#{@obj.id}"} %>

Adesso vi serve definire i behavior io uso l’event selector, per ora, magari appena ho due minuti di tempo rendo un po’ meno “artigianale” questa soluzione!!

Comunque mettete l’event selector e fate un file myeffect.js:

    1 /* Event:Selector */
    2 var Rules = {
    3   
    4   //lo metto per far funzionare il set-date
    5   '.in_place_date_editor_field:mouseover': function(element) {
    6     this.stopped = true;
    7     element.style.backgroundColor='rgb(255, 255, 153)';
    8   },
    9   '.in_place_date_editor_field:mouseout': function(element) {
   10     element.morph('background-color: rgb(255, 255, 255); background-image: none;');
   11   },
   12   
   13   '.in_place_date_editor_field:click': function(element) {
   14     Element.show('date');
   15     Element.hide(element.id);
   16     return false;
   17   },
   18   
   19   '.editor_ok_button_date:click': function(element) {
   20     formelement = $('set-date');
   21     formelement.onSubmit = new Ajax.Request(document.forms['set-date'].action, {asynchronous:true, evalScripts:true, onLoading:function(request){Element.hide('set-date');Element.show('saving')}, parameters:Form.serialize(formelement)}); return false;
   22     document.forms.submit();
   23   },
   24 
   25   '.editor_cancel_date:click': function(element) {
   26     Element.hide('date');
   27     Element.show(element.id+'_in_place_editor');
   28     return false;
   29   }
   30 
   31 }
   32 
   33 Event.observe(window, 'load', function(event){ EventSelectors.start(Rules); });

Poi in una vostra libreria, io l’ho chiamata UserDefinedFunction da includere nel progetto:

    1 module UserDefinedFunction
    2   module ClassMethods
    3     def date_field(object, attribute)
    4       class_eval %{
    5         def set_date
    6           item = #{object.to_s.camelize.constantize}.find(params[:id])
    7           item.update_attributes(params[:#{object}])
    8           render :update do |page|
    9             page.replace_html("show-date", :partial => "/shared/date", :object => item, :locals => {:obj => "#{object}", :attribute => "#{attribute}", :id => params[:id]} )
   10           end
   11         end
   12         }
   13       end
   14   end
   15 
   16 end
   17 end
   18 ActionController::Base.send(:include, UserDefinedFunction)
   19 ActionController::Base.send(:extend, UserDefinedFunction::ClassMethods)

Adesso se nel vostro controllore mettete set_date avete l’inplace editor per le select con l’hover colorato in giallo e il saving…

Adesso la funzione salva solo l’updated_at ma modificarla per far salvare qualunque campo di tipo date è un attimo.