Tweaked function to update invoice status

TreyWW · Jan 20, 2025 · 8ad7306 · 8ad7306
1 parent 650f019
commit 8ad7306
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/frontend/templates/pages/invoices/dashboard/manage.html b/frontend/templates/pages/invoices/dashboard/manage.html
@@ -9,7 +9,7 @@
                     Invoice #{{ invoice.id }}
                     {% if invoice.reference %}({{ invoice.reference }}){% endif %}
                 </a>
-                <div class="mt-[2px]">
+                <div id="invoice-status" class="mt-[2px]">
                     {% if invoice.status == "paid" %}
                         <span class="text-success">
                             <i class="fa fa-check"></i> Paid
@@ -19,12 +19,11 @@
                             <i class="fa fa-sticky-note"></i> Draft
                         </span>
                     {% else %}
-                        {# pending or something else #}
                         <span class="text-neutral-content">
                             <i class="fa fa-hourglass-2"></i> {{ invoice.status | title }}
                         </span>
                     {% endif %}
-                    &nbsp;·&nbsp;
+                     · 
                     Status last changed on
                     {{ invoice.status_updated_at | date:"F" | slice:":3" }}{{ invoice.status_updated_at | date:" jS, Y" }}
                     at
@@ -78,21 +77,24 @@
                 class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 border border-base-300">
                 <li>
                     <button hx-swap="none"
-                            hx-post="{% url "api:finance:invoices:single:edit status" invoice_id=invoice.id status='draft' %}">
+                            hx-post="{% url "api:finance:invoices:single:edit status" invoice_id=invoice.id status='draft' %}"
+                            onclick="updateInvoiceStatus('Draft')">
                         <i class="fa-solid fa-note-sticky"></i>
                         Draft
                     </button>
                 </li>
                 <li>
                     <button hx-swap="none"
-                            hx-post="{% url "api:finance:invoices:single:edit status" invoice_id=invoice.id status='pending' %}">
+                            hx-post="{% url "api:finance:invoices:single:edit status" invoice_id=invoice.id status='pending' %}"
+                            onclick="updateInvoiceStatus('Pending')">
                         <i class="fa-solid fa-hourglass-half"></i>
                         Pending
                     </button>
                 </li>
                 <li>
                     <button hx-swap="none"
-                            hx-post="{% url "api:finance:invoices:single:edit status" invoice_id=invoice.id status='paid' %}">
+                            hx-post="{% url "api:finance:invoices:single:edit status" invoice_id=invoice.id status='paid' %}"
+                            onclick="updateInvoiceStatus('Paid')">
                         <i class="fa-solid fa-circle-check"></i>
                         Paid
                     </button>
@@ -122,3 +124,49 @@
                 allowtransparency="true"></iframe>
     </div>
 </div>
+<script>
+    function updateInvoiceStatus(status) {
+        const now = new Date();
+        const statusContainer = document.getElementById('invoice-status');
+
+        const formattedDate = now.toLocaleDateString('en-US', {
+            month: 'short', day: 'numeric', year: 'numeric'
+        }).replace(/(\d)(st|nd|rd|th),/, '$1$2,');
+
+        const formattedTime = now.toLocaleTimeString('en-US', {
+            hour: 'numeric', minute: 'numeric', hour12: true
+        });
+
+        let statusHTML;
+
+        switch (status) {
+            case 'Paid':
+                statusHTML = `
+                    <span class="text-success">
+                        <i class="fa fa-check"></i> Paid
+                    </span>`;
+                break;
+            case 'Draft':
+                statusHTML = `
+                    <span class="text-neutral-content">
+                        <i class="fa fa-sticky-note"></i> Draft
+                    </span>`;
+                break;
+            case 'Pending':
+                statusHTML = `
+                    <span class="text-neutral-content">
+                        <i class="fa fa-hourglass-2"></i> Pending
+                    </span>`;
+                break;
+            default:
+                console.error('Unknown status:', status);
+                return;
+        }
+
+        statusContainer.innerHTML = `
+            ${statusHTML}
+             · 
+            Status last changed on ${formattedDate} at ${formattedTime}
+        `;
+}
+</script>