390 lines
21 KiB
HTML
390 lines
21 KiB
HTML
{% load static %} {% load i18n %}
|
|
|
|
<style>
|
|
#progress {
|
|
width: 300px;
|
|
height: 30px;
|
|
border: 1px solid #ccc;
|
|
background-color: #f0f0f0;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: #4caf50;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: width 0.2s ease-in-out;
|
|
}
|
|
|
|
#progress-text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.custom-swal-container .swal2-styled {
|
|
display: block;
|
|
width: 70%;
|
|
}
|
|
</style>
|
|
<div id="employeeExport" class="oh-modal" role="dialog" aria-labelledby="employeeExport" aria-hidden="true">
|
|
<div id="employeeExportTarget" class="oh-modal__dialog" style="max-width: 750px"></div>
|
|
</div>
|
|
{% if perms.employee.change_employee %}
|
|
<div class="oh-modal" id="bulkUpdateModal" role="dialog" aria-labelledby="bulkUpdateModal" aria-hidden="true">
|
|
<div class="oh-modal__dialog" style="max-width: 750px">
|
|
<div class="oh-modal__dialog-header">
|
|
<h2 class="oh-modal__dialog-title" id="bulkUpdateModalLavel">
|
|
{% trans "Bulk Update Employees" %}
|
|
</h2>
|
|
<button class="oh-modal__close" aria-label="Close">
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
<div class="oh-modal__dialog-body p-0 pt-2 pb-4" id="bulkUpdateModalBody">
|
|
<form action="{%url 'employee-bulk-update' %}" method="post"
|
|
onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
|
|
id="bulkUpdateModalForm" class="oh-profile-section">
|
|
{% csrf_token %} {{update_fields_form.update_fields.label}}
|
|
{{update_fields_form.update_fields}}
|
|
{{update_fields_form.bulk_employee_ids}}
|
|
<div class="oh-modal__dialog-footer p-0 pt-4">
|
|
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
|
|
{% trans "Update" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<section class="oh-wrapper oh-main__topbar pb-3" x-data="{searchShow: false}">
|
|
<div class="oh-main__titlebar oh-main__titlebar--left">
|
|
<a href="{% url 'employee-view' %}" class="oh-main__titlebar-title fw-bold mb-0 text-dark"
|
|
hx-target="#view-container" style="cursor: pointer">{% trans "Employees" %}</a>
|
|
<a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search"
|
|
@click="searchShow = !searchShow">
|
|
<ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="oh-main__titlebar oh-main__titlebar--right">
|
|
<form hx-get='{% url "employee-filter-view" %}' id="filterForm" hx-target="#view-container" class="d-flex"
|
|
onsubmit="event.preventDefault()">
|
|
{% if emp %}
|
|
<div class="oh-input-group oh-input__search-group"
|
|
:class="searchShow ? 'oh-input__search-group--show' : ''">
|
|
<ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left"></ion-icon>
|
|
<input type="text" placeholder="{% trans 'Search' %}" name="search" id="employee-search"
|
|
class="oh-input oh-input__icon" aria-label="Search Input" onkeyup="$('.filterButton')[0].click();if(this.value) {
|
|
$('.search_text').html(this.value)
|
|
$(this).parent().find('#dropdown').show()
|
|
}else{
|
|
$(this).parent().find('#dropdown').hide()
|
|
}" onfocus="
|
|
if (this.value) {
|
|
$(this).parent().find('#dropdown').show()
|
|
}" onfocusout="
|
|
setTimeout(function() {
|
|
$('#dropdown').hide()
|
|
}, 300);
|
|
"
|
|
/>
|
|
<input type="text" hidden name="search_field">
|
|
<div class="custom-dropdown" id="dropdown">
|
|
<ul class="search_content">
|
|
<li>
|
|
<a href="#"
|
|
onclick="$('[name=search_field]').val('reporting_manager'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Reporting Manager" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"
|
|
onclick="$('[name=search_field]').val('department'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Department" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"
|
|
onclick="$('[name=search_field]').val('job_position'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Job Position" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"
|
|
onclick="$('[name=search_field]').val('job_role'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Job Role" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" onclick="$('[name=search_field]').val('shift'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Shift" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"
|
|
onclick="$('[name=search_field]').val('work_type'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Work Type" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#"
|
|
onclick="$('[name=search_field]').val('company'); $('.filterButton')[0].click()">
|
|
{% trans "Search" %} <b>{% trans "Company" %}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="oh-main__titlebar-button-container">
|
|
{% if emp %}
|
|
<input type="hidden" name="view" value="{{request.GET.view}}" id="employeeViewType" />
|
|
<ul class="oh-view-types ml-2" style="margin-bottom: 0">
|
|
<li class="oh-view-type employee-view-type" data-view="list">
|
|
<a id="list" onclick="$('#employeeViewType').val('list');setTimeout(() => { $('.filterButton')[0].click(); }, 10);"
|
|
class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}"
|
|
title='{% trans "List" %}'>
|
|
<ion-icon name="list-outline"></ion-icon>
|
|
</a>
|
|
</li>
|
|
<li class="oh-view-type employee-view-type" data-view="card">
|
|
<a id="card" onclick="$('#employeeViewType').val('card');setTimeout(() => { $('.filterButton')[0].click(); }, 10);"
|
|
class="oh-btn oh-btn--view {% if request.GET.view != 'list' %} oh-btn--view-active {% endif %}"
|
|
title='{% trans "Card" %}'>
|
|
<ion-icon name="grid-outline"></ion-icon>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
{% endif %}
|
|
{% if emp %}
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
|
|
<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
|
|
<div id="filterCount"></div>
|
|
</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open"
|
|
@click.outside="open = false" style="display: none">
|
|
{% include 'employee_filters.html' %}
|
|
<div class="oh-dropdown__filter-footer">
|
|
<button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
|
|
id="#employeeFilter" onclick="employeeFilter(this)">
|
|
{% trans "Filter" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
|
|
<ion-icon name="library-outline" class="mr-1"></ion-icon>
|
|
{% trans "Group By" %}
|
|
<div id="filterCount"></div>
|
|
</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open"
|
|
@click.outside="open = false" style="display: none">
|
|
<div class="oh-accordion">
|
|
<label for="id_field">{% trans "Group By" %}</label>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-12 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label" for="id_field">{% trans "Field" %}</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-12 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<select class="oh-select mt-1 w-100" id="id_field" name="field"
|
|
class="select2-selection select2-selection--single">
|
|
{% for field in gp_fields %}
|
|
<option value="{{ field.0 }}">{% trans field.1 %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.employee.change_employee or perms.employee.add_employee or perms.employee.delete_employee %}
|
|
<div class="oh-btn-group ml-2" onclick="event.preventDefault();">
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn oh-btn--dropdown" @click="open = !open" @click.outside="open = false">
|
|
{% trans "Actions" %}
|
|
</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none">
|
|
<ul class="oh-dropdown__items">
|
|
{% if perms.employee.add_employee %}
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link"
|
|
data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
|
|
hx-get="{% url 'work-info-import' %}" hx-target="#objectCreateModalTarget"
|
|
hx-on-htmx-after-request="setTimeout(() => {template_download(event);},100);">
|
|
{% trans "Import" %}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% if emp %}
|
|
{% if perms.employee.add_employee %}
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link" id="employee-info-export"
|
|
data-toggle="oh-modal-toggle" data-target="#employeeExport"
|
|
hx-get="{% url 'work-info-export' %}" hx-target="#employeeExportTarget">
|
|
{% trans "Export" %}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% if perms.employee.change_employee %}
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link" id="archiveEmployees">
|
|
{% trans "Archive" %}
|
|
</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link" id="unArchiveEmployees">
|
|
{% trans "Un-Archive" %}
|
|
</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a hx-get="{% url 'employee-bulk-mail' %}" hx-target="#mail-content" href="#"
|
|
class="oh-dropdown__link " data-toggle="oh-modal-toggle"
|
|
data-target="#sendMailModal">
|
|
{% trans "Bulk Mail" %}
|
|
</a>
|
|
</li>
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link" id="employeeBulkUpdateId">
|
|
{% trans "Bulk Update" %}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% if perms.employee.delete_employee %}
|
|
<li class="oh-dropdown__item">
|
|
<a href="#" class="oh-dropdown__link oh-dropdown__link--danger" data-action="delete"
|
|
id="deleteEmployees">
|
|
{% trans "Delete" %}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.employee.add_employee %}
|
|
<div class="oh-btn-group ml-2">
|
|
<div class="oh-dropdown">
|
|
<a href='{% url "employee-view-new" %}' class="oh-btn oh-btn--secondary">
|
|
<ion-icon name="add-outline"></ion-icon>
|
|
{% trans "Create" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
function clearFilterFromTag(element) {
|
|
let field_id = element.attr("data-x-field");
|
|
$(`[name=${field_id}]`).val("");
|
|
$(`[name=${field_id}]`).change();
|
|
// Update all elements with the same ID to have null values
|
|
let elementId = $(`[name=${field_id}]:last`).attr("id");
|
|
let spanElement = $(
|
|
`.oh-dropdown__filter-body:first #select2-id_${field_id}-container, #select2-${elementId}-container`
|
|
);
|
|
if (spanElement.length) {
|
|
spanElement.attr("title", "---------");
|
|
spanElement.text("---------");
|
|
}
|
|
$(".filterButton").click();
|
|
}
|
|
function clearAllFilter(element) {
|
|
$('[role="tooltip"]').remove();
|
|
let field_ids = $("[data-x-field]");
|
|
for (var i = 0; i < field_ids.length; i++) {
|
|
let item_id = field_ids[i].getAttribute("data-x-field");
|
|
|
|
$(`[name=${item_id}]`).val("");
|
|
$(`[name=${item_id}]`).change();
|
|
let elementId = $(`[name=${item_id}]:last`).attr("id");
|
|
let spanElement = $(
|
|
`.oh-dropdown__filter-body:first #select2-id_${item_id}-container, #select2-${elementId}-container`
|
|
);
|
|
if (spanElement.length) {
|
|
spanElement.attr("title", "---------");
|
|
spanElement.text("---------");
|
|
}
|
|
$(".filterButton").click();
|
|
localStorage.removeItem("savedFilters");
|
|
var url = window.location.href.split("?")[0];
|
|
window.history.replaceState({}, document.title, url);
|
|
}
|
|
}
|
|
function fieldLabel(value, field) {
|
|
if (field == "field") {
|
|
return $(`[value="${value}"]`).html();
|
|
}
|
|
return value;
|
|
}
|
|
$(document).ready(function () {
|
|
$("#employee-search").on("keyup", function () {
|
|
var searchFieldDiv = $("#searchFieldDiv");
|
|
var selectedField = searchFieldDiv.find(":selected");
|
|
if ($(this).val().trim() !== "") {
|
|
searchFieldDiv.show();
|
|
} else {
|
|
searchFieldDiv.hide();
|
|
selectedField.prop("selected", false);
|
|
}
|
|
$(".filterButton").eq(0).click();
|
|
});
|
|
$("#id_field").on("change", function () {
|
|
$(".filterButton")[0].click();
|
|
});
|
|
function filterFormSubmit(formId) {
|
|
var formData = $("#" + formId).serialize();
|
|
var count = 0;
|
|
formData.split("&").forEach(function (field) {
|
|
var parts = field.split("=");
|
|
var value = parts[1];
|
|
if (
|
|
value &&
|
|
value !== "unknown" &&
|
|
parts[0] != "field" &&
|
|
parts[0] != "view"
|
|
) {
|
|
count++;
|
|
}
|
|
});
|
|
$("#filterCount").empty();
|
|
if (count > 0) {
|
|
$("#filterCount").text(`(${count})`);
|
|
}
|
|
}
|
|
|
|
$("#filterForm").submit(function (e) {
|
|
filterFormSubmit("filterForm");
|
|
});
|
|
});
|
|
</script>
|
|
<script src="{% static 'employee/importExport.js' %}"></script>
|
|
<script src="{% static 'employee/search.js' %}"></script>
|