refactor: Cleaned up messages_list

fix: removed unused (breaking) response-targets extension from htmx refactor: cleaned up htmx.js a little enhance: Removed scrolling from topbar buttons for better UX fix: Fixed invoice deletion error messages Signed-off-by: Trey <[email protected]>
TreyWW · Jun 8, 2024 · 663f0d9 · 663f0d9
1 parent 583dfd0
commit 663f0d9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/assets/scripts/htmx.js b/assets/scripts/htmx.js
@@ -33,8 +33,9 @@ function htmx_resend(event) {
 }
 
 // https://htmx.org/docs/#config
-htmx.config.globalViewTransitions = true
-htmx.config.useTemplateFragments = true // for swapping of table items
+htmx.config.globalViewTransitions = true;
+htmx.config.useTemplateFragments = true; // for swapping of table items
+htmx.config.scrollIntoViewOnBoost = false; // to stop hx-boost scrolling down automatically
 
 
 window.addEventListener("DOMContentLoaded", (event) => {

diff --git a/backend/api/invoices/delete.py b/backend/api/invoices/delete.py
@@ -22,7 +22,8 @@ def delete_invoice(request: HtmxHttpRequest):
         return render(request, "base/toasts.html")
 
     if not invoice.has_access(request.user):
-        return JsonResponse({"message": "You do not have permission to delete this invoice"}, status=404)
+        messages.error(request, "You do not have permission to delete this invoice")
+        return render(request, "base/toasts.html")
 
     QuotaLimit.delete_quota_usage("invoices-count", request.user, invoice.id, invoice.date_created)
 

diff --git a/components/+messages_list.html b/components/+messages_list.html
@@ -1,6 +1,5 @@
-<div {% if not no_swap %}hx-swap-oob='{% if custom_oob %}{{ custom_oob }}{% else %}innerHTML:#messages_list{% endif %}
-     '
-     {% endif %}>
+<div
+    {% if not no_swap %}hx-swap-oob='{% if custom_oob %}{{ custom_oob }}{% else %}innerHTML:#messages_list{% endif %}'{% endif %}>
     {% for message in messages %}
         <div onclick="clicked_alert_to_close(this);"
              class="mb-4 rounded-lg alert {{ message.tags }}"
@@ -14,11 +13,11 @@
             </div>
             {% if autohide != False %}
                 <script>
-                var scriptElement = document.currentScript;
-                var divElement = scriptElement.parentNode;
-                setTimeout(function () {
-                    clicked_alert_to_close(divElement);
-                }, 7000);
+                    var scriptElement = document.currentScript;
+                    var divElement = scriptElement.parentNode;
+                    setTimeout(function () {
+                        clicked_alert_to_close(divElement);
+                    }, 7000);
                 </script>
             {% endif %}
         </div>

diff --git a/frontend/templates/base/_head.html b/frontend/templates/base/_head.html
@@ -45,7 +45,7 @@
                 integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV"
                 crossorigin="anonymous"></script>
         <script src="https://unpkg.com/htmx.org/dist/ext/multi-swap.js"></script>
-        <script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
+        {#        <script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>#}
         <script src="https://unpkg.com/[email protected]"></script>
     {% else %}
         {#        <script defer type="text/javascript" src="{% static "js/c/init.js" %}"></script>#}

diff --git a/frontend/templates/base/topbar/_topbar.html b/frontend/templates/base/topbar/_topbar.html
@@ -28,7 +28,7 @@
         <!-- Topbar Dropdown (LARGE ONLY) -->
         <ul class="menu menu-horizontal px-1" hx-boost="true">
             <li>
-                <a href="/dashboard/">My Dashboard</a>
+                <a href="/dashboard/" hx-boost="true" hx-swap="innerHTML show:no-scroll">My Dashboard</a>
             </li>
             {#            <li class="z-[50]">#}
             {#                <details>#}
@@ -44,13 +44,19 @@
             {#                </details>#}
             {#            </li>#}
             <li>
-                <a href="{% url "receipts dashboard" %}">My Receipts</a>
+                <a href="{% url "receipts dashboard" %}"
+                   hx-boost="true"
+                   hx-swap="innerHTML show:no-scroll">My Receipts</a>
             </li>
             <li>
-                <a href="{% url "invoices:dashboard" %}" hx-boost="true">My Invoices</a>
+                <a href="{% url "invoices:dashboard" %}"
+                   hx-boost="true"
+                   hx-swap="innerHTML show:no-scroll">My Invoices</a>
             </li>
             <li>
-                <a href="{% url "clients dashboard" %}" hx-boost="true">My Clients</a>
+                <a href="{% url "clients dashboard" %}"
+                   hx-boost="true"
+                   hx-swap="innerHTML show:no-scroll">My Clients</a>
             </li>
         </ul>
     </div>