Merge branch 'main' into code-cleanup-db

.github/workflows/run_tests.yml

@@ -65,10 +65,16 @@ jobs:
             echo "output.css is not created"
             exit 1
           fi
-          if [ -f frontend/static/js/bundle.js ] && [ -f frontend/static/js/bundle.js.map ]; then
-            echo "bundle.js and bundle.js.map are created"
+          if [ -d frontend/static/js/c/ ]; then
+            echo "webpack has been built"
           else
-            echo "bundle.js and/or bundle.js.map are not created"
+            echo "frontend/static/js/c/ was not created from webpack build"
+            exit 1
+          fi
+          if [ -f webpack-stats.json ]; then
+            echo "webpack has built webpack-stats to work with chunks"
+          else
+            echo "webpack-stats was not built so cannot work with chunks"
             exit 1
           fi
 

.gitignore

@@ -150,6 +150,10 @@ Writerside/**
 frontend/static/src/output.css
 frontend/static/js/bundle.js
 frontend/static/js/bundle.js.map
+frontend/static/js/c/*
+
+# Webpack
+webpack-stats.json
 
 # Pulumi
 infrastructure/aws/pulumi/Pulumi.dev.yaml

assets/scripts/font_awesome.js

@@ -0,0 +1,4 @@
+import '@fortawesome/fontawesome-free/js/fontawesome'
+import '@fortawesome/fontawesome-free/js/solid'
+import '@fortawesome/fontawesome-free/js/regular'
+import '@fortawesome/fontawesome-free/js/brands'

assets/scripts/htmx.js

@@ -0,0 +1,49 @@
+import 'htmx.org';
+import 'hyperscript.org';
+
+window.htmx = require('htmx.org');
+window._hyperscript = require('hyperscript.org');
+window._hyperscript.browserInit();
+
+function htmx_resend(event) {
+  let eventType;
+  if (event.detail.requestConfig.triggeringEvent) {
+    eventType = event.detail.requestConfig.triggeringEvent.type
+  } else {
+    eventType = "retry"
+  }
+
+  let timeout;
+
+  if (event.detail.error.includes("429")) {
+    timeout = 4000;
+  } else {
+    timeout = 2000;
+  }
+
+  setTimeout(function () {
+    console.log("Sending HTMX retry event")
+    htmx.trigger(event.detail.elt, eventType);
+  }, timeout);
+}
+
+// https://htmx.org/docs/#config
+htmx.config.globalViewTransitions = true
+htmx.config.useTemplateFragments = true // for swapping of table items
+
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  document.body.addEventListener("htmx:sendError", htmx_resend);
+  document.body.addEventListener("htmx:responseError", htmx_resend);
+  document.body.addEventListener("htmx:loadError", htmx_resend);
+  document.body.addEventListener("htmx:afterRequest", () => {
+    const drawer = document.getElementById("service_list_drawer");
+
+    if (drawer) {
+      drawer.checked = false;
+    }
+  });
+  document.body.addEventListener('htmx:configRequest', (event) => {
+    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
+  })
+});

assets/scripts/init.js

@@ -1,10 +1,6 @@
 import 'htmx.org';
 import 'hyperscript.org';
 
-import '@fortawesome/fontawesome-free/js/fontawesome'
-import '@fortawesome/fontawesome-free/js/solid'
-import '@fortawesome/fontawesome-free/js/regular'
-import '@fortawesome/fontawesome-free/js/brands'
 import Alpine from 'alpinejs'
 import $ from 'jquery'
 
@@ -15,4 +11,26 @@ window._hyperscript.browserInit();
 window.Alpine = Alpine
 
 window.jQuery = $;
-window.$ = $;
+window.$ = $;
+
+document.addEventListener("DOMContentLoaded", function () {
+  const drawer = document.getElementById("service_list_drawer");
+  var togglers = document.querySelectorAll("#service_list_togglers");
+
+  drawer.addEventListener("change", function () {
+    if (drawer.checked) {
+      document.getElementById("service_list_toggler").checked = true;
+      for (let i = 0; i < togglers.length; i++) {
+        togglers[i].checked = true
+      }
+      document.getElementById("logo_single_service_list_toggler").checked = true;
+    } else {
+      document.getElementById("service_list_toggler").checked = false;
+      for (let i = 0; i < togglers.length; i++) {
+        togglers[i].checked = false
+      }
+      document.getElementById("logo_single_service_list_toggler").checked = false;
+    }
+    ;
+  });
+});

assets/scripts/receipt_downloads.js

@@ -0,0 +1,29 @@
+/**
+ * Downloads a file from the specified URL.
+ *
+ * @param {string} downloadUrl - The URL of the file to be downloaded.
+ */
+
+/*#__NO_RENAME__*/
+window.download_file = function Download_file(downloadUrl) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', downloadUrl, true);
+  xhr.onload = function () {
+    if (this.status === 200) {
+      var response = JSON.parse(this.responseText);
+
+      // Use the download_link and filename from the JSON response
+      var downloadLink = response.download_link;
+      var filename = response.filename;
+
+      // Trigger the download using a link element
+      var a = document.createElement('a');
+      a.href = downloadLink;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  };
+  xhr.send();
+}

frontend/templates/base/_head.html

@@ -1,4 +1,6 @@
 {% load static %}
+{% load render_bundle from webpack_loader %}
+{% load tz_detect %}
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -29,7 +31,7 @@
         <!-- AlpineJS -->
         <script defer
                 src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
-        {#    <script src="{% static 'js/init-alpine.js' %}"></script>#}
+        {#    <script src="{% static 'js/c/init-alpine.js' %}"></script>#}
         <!-- SimpleMDE -->
         {#        <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>#}
         {#
@@ -46,18 +48,17 @@
         <script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
         <script src="https://unpkg.com/[email protected]"></script>
     {% else %}
-        <script src="{% static "js/bundle.js" %}"></script>
+        {#        <script defer type="text/javascript" src="{% static "js/c/init.js" %}"></script>#}
+        {#        <script defer type="text/javascript" src="{% static "js/c/htmx.js" %}"></script>#}
+        {#        <script defer type="text/javascript" src="{% static "js/c/font_awesome.js" %}"></script>#}
+        {#        {% render_bundle 'all' 'js' %}#}
+        {% render_bundle 'init' 'js' %}
+        {% render_bundle 'htmx' 'js' %}
+        {% render_bundle 'font_awesome' 'js' %}
         <!-- Tailwind & DaisyUI -->
         <link rel="stylesheet" href="{% static 'src/output.css' %}">
     {% endif %}
-    <script src="{% static 'js/receipt_download.js' %}"></script>
-    <script>
-        // https://htmx.org/docs/#config
-        htmx.config.globalViewTransitions = true
-        htmx.config.useTemplateFragments = true // for swapping of table items
-        Alpine.start()
-    </script>
+    {% render_bundle 'receipt_downloads' 'js' %}
     {{ analytics|safe }}
-    {% load tz_detect %}
     {% tz_detect %}
 </head>

frontend/templates/base/auth.html

@@ -33,10 +33,5 @@ <h2 class="text-2xl font-semibold mb-2 text-center">
                 </div>
             </div>
         </div>
-        <script>
-    document.body.addEventListener('htmx:configRequest', (event) => {
-        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
-    })
-        </script>
     </body>
 </html>

frontend/templates/base/base.html

@@ -33,56 +33,6 @@
                         </ul>
                     </div>
                 </div>
-                <script>
-            document.addEventListener("DOMContentLoaded", function () {
-                const drawer = document.getElementById("service_list_drawer");
-                var togglers = document.querySelectorAll("#service_list_togglers");
-
-                drawer.addEventListener("change", function () {
-                    if (drawer.checked) {
-                        document.getElementById("service_list_toggler").checked = true;
-                        for (let i = 0; i < togglers.length; i++) {
-                            togglers[i].checked = true
-                        }
-                        document.getElementById("logo_single_service_list_toggler").checked = true;
-                    } else {
-                        document.getElementById("service_list_toggler").checked = false;
-                        for (let i = 0; i < togglers.length; i++) {
-                            togglers[i].checked = false
-                        }
-                        document.getElementById("logo_single_service_list_toggler").checked = false;
-                    }
-                    ;
-                });
-            });
-                </script>
-                <script>
-            function htmx_resend(event) {
-                let eventType;
-                if (event.detail.requestConfig.triggeringEvent) {
-                    eventType = event.detail.requestConfig.triggeringEvent.type
-                } else {
-                    eventType = "retry"
-                }
-
-                let timeout;
-
-                if (event.detail.error.startsWith("Response Status Error Code 429")) {
-                    timeout = 4000;
-                } else {
-                    timeout = 2000;
-                }
-
-                setTimeout(function () {
-                    console.log("Sending HTMX retry event")
-                    htmx.trigger(event.detail.elt, eventType);
-                }, timeout);
-            }
-
-            document.body.addEventListener("htmx:sendError", htmx_resend);
-            document.body.addEventListener("htmx:responseError", htmx_resend);
-            document.body.addEventListener("htmx:loadError", htmx_resend);
-                </script>
                 <input type="checkbox" id="logout_modal" class="modal-toggle" />
                 <div class="modal modal-responsive">
                     <div class="modal-box">

frontend/templates/pages/invoices/edit/edit_from_destination.html

@@ -2,7 +2,7 @@
     <button onclick="modal_invoices_from_destination.showModal();"
             id="from_destination"
             class="input_card text-left"
-            hx-trigger="click once"
+            hx-trigger="click"
             hx-swap="beforeend"
             hx-target="#modal_container"
             hx-get="{% url 'api:base:modal retrieve with context' modal_name='invoices_from_destination' context_type='edit_invoice_from' context_value=invoice_object.id %}">

frontend/templates/pages/receipts/_search_results.html

@@ -76,7 +76,7 @@ <h2 class="menu-title">Amount</h2>
                             </button>
                             <button type="button"
                                     class="btn btn-outline btn-primary btn-sm"
-                                    onclick="Download_file('{% url 'api:receipts:generate_download_link' receipt_id=row.id %}')">
+                                    onclick="download_file('{% url 'api:receipts:generate_download_link' receipt_id=row.id %}')">
                                 Download
                             </button>
                             <button class="btn btn-outline btn-error btn-sm"
@@ -110,7 +110,7 @@ <h2 class="text-xl">
                         <div class="flex gap-3">
                             <button type="button"
                                     class="btn btn-primary"
-                                    onclick="Download_file('{% url 'api:receipts:generate_download_link' receipt_id=row.id %}')">
+                                    onclick="download_file('{% url 'api:receipts:generate_download_link' receipt_id=row.id %}')">
                                 Download
                             </button>
                             <button class="btn" onclick="modal_receipt_{{ row.id }}.close();">Cancel</button>
@@ -145,9 +145,4 @@ <h2 class="text-xl">
            name="amount_100+"
            value="{% if '100' in selected_filters %}true{% endif %}">
 </div>
-<script>
-    document.body.addEventListener('htmx:configRequest', (event) => {
-        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
-    })
-</script>
 {% component "messages_list" %}

infrastructure/backend/scripts/tests/views.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
 
-python3 manage.py test --parallel
+python3 manage.py collectstatic --no-input
+python3 manage.py test --parallel