tmhr/templates/manager/edit_department.html

{% extends 'includes/base.html' %}
{% load static %}
{% load gravatar %}
{% block styles %}
<link media="screen" rel="stylesheet" type="text/css" href="{% static 'multi-select/multi-select.css' %}">
{% endblock styles %}
{% block content %}
    <!-- End Navbar -->

<div class="container-fluid py-4 mt-6"> 
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-lg mx-4 ">
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-0 text-lg">Edit Department</p>
                        <button class="btn btn-success btn-sm ms-auto" id='saveBtn' onclick="saveFields()">
                            <span class="spinner-border spinner-border-sm" id="submitSpinner" role="status" aria-hidden="true" hidden></span>
                            <span id="submitText">Save</span>
                        </button>
                    </div>
                    <p class="mb-0 text-sm"></p>
                </div>
                <div class="card-body">
                    <form id="departmentForm">
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="form-control-label">Name</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" id="departmentName" name="name" value="{{department.name}}" required>
                                </div>
                            </div>
                            <label>Select Line Manager</label>
                            <div class="input-group">
                                <select class="form-control"  id="departmentManager">
                                    {% for p in managers %}
                                        <option value="{{ p.id }}">{{p.employee.first_name}} {{ p.employee.last_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm">Departments</p>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group mb-2">
                                    <select class="form-control form-control-user" multiple="multiple" id="employee_choice">
                                        {% for employee in employees %}
                                        <option value="{{ employee.id }}">{{employee.employee.first_name}} {{employee.employee.last_name}}</option>
                                        {% endfor %}
                                    </select> 
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'multi-select/jquery.multi-select.js' %}"></script>
<script src="{% static 'js/jquery.quicksearch.js' %}"></script>
<script> 
    //$('#employee_choice').multiSelect();
    //$('#employee_choice').multiSelect('select', {{ emp |safe }});

    $('#employee_choice').multiSelect({
        selectableHeader: "<input type='text' class='form-control mb-1' autocomplete='off' placeholder='search...'>",
        selectionHeader: "<input type='text' class='form-control mb-1' autocomplete='off' placeholder='search...'>",
        afterInit: function(ms){
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
        that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
        .on('keydown', function(e){
            if (e.which === 40){
                that.$selectableUl.focus();
                return false;
            }
        });
        that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
        .on('keydown', function(e){
            if (e.which == 40){
                that.$selectionUl.focus();
                return false;
            }
        });
        },
        afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();
        }
    });
    $('#employee_choice').multiSelect('select', {{ emp |safe }});
    function saveFields(){
        document.getElementById('submitSpinner').removeAttribute('hidden')
        document.getElementById('submitText').setAttribute('hidden', true)
        var dept_name = document.getElementById('departmentName').value;
        var manager = document.getElementById('departmentManager').value;
        event.preventDefault();
        var postData = {data: JSON.stringify({"department_id":{{department.id}}, "departmentName": dept_name, "lineManager": manager})};
        $.ajax({
            url: "{% url 'manager:edit_department' %}",
            dataType: 'json', 
            data: postData, 
            type: 'POST',
            headers: {'X-CSRFToken': csrftoken},
            success:function(results){
                document.getElementById('submitText').removeAttribute('hidden');
                document.getElementById('submitSpinner').setAttribute('hidden', 'true');
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
                },
            error:function(results){
                document.getElementById('submitText').removeAttribute('hidden');
                document.getElementById('submitSpinner').setAttribute('hidden', 'true');
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();

                } 
            });
    }
</script>
{% endblock scripts %}