penracourses/templates/accounts_bulk_create.html

{% extends 'generic/base.html' %}


{% block content %}
    {% if created_users %}
        <div class="alert alert-success">
            The following users have been created: {{created_users}}
        </div>
    {% endif %}

    {% if error %}
        <div class="alert alert-warning">
            {{error}}
        </div>
    {% endif %}

    {% if message %}
        <div class="alert alert-info">
            {{message}}
        </div>
    {% endif %}
    <p>
        Prepare a spreadsheet with the following format.

        <table>

            <tr><th>First name</th><th>Last name</th><th>Email</th><th>Grade</th><th>Supervisor</th><th>Supervisor email</th></tr>
            <tr><td>name 1</td><td>last name 1</td><td>email1@email.com</td><td>grade 1</td><td>supervisor 1</td><td>Supervisor@email.com</td></tr>
            <tr><td>name 2</td><td>last name 2</td><td>email2@email.com</td><td>grade 2</td><td>supervisor 2</td><td>Supervisor2@email.com</td></tr>
        </table>


        On your spreadsheet then "copy" the data (not including header), come to this page, put focus on the &lt;textarea> box and "paste" the text in. In some instance (large data sets) this might take a couple of seconds.
        Once there simply click the button and check the users that will be created below.

    </p>
    <p>Please note users created this way bypass some of the validations so check details such as email addresses are correct</p>
    <textarea id="csv" placeholder="Paste users content here" style="width: 300px; height: 100px;"></textarea><br/>
    <input type="button" value="Load Data" onclick="createTable()" >


    <div>
        <ul id="users-list">
        </ul>
    </div>

    <form id="user-list-form" method="post">
        {% csrf_token %}
        <input type="text" name="usersjson" id="user-list-json" hidden>
        <input type="submit" id="submit-users" name="submit-users" value="Create Users" style="display: none">
    </form>


    <script>
        function createTable() {

            // Get the data
            var excelData = document.getElementById('csv').value.trim()+"\n";

            // split into rows
            excelRow = excelData.split(String.fromCharCode(10));

            // split rows into columns
            for (i=0; i<excelRow.length; i++) {
                excelRow[i] = excelRow[i].split(String.fromCharCode(9));

            }

            // start to create the HTML table
            var myTable = document.createElement("table");
            var myTbody = document.createElement("tbody");

            // Loop over the rows

            var elements = ["first_name", "last_name", "email", "grade", "supervisor_name", "supervisor_email"];
            var users = [];

            $("#users-list").empty();
            $("#users-list").append(`The following users will be created. "undefined" fields will be left blank. Emails will be used as usernames. Supervisors will be created automatically if required.`);

            var emails = [];
            for (i=0; i<excelRow.length - 1; i++) {
                //users[i] = {};
                user = {};

                // create a row in the HTML table
                var myRow = document.createElement("tr");

                // Loop over the columns and add TD to the TR
                for (j=0; j<excelRow[i].length; j++) {
                    // Loop over the row columns
                    if (excelRow[i][j].length != 0) {
                        var myCell = document.createElement("td");
                        myCell.innerHTML = excelRow[i][j];
                        //users[i][elements[j]] = excelRow[i][j];
                        user[elements[j]] = excelRow[i][j];
                    }
                    myRow.appendChild(myCell);
                }
                myTbody.appendChild(myRow);
                users.push(user)
                emails.push(user.email)
                $("#users-list").append(`<li>Name: ${user.first_name} ${user.last_name}<br/>Email: ${user.email}<br/>Grade: ${user.grade}<br/>Supervisor: ${user.supervisor_name}<br/>Supervisor email: ${user.supervisor_email}</li>`)
            }
            myTable.appendChild(myTbody);

            $.post("{% url 'accounts_check_users' %}", { csrfmiddlewaretoken: "{{ csrf_token }}",
                user_list: JSON.stringify(emails) }, function(data) {
                console.log("Existing users", data)
            })

            $("#users-list").append(`${users.length} users to create.`)

            $("#user-list-json").val(JSON.stringify(users));
            $("#submit-users").show();

            // If we want to show the table
            //document.body.appendChild(myTable);



        }
    </script>
    <style>
        table{
            {% comment %} border-collapse: collapse; {% endcomment %}
            border: 1px solid silver;
        }
        tr{
            border-bottom: 1px solid silver;
        }
        td, th {
            border: 1px solid silver;
            padding: 2px;
            padding-left: 4px;
            padding-right: 4px;

        }

        #users-list li {
            border: 1px solid blue;
            margin: 10px;
            padding: 10px;
        }
    </style>
{% endblock content  %}