[UPDT] PAYROLL: Payroll federal tax CRUD operation by adding htmx

This commit is contained in:
Horilla
2024-01-02 13:49:02 +05:30
parent af346c6877
commit a23f3a8ffb
6 changed files with 189 additions and 87 deletions

View File

@@ -1,4 +1,19 @@
{% load i18n %}
{% load i18n %} {% if messages %}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
</div>
{% endfor %}
<script>
setTimeout(function () {
$(".oh-modal__close").click();
}, 1000);
</script>
</div>
{% endif %}
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
<h5>{% trans "Filing Status" %}</h5>
@@ -9,11 +24,11 @@
data-dismiss="oh-modal"
aria-label="Close"
data-toggle="oh-modal-toggle"
hx-target="#FilingStatusFormTarget"
onclick="location.reload()"
hx-get="{% url 'filing-status-search' %}"
hx-target="#FilingStatusList"
>
<ion-icon name="close-outline"></ion-icon>
</button>
</button>
<form
hx-post="{%url 'create-filing-status' %}"
hx-target="#FilingStatusFormTarget"

View File

@@ -1,4 +1,19 @@
{% load i18n %}
{% load i18n %} {% if messages %}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
</div>
{% endfor %}
<script>
setTimeout(function () {
$(".oh-modal__close").click();
}, 1000);
</script>
</div>
{% endif %}
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
<h5>{% trans "Filing Status" %}</h5>
@@ -9,7 +24,8 @@
data-dismiss="oh-modal"
aria-label="Close"
data-toggle="oh-modal-toggle"
hx-target="#FilingStatusFormTarget"
hx-get="{% url 'filing-status-search' %}"
hx-target="#FilingStatusList"
>
<ion-icon name="close-outline"></ion-icon>
</button>
@@ -19,12 +35,9 @@
>
{% csrf_token %} {{ form.as_p }}
<div class="oh-modal__dialog-footer">
<button
type="submit"
class="oh-btn oh-btn--secondary oh-btn--shadow"
>
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
{% trans "Save" %}
</button>
</div>
</form>
</div>
</div>

View File

@@ -1,57 +1,115 @@
{% extends 'index.html' %}
{% block content %}
{% load i18n %}
{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
<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 "Filing Status" %}</h1>
<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">
<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 name="search" type="text" class="oh-input oh-input__icon" aria-label="Search Input" placeholder="{% trans 'Search' %}"
hx-get="{% url 'filing-status-search' %}" hx-target="#FilingStatusList" hx-trigger='keyup delay:500ms'
/>
</div>
<div class="oh-main__titlebar-button-container">
<div class="oh-btn-group ml-2">
<div>
<a class="oh-btn oh-btn--secondary oh-btn--shadow"
data-toggle="oh-modal-toggle"
data-target="#FilingStatusModal"
hx-get = "{% url 'create-filing-status' %}"
hx-target="#FilingStatusFormTarget"
>
<ion-icon class="me-2" name="add-outline"></ion-icon>{% trans "Create" %}</a>
</div>
</div>
<div class="oh-main__titlebar oh-main__titlebar--left">
<h1 class="oh-main__titlebar-title fw-bold">
{% trans "Filing Status" %}
</h1>
<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">
{% if status %}
<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
name="search"
type="text"
class="oh-input oh-input__icon"
aria-label="Search Input"
placeholder="{% trans 'Search' %}"
hx-get="{% url 'filing-status-search' %}"
hx-target="#FilingStatusList"
hx-trigger="keyup delay:500ms"
/>
</div>
{% endif %}
<div class="oh-main__titlebar-button-container">
<div class="oh-btn-group ml-2">
<div>
<a
class="oh-btn oh-btn--secondary oh-btn--shadow"
data-toggle="oh-modal-toggle"
data-target="#FilingStatusModal"
hx-get="{% url 'create-filing-status' %}"
hx-target="#FilingStatusFormTarget"
>
<ion-icon class="me-2" name="add-outline"></ion-icon>
{% trans "Create" %}
</a>
</div>
</div>
</div>
</div>
</section>
<div id="FilingStatusList" class="oh-wrapper">
<!-- including filing status -->
{% include 'payroll/tax/filing_status_list.html' %}
{% if status %}
{% include 'payroll/tax/filing_status_list.html' %}
{% else %}
<div class="oh-wrapper">
<div class="oh-404">
<img
style="width: 190px; height: 190px"
src="{% static 'images/ui/tax.png' %}"
class="oh-404__image mb-4"
alt="Page not found. 404."
/>
<h5 class="oh-404__subtitle">
{% trans "No tax filing status has been recorded." %}
</h5>
</div>
</div>
{% endif %}
</div>
</main>
<div class="oh-modal" id="FilingStatusModal" role="dialog" aria-labelledby="FilingStatusModal" aria-hidden="true">
<div class="oh-modal__dialog " style="max-width: 550px;" id="FilingStatusFormTarget"></div>
<div
class="oh-modal"
id="FilingStatusModal"
role="dialog"
aria-labelledby="FilingStatusModal"
aria-hidden="true"
>
<div
class="oh-modal__dialog"
style="max-width: 550px"
id="FilingStatusFormTarget"
></div>
</div>
<div class="oh-modal" id="TaxBracketModal" role="dialog" aria-labelledby="TaxBracketModal" aria-hidden="true">
<div class="oh-modal__dialog" style="max-width: 550px" id="TaxBracketFormTarget"></div>
<div
class="oh-modal"
id="TaxBracketModal"
role="dialog"
aria-labelledby="TaxBracketModal"
aria-hidden="true"
>
<div
class="oh-modal__dialog"
style="max-width: 550px"
id="TaxBracketFormTarget"
></div>
</div>
<script>
$(document).ready(function () {
$(".oh-accordion-meta__header").click(function () {
var target = $(this).data("target");
$(this).toggleClass("oh-accordion-meta__header--show");
$(target).toggleClass("d-none");
});
$(document).ready(function () {
$(".oh-accordion-meta__header").click(function () {
var target = $(this).data("target");
$(this).toggleClass("oh-accordion-meta__header--show");
$(target).toggleClass("d-none");
});
});
</script>
{% endblock content %}

View File

@@ -1,11 +1,8 @@
{% load i18n %}
{% if messages %}
{% load i18n %} {% if messages %}
<div class="oh-alert-container">
{% for message in messages %}
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
{% endfor %}
{% for message in messages %}
<div class="oh-alert oh-alert--animated {{message.tags}}">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
<div class="oh-modal__dialog-header">
@@ -18,8 +15,10 @@
data-dismiss="oh-modal"
aria-label="Close"
data-toggle="oh-modal-toggle"
hx-target="#FilingStatusFormTarget"
onclick="location.reload()"
data-target="#filingStatus{{filing_status_id}}"
hx-get="{%url 'tax-bracket-list' filing_status_id=filing_status_id %}"
hx-target="#taxbracketList{{filing_status_id}}"
onclick="$(`[data-target='#filingStatus{{filing_status_id}}']`).addClass('oh-accordion-meta__header--show');$('#filingStatus{{filing_status_id}}').removeClass('d-none')"
>
<ion-icon name="close-outline"></ion-icon>
</button>
@@ -35,17 +34,23 @@
</div>
</form>
</div>
{% comment %} <script>
{% comment %}
<script>
// Function to display the pop-up message
function showPopupMessage(message) {
alert(message);
}
// Event listener for form submission
document.getElementById("TaxBracketFormTarget").addEventListener("submit", function(event) {
var maxIncomeInput = document.getElementById("id_max_income");
if (maxIncomeInput.value === "") {
showPopupMessage("The value for maximum income will be set to infinity.");
}
});
</script> {% endcomment %}
document
.getElementById("TaxBracketFormTarget")
.addEventListener("submit", function (event) {
var maxIncomeInput = document.getElementById("id_max_income");
if (maxIncomeInput.value === "") {
showPopupMessage(
"The value for maximum income will be set to infinity."
);
}
});
</script>
{% endcomment %}

View File

@@ -1,4 +1,19 @@
{% load i18n %}
{% load i18n %} {% if messages %}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
</div>
{% endfor %}
<script>
setTimeout(function () {
$(".oh-modal__close").click();
}, 1000);
</script>
</div>
{% endif %}
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
<h5>{% trans "Tax Bracket" %}</h5>
@@ -9,8 +24,10 @@
data-dismiss="oh-modal"
aria-label="Close"
data-toggle="oh-modal-toggle"
hx-target="#TaxBracketFormTarget"
onclick="$('#TaxBracketModal').removeClass('oh-modal--show');"
data-target="#filingStatus{{filing_status_id}}"
hx-get="{%url 'tax-bracket-list' filing_status_id=filing_status_id %}"
hx-target="#taxbracketList{{filing_status_id}}"
onclick="$(`[data-target='#filingStatus{{filing_status_id}}']`).addClass('oh-accordion-meta__header--show');$('#filingStatus{{filing_status_id}}').removeClass('d-none')"
>
<ion-icon name="close-outline"></ion-icon>
</button>

View File

@@ -39,10 +39,7 @@ def filing_status_view(request):
"""
status = FilingStatus.objects.all()
if status.exists():
template = "payroll/tax/filing_status_view.html"
else:
template = "payroll/tax/filing_status_empty.html"
template = "payroll/tax/filing_status_view.html"
context = {"status": status}
return render(request, template, context)
@@ -62,8 +59,8 @@ def create_filing_status(request):
filing_status_form = FilingStatusForm(request.POST)
if filing_status_form.is_valid():
filing_status_form.save()
messages.success(request, _("Filing status created successfully"))
return HttpResponse("<script>window.location.reload()</script>")
messages.success(request, _("Filing status created successfully "))
filing_status_form = FilingStatusForm()
return render(
request,
"payroll/tax/filing_status_creation.html",
@@ -98,10 +95,6 @@ def update_filing_status(request, filing_status_id):
if filing_status_form.is_valid():
filing_status_form.save()
messages.success(request, _("Filing status updated successfully."))
return HttpResponse(
response.content.decode("utf-8") + "<script>location.reload();</script>"
)
return render(
request,
"payroll/tax/filing_status_edit.html",
@@ -121,7 +114,6 @@ def filing_status_delete(request, filing_status_id):
database and redirects to the filing status view.
"""
try:
filing_status = FilingStatus.objects.get(id=filing_status_id)
filing_status.delete()
@@ -135,7 +127,7 @@ def filing_status_delete(request, filing_status_id):
@login_required
@permission_required("payroll.view_filingstatus")
def filing_status_search(request):
search = request.GET.get("search")
search = request.GET.get("search") if request.GET.get("search") else ""
status = FilingStatus.objects.filter(filing_status__icontains=search)
previous_data = request.GET.urlencode()
data_dict = parse_qs(previous_data)
@@ -187,6 +179,7 @@ def create_tax_bracket(request, filing_status_id):
tax_bracket_form = TaxBracketForm(initial={"filing_status_id": filing_status_id})
context = {
"form": tax_bracket_form,
"filing_status_id": filing_status_id,
}
if request.method == "POST":
tax_bracket_form = TaxBracketForm(
@@ -218,6 +211,7 @@ def update_tax_bracket(request, tax_bracket_id):
:param tax_bracket_id: The ID of the tax bracket to update.
"""
tax_bracket = TaxBracket.objects.get(id=tax_bracket_id)
filing_status_id = tax_bracket.filing_status_id.id
tax_bracket_form = TaxBracketForm(instance=tax_bracket)
if request.method == "POST":
@@ -231,10 +225,10 @@ def update_tax_bracket(request, tax_bracket_id):
messages.success(
request, _("The tax bracket has been updated successfully.")
)
return HttpResponse("<script>window.location.reload()</script>")
context = {
"form": tax_bracket_form,
"filing_status_id": filing_status_id,
}
return render(request, "payroll/tax/tax_bracket_edit.html", context)