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

[UPDT]sticky action for deduction list view

Browse Source
This commit is contained in:
Horilla
2023-09-07 17:41:16 +05:30
parent 8874b2209d
commit cb3f8552c3
2 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
payroll/templates/payroll/deduction/list_deduction.html
View File

@@ -29,7 +29,7 @@
<div class="oh-sticky-table__th">{% trans "Amount" %}</div>
<div class="oh-sticky-table__th">{% trans "Based On" %}</div>
<div class="oh-sticky-table__th">{% trans "Rate" %}</div>
<div class="oh-sticky-table__th"></div>
<div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
</div>
</div>
{% for deduction in deductions %}
@@ -75,7 +75,7 @@
{{deduction.rate}}
{% endif %}
</div>
<div class="oh-sticky-table__td">
<div class="oh-sticky-table__td oh-sticky-table__right">
<div class="oh-btn-group">
<a
onclick="event.stopPropagation();"
@@ -125,7 +125,7 @@
name="page"
class="oh-pagination__input"
value="{{deductions.number}}"
hx-get="{% url 'filter-deduction' %}?{{pd}}"
hx-get="{% url 'filter-deduction' %}?{{pd}}&view=list"
hx-target="#payroll-deduction-container"
min="1"
/>
@@ -134,18 +134,18 @@
<ul class="oh-pagination__items">
{% if deductions.has_previous %}
<li class="oh-pagination__item oh-pagination__item--wide">
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&view=list&page=1" class="oh-pagination__link">{% trans "First" %}</a>
</li>
<li class="oh-pagination__item oh-pagination__item--wide">
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&page={{ deductions.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&view=list&page={{ deductions.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
</li>
{% endif %}
{% if deductions.has_next %}
<li class="oh-pagination__item oh-pagination__item--wide">
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&page={{ deductions.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&view=list&page={{ deductions.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
</li>
<li class="oh-pagination__item oh-pagination__item--wide">
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&page={{ deductions.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
<a hx-target='#payroll-deduction-container' hx-get="{% url 'filter-deduction' %}?{{pd}}&view=list&page={{ deductions.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
</li>
{% endif %}

59
payroll/templates/payroll/deduction/view_deduction.html
View File

@@ -1,4 +1,16 @@
{% extends 'index.html' %} {% block content %} {% load i18n %} {% load yes_no %}
<style>
.oh-sticky-table__right{
position: sticky;
right: 0;
background-color: #fff;
}
.oh-sticky-table__top{
z-index: 12 !important;
top: 0;
}
</style>
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
<div class="oh-main__titlebar oh-main__titlebar--left">
<h1 class="oh-main__titlebar-title fw-bold">{% trans "Deductions" %}</h1>
@@ -38,20 +50,28 @@
hx-swap="innerHTML"
/>
</div>
<div class="oh-dropdown" x-data="{open: false}">
<button class="oh-btn ml-2" @click="open = !open">
<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
</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 'payroll/deduction/filter_deduction.html' %}
</div>
</div>
<div class="oh-main__titlebar-button-container">
<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
<li class="oh-view-type deduction-view-type" data-view="list">
<a hx-get="{% url 'deduction-view-type' %}?view=list" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view "><ion-icon name="list-outline" role="img" class="md hydrated" aria-label="list outline"></ion-icon></a>
</li>
<li class="oh-view-type deduction-view-type" data-view="card">
<a hx-get="{% url 'deduction-view-type' %}?view=card" hx-target="#payroll-deduction-container" class="oh-btn oh-btn--view"><ion-icon name="grid-outline" role="img" class="md hydrated" aria-label="grid outline"></ion-icon></a>
</li>
</ul>
<div class="oh-dropdown" x-data="{open: false}">
<button class="oh-btn ml-2" @click="open = !open">
<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
</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 'payroll/deduction/filter_deduction.html' %}
</div>
</div>
<div class="oh-btn-group ml-2">
<div>
<a
@@ -74,9 +94,20 @@
</div>
</section>
<div id="payroll-deduction-container" class="oh-wrapper">
{% include 'payroll/deduction/list_deduction.html' %}
{% comment %} {% include 'payroll/deduction/list_deduction.html' %} {% endcomment %}
{% include 'payroll/deduction/card_deduction.html' %}
</div>
<div class="oh-modal" id="DeductionModal" role="dialog" aria-labelledby="DeductionModal" aria-hidden="true">
<div class="oh-modal__dialog" style="max-width: 600px" id="OneDeductionTarget"></div>
</div>
<script>
$(document).ready(function () {
$(".deduction-view-type").click(function (e) {
e.preventDefault();
var view = $(this).attr("data-view")
$("#filter-deduction").attr("hx-vals", `{"view":"${view}"}`);
$("#filterView").val(view);
});
});
</script>
{% endblock content %}