nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UPDT] TEMPLATES: New page for employee work info complete table view

Browse Source
This commit is contained in:
Horilla
2024-06-15 19:19:55 +05:30
parent 2fcedda1b6
commit 992f160260
2 changed files with 115 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
templates/dashboard.html
View File

@@ -838,56 +838,29 @@
hx-trigger="load">
</div>
</div>
<div
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
{% if request.user.employee_get.employee_user_id.is_superuser %}
<div
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
>
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
</div>
<!-- Search bar -->
<div class="oh-search-bar mb-3">
<input type="text" id="employeeSearch" placeholder="Search Employee">
</div>
<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>
<!-- Add more table headers as needed -->
<th style="font-weight:bold; font-size:15px; color:black;">{% trans "Progress" %}</th>
</tr>
</thead>
<tbody>
{% for employee_info in employees_with_pending %}
<tr>
<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>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
</div>
{% endif %}
<!-- Search bar -->
<div class="oh-search-bar mb-3">
<input type="text" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
hx-trigger="keyup changed dealy:0.3s" id="employeeSearch" name="search" placeholder="Search Employee">
</div>
{% if request.user.employee_get.employee_user_id.is_superuser or request.user|is_reportingmanager %}
<div class="oh-card-dashboard__body"
hx-get="{% url 'emp-workinfo-complete' %}"
hx-trigger="load">
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
<div class="oh-modal__dialog">
@@ -1062,21 +1035,6 @@
$(anchorElement).parent().find('#newTab').hide();
}
$(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>
<script src="{% static 'build/js/dashboardDriver.js' %}"></script>

97
templates/work_info_complete.html Normal file
View File

@@ -0,0 +1,97 @@
{% 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>
<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>
</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="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="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>