edx-platform/common/static/js/course_groups/cohorts.js

// structure stolen from http://briancray.com/posts/javascript-module-pattern

var CohortManager = (function ($) {
    // private variables and functions

    // using jQuery
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = $.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }  
    $.ajaxSetup({
        crossDomain: false, // obviates need for sameOrigin test
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    // constructor
    var module = function () {
        var el = $(".cohort_manager");
        // localized jquery
        var $$ = function (selector) {
            return $(selector, el)
        }
        var state_init = "init";
        var state_summary = "summary";
        var state_detail = "detail";
        var state = state_init;
        
        var url = el.data('ajax_url');
        var self = this;

        // Pull out the relevant parts of the html
        // global stuff
        var errors = $$(".errors");

        // cohort summary display
        var summary = $$(".summary");
        var cohorts = $$(".cohorts");
        var show_cohorts_button = $$(".controls .show_cohorts");
        var add_cohort_input = $$(".cohort_name");
        var add_cohort_button = $$(".add_cohort");
        
        // single cohort user display
        var detail = $$(".detail");
        var detail_header = $(".header", detail);
        var detail_users = $$(".users");
        var detail_page_num = $$(".page_num");
        var users_area = $$(".users_area");
        var add_members_button = $$(".add_members");
        var op_results = $$(".op_results");
        var cohort_id = null;
        var cohort_title = null;
        var detail_url = null;
        var page = null;

        // *********** Summary view methods

        function show_cohort(item) {
            // item is a li that has a data-href link to the cohort base url
            var el = $(this);
            cohort_title = el.text();
            detail_url = el.data('href');
            cohort_id = el.data('id');
            state = state_detail;
            render();
            return false;
        }

        function add_to_cohorts_list(item) {
            var li = $('<li><a href="#"></a></li>');
            $("a", li).text(item.name)
                .data('href', url + '/' + item.id)
                .addClass('link')
                .click(show_cohort);
            cohorts.append(li);
        };

        function log_error(msg) {
            errors.empty();
            errors.append($("<li />").text(msg).addClass("error"));
        };
        
        function load_cohorts(response) {
            cohorts.empty();
            if (response && response.success) { 
                response.cohorts.forEach(add_to_cohorts_list);
            } else {
                log_error(response.msg || "There was an error loading cohorts");
            }
            summary.show();
        };


        function added_cohort(response) {
            if (response && response.success) {
                add_to_cohorts_list(response.cohort);
            } else {
                log_error(response.msg || "There was an error adding a cohort");
            }                
        }

        // *********** Detail view methods

        function remove_user_from_cohort(username, cohort_id, row) {
            var delete_url = detail_url + '/delete';
            var data = {'username': username}
            $.post(delete_url, data).done(function() {row.remove()})
                .fail(function(jqXHR, status, error) {
                    log_error('Error removing user ' + username + 
                              ' from cohort. ' + status + ' ' + error);
                });
        }

        function add_to_users_list(item) {
            var tr = $('<tr><td class="name"></td><td class="username"></td>' + 
                       '<td class="email"></td>' + 
                       '<td class="remove"></td></tr>');
            var current_cohort_id = cohort_id;

            $(".name", tr).text(item.name);
            $(".username", tr).text(item.username);
            $(".email", tr).text(item.email);

            $(".remove", tr).html('<a href="#">remove</a>')
                .click(function() { 
                    remove_user_from_cohort(item.username, current_cohort_id, tr);
                    return false;
                });
            
            detail_users.append(tr);
        };

                
        function show_users(response) {
            detail_users.html("<tr><th>Name</th><th>Username</th><th>Email</th></tr>");
            if (response && response.success) { 
                response.users.forEach(add_to_users_list);
                detail_page_num.text("Page " + response.page + " of " + response.num_pages);
            } else {
                log_error(response.msg || 
                          "There was an error loading users for " + cohort.title);
            }
            detail.show();
        }
            

        function added_users(response) {
            function adder(note, color) {
                return function(item) {
                    var li = $('<li></li>')
                    if (typeof item === "object" && item.username) {
                        li.text(note + ' ' + item.name + ', ' + item.username + ', ' + item.email);
                    } else if (typeof item === "object" && item.msg) {
                        li.text(note + ' ' + item.username_or_email + ', ' + item.msg);
                    } else {
                        // string
                        li.text(note + ' ' + item);
                    }
                    li.css('color', color);
                    op_results.append(li);
                }
            }
            op_results.empty();
            if (response && response.success) {
                response.added.forEach(adder("Added", "green"));
                response.present.forEach(adder("Already present:", "black"));
                response.conflict.forEach(adder("In another cohort:", "purple"));
                response.unknown.forEach(adder("Unknown user:", "red"));
                users_area.val('')
            } else {
                log_error(response.msg || "There was an error adding users");
            }                
        }

        // ******* Rendering

            
        function render() {
            // Load and render the right thing based on the state
             
            // start with both divs hidden
            summary.hide();
            detail.hide();
            // and clear out the errors
            errors.empty();
            if (state == state_summary) {
                $.ajax(url).done(load_cohorts).fail(function() {
                    log_error("Error trying to load cohorts");
                });
            } else if (state == state_detail) {
                detail_header.text("Members of " + cohort_title);
                $.ajax(detail_url).done(show_users).fail(function() {
                    log_error("Error trying to load users in cohort");
                });
            }
        }

        show_cohorts_button.click(function() { 
            state = state_summary;
            render();
            return false;
        });
        
        add_cohort_input.change(function() {
            if (!$(this).val()) {
                add_cohort_button.removeClass('button').addClass('button-disabled');
            } else {
                add_cohort_button.removeClass('button-disabled').addClass('button');
            }
        });

        add_cohort_button.click(function() { 
            var add_url = url + '/add';
            data = {'name': add_cohort_input.val()}
            $.post(add_url, data).done(added_cohort);
            return false;
        });

        add_members_button.click(function() { 
            var add_url = detail_url + '/add';
            data = {'users': users_area.val()}
            $.post(add_url, data).done(added_users);
            return false;
        });


    };

    // prototype
    module.prototype = {
        constructor: module,
    };

    // return module
    return module;
})(jQuery);

$(window).load(function () {
    var my_module = new CohortManager();
})