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>ST1</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>ST2</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. If an incorrect grade is used the user will not be created.`);

            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  %}