DialogBrowseBranches.js #1

// opened from the create connector dialog
Mjs.Dialogs.BrowseBranches = {
    DIALOG_ID : "#dialog-browse-branches",
    DIALOG_OPTIONS : '__options__',

    open: function(options){
        var opts = {
            onFinish : jQuery.noop,
            onCancel : jQuery.noop
        };
        opts = jQuery.extend(opts, options);
        var bb = Mjs.Dialogs.BrowseBranches;
        $( bb.DIALOG_ID ).data(bb.DIALOG_OPTIONS, opts);
        Mjs.Dialogs.BrowseBranches._open();
    },
    _open: function() {
        $( Mjs.Dialogs.BrowseBranches.DIALOG_ID ).dialog( "open" );   
    },
    init: function() {
  
        var branch_id = "";
        $( Mjs.Dialogs.BrowseBranches.DIALOG_ID ).dialog({
            autoOpen: false
            , width:  Math.floor($('body').width()  * .70)
            , height:  Math.floor($('body').height() * .65)
            , modal: true,
            buttons: {
                "Finish": function() {    
                    // set #branch_name to selected value
                    var bb = Mjs.Dialogs.BrowseBranches;
                    var opts = $( bb.DIALOG_ID ).data(bb.DIALOG_OPTIONS);
                    opts.onFinish(branch_id);
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            open: function() {
            	// Get first 20 branches for example purposes
            	P4JsApi.p4("branches -m20", function(branches) {
                    var num = branches.size;
                    $("#branches tbody").find("tr").remove();
                    if (num > 0) {
                        $.each( branches.data, function( n, branch ){
                            $( "#branches tbody" ).append( "<tr>" +
                                                           "<td class=branchtd id = branch_id data-branch-id=" + branch.Branch + ">" + P4JsApi.encodeForHTML(branch.Branch) + "</td>" + 
                                                           "<td class=branchtd >" + P4JsApi.encodeForHTML(branch.Owner) + "</td>" +   
                                                           "<td class=branchtd >" + P4JsApi.encodeForHTML(branch.Description) + "</td>" +
                                                           "</tr>" ); 
                        });
                        
                        $(".branchtd").click(function( event ) {
                            $("tr").removeClass("diffColor");
                            $(this).parents("tr").addClass("diffColor");
                            branch_id = event.target.getAttribute("data-branch-id");
                        });
                    }
                    else {
                        // Put something in the table that there are no branches
                    }         
                }); // end of p4 branches callback    
            }
        }); 
        
    }
};