WIP Issue 449 progress merge

assets/scripts/bank_details_dropdown.js

@@ -0,0 +1,92 @@
+window.handleBankDetailsDropdown = function(event) {
+    const targetId = event.detail.target.id;
+
+    if (targetId === 'bank-details-dropdown') {
+        // Get the JSON response
+        const response = JSON.parse(event.detail.xhr.responseText);
+
+        // Clear the dropdown content first
+        const dropdown = document.getElementById('bank-details-dropdown');
+        dropdown.innerHTML = '';
+
+        // Check if the response is successful and contains bank details
+        if (response.status === 'success' && response.bank_details.length > 0) {
+            response.bank_details.forEach(function (bank_detail) {
+                // Create a new list item for each bank detail
+                const li = document.createElement('li');
+                li.classList.add('p-2', 'hover:bg-gray-200', 'flex', 'flex-row', 'justify-between', 'items-center', 'cursor-pointer');
+
+                // Set the bank detail as data attributes for the dropdown item
+                const detailDiv = document.createElement('div');
+                detailDiv.classList.add('flex', 'flex-col', 'items-start');
+                detailDiv.setAttribute('data-account-holder-name', bank_detail.account_holder_name);
+                detailDiv.setAttribute('data-account-number', bank_detail.account_number);
+                detailDiv.setAttribute('data-sort-code', bank_detail.sort_code);
+
+                // Set the inner HTML with bank details
+                detailDiv.innerHTML = `
+                    <span class="font-semibold">${bank_detail.account_holder_name}</span>
+                    <span class="text-sm text-gray-500">Account Number: ${bank_detail.account_number}</span>
+                    <span class="text-sm text-gray-500">Sort Code: ${bank_detail.sort_code}</span>
+                `;
+
+                // Add an event listener to populate form fields when clicked
+                li.addEventListener('click', function () {
+                    document.querySelector('input[name="account_holder_name"]').value = bank_detail.account_holder_name;
+                    document.querySelector('input[name="account_number"]').value = bank_detail.account_number;
+                    document.querySelector('input[name="sort_code"]').value = bank_detail.sort_code;
+
+                    // Recheck the fields to enable/disable the save button
+                    checkFieldsFilled();
+
+                    dropdown.classList.add('opacity-0');
+                    setTimeout(() => {
+                        dropdown.style.display = 'none';
+                    }, 0); 
+                });
+
+                // Create the delete icon and handle delete request with fetch
+                const deleteIcon = document.createElement('div');
+                deleteIcon.innerHTML = '<i class="fa fa-trash text-red-500"></i>';
+                deleteIcon.classList.add('ml-4', 'cursor-pointer');
+
+                deleteIcon.addEventListener('click', function (e) {
+                    e.stopPropagation();
+                    // Send a fetch request to delete the bank detail
+                    fetch(`/api/invoices/delete_bank_detail/${bank_detail.id}/`, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.status === 'success') {
+                            // Remove the deleted item from the dropdown
+                            li.remove();
+                            console.log('Bank detail deleted successfully');
+                        } else {
+                            console.error('Error deleting bank detail:', data.message);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error deleting bank detail:', error);
+                    });
+                });
+
+                // Append both the details div and delete icon to the list item
+                li.appendChild(detailDiv);
+                li.appendChild(deleteIcon);
+
+                // Append the new list item to the dropdown
+                dropdown.appendChild(li);
+            });
+
+            dropdown.style.display = 'block';
+            dropdown.classList.remove('opacity-0');
+        } else {
+            // Show a message if no bank details are available
+            dropdown.innerHTML = '<li class="p-2">No saved bank details found</li>';
+        }
+    }
+};

backend/admin.py

@@ -5,6 +5,7 @@
 
 from backend.models import (
     Client,
+    BankDetail,
     Invoice,
     InvoiceURL,
     InvoiceItem,
@@ -45,6 +46,7 @@
     [
         UserSettings,
         Client,
+        BankDetail,
         Invoice,
         InvoiceURL,
         InvoiceItem,

backend/api/invoices/bank_details.py

@@ -0,0 +1,34 @@
+from django.http import JsonResponse
+from django.views.decorators.http import require_GET, require_http_methods
+from backend.models import DefaultValues, BankDetail
+
+@require_GET
+def get_bank_details(request):
+    try:
+        default_values = DefaultValues.objects.get(user=request.user)
+        bank_details = default_values.bank_details.all()
+
+        bank_details_list = [
+            {
+                'id': bank_detail.id,
+                'account_holder_name': bank_detail.account_holder_name,
+                'account_number': bank_detail.account_number,
+                'sort_code': bank_detail.sort_code,
+            }
+            for bank_detail in bank_details
+        ]
+
+        return JsonResponse({'status': 'success', 'bank_details': bank_details_list})
+    except DefaultValues.DoesNotExist:
+        return JsonResponse({'status': 'error', 'message': 'No saved bank details found'}, status=404)
+
+@require_http_methods(["DELETE"])
+def delete_bank_detail(request, bank_detail_id):
+    try:
+        bank_detail = BankDetail.objects.get(id=bank_detail_id)
+        bank_detail.delete()
+        return JsonResponse({'status': 'success'})
+    except BankDetail.DoesNotExist:
+        return JsonResponse({'status': 'error', 'message': 'Bank detail not found'}, status=404)
+    except Exception as e:
+        return JsonResponse({'status': 'error', 'message': str(e)}, status=500)

backend/api/invoices/urls.py

@@ -1,6 +1,6 @@
 from django.urls import path, include
 
-from . import fetch, delete, edit, manage
+from . import bank_details, fetch, delete, edit, manage
 from .create import set_destination
 from .create.services import add_service
 from .recurring.delete import delete_invoice_recurring_profile_endpoint
@@ -58,6 +58,8 @@
     path("single/", include((SINGLE_INVOICE_URLS, "single"), namespace="single")),
     path("recurring/", include((RECURRING_INVOICE_URLS, "recurring"), namespace="recurring")),
     path("create/", include((CREATE_INVOICE_URLS, "create"), namespace="create")),
+    path("get_bank_details/", bank_details.get_bank_details, name="get_bank_details"),
+    path("delete_bank_detail/<int:bank_detail_id>/", bank_details.delete_bank_detail, name='delete_bank_detail')
 ]
 
 app_name = "invoices"