/app/views/admin/employees/index.html.erb

<%content_for :head do%>
    <%javascript "jquery.typewatch"-%>
    <script type="text/javascript" src="/javascripts/jsTree/jquery.jstree.js"></script>
    <%javascript "jquery.maestro.jstreehelper"%>
<%end%>

<%content_for :title do%>
    Employee Directory
<%end%>

<%content_for :sidebar do%>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
      <div class="portlet-header ui-widget-header">
        <a href="#" id="clear_name_query" style="display:none">
          <%=image_tag "delete.png"%>
        </a>
        Name
        <span class="ui-icon ui-icon-circle-arrow-s"></span>
      </div>
      <div class="portlet-content">
        <div class="search-bar">

          <label for="name_query">Name:</label>
          <input id="name_query" type="text" name="q" style="border:1px solid #CCC;" class="ui-corner-all"/>
        </div>
      </div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
      <div class="portlet-header ui-widget-header">
        <a href="#" id="clear_dep_query" style="display:none">
          <%=image_tag "delete.png"%>
        </a>
        Departments & Roles
        <span class="ui-icon ui-icon-circle-arrow-s"></span></div>
      <div class="portlet-content">
        <%=render :partial=>"/admin/departments/tree"%>
      </div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
      <div class="portlet-header ui-widget-header">
        <a href="#" id="clear_org_query" style="display:none">
          <%=image_tag "delete.png"%>
        </a>
        Organizational Model
        <span class="ui-icon ui-icon-circle-arrow-s"></span></div>
      <div class="portlet-content">
        <%=org_tree_html%>
      </div>
    </div>
<%end%>

<div class="content-box" style="float:left;">
  <div class="content-box-wrapper" style="padding:2px;margin:2px;">
    <h3 class="ui-box-header ui-corner-top">Employees:</h3>
    <div id="employees">
      <%=render :partial=>"employee_list"%>
    </div>
  </div>
</div>
<div class="clear"></div>
<div>
  <a href="employees/new" id="add_employee">Add Employee</a>
</div>
<br>

<script language="javascript">
    function filterEmployees(url){
        var name_query = $("#name_query").val();
        url = url || "/admin/employees";
        var filter = {}
        if (name_query && name_query != "")
        {
            filter.q = name_query;
            $("#clear_name_query").fadeIn();
        }
        else
        {
            $("#clear_name_query").fadeOut();
        }

        var dep_roles = getDepartmentAndRoleSelections();
        var org_units = getOrganizationalUnitSelections();

        var has_dep_query = false;
        if (dep_roles[0].length > 0){
            filter["departments[]"] = dep_roles[0];
            has_dep_query = true;
        }

        if (dep_roles[1].length > 0){
            filter["roles[]"] = dep_roles[1];
            has_dep_query = true;
        }

        has_dep_query ? $("#clear_dep_query").fadeIn() : $("#clear_dep_query").fadeOut();
        
        if (org_units.length > 0){
            filter["organizational_units[]"] = org_units;
            $("#clear_org_query").fadeIn();
        }
        else{
            $("#clear_org_query").fadeOut();
        }

        $.get(url,filter,function(response){
            var $e = $("#employees");
            $e.slideUp(100);
            $("#employees").html(response);
            $e.slideDown(100);
        });
    }

    function getDepartmentAndRoleSelections(){
        var tree = $.jstree._reference("#role_tree");
        var selections = tree.get_selected();
        var departments = [];
        var roles = [];
        $.each(selections,function(index,selected){
            var $sel = $(selected);
            var rel = $sel.attr("rel");
            if (rel == "department") departments.push(selected.id);
            if (rel == "organizational-role"){
                roles.push(selected.id);
                departments.push($sel.attr('data-department-id'));
            }
        });
        return [departments,roles];
    }

    function getOrganizationalUnitSelections(){
        var tree = $.jstree._reference("#org_tree");
        var selections = tree.get_selected();
        var org_units = [];
        $.each(selections,function(index,selected){
            org_units.push(selected.id);
            if (selected.children.length > 0){
                collectChildUnits(selected.children,org_units);
            }
        });
        return org_units;
    }

    function collectChildUnits(org_units, selected){
        $.each(org_units,function(index,unit){
            selected.push(unit.id);
            if (unit.children.length > 0){
                collectChildUnits(unit.children,selected);
            }
        });
    }




    $(function(){

        $(".digg_pagination a").live('click',function(e){
            e.preventDefault();
            var url = $(this).attr("href");
            filterEmployees(url);            
        });
        $("#clear_name_query").click(function(){
            $("#name_query").val("");
            filterEmployees();
        });

        $("#clear_dep_query").click(function(){
            $.jstree._reference("#role_tree").deselect_all();
            filterEmployees();
        });
        
        $("#clear_org_query").click(function(){
            $.jstree._reference("#org_tree").deselect_all();
            filterEmployees();
        });

        $("#name_query").typeWatch({
            wait:750,
            captureLength:-1,
            callback:function(){filterEmployees();},
            highlight:false
        });

        $(".delete_employee").click(function(){
            var id = this.id.split("_").pop();
            $.ajax({
                type: 'post',
                data: {_method:'delete',employee:{id:id}},
                dataType:null,
                complete: function(request){
                    $("#emp_row_" + id).remove();
                    //var row = $(this).parent('tr');
                    //$(row).remove();
                },
                url: 'employees/' + id
            });
        });

        $("#add_employee").button();


        $("#role_tree").jstree({
            core : {animation:50},
            plugins : [ "themes", "html_data", "ui"]
        })
                .bind("select_node.jstree",function(event,data){filterEmployees();})
                .bind("deselect_node.jstree",function(event,data){filterEmployees();});

        $("#org_tree").jstree({
            core : {animation:50},
            plugins : [ "themes", "html_data", "ui" ]
        })
                .bind("select_node.jstree",function(event,data){filterEmployees();})
                .bind("deselect_node.jstree",function(event,data){filterEmployees()});
    });
</script>