110 lines
3.9 KiB
HTML
110 lines
3.9 KiB
HTML
{% load static %}
|
|
{% load i18n %}
|
|
<div id="pending" >
|
|
|
|
<div class="oh-table" style="max-height: 425px; overflow-y: auto;" >
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="font-weight:bold; font-size:15px; color:black;">{% trans "Employee" %}</th>
|
|
<th style="font-weight:bold; font-size:15px; color:black;">{% trans "Progress" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for employee_info in employees_with_pending %}
|
|
<tr>
|
|
{% if perms.employee.change_employee %}
|
|
<td>
|
|
<a href="{% url 'employee-view-update' employee_info.employee.employee_id.id %}">
|
|
{{ employee_info.employee.employee_id }}</a>
|
|
</td>
|
|
<td style="position: relative;">
|
|
<a href="{% url 'employee-view-update' employee_info.employee.employee_id.id %}">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{ employee_info.completed_field_count }}%;"></div>
|
|
</div>
|
|
<div class="progress-text">{{ employee_info.completed_field_count }}% {% trans "Completed" %}</div>
|
|
</a>
|
|
</td>
|
|
{% else %}
|
|
<td>
|
|
{{ employee_info.employee.employee_id }}</a>
|
|
</td>
|
|
<td style="position: relative;">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{ employee_info.completed_field_count }}%;"></div>
|
|
</div>
|
|
<div class="progress-text">{{ employee_info.completed_field_count }}% {% trans "Completed" %}</div>
|
|
</a>
|
|
</td>
|
|
{% endif %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination controls -->
|
|
<div class=" float-end mt-3 mb-3">
|
|
{% if employees_with_pending.has_previous %}
|
|
<span
|
|
class="oh-card-dashboard__title"
|
|
style="cursor: pointer"
|
|
hx-target="#pending"
|
|
hx-get='{% url "emp-workinfo-complete" %}?page={{ employees_with_pending.previous_page_number }}'
|
|
hx-trigger="click delay:0.3s"
|
|
title="{% trans 'Previous Page' %}"
|
|
>
|
|
<ion-icon
|
|
name="caret-back-outline"
|
|
role="img"
|
|
class="md hydrated"
|
|
aria-label="caret back outline"
|
|
></ion-icon>
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% if employees_with_pending.has_next %}
|
|
<span
|
|
class="oh-card-dashboard__title float-end ms-2"
|
|
style="cursor: pointer"
|
|
hx-target="#pending"
|
|
hx-get='{% url "emp-workinfo-complete" %}?page={{ employees_with_pending.next_page_number }}'
|
|
hx-trigger="click delay:0.3s"
|
|
title="{% trans 'Next Page' %}"
|
|
>
|
|
<ion-icon
|
|
name="caret-forward-outline"
|
|
role="img"
|
|
class="md hydrated"
|
|
aria-label="caret back outline"
|
|
></ion-icon>
|
|
</span>
|
|
{% endif %}
|
|
{% if employees_with_pending.has_next or employees_with_pending.has_previous %}
|
|
<span class="oh-pagination__page float-end fw-bold">
|
|
{% trans "Page" %} {{ employees_with_pending.number }} {%trans "of" %}
|
|
{{employees_with_pending.paginator.num_pages }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Add an input event listener to the search bar
|
|
$("#employeeSearch").on("input", function() {
|
|
// Get the value entered in the search bar
|
|
var searchValue = $(this).val().toLowerCase();
|
|
|
|
// Iterate through each table row and hide/show based on the search value
|
|
$("table tbody tr").each(function() {
|
|
var employeeId = $(this).find("td:first-child").text().toLowerCase();
|
|
|
|
// Toggle the visibility of the row based on whether it contains the search value
|
|
$(this).toggle(employeeId.includes(searchValue));
|
|
});
|
|
});
|
|
});
|
|
</script>
|