first comit
This commit is contained in:
139
templates/manager/edit_department.html
Normal file
139
templates/manager/edit_department.html
Normal file
@@ -0,0 +1,139 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user