From a23f3a8ffb8d028ba321e3329ba5dac89f49ce3e Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Tue, 2 Jan 2024 13:49:02 +0530
Subject: [PATCH] [UPDT] PAYROLL: Payroll federal tax CRUD operation by adding
 htmx

---
 .../payroll/tax/filing_status_creation.html   |  23 ++-
 .../payroll/tax/filing_status_edit.html       |  27 +++-
 .../payroll/tax/filing_status_view.html       | 144 ++++++++++++------
 .../payroll/tax/tax_bracket_creation.html     |  39 ++---
 .../payroll/tax/tax_bracket_edit.html         |  23 ++-
 payroll/views/tax_views.py                    |  20 +--
 6 files changed, 189 insertions(+), 87 deletions(-)

diff --git a/payroll/templates/payroll/tax/filing_status_creation.html b/payroll/templates/payroll/tax/filing_status_creation.html
index 2fd6554a6..7dc1d09e5 100644
--- a/payroll/templates/payroll/tax/filing_status_creation.html
+++ b/payroll/templates/payroll/tax/filing_status_creation.html
@@ -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"
diff --git a/payroll/templates/payroll/tax/filing_status_edit.html b/payroll/templates/payroll/tax/filing_status_edit.html
index 519248771..959539f60 100644
--- a/payroll/templates/payroll/tax/filing_status_edit.html
+++ b/payroll/templates/payroll/tax/filing_status_edit.html
@@ -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>
\ No newline at end of file
+</div>
diff --git a/payroll/templates/payroll/tax/filing_status_view.html b/payroll/templates/payroll/tax/filing_status_view.html
index 40fa3f8ee..976584e57 100644
--- a/payroll/templates/payroll/tax/filing_status_view.html
+++ b/payroll/templates/payroll/tax/filing_status_view.html
@@ -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 %}
-
diff --git a/payroll/templates/payroll/tax/tax_bracket_creation.html b/payroll/templates/payroll/tax/tax_bracket_creation.html
index 28bcc05e5..ab54d91d2 100644
--- a/payroll/templates/payroll/tax/tax_bracket_creation.html
+++ b/payroll/templates/payroll/tax/tax_bracket_creation.html
@@ -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 %}
diff --git a/payroll/templates/payroll/tax/tax_bracket_edit.html b/payroll/templates/payroll/tax/tax_bracket_edit.html
index 26ca58ecb..e2a51c6c9 100644
--- a/payroll/templates/payroll/tax/tax_bracket_edit.html
+++ b/payroll/templates/payroll/tax/tax_bracket_edit.html
@@ -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>
diff --git a/payroll/views/tax_views.py b/payroll/views/tax_views.py
index 17c505b5d..8321d4c4d 100644
--- a/payroll/views/tax_views.py
+++ b/payroll/views/tax_views.py
@@ -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)