Rails application मध्ये data sequencing (Sequencing data in rails application)

असे खुप सारे plugins आहेत जे data sequencing साठी वापरले जातात. काहीतरी सारखाच जे jQuery librabry बरोबर वापरल आहे.
Single Table Inheritence असल्याचे गृहीत धरु ज्यामध्ये १५ पेक्षा जास्त types आसतिल. म्हणजेच १५ पेक्षा जास्त inherited modules आणि ह्या साठी आसे पण गृहीत धरु की sequence करून एक column असेल.
आता समजा views मध्ये आपल्याला buttons लावायचे असतील तर एवढ्या साऱ्या changes करावे लागतील आणि जर पुढे जाउन नविन views आले तर मग त्याचे styling आणि अजुन काही घटक लक्षात राहणार शक्य नाही.
मग मी विचार केला की jQuery वापरयाची.

Controller :

# reset sequence ही action javascript ajax function वापरून call केली आहे.
# हा Js function client id , model type ( constant ) आणि recods चा array आणि index हे parameters constant update करायला pass केले आहेत. 
def reset_sequence
  model_type = params[:model_type]
  paramssequences = params[:sequences]
  clientid = params[:client_id].to_i
  paramssequences.each do |sequences|
    sequences.each do |sequence_array|
      sequence_record = sequence_array.split(",")
      id = sequence_record[0].to_i
      sequence = sequence_record[1].to_i
      object = model_type.singularize.camelize.constantize
      object.update_all({:sequence => sequence}, {:id => id, :client_id => clientid})
    end
  end
  respond_to do |format|
  format.js {
    render :update do |page|
      # जर हा block काढला तर missing template चा error येऊ शकतो. 
    end
  }
  end
end 

Routes :

reset_sequence

View :

  <table id="first_sub_types">
  <tbody>
  <tr>
    <th>Sequence</th>
    <th>Name</th>
    <th>Edit</th>
  </tr>
  <% first_sub_types.each do |subtype| %>
  <tr>
    <td><%= subtype.sequence %></td>
    <td><%= subtype.name %></td>
    <td><%= link_to "Edit", edit_first_sub_type_path(subtype.id) %></td>
  </tr>
  <% end %>
  </tbody>
  </table>

 <script type="text/javascript">  
    fetch_data("FirstSubType", 3, "first_sub_types")
  </script>  

Javascript :
sequencing.js नावाची नवी file बनवली.
Sequnce.js :
fetch_data( modelType, clientID, divID ) नावाचे सर्वात पाहिले function बनवले.
ज्या views मध्ये sequencing ची गरज आहे अशा views मधून buttons द्वारे हे call केले जाइल.
modeltype उदारणार्थ ("FirstSubType", 3, "first_sub_types") पाठवले जात आहे.                

/*
* fetch_data function द्वारे आपण id आणि table चे नाव jquery object मध्ये convert करणार.
* हेच build_html function call करेल created, model type(which model to be called), company id and divid असे objects वेगले pass करून.
*/
function fetch_data( modelType, clientID, divID ){
    var obj = jQuery(divID);
    build_html( obj, modelType, clientID, divID );
  }

आपण आताच काही variables pass केले view मधून आणि build_html हे function call केले.

/*
* हे function फक्त fetch_data() ह्या function द्वारे call करता येइल.
* build_html सर्वात पाहिले object चा tag कुठला आहे हे check करेल.                 will first check the object's tag name by jquery function .is() and based on this checkIfobject will be assigned a value.
* This assigned value will be used for sorting <td> OR <li> OR <option>.
* After checking the html tag the objects width is changed to fit the buttons on the right side.
* At the end loopingList() is called
*/
function build_html( obj, modelType, clientID, divID ){
    var checkIfobject;    

    if(obj.is("table")){
        checkIfobject = "TaBle"
    }else if(obj.is("ul")){
        checkIfobject = "UL"
    }else if(obj.is("select")){
        checkIfobject = "SelEct"
    }    

    var trheight = jQuery(obj).children().children('tr.bg1').height()
    var tdheight = (parseInt(trheight) * (jQuery(obj).children().children('tr').length-1)) + jQuery(obj).children().children('tr:first').height()
    jQuery(obj).after("<table cellpadding="0" cellspacing="0" id="setter" style="float: left;"><tbody><tr><th align="center" style="height: "+tdheight+"px;" valign="middle"> <input id="upbutton" name="upbutton" type="button" value=" ↑ " /> <br /> <input id="downbutton" name="downbutton" type="button" value=" ↓ " /> <input disabled="disabled" id="setbutton" name="setbutton" onclick="sendRequest( \""+checkIfobject+"\", \""+modelType+"\", \""+clientID+"\", \""+divID+"\" )" style="color: grey;" type="button" value="Set" /> </th></tr> </tbody></table>")

    var setterwidth = ( 100 * parseFloat(jQuery('#setter').css('width')) / parseFloat(jQuery('#setter').parent().css('width')) );
    var tblewidth = (99.7-setterwidth)
    jQuery(obj).css({
        "width" : tblewidth+"%",
        "float" : "left"
    });
    loopingList( obj, checkIfobject );
}
  

हे function add केलेल्या table च्या बाजूला नविन html बनवेल. पाहिले तर हा table डाव्या बाजूला shift होइल.          
आपण आता पर्यंत काही width लावली नाहीये जेणेकरून जी buttons ना width असेल तीच ह्याला पण apply होइल.
आपण object check केल्या मुले तो object UL आहे की SELECT हे आपल्यला समजेल आणि भविष्यामध्ये UL आणि SELECT objects पण वापरू शकू.
आता पर्यंत आपण जे केला ते फक्त styling साठी होता. पण आता मुख्य function call करुया loopingList( obj, checkIfobject );

/*
* हे function hidden field add करेल जे data indexing ला मदत करेल.          
* check_button() सर्वात शेवटी add केले आहे.
*/
function loopingList( obj, checkIfobject ){
    var list, mxLength;
    switch( checkIfobject ){
        case "TaBle":
            list = obj.children().children('tr');
            mxLength = list.length-1
            break;
        case "UL":
            list = obj.children('li');
            break;
        case "SelEct":
            list = obj.children('option');
            break;
    }

    list.each(function( index ) {
        var listitem = this;
        var jListitem = jQuery(listitem);        

        jListitem.attr('onClick', "updateList(this)");
        jListitem.children('td:first').append("<input class="supportField" id="hidden_"+index+"" type="hidden" value=""+index+"" />");
    });

    check_button( checkIfobject, mxLength );
}  

ह्याने प्रत्येक row ला १ Hidden field add होइल जे index/sequence ला update करेल.
पहिल्यांदा जेव्हा ही file call केली जाईल किंवा default, data चे index हे function स्वता set करेल.
पण हे नंतर modify होइल वेगळ्या function ने. जर database मध्ये काही values नसतील तर user ने click केल्या वर sequence default setting प्रमाणे change होइल.

/*
* हे function button click वर up and down sorting संभलते.
*/
function check_button( checkIfobject, mxLength ){
    jQuery('#upbutton').click(function(){
        var jListitem = jQuery(".selected_listitem");

        if( jListitem.length > 0 ){
            jQuery("#setbutton").removeAttr("disabled");
            jQuery("#setbutton").removeAttr("style");
            var prevlistitem = jListitem.prev();
            var prevlistitemIndex = prevlistitem.children("td:first").children("input.supportField").val();
            var jListitemIndex = jListitem.children("td:first").children("input.supportField").val();

            if( jListitemIndex == 1 ){ 
            }else{
                var innerhmtl = prevlistitem.html();
                prevlistitem.remove();
                jListitem.after(""+innerhmtl+"");
                jListitem.children("td:first").children("input.supportField").val(prevlistitemIndex);
                jListitem.next().children("td:first").children("input.supportField").val(jListitemIndex);
            }
        }else{
            alert("Select Record for sorting");
        }
    });

    jQuery('#downbutton').click(function(){
        var jListitem = jQuery(".selected_listitem");

        if( jListitem.length > 0 ){
            jQuery("#setbutton").removeAttr("disabled");
            jQuery("#setbutton").removeAttr("style");
            var nextlistitem = jListitem.next();
            var nextlistitemIndex = nextlistitem.children("td:first").children("input.supportField").val();
            var jListitemIndex = jListitem.children("td:first").children("input.supportField").val();

            if( jListitemIndex == mxLength ){
            }else{
                var innerhmtl = nextlistitem.html();
                nextlistitem.remove();
                jListitem.before(""+innerhmtl+"");
                jListitem.children("td:first").children("input.supportField").val(nextlistitemIndex);
                jListitem.prev().children("td:first").children("input.supportField").val(jListitemIndex);
            }
        }else{
            alert("Select Record for Sorting");
        }
    });

}
  

वरील function up and down sorting button च्या onclick वर चालते.
ह्या प्रमाणे असेही आहे की कमीतकमी १ row तरी selected असली पाहिजे नाहीतर alert message येइल.
सर्वात शेवटी प्रमुख function जे controller च्या  reset_sequence ह्या action ला ajax request पाठवली जाते.

function sendRequest( checkIfobject, modelType, clientID, divID ){
    var jListitem = jQuery(".selected_listitem");
    if( jListitem.length > 0 ){
      var list = jQuery(divID).children().children('tr');
      var sequences = []

      list.each(function(){
        var listitem = this;
        var jListitem = jQuery(listitem);
        var indNum = list.index(listitem);        

        if( indNum > 0 ){
            var id = jListitem.children("td:first").children("input.supportFieldID").val();
            var sequence = jListitem.children("td:first").children("input.supportField").val();
            sequences.push([id,sequence]);
        }
      });    

      jQuery.ajax({
        type: 'get',
        url: '/reset_sequence',
        data:
        {
            'sequences[]' : sequences,
            "model_type" : modelType,
            "client_id" : clientID
        },
        success: function(transform){
            //window.location.reload();
            window.location.href="/manage_company_utilities/"+modelType;
        }
      });
    }else{
            alert("Select Record for Sorting");
    }
}
  

The original post can be viewed on my personal blog as Sequencing data in rails application